Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Page Speed


Published on

You need it. Here's how to get it.

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

Page Speed

  1. 1. @henshaw Site Speed You need it.Here’s how to get it. Jon Henshaw Senior SEO Analyst at CBS Interactive
  2. 2. @henshaw Why focus on page speed?
  3. 3. @henshaw Reference: Pingdom – Faster loading pages mean fewer bounces
  4. 4. @henshaw Fast loading pages also... ● make more money ● provide a better user experience ● increase repeat visits ● can influence search visibility
  5. 5. @henshaw Page speed is not about loading the entire page
  6. 6. @henshaw Page speed is about the First Meaningful Paint (FMP)
  7. 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. 8. @henshaw Reference: Ilya Grigorik – 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. 9. @henshaw Page speed may also be judged by Time to Interactive (TTI)
  10. 10. @henshaw But for now let’s primarily focus on Progressive Rendering and FMP
  11. 11. @henshaw CSS & JS
  12. 12. @henshaw Identify CSS that’s critical to FMP and then make it inline
  13. 13. @henshaw <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" /> Reference: Jehl and Leatherman – Async non-critical CSS
  14. 14. @henshaw Identify JavaScript that’s critical to FMP and then make it inline
  15. 15. @henshaw <script async src="my.js"> Reference: Jehl and Leatherman – Async non-critical and render blocking JS
  16. 16. @henshaw But there’s a problem with only using async
  17. 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 –
  18. 18. @henshaw defer.js waits until the entire document loads and then loads the JS you specify Reference: Patrick Sexton –
  19. 19. @henshaw With or without async or defer.js, always put non- critical CSS and JS after the page content
  20. 20. @henshaw There’s one more thing you can do: Priority Hints
  21. 21. @henshaw Chrome will soon support the Priority Hint ‘importance’
  22. 22. @henshaw <link rel="stylesheet" href="style.css" importance="high"> <script type="text/javascript" src="script.js" importance="low"> Reference: W3C Community Group – The importance attribute may be used with elements including link, img, script, and iframe
  23. 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. 24. @henshaw Use server-side processing versus client-side whenever possible
  25. 25. @henshaw Use this Not this A/B Testing
  26. 26. @henshaw Optimizely and Google Experiments both support server-side testing Reference: Google Experiments –
  27. 27. @henshaw Web Fonts
  28. 28. @henshaw Reference: W3C Community Group – Use font-display to make text render immediately while web fonts are still loading
  29. 29. @henshaw font-display:swap; Reference: Ben Schwarz – Ben Schwarz recommends
  30. 30. @henshaw font-display:optional; Reference: Bastian Grimm – Bastian Grimm recommends
  31. 31. @henshaw Using swap or optional depends on the situation Reference: Google Experiments –
  32. 32. @henshaw Use swap when the font must be displayed Reference: Google Experiments –
  33. 33. @henshaw Use optional when it’s not critical to UX Reference: Google Experiments –
  34. 34. @henshaw Images
  35. 35. @henshaw Start using WebP images ● 26% smaller than PNG ● 25-34% smaller than JPG ● Supports transparency
  36. 36. @henshaw <picture> <source srcset=”cat.webp” type=”image/webp”> <img src=”cat.jpg”> </picture> Reference: Bastian Grimm – Use fallback code
  37. 37. @henshaw Reference: Cloudflare – The super easy way
  38. 38. @henshaw HTTP/2
  39. 39. @henshaw If you have SSL,turn on HTTP/2
  40. 40. @henshaw HTTP/1.1 vs HTTP/2 on Fast 3G Connection
  41. 41. @henshaw Resource Hints
  42. 42. @henshaw Use Resource Hints to speed up UX
  43. 43. @henshaw <link rel="prefetch" href="/js/script.js" as="script"> Prefetch can load assets for secondary actions
  44. 44. @henshaw Best Tools
  45. 45. @henshaw Chrome Developer Tools ● Device ● Bandwidth ● Waterfall ● Console
  46. 46. @henshaw Performance View
  47. 47. @henshaw Use RAIL as a resource ● Response ● Animation ● Idle ● Load Reference: Kearney, Osmani, and Basques –
  48. 48. @henshaw