1.
@jamesmcnulty
PAGESPEED INSIGHTS_
THE BALLAD OF IMPROVING PERFORMANCE
@jamesmcnulty

2.
@jamesmcnulty

3.
@jamesmcnulty

4.
@jamesmcnulty

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

6.
@jamesmcnulty
MEASURING SPEED_

7.
@jamesmcnulty
2012
PageSpeed
Insights

8.
@jamesmcnulty
2019
PageSpeed
Insights

9.
@jamesmcnulty@jamesmcnulty

10.
@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

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

12.
@jamesmcnulty

13.
@jamesmcnulty

14.
@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

15.
@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

16.
@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:

17.
@jamesmcnulty
Measuring Cumulative Layout Shift (CLS)

18.
@jamesmcnulty
Measuring Cumulative Layout Shift (CLS)
Distance
X
Impact
= CLS Score

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

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

21.
@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;
}

22.
@jamesmcnulty@jamesmcnulty

23.
@jamesmcnulty

24.
@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”

25.
@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

26.
@jamesmcnulty
Page Speed
is a
mobile ranking factor
Source

27.
@jamesmcnulty
Is it?

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

29.
@jamesmcnultySource

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

31.
@jamesmcnultySource

32.
@jamesmcnultyhttps://amp.dev/

33.
@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?

34.
@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)

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

36.
@jamesmcnulty
Prepare for where Google
is going.

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

38.
@jamesmcnulty
For
Google it
speeds up
the engine

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

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

41.
@jamesmcnulty
Both are important
for your bottom line

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

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

44.
@jamesmcnulty@jamesmcnulty

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

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

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

48.
@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

49.
@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

50.
@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”

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

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

53.
@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

54.
@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

55.
@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

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

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

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

59.
@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)

60.
@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

61.
@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

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

63.
@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

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

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

66.
@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

67.
@jamesmcnulty
@jamesmcnultyThank you!