Front-End Web Performance Optimization by BucketSoft
Download as PPTX, PDF0 likes862 views
The document discusses the importance of front-end web performance optimization, highlighting data on how delays in page load times can significantly impact traffic and sales for websites. It provides various optimization techniques such as setting cache-control, enabling gzip compression, moving JavaScript to the bottom of HTML, combining files, minifying CSS and JS, and using a CDN to reduce latency. Overall, these practices can lead to substantial improvements in load times and user experience.
Front-End Web Performance Optimization by BucketSoft
- 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%.
- 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. Waterfall view from webpagetest.org
- 6. Unoptimized Dulles, VA Amsterdam, NL START RENDER START RENDER 1.333s 1.623s LOAD TIME LOAD TIME 2.080s 2.545s
- 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. 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. 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. 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. 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. Combine files / CSS sprites
- 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. 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. 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. CDN • A CDN (Content Delivery Network) solves the problem of global latency. • A CDN is worth using whenever you have a global audience.
- 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. 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. 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