Site Speed Optimization Guide in 40 Steps
•
0 likes•5,051 views
The document discusses various techniques for improving page speed, including optimizing critical rendering path and first meaningful paint, inlining critical CSS and JS, using async and defer attributes, prioritizing important resources, using server-side processing, font-display, responsive images, HTTP/2, resource hints, and tools like Chrome Developer Tools. The goal is to have 80% of content viewable within the first few seconds by prioritizing what is needed for initial render.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Site Speed Optimization Guide in 40 Steps
Similar to Site Speed Optimization Guide in 40 Steps (20)
Recently uploaded
Recently uploaded (20)
Site Speed Optimization Guide in 40 Steps
- 1. @henshaw Site Speed You need it.Here’s how to get it. Jon Henshaw Senior SEO Analyst at CBS Interactive
- 2. @henshaw Why focus on page speed?
- 3. @henshaw Reference: Pingdom – https://coywolf.io/pingdom Faster loading pages mean fewer bounces
- 4. @henshaw Fast loading pages also... ● make more money ● provide a better user experience ● increase repeat visits ● can influence search visibility
- 5. @henshaw Page speed is not about loading the entire page
- 6. @henshaw Page speed is about the First Meaningful Paint (FMP)
- 7. @henshaw Goal is to have 80% of content viewable within the first few seconds Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.
- 8. @henshaw Reference: Ilya Grigorik – https://coywolf.io/crp Critical Rendering Path Optimized (progressive) rendering Unoptimized rendering 0.0s 0.5s 1.0s 1.5s Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet temporLorem ipsum dolor sit amet tempor Intro copy for the post Lorem ipsum dolor sit amet tempor
- 9. @henshaw Page speed may also be judged by Time to Interactive (TTI)
- 10. @henshaw But for now let’s primarily focus on Progressive Rendering and FMP
- 12. @henshaw Identify CSS that’s critical to FMP and then make it inline
- 13. @henshaw <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" /> Reference: Jehl and Leatherman – https://coywolf.io/loadcss Async non-critical CSS
- 14. @henshaw Identify JavaScript that’s critical to FMP and then make it inline
- 15. @henshaw <script async src="my.js"> Reference: Jehl and Leatherman – https://coywolf.io/loadcss Async non-critical and render blocking JS
- 16. @henshaw But there’s a problem with only using async
- 17. @henshaw “Getting JS out of the <head> is the first step! But browsers tend to load JS as early as possible even with ‘async’. Only sure way I know is to load non-critical JS after the ‘load’ event, like defer.js Ben Morss Developer Advocate at Google @benmorss Reference: Twitter – https://coywolf.io/asyncdefer
- 18. @henshaw defer.js waits until the entire document loads and then loads the JS you specify Reference: Patrick Sexton – https://coywolf.io/deferjs
- 19. @henshaw With or without async or defer.js, always put non- critical CSS and JS after the page content
- 20. @henshaw There’s one more thing you can do: Priority Hints
- 21. @henshaw Chrome will soon support the Priority Hint ‘importance’
- 22. @henshaw <link rel="stylesheet" href="style.css" importance="high"> <script type="text/javascript" src="script.js" importance="low"> Reference: W3C Community Group – https://coywolf.io/importance The importance attribute may be used with elements including link, img, script, and iframe
- 23. @henshaw Google will eventually switch to the latest version of headless Chrome for crawling Future proof your site with ‘importance’ while also making it load faster
- 24. @henshaw Use server-side processing versus client-side whenever possible
- 25. @henshaw Use this Not this A/B Testing
- 26. @henshaw Optimizely and Google Experiments both support server-side testing Reference: Google Experiments – https://coywolf.io/gess
- 28. @henshaw Reference: W3C Community Group – https://coywolf.io/importance Use font-display to make text render immediately while web fonts are still loading
- 29. @henshaw font-display:swap; Reference: Ben Schwarz – https://coywolf.io/fontswap Ben Schwarz recommends
- 30. @henshaw font-display:optional; Reference: Bastian Grimm – https://coywolf.io/fontopt Bastian Grimm recommends
- 31. @henshaw Using swap or optional depends on the situation Reference: Google Experiments – https://coywolf.io/gess
- 32. @henshaw Use swap when the font must be displayed Reference: Google Experiments – https://coywolf.io/gess
- 33. @henshaw Use optional when it’s not critical to UX Reference: Google Experiments – https://coywolf.io/gess
- 34. @henshaw Images
- 35. @henshaw Start using WebP images ● 26% smaller than PNG ● 25-34% smaller than JPG ● Supports transparency
- 36. @henshaw <picture> <source srcset=”cat.webp” type=”image/webp”> <img src=”cat.jpg”> </picture> Reference: Bastian Grimm – https://coywolf.io/picture Use fallback code
- 37. @henshaw Reference: Cloudflare – https://coywolf.io/polish The super easy way
- 38. @henshaw HTTP/2
- 39. @henshaw If you have SSL,turn on HTTP/2
- 40. @henshaw HTTP/1.1 vs HTTP/2 on Fast 3G Connection
- 42. @henshaw Use Resource Hints to speed up UX
- 43. @henshaw <link rel="prefetch" href="/js/script.js" as="script"> Prefetch can load assets for secondary actions
- 45. @henshaw Chrome Developer Tools ● Device ● Bandwidth ● Waterfall ● Console
- 47. @henshaw Use RAIL as a resource ● Response ● Animation ● Idle ● Load Reference: Kearney, Osmani, and Basques – https://coywolf.io/rail