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.
DELETEAGENCY.COM/BRIGHTONSEO@DELETEAGENCY
HOW	TO	GET	A	100%	LIGHTHOUSE	
PERFORMANCE	SCORE

		POLLY	POSPELOVA		//			 DELETE...
What is Lighthouse?
@POLLY_P #BRIGHTONSEO
An open-source,
automated tool for
improving the quality of
web pages.
@POLLY_P #BRIGHTONSEO
It has audits for:
• Performance
• Accessibility
• Progressive Web Apps
and it is continually updated.
@POLLY_P #BRIGHTONS...
You give Lighthouse a URL to
audit, it runs a series of audits
against the page, and then it
generates a report on how wel...
The report offers
opportunities for
optimisation and
estimated savings.
@POLLY_P #BRIGHTONSEO
Why do big brands
score so low?
@POLLY_P #BRIGHTONSEO
@POLLY_P #BRIGHTONSEO
@POLLY_P #BRIGHTONSEO
@POLLY_P #BRIGHTONSEO
It isn’t easy!
@POLLY_P #BRIGHTONSEO
The criteria is
changing fast.
@POLLY_P #BRIGHTONSEO
@POLLY_P #BRIGHTONSEO
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
Same site today.
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
We already
do a lot.
What does it take to get a
100% Lighthouse
performance score?
@POLLY_P #BRIGHTONSEO
Hackathon.
@POLLY_P #BRIGHTONSEO
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
We challenged ourselves to
get a 100% score… without
changing how the site
l...
Old vs New
@POLLY_P #BRIGHTONSEO
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 ...
1. HTTP/2
2. Image quality (WebP and others)
3. Modern JS and rejection of heavy libraries
4. Small chunks, automatic chun...
1. HTTP2.0.
@POLLY_P #BRIGHTONSEO
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
HTTP/1 HTTP/2
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
HTTP/1
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
HTTP/2
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
HTTP/1
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
HTTP/2
2. Images.
@POLLY_P #BRIGHTONSEO
Deferring offscreen
images.
@POLLY_P #BRIGHTONSEO
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
Some images are not
visible on tablets.
WIDE MEDIUM
@POLLY_P #BRIGHTONSEO
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
• We load all images.
• Universal HTML,
CSS and JS.
197 KB
66 KB
60 KB
None of
these images
are shown.
28 KB
@POLLY_P #BRIGHTONSEO
Serving images in
next-gen formats.
@POLLY_P #BRIGHTONSEO
The new WebP image format provides
better compression than a PNG or a JPEG.
This means faster downloads and less
data.
@PO...
JPGWebP
@POLLY_P #BRIGHTONSEO
Properly sized
images.
@POLLY_P #BRIGHTONSEO
Adaptive image
sizes.
@POLLY_P #BRIGHTONSEO
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
Old.
The adaptive images markup is generated automatically,
we don’t ask our designers or UI developers to do it.
© Copyright 2...
<img src="https://static02.deleteagency.com/-/media/images/homepage/intro/
digital_agency/delete_leeds_main/delete_leeds_m...
Lazy load.
@POLLY_P #BRIGHTONSEO
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
The images only load when they get into the
user’s viewport and not before.
3. Critical.
BRIGHTONSEO
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
Abrowser doesn’tstart rendering apageuntilitloads
andparsesallresources.
The first load.
@POLLY_P #BRIGHTONSEO
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
We only take the necessary resources (JS, CSS) for a page
and then inline th...
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
After theinlinemarkuploads, wethenload allthe
necessaryresourcesin thebackgr...
Subsequent loads.
@POLLY_P #BRIGHTONSEO
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
We check if the browser already has the
resources cached and we skip inlinin...
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
The content loads instantly
on the first and all subsequent loads.
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
On a repeat visit, the page will use cached
resources instead of inline reso...
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
We use anonymous cookies to find out whether we need to send
inline resources...
4. Only load what
you need.
@POLLY_P #BRIGHTONSEO
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
We broke up all the CSS and JS into small files for each logical
block. This ...
HTTP/2 is ideal for loading lots of tiny resources
quickly and without latency in one connection.
© Copyright 2019 Delete
...
5. Modern JS.
@POLLY_P #BRIGHTONSEO
Old.
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
The evaluation time of Modern JS is 300%
faster and the file size is 20%...
My golden advice!
@POLLY_P #BRIGHTONSEO
1.
It is time for SEOs
to unite
with developers.
@POLLY_P #BRIGHTONSEO
Work with them more,
sit with them,
do everything you can to
learn from them.
@POLLY_P #BRIGHTONSEO
Unless you can tackle
a Lighthouse Trace
on your own.
@POLLY_P #BRIGHTONSEO
2.
Lighthouse
optimisation is
not a one-off task.
@POLLY_P #BRIGHTONSEO
On-going optimisation
is the new norm.
@POLLY_P #BRIGHTONSEO
What might score
100% today, will not
score 100% tomorrow.
@POLLY_P #BRIGHTONSEO
3.
Page speed is a ranking
factor for mobile and
desktop searches.
@POLLY_P #BRIGHTONSEO
It has a significant
effect on rankings.
@POLLY_P #BRIGHTONSEO
© Copyright 2019 Delete
@POLLY_P #BRIGHTONSEO
Significant changes
Our rankings improved,
in some cases by almost
two SERPs.
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...
100% is possible!
@POLLY_P #BRIGHTONSEO
@POLLY_P #BRIGHTONSEO
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 ...
Learn more and
download the slides
here:
www.deleteagency.com/brightonseo
@POLLY_P #BRIGHTONSEO
© Copyright 2019 Delete
Thank you.
@POLLY_P #BRIGHTONSEO
Upcoming SlideShare
Loading in …5
×

How To Get a 100% Lighthouse Performance Score

8,926 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
  • Secrets To Working Online, Hundreds of online opportunites you can profit with today! ♥♥♥ http://ishbv.com/ezpayjobs/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for sharing :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×