How To Get a 100% Lighthouse Performance Score

DELETEAGENCY.COM/BRIGHTONSEO@DELETEAGENCY
HOW TO GET A 100% LIGHTHOUSE
PERFORMANCE SCORE 
POLLY POSPELOVA // DELETE AGENCY //
W

What is Lighthouse?
@POLLY_P #BRIGHTONSEO

An open-source,
automated tool for
improving the quality of
web pages.

It has audits for:
• Performance
• Accessibility
• Progressive Web Apps
and it is continually updated.

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.

The report oﬀers
opportunities for
optimisation and
estimated savings.

Why do big brands
score so low?

It isn’t easy!

The criteria is
changing fast.

© Copyright 2019 Delete
Same site today.

We already
do a lot.

What does it take to get a
100% Lighthouse
performance score?

Hackathon.

We challenged ourselves to
get a 100% score… without
changing how the site
looks..
R&D.

Old vs New

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%

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

1. HTTP2.0.

HTTP/1 HTTP/2

HTTP/1

HTTP/2

2. Images.

Deferring offscreen
images.

Some images are not
visible on tablets.
WIDE MEDIUM

• We load all images.
• Universal HTML,
CSS and JS.

197 KB
66 KB
60 KB
None of
these images
are shown.
28 KB

Serving images in
next-gen formats.

The new WebP image format provides
better compression than a PNG or a JPEG.
This means faster downloads and less
data.

Properly sized
images.

Adaptive image
sizes.

Old.

The adaptive images markup is generated automatically,
we don’t ask our designers or UI developers to do it.
New.

<img src="https://static02.deleteagency.com/-/media/images/homepage/intro/
digital_agency/delete_leeds_main/delete_leeds_main_retina.jpg?
mw=1180&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=2000 2000w">
Old.
New.

Lazy load.

The images only load when they get into the
user’s viewport and not before.

Abrowser doesn’tstart rendering apageuntilitloads
andparsesallresources.

The first load.

We only take the necessary resources (JS, CSS) for a page
and then inline them into HTML markup, in a <head> tag.

After theinlinemarkuploads, wethenload allthe
necessaryresourcesin thebackgroundand cachethem.

Subsequent loads.

We check if the browser already has the
resources cached and we skip inlining.

The content loads instantly
on the ﬁrst and all subsequent loads.

On a repeat visit, the page will use cached
resources instead of inline resources.

We use anonymous cookies to ﬁnd out whether we need to send
inline resources, or we if we need to take them from the cache.

4. Only load what
you need.

We broke up all the CSS and JS into small ﬁles for each logical
block. This included: the form, header, footer, navigation etc.

HTTP/2 is ideal for loading lots of tiny resources
quickly and without latency in one connection.

5. Modern JS.

Old.
The evaluation time of Modern JS is 300%
faster and the ﬁle size is 20% less.
New.
The Modern JS evaluation is 41
milliseconds compared to 133
milliseconds, which is a huge

My golden advice!

1.
It is time for SEOs
to unite
with developers.

Work with them more,
sit with them,
do everything you can to
learn from them.

Unless you can tackle
a Lighthouse Trace
on your own.

2.
Lighthouse
optimisation is
not a one-off task.

On-going optimisation
is the new norm.

What might score
100% today, will not
score 100% tomorrow.

3.
Page speed is a ranking
factor for mobile and
desktop searches.

It has a significant
effect on rankings.

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 +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

100% is possible!

Learn more and
download the slides
here:
www.deleteagency.com/brightonseo

Thank you.

How To Get a 100% Lighthouse Performance Score

How To Get a 100% Lighthouse Performance Score

Recommended

More Related Content

What's hot

What's hot (20)

Similar to How To Get a 100% Lighthouse Performance Score

Similar to How To Get a 100% Lighthouse Performance Score (20)

Recently uploaded

Recently uploaded (20)

How To Get a 100% Lighthouse Performance Score

Report as inappropriate

11 likes

views