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.

How To Get a 100% Lighthouse Performance Score

7,491 views

Published on

This talk walks you through what it takes get a 100% Lighthouse performance score for your website. It gives you real examples of the types of optimisation you need to do, and more importantly, what it will achieve. You will learn what earns you the most points and where to focus your efforts.

Published in: Marketing

How To Get a 100% Lighthouse Performance Score

  1. 1. DELETEAGENCY.COM/BRIGHTONSEO@DELETEAGENCY HOW TO GET A 100% LIGHTHOUSE PERFORMANCE SCORE
 POLLY POSPELOVA // DELETE AGENCY // W
  2. 2. What is Lighthouse? @POLLY_P #BRIGHTONSEO
  3. 3. An open-source, automated tool for improving the quality of web pages. @POLLY_P #BRIGHTONSEO
  4. 4. It has audits for: • Performance • Accessibility • Progressive Web Apps and it is continually updated. @POLLY_P #BRIGHTONSEO
  5. 5. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. @POLLY_P #BRIGHTONSEO
  6. 6. The report offers opportunities for optimisation and estimated savings. @POLLY_P #BRIGHTONSEO
  7. 7. Why do big brands score so low? @POLLY_P #BRIGHTONSEO
  8. 8. @POLLY_P #BRIGHTONSEO
  9. 9. @POLLY_P #BRIGHTONSEO
  10. 10. @POLLY_P #BRIGHTONSEO
  11. 11. It isn’t easy! @POLLY_P #BRIGHTONSEO
  12. 12. The criteria is changing fast. @POLLY_P #BRIGHTONSEO
  13. 13. @POLLY_P #BRIGHTONSEO
  14. 14. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO Same site today.
  15. 15. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO We already do a lot.
  16. 16. What does it take to get a 100% Lighthouse performance score? @POLLY_P #BRIGHTONSEO
  17. 17. Hackathon. @POLLY_P #BRIGHTONSEO
  18. 18. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO We challenged ourselves to get a 100% score… without changing how the site looks.. R&D.
  19. 19. Old vs New @POLLY_P #BRIGHTONSEO
  20. 20. Requests sent by page on first time load // 17 vs 36 Volume of data transferred on first page load // 0.32 vs 2.5 Page load finish in 2.39 sec // 0.49 sec DOM loaded in 0.6 sec // 0.275 sec Critical loaded in 0.9 sec // 0.336 sec -53% -870% -63% +107% -61% @POLLY_P #BRIGHTONSEO
  21. 21. 1. HTTP/2 2. Image quality (WebP and others) 3. Modern JS and rejection of heavy libraries 4. Small chunks, automatic chunk loader 5. Only load what you need 6. Critical and auto-critical @POLLY_P #BRIGHTONSEO
  22. 22. 1. HTTP2.0. @POLLY_P #BRIGHTONSEO
  23. 23. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO HTTP/1 HTTP/2
  24. 24. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO HTTP/1
  25. 25. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO HTTP/2
  26. 26. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO HTTP/1
  27. 27. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO HTTP/2
  28. 28. 2. Images. @POLLY_P #BRIGHTONSEO
  29. 29. Deferring offscreen images. @POLLY_P #BRIGHTONSEO
  30. 30. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO
  31. 31. Some images are not visible on tablets. WIDE MEDIUM @POLLY_P #BRIGHTONSEO
  32. 32. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO • We load all images. • Universal HTML, CSS and JS.
  33. 33. 197 KB 66 KB 60 KB None of these images are shown. 28 KB @POLLY_P #BRIGHTONSEO
  34. 34. Serving images in next-gen formats. @POLLY_P #BRIGHTONSEO
  35. 35. The new WebP image format provides better compression than a PNG or a JPEG. This means faster downloads and less data. @POLLY_P #BRIGHTONSEO
  36. 36. JPGWebP @POLLY_P #BRIGHTONSEO
  37. 37. Properly sized images. @POLLY_P #BRIGHTONSEO
  38. 38. Adaptive image sizes. @POLLY_P #BRIGHTONSEO
  39. 39. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO Old.
  40. 40. The adaptive images markup is generated automatically, we don’t ask our designers or UI developers to do it. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO New.
  41. 41. <img src="https://static02.deleteagency.com/-/media/images/homepage/intro/ digital_agency/delete_leeds_main/delete_leeds_main_retina.jpg? mw=1180&amp;hash=5B5932D4AE8CCEBF6B3438CB569A1AB2918683CE" alt="Delete Agency Leeds Office" class=“visual6”> <img alt="Delete Agency Leeds Office" class="visual6 fw lazyautosizes lazyloaded" data-sizes="auto" sizes="693px" srcset=“ /-/media/images/homepage/intro/digital_agency/delete_leeds_main/delete_leeds_main_retina.jpg?mw=200 200w, /-/media/images/homepage/intro/digital_agency/delete_leeds_main/delete_leeds_main_retina.jpg?mw=320 320w, /-/media/images/homepage/intro/digital_agency/delete_leeds_main/delete_leeds_main_retina.jpg?mw=360 360w, /-/media/images/homepage/intro/digital_agency/delete_leeds_main/delete_leeds_main_retina.jpg?mw=640 640w, /-/media/images/homepage/intro/digital_agency/delete_leeds_main/delete_leeds_main_retina.jpg?mw=720 720w, /-/media/images/homepage/intro/digital_agency/delete_leeds_main/delete_leeds_main_retina.jpg?mw=960 960w, /-/media/images/homepage/intro/digital_agency/delete_leeds_main/delete_leeds_main_retina.jpg?mw=1280 1280w, /-/media/images/homepage/intro/digital_agency/delete_leeds_main/delete_leeds_main_retina.jpg?mw=1440 1440w, /-/media/images/homepage/intro/digital_agency/delete_leeds_main/delete_leeds_main_retina.jpg?mw=1600 1600w, /-/media/images/homepage/intro/digital_agency/delete_leeds_main/delete_leeds_main_retina.jpg?mw=1800 1800w, /-/media/images/homepage/intro/digital_agency/delete_leeds_main/delete_leeds_main_retina.jpg?mw=2000 2000w"> Old. New. @POLLY_P #BRIGHTONSEO
  42. 42. Lazy load. @POLLY_P #BRIGHTONSEO
  43. 43. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO The images only load when they get into the user’s viewport and not before.
  44. 44. 3. Critical. BRIGHTONSEO
  45. 45. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO Abrowser doesn’tstart rendering apageuntilitloads andparsesallresources.
  46. 46. The first load. @POLLY_P #BRIGHTONSEO
  47. 47. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO We only take the necessary resources (JS, CSS) for a page and then inline them into HTML markup, in a <head> tag.
  48. 48. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO After theinlinemarkuploads, wethenload allthe necessaryresourcesin thebackgroundand cachethem.
  49. 49. Subsequent loads. @POLLY_P #BRIGHTONSEO
  50. 50. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO We check if the browser already has the resources cached and we skip inlining.
  51. 51. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO The content loads instantly on the first and all subsequent loads.
  52. 52. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO On a repeat visit, the page will use cached resources instead of inline resources.
  53. 53. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO We use anonymous cookies to find out whether we need to send inline resources, or we if we need to take them from the cache.
  54. 54. 4. Only load what you need. @POLLY_P #BRIGHTONSEO
  55. 55. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO We broke up all the CSS and JS into small files for each logical block. This included: the form, header, footer, navigation etc.
  56. 56. HTTP/2 is ideal for loading lots of tiny resources quickly and without latency in one connection. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO
  57. 57. 5. Modern JS. @POLLY_P #BRIGHTONSEO
  58. 58. Old. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO The evaluation time of Modern JS is 300% faster and the file size is 20% less. New. The Modern JS evaluation is 41 milliseconds compared to 133 milliseconds, which is a huge
  59. 59. My golden advice! @POLLY_P #BRIGHTONSEO
  60. 60. 1. It is time for SEOs to unite with developers. @POLLY_P #BRIGHTONSEO
  61. 61. Work with them more, sit with them, do everything you can to learn from them. @POLLY_P #BRIGHTONSEO
  62. 62. Unless you can tackle a Lighthouse Trace on your own. @POLLY_P #BRIGHTONSEO
  63. 63. 2. Lighthouse optimisation is not a one-off task. @POLLY_P #BRIGHTONSEO
  64. 64. On-going optimisation is the new norm. @POLLY_P #BRIGHTONSEO
  65. 65. What might score 100% today, will not score 100% tomorrow. @POLLY_P #BRIGHTONSEO
  66. 66. 3. Page speed is a ranking factor for mobile and desktop searches. @POLLY_P #BRIGHTONSEO
  67. 67. It has a significant effect on rankings. @POLLY_P #BRIGHTONSEO
  68. 68. © Copyright 2019 Delete @POLLY_P #BRIGHTONSEO Significant changes Our rankings improved, in some cases by almost two SERPs.
  69. 69. Keyword Before After Change digital agency 1 1 n/a digital agency London 8 5 +3 digital agency Leeds 16 9 +7 PPC Leeds 6 1 +5 PPC services Leeds 18 2 +16 SEO Leeds 13 5 +8 SEO services Leeds 13 7 +6 Sitecore agency 1 1 n/a Kentico agency 12 5 +7 @POLLY_P #BRIGHTONSEO
  70. 70. 100% is possible! @POLLY_P #BRIGHTONSEO
  71. 71. @POLLY_P #BRIGHTONSEO
  72. 72. Requests sent by page on first time load // 17 vs 36 Volume of data transferred on first page load // 0.32 vs 2.5 Page load finish in 2.39 sec // 0.49 sec DOM loaded in 0.6 sec // 0.275 sec Critical loaded in 0.9 sec // 0.336 sec -53% -870% -63% +107% -61% @POLLY_P #BRIGHTONSEO
  73. 73. Learn more and download the slides here: www.deleteagency.com/brightonseo @POLLY_P #BRIGHTONSEO
  74. 74. © Copyright 2019 Delete Thank you. @POLLY_P #BRIGHTONSEO

×