How To Get a 100% Lighthouse Performance Score

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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 oﬀers
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 ﬁrst time load // 17 vs 36
Volume of data transferred on ﬁrst 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 ﬁrst 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 ﬁnd 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 ﬁles 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 ﬁle 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 ﬁrst time load // 17 vs 36
Volume of data transferred on ﬁrst 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

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1036216 views
Storytelling For The Web: Integrate... by Chiara Aliotta 948112 views
Artificial Intelligence, Data and C... by OECD Directorate ... 870219 views
How to Leverage AI to Boost Employe... by SocialHRCamp 365506 views
2024 State of Marketing Report – by... by Marius Sescu 207694 views
Everything You Need To Know About C... by Expeed Software 227895 views

View on Slideshare

1 of 74 Ad

View on Slideshare

1 of 74 Ad