Page Speed Insights: The Ballad of Improving Performance

@jamesmcnulty
PAGESPEED INSIGHTS_
THE BALLAD OF IMPROVING PERFORMANCE
@jamesmcnulty

@jamesmcnulty
2000 2007 2010
2G 3G 4G
2019 (kinda)
5G

@jamesmcnulty
MEASURING SPEED_

@jamesmcnulty
2012
PageSpeed
Insights

@jamesmcnulty
2019
PageSpeed
Insights

@jamesmcnulty
“In the past we've recommended performance metrics
like First Meaningful Paint (FMP) and Speed Index
(SI) to help capture more of the loading experience
after the initial paint,”
“but these metrics are complex, hard to explain, and
often wrong — meaning they still do not identify when
the main content of the page has loaded.”
Source - Phil Walton (Engineer at Google) August, 2019

@jamesmcnulty
Largest Contentful Paint Example
Source
Render time of the largest contentful element visible in the viewport

@jamesmcnulty
Cumulative Layout Shift (CLS)
Measures the unexpected
movement of page content
which usually happens
because resources are
loaded asynchronously or
DOM elements get
dynamically added to the
page above existing content.
Source

@jamesmcnulty
Measure Cumulative Layout Shift (CLS)
1. Go to http://webpagetest.org/
2. Advanced Settings > Chromium
3. Enable layoutShift API,
by adding the following to the
Command-Line field:
--enable-blink-
features=LayoutInstabilityAPI

@jamesmcnulty
Measuring Cumulative Layout Shift (CLS)
[CumulativeLayoutShift]
return new Promise(resolve => {
var CLS = 0;
new PerformanceObserver(list => {
list.getEntries().forEach(entry => {
if (entry.hadRecentInput) return;
CLS += entry.value;
});
resolve(CLS);
}).observe({type: "layout-shift", buffered: true});
});
4. Advanced Settings > Custom
5. Add this script to Custom Metrics:

@jamesmcnulty

@jamesmcnulty
Distance
X
Impact
= CLS Score

@jamesmcnulty
Calculating Cumulative Layout Shift (CLS)
50% 25%
75%
Impact Fraction
Distance Fraction
Ad

@jamesmcnulty
Cumulative Layout Shift (CLS) Scoring
0.25
X
0.75
= 0.1875
Distance fraction
X
Impact fraction
= CLS Score

@jamesmcnulty
Fixing Layout Shift for Images
tl;dr — Add HTML width &
height attributes
● Launching in Firefox
71 (December 2019)
● Launching in Chrome
shortly after
Source - Jen Simmons Designer Advocate at Mozilla
<img src="https://test.com/750x500.jpg"
alt="smiling black dog"
width="750" height="500"/>
img {
display: block;
width: 100%;
height: auto;
}

@jamesmcnulty
Google decides the crawl priority of pages based
on site popularity, content freshness, and server
resources.
Source - Kazushi Nagayama Former Google Search Quality Analyst
Crawling
“Google needs to make good predictions on how
much load the host can tolerate, and decide how
fast it crawls the site”

@jamesmcnulty
● Just like crawl budget, Google uses signals to compute
priorities for rendering. In this case, the most important ones
are the popularity of the site, and the number of URLs that need
rendering.
● If you have a page that runs lots of JavaScript, it may eventually
be considered unrenderable.
● Excessive CPU consumption negatively impacts indexing
Source - Kazushi Nagayama Former Google Search Quality Analyst
Rendering

@jamesmcnulty
Page Speed
is a
mobile ranking factor
Source

@jamesmcnultySource - Rand Fishkin (CEO, Co-Founder at Sparktoro)

@jamesmcnulty
“best laptops for students”
1.
2.
3.

@jamesmcnultySource - Billy Hoffman (Founder and CTO at Zoompf)
“Our data shows there is no correlation between
"page load time" (either document complete or
fully rendered) and ranking on Google's search
results page.”
Does Website Speed Actually Impact Rankings?

@jamesmcnulty
“Of all the data we
captured, the TTFB
metric had the
strongest
correlation effect,
implying a high
likelihood of some
level of influence on
search ranking.”
Source - Billy Hoffman (Founder and CTO at Zoompf)

@jamesmcnulty
Improving page speed
doesn’t change the content.
It changes
the user experience.

@jamesmcnulty
Prepare for where Google
is going.

@jamesmcnultySource – Elizabeth Sweeny (Developer Insights Product Manager for Chrome)
“Performance at the end of
the day is about solving
business problems”

@jamesmcnulty
For
Google it
speeds up
the engine

@jamesmcnulty
Performance Optimization is important
Server Response Time
is important for
Search Visibility
Page Speed
is important for
User Experience

@jamesmcnulty
Performance Optimization is important
Server Response Time
Is important for
Search Visibility
Page Speed
Is important for
User Experience

@jamesmcnulty
Both are important
for your bottom line

@jamesmcnulty
Test My Site (Think with Google)
Estimate the
value a faster
site could have
on your
revenue.
Source

@jamesmcnulty
Generate Visual Comparisons
Enter multiple URLs to
compare them against
each other visually.
webpagetest.org/video/

@jamesmcnulty
Google Performance Tools
● https://web.dev/measure
● Lighthouse
● PageSpeed Insights
● Test My Site (Think with Google)
● Mobile-Friendly Test

@jamesmcnulty
Google
Search Console
Speed Report
(Experimental)
@jamesmcnulty
https://webmasters.googleblog.com/2019/11/search-console-speed-report.html

@jamesmcnulty
Run
Lighthouse
Reports for
Multiple Pages
@jamesmcnulty
https://www.upbuild.io/blog/lighthouse-reports-multiple-pages/

@jamesmcnulty
How it works
1. Download Google Chrome
2. Install Lighthouse Chrome Extension
3. Install node.js
4. Install Lighthouse Batch Reporter
5. Open Terminal (or Command Prompt) – Enter URLs to run in Lighthouse
6. Upload the downloaded JSON reports to an online server
7. In a new Google Sheet, open the Script Editor and add the ImportJSON.gs code
8. Add the URLs for each JSON report to the Google Sheet
9. Use formulas in the Google Sheet to find data within each JSON report

@jamesmcnulty
How to Automate
Pagespeed Insights
For Multiple URLs
using Google Sheets
https://moz.com/blog/how-to-automate-pagespeed-insights-for-multiple-urls-using-google-sheets
@jamesmcnulty

@jamesmcnulty
How it works
1. Make a copy of this Google Sheet
2. Create a free API Key from Google
3. Make sure the PageSpeed Insights API is enabled.
4. Add a list of URLs to the Google Sheet
5. Click “Run Report”

@jamesmcnulty
[Updated Template]
Automated Pagespeed
Insights For Multiple
URLs using Google
Sheets
https://www.upbuild.io/blog/automated-pagespeed-insights-update/
@jamesmcnulty

@jamesmcnulty
Just buy
Screaming
Frog
https://www.screamingfrog.co.uk/seo-spider-12/
@jamesmcnulty

@jamesmcnulty
How to Automate
PageSpeed Insights for
Multiple URLs using
Azure Logic Apps or
Microsoft Flow
https://mattcollinge.wordpress.com/2019/10/12/how-to-automate-pagespeed-insights-for-multiple-urls-using-logic-apps-or-flow/
@jamesmcnulty
By Matt Collinge

@jamesmcnulty
Where To Start
1. Focus on the Critical Rendering Path. Make fewer requests for smaller resources.
○ Optimize the delivery of render-blocking CSS and JavaScript resources
○ Prioritize visible content
2. Reduce your server response time (improve TTFB)
○ Use a CDN (e.g. Cloudflare)
○ Enable Gzip / compression (Check your site)
○ Leverage browser caching
○ Enable Keep-alive
○ Is My Host Fast Yet? by Rick Viscomi
3. Find and resolve redundant internal redirects and redirect chains

@jamesmcnulty
Resolve Redundant Redirects
● Each redirect adds latency to the overall page load time.
● Google will follow up to five redirect hops, then stop and
treat the original URL as a 404 error.
1. http://www.mysite.com/pricing
2. http://mysite.com/pricing
3. https://mysite.com/pricing
4. https://mysite.com/plans
5. https://mysite.com/plans/
Source

@jamesmcnulty
Lighthouse
shows third-party
resources, their
size and the time
it takes to load
them
Review Your Third-Party Resources

@jamesmcnulty
JavaScript Loading Priorities in Chrome
Source by Addy Osmani (Engineering Manager - Google Chrome)

@jamesmcnulty
Image Optimization
1. Essential Image Optimization by Addy Osmani
(Engineering Manager working on Google Chrome)
2. Creating a Cloudflare Worker to Lazy Load Images by
Simon Cox
3. Piio / Imagekit.io - [Paid] Optimization & delivery services
(Image Speed Test) (WordPress Plugin) (Resize Images Tool)

@jamesmcnulty
CSS and JavaScript Optimization
1. Find and remove unused CSS and JavaScript with Google Chrome.
a. Automatically remove unused CSS using Grunt (grunt-uncss package)
b. Unused CSS Tool / Service
2. Avoid importing CSS files from inside another CSS file (i.e. avoid @import
url("style.css") - Check your site: CSS Delivery Tool by Patrick Sexton
a. Use fewer external CSS files
b. Serve critical CSS from one domain
3. Call CSS first, save time by reducing network calls and delays from JavaScript
a. In-line small CSS and JavaScript

@jamesmcnulty
WordPress Optimization
1. Ultimate Guide to WordPress Speed Optimization by
MyThemeShop
2. How to Make Your WordPress Site Load Faster (Without
Breaking It or Going Crazy) by Gill Andrews
3. 5 Ways to Make Your WordPress Website Blazing Fast
by Kyle Faber

@jamesmcnulty
Site Kit -
Google’s official
WordPress plugin
● Search Console
● Google Analytics
● Pagespeed Insights
● AdSense
https://wordpress.org/plugins/google-site-kit/
@jamesmcnulty

@jamesmcnulty
How To Build Speed
Dashboards in
Google Data Studio
By Sam Marsden
https://www.searchenginejournal.com/build-speed-dashboards-google-data-studio/321343/
@jamesmcnulty

@jamesmcnulty
Historical CrUX
Performance
Analysis
By Edgemesh
https://crux.run/
@jamesmcnulty

@jamesmcnulty
Compare Your
Site To Industry
Benchmarks
(using CrUX data)
By Akamai
https://developer.akamai.com/akamai-mpulse/crux-benchmarking
@jamesmcnulty

@jamesmcnulty
Publisher Ads
Audit (Beta)
https://developers.google.com/publisher-ads-audits/
A tool to help improve ad speed and
overall quality through a series of
automated Lighthouse audits.
At the moment, this is primarily targeted
at sites using Google Ad Manager with
the Google Publisher Tag (GPT) tag.
@jamesmcnulty

@jamesmcnulty
@jamesmcnultyThank you!

Page Speed Insights: The Ballad of Improving Performance