Transcript slides for “10 Ways to a Faster Website”

Intro to Web Performance
Ten Ways to a Faster Website
Presented by:
Sheila Eaton and Mohammad Durrani
TechKnowFile, University of Toronto, May 5, 2016
Agenda
Welcome!
What is Web Performance?
Why is it Important?
Challenges and Solutions
Questions and Further Reading
What is Web Performance?
Perceived
Performance
Optimized progressive
rendering. Feels fast.
Unoptimized
Rendering
Feels slow.
developers.google.com/web/fundamentals/performance/critical-rendering-path/
Web Page Performance
www.webpagetest.org/result/160504_ET_1A6P/1/details/
Why is Performance Important?
Puts users first
Allows users to accomplish
tasks in less than 2 seconds
Respect for users
builds trust
Encourages return visits
Reduce time and data costs
for mobile users
Accounts for international
bandwidth
Broaden access
Small boost to search
Why Performance Matters
47%
57%
79%
expect a web
page to load in
two seconds
or less.
will abandon
a page that takes
3 seconds or
more to load
shoppers [students,
faculty, donors ]
who have trouble with
web site performance
say they won’t return
to the site to buy again
See Also: What does my site cost
www.akamai.com/us/en/web-and-mobile-performance.jsp
Performance Challenges
CHALLENGE 1: Number
of HTTP Requests
CHALLENGE 2: Bigger File Sizes
CHALLENGE 3: Improving Perceived Perf.
CHALLENGE 4: Latency
Total Transfer Size & Total Requests
httparchive.org/trends.php
CHALLENGE 1:
Number of
HTTP Requests
40 requests
Goal:
Reduce number of requests
How – some quick wins:
Image svg sprites
Remove Font Awesome and
Google font
Set one feature img each for
news and events feeds
Reduce size of banner
Blur banner image and crop
Reduce CSS*
*For new USMC website (in progress)
CSS is reduced by 36%
CHALLENGE 1:
Number of HTTP Requests
Why Reduce Requests
A resource is requested
Time is spent sending the request to the server
and waiting for the server to respond
Then downloading the response
to add to webpage
The less time it takes -- the better
CHALLENGE 1:
Number of HTTP Requests
Five Ways to Cope with Requests
Resource Audit
Image Sprites
JS/CSS Concat
Keep Alive
Cache Static Files
CHALLENGE 1:
Number of HTTP Requests > Reducing Requests
The fastest and best optimized
resource is a resource not sent
Ilya Grigorik, Google
CHALLENGE 1:
Number of HTTP Requests > Reducing Requests
Resource Audit
Question everything: css/js/images/fonts/3rd-party
Resource necessary?
Value to user?
More performant
approach?
Blocking page load?
Place lower in markup?
How is value tracked?
CHALLENGE 1:
Number of HTTP Requests > Reducing Requests
Fonts
Performance costs of fonts? Aesthetic tradeoffs?
Google Sans and
Merriweather
Bold, normal, italic
Performance Hit 194
Arial and
Times New Roman
All weights
No Performance Hit
CHALLENGE 1:
Number of HTTP Requests > Reducing Requests
Image Sprites
Size of file is bigger but fewer http requests
CHALLENGE 1:
Number of HTTP Requests > Reducing Requests
JS/CSS Concat
What is concat?
Combining like files to reduce
the number of HTTP requests
CHALLENGE 1:
Number of HTTP Requests > Reducing Requests
JS/CSS Concat
File1.js {
//content file 1
}
File2.js {
//content file 2
}
File3.js {
//content file 3
}
FileAll.js {
//content file 1
//content file 2
//content file 3
}
CHALLENGE 1:
Number of HTTP Requests > Reducing Requests
Keep Alive
http://stackoverflow.com/questions/12550973/http-header-keep-alive-misunderstanding
CHALLENGE 1:
Number of HTTP Requests > Reducing Requests
Caching Static Files
Assets don’t change often (css, images, js)
Reduce number of requests by storing assets on
client’s machine for a defined period of time
Not spending time fetching resources
Will only affect subsequent visits
Test with webpagetest.org
CHALLENGE 2:
Bigger File Sizes
CHALLENGE 2:
Bigger File Sizes
Why Reduce Size of Resources
Smaller the resource = the faster it will load
Get files to the browser as fast as possible
so it can start building the page
CHALLENGE 2:
Bigger File Sizes
Three Ways to Reduce File Sizes
Images
• Right Size
• Right Format
• Compression
Minification
Gzip
CHALLENGE 2:
Bigger File Sizes > Reducing File Sizes > Images
Image Compression
Images count
for just over
63% of page
weight
CHALLENGE 2:
Bigger File Sizes > Reducing File Sizes > Images
Choosing the right file format
CHALLENGE 2:
Bigger File Sizes > Reducing File Sizes > Images
Serving the right size
Don’t serve a 500x500 image intended
as a 150x150 thumbnail
CHALLENGE 2:
Bigger File Sizes > Reducing File Sizes > Images
Image Compression
Caveat: Strips meta data
Lossless compression
allows original image
to be perfectly
reconstructed from
compressed data.
Lossy compression
reconstructs an
approximation of
original data
CHALLENGE 2:
Bigger File Sizes > Reducing File Sizes > Images
Image Compression
69% savings (right) in compressed png.
No perceptual difference in quality.
tinypng.com/
CHALLENGE 2:
Bigger File Sizes > Reducing File Sizes > Images
Image Compression
Tools
Popular web tools
Plugins for wp/drupal
Task runners
CHALLENGE 2:
Bigger File Sizes > Reducing File Sizes > Minification
Minification HTML/CSS/JS
Dev Code
Human readability,
comments,
whitespace
Minified Code
Remove extra
characters, comments,
whitespace
Development:
406 Characters
Minified:
150 characters.
Reduced by 63%
Source: Google Dev
CHALLENGE 2:
Bigger File Sizes > Reducing File Sizes > Minification
Minification HTML/CSS/JS
Context Matters
HTML <pre> tags
Combining CSS rules
CHALLENGE 2:
Bigger File Sizes > Reducing File Sizes > Minification
Minification HTML/CSS/JS
Tools
Web based
Task runner
Plugins for CMS
CHALLENGE 2:
Bigger File Sizes > Reducing File Sizes > GZIP
GZIP
Can be applied to any type of data
Performs best on text-based assets: css, js, html
Compression rates 70-90% for larger files.
Little to no benefit for images
Modern browsers support GZIP compression
CHALLENGE 2:
Bigger File Sizes > Reducing File Sizes > GZIP
GZIP
Implementation depends on server
configuration. Ask your host
Apache can be done via .htaccess
CHALLENGE 2:
Bigger File Sizes > Reducing File Sizes > GZIP
GZIP
Library
Size
Compressed size
Compression
ratio
jquery-1.11.0.js
276 KB
82 KB
70%
jquery-1.11.0.min.js
94 KB
33 KB
65%
angular-1.2.15.js
729 KB
182 KB
75%
angular-1.2.15.min.js
101 KB
37 KB
bootstrap-3.1.1.css
118 KB
18 KB
85%
bootstrap-3.1.1.min.css
98 KB
17 KB
83%
foundation-5.css
186 KB
22 KB
88%
foundation-5.min.css
146 KB
18 KB
88%
63%
CHALLENGE 2:
Bigger File Sizes > Reducing File Sizes
Reducing Page Weight Notes
• We talked about image and text compression
• Do an audit of the different content types you
serve your clients and consider what kinds of
content-specific optimizations you can apply
• PDFs, Audio, Video can be compressed too!
CHALLENGE 3:
Improving Perceived
Performance
CHALLENGE 3:
Improving Perceived Performance
How we load resources
matters just as much
as how many resources
we’re loading.
Scott Jehl, Filament Group
CHALLENGE 3:
Improving Perceived Performance
What is it?
Techniques used so far
improve total load time
Perceived performance is more
important to user experience
“Critical” content loaded first
CHALLENGE 3:
Improving Perceived Performance
What is critical?
Above the fold
https://www.filamentgroup.com/lab/weight-wait.html
CHALLENGE 3:
Improving Perceived Performance
Two Ways to Improve
Perceived Performance
Deferring non-critical JS/CSS
Identifying critical css – automated tools
Identifying critical js – done manually
Lazy Loading below the fold images
CHALLENGE 3:
Improving Perceived Performance
What is critical?
Above the fold
https://www.filamentgroup.com/lab/weight-wait.html
CHALLENGE 4:
Latency
CHALLENGE 4:
Latency
What is it?
https://www.keycdn.com/support/what-is-latency/
CHALLENGE 4:
Latency
CDN
https://gtmetrix.com/why-use-a-cdn.html
CHALLENGE 4:
Latency
How does a CDN work?
https://gtmetrix.com/why-use-a-cdn.html
Summary
Reducing Number
of HTTP Requests
•
•
•
•
•
Resource Audit
Image Sprites
JS/CSS Concat
Keep Alive
Cache static files
Managing Bigger File Sizes
• Image Compression
• Minification
• GZIP
Improving Perceived Perf
• Defer non-critical
• Lazy Loading
Latency
• CDN
Improve. Test. Repeat.
Further Reading
What Your Site Costs Users
• timkadlec.com/2015/03/
what-your-site-costs/
• whatdoesmysitecost.com/
Sprites / Image Compression
• Grumpicon / Grunticon
• Spritecow
• tinypng.com
Performance Budgets
• Tim Kadlec tinyurl.com/hqywuk5
• Etsy codeascraft.com/
• Smashing Mag tinyurl.com/haghreg
• HTML5 Rocks www.html5rocks.com/en/
features/performance
• Brad Frost Perf Budget Builder
bradfrost.com/blog/post/performance-budgetbuilder/
Page Speed and Dev Tools
• tools.pingdom.com/fpt/
• developers.google.com/speed/
pagespeed/insights/
• www.webpagetest.org/
• www.browserstack.com
Additional Reference
• developers.google.com/web/
fundamentals/performance/
• gtmetrix.com/why-use-a-cdn.html
• varvy.com/pagespeed/
• www.filamentgroup.com/lab/
performance-rwd.html
• www.filamentgroup.com/lab/load-cssand-js.html
• www.youtube.com/watch?
v=whGwm0Lky2s
• Builtwith.com
Thank You!
Questions?