Front-End Web
Performance Optimization
BucketSoft.com
Why performance matters
• Google found that the page with 10 results took 0.4 seconds to
generate. The page with 30 result...
wposample1.bucketsoft.com
Set Cache-Control: max-age
• By setting the max-age parameter for static content (CSS, JS,
and images) you effectively tel...
Waterfall view from webpagetest.org
Unoptimized
Dulles, VA

Amsterdam, NL

START RENDER

START RENDER

1.333s

1.623s

LOAD TIME

LOAD TIME

2.080s

2.545s
GZIP Compression
• Has been around since IE4 days.
• Can compress HTML, JS, and CSS files to about 1/3 or 1/4 their
origin...
GZIP Compression
Dulles, VA

Amsterdam, NL

START RENDER

START RENDER

1.121s 15.9% faster

1.411s 13.1% faster

LOAD TIM...
Move JS to bottom of HTML
• JavaScript exhibits a blocking behavior in the browser as it's
being downloaded and parsed.
• ...
Move JS to bottom of HTML
Dulles, VA

Amsterdam, NL

START RENDER

START RENDER

0.457s 59.2% faster

0.855s 39.4% faster
...
Combine files / CSS sprites
• There is latency and overhead in every request, so you should limit the number of requests.
...
Combine files / CSS sprites
Combine files / CSS sprites
Dulles, VA

Amsterdam, NL

START RENDER

START RENDER

0.440s 3.7% faster

0.818s 4.3% faster
...
Minify CSS and JS
• Minification strips out unnecessary whitespace and comments.
• While GZIP does a good job in compressi...
Minify CSS and JS
Dulles, VA

Amsterdam, NL

START RENDER

START RENDER

0.352s 20.0% faster

0.665s 18.7% faster

LOAD TI...
CDN
• A CDN (Content Delivery Network) solves the problem of global
latency.
• A CDN is worth using whenever you have a gl...
CDN
Dulles, VA

Amsterdam, NL

START RENDER

START RENDER

0.417s 18.5% slower

0.620s 6.8% faster

LOAD TIME

LOAD TIME

...
Overall improvement
Dulles, VA

Amsterdam, NL

START RENDER

START RENDER

68.7% faster overall

61.8% faster overall

LOA...
Recommended Reading
• My Favorite WPO Tools and Services
http://www.bucketsoft.com/articles/favorite-websiteoptimization-t...
Upcoming SlideShare
Loading in …5
×

Front-End Web Performance Optimization by BucketSoft

707 views

Published on

Front-end optimization involves everything that's delivered to the browser. We're looking to optimize HTML, CSS, JS, and images in such a way as to allow the browser to download and render these objects as quickly as possible.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
707
On SlideShare
0
From Embeds
0
Number of Embeds
320
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Front-End Web Performance Optimization by BucketSoft

  1. 1. Front-End Web Performance Optimization BucketSoft.com
  2. 2. Why performance matters • Google found that the page with 10 results took 0.4 seconds to generate. The page with 30 results took 0.9 seconds. Half a second delay caused a 20% drop in traffic. • Every 100 milliseconds in page load delay costs Amazon.com 1% of sales. • By speeding the page load times up by 5 seconds, Shopzilla.com increased their conversion rate by 7-12%.
  3. 3. wposample1.bucketsoft.com
  4. 4. Set Cache-Control: max-age • By setting the max-age parameter for static content (CSS, JS, and images) you effectively tell the browser to cache those files for that amount of time. • Eliminating all of those 304 Not Modified responses makes a big difference for return visitors. • The recommended max-age setting is 1 year. But max-age is in seconds, so that's 60 x 60 x 24 x 365 = 31536000. • If your CSS file changes, for example, you should change the file name or append a querystring, e.g. href="/screen.css?v=2"
  5. 5. Waterfall view from webpagetest.org
  6. 6. Unoptimized Dulles, VA Amsterdam, NL START RENDER START RENDER 1.333s 1.623s LOAD TIME LOAD TIME 2.080s 2.545s
  7. 7. GZIP Compression • Has been around since IE4 days. • Can compress HTML, JS, and CSS files to about 1/3 or 1/4 their original size. • We might have opted to not do dynamic compression in the past on older servers. But processing speeds today are much higher. • Bottom line: Always enable GZIP on your server.
  8. 8. GZIP Compression Dulles, VA Amsterdam, NL START RENDER START RENDER 1.121s 15.9% faster 1.411s 13.1% faster LOAD TIME LOAD TIME 1.880s 9.6% faster 2.466s 3.1% faster
  9. 9. Move JS to bottom of HTML • JavaScript exhibits a blocking behavior in the browser as it's being downloaded and parsed. • Moving JavaScript references to the bottom of the HTML just before the </body> tag will allow the page to start rendering sooner.
  10. 10. Move JS to bottom of HTML Dulles, VA Amsterdam, NL START RENDER START RENDER 0.457s 59.2% faster 0.855s 39.4% faster LOAD TIME LOAD TIME 1.766s 6.1% faster 2.244s 9.0% faster
  11. 11. Combine files / CSS sprites • There is latency and overhead in every request, so you should limit the number of requests. • Here's an example of a single request to Google... • GET http://www.google.com/ HTTP/1.1 Accept: application/x-ms-application, image/jpeg, application/xaml+xml, image/gif, image/pjpeg, application/x-ms-xbap, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/x-shockwave-flash, / AcceptLanguage: en-US User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/4.0; GTB0.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; OfficeLiveConnector.1.4; OfficeLivePatch.1.3) Accept-Encoding: gzip, deflate Connection: Keep-Alive Host: www.google.com Cookie: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  12. 12. Combine files / CSS sprites
  13. 13. Combine files / CSS sprites Dulles, VA Amsterdam, NL START RENDER START RENDER 0.440s 3.7% faster 0.818s 4.3% faster LOAD TIME LOAD TIME 1.575s 10.8% faster 2.182s 2.7% faster
  14. 14. Minify CSS and JS • Minification strips out unnecessary whitespace and comments. • While GZIP does a good job in compressing text, minification has some language-specific optimizations that GZIP alone can't give you. • Bottom line: Use both minification and GZIP.
  15. 15. Minify CSS and JS Dulles, VA Amsterdam, NL START RENDER START RENDER 0.352s 20.0% faster 0.665s 18.7% faster LOAD TIME LOAD TIME 1.554s 1.3% faster 2.030s 7.0% faster
  16. 16. CDN • A CDN (Content Delivery Network) solves the problem of global latency. • A CDN is worth using whenever you have a global audience.
  17. 17. CDN Dulles, VA Amsterdam, NL START RENDER START RENDER 0.417s 18.5% slower 0.620s 6.8% faster LOAD TIME LOAD TIME 1.592s 2.4% slower 1.835s 9.6% faster
  18. 18. Overall improvement Dulles, VA Amsterdam, NL START RENDER START RENDER 68.7% faster overall 61.8% faster overall LOAD TIME LOAD TIME 23.5% faster overall 27.9% faster overall
  19. 19. Recommended Reading • My Favorite WPO Tools and Services http://www.bucketsoft.com/articles/favorite-websiteoptimization-tools-and-services • Performance is a Feature http://www.codinghorror.com/blog/2011/06/performance-is-afeature.html

×