Luke Monaghan gave a presentation on meeting the mobile site speed expectation. He covered that site speed is important for both crawlers and users, and is now an expectation that impacts user experience and sales. Testing tools can measure metrics like First Contentful Paint and Time to Interactive. Sites should optimize by streamlining the critical path, lazy loading images, and code splitting. Performance should be monitored over time using tools like the User Timings Report and Search Console Speed Report. Future enhancements like 5G will further raise user expectations around speed. The key takeaways are to design for speed across devices, deliver perceived speed, measure meaningful metrics, refine performance over time, and work closely with developers.
2. Who am I?
Luke Monaghan
Director, SEO @ Fetch
@LukeTheMono
3. Covered Today:
1. The importance of site speed
2. Mobile vs. Desktop experience
3. How we can meet the mobile expectation
4. The future of mobile performance
@LukeTheMono
6. It’s a ranking
factor
Source: Using site speed in web search ranking, Google, 2010
Source: Using page speed in mobile search ranking, Google, 2018 @LukeTheMono
9. Measurably DaringTMMeasurably DaringTM
10%The percentage of users lost
for each additional second it
takes for the BBC to load.
Source: How the BBC builds websites that scale, Creative Blog, 2018 @LukeTheMono
10. $1.6
BillionThe yearly sales cost that a one second page slowdown
could have to Amazon.
Source:: How One Second Could Cost Amazon $1.6 Billion In Sales, Fast Company, 2012 @LukeTheMono
12. …why are we still seeing
this?
Source: WebPagetest.org @LukeTheMono
13. Measurably DaringTMMeasurably DaringTM
Source: User Centric Performance Metrics, Google
28.9s0.5s 5.8s 10.1s 22.7s
First Contentful
Paint
First Meaningful
Paint
Time to
Interactive
Fully LoadedTime to First Byte
Is it happening? Is it useful? Is it usable?
@LukeTheMono
20. Measurably DaringTMMeasurably DaringTM
“There are multiple moments during the load experience that
can affect whether a user perceives it as "fast" or "slow"”.
Source: Time to Interactive, Google @LukeTheMono
25. Measurably DaringTMMeasurably DaringTM
“Research has shown that any delay longer than a second will
cause the user to interrupt their flow of thought”
Source: Mobile Analysis in PageSpeed Insights, Google @LukeTheMono
29. Of 900,000 mobile landing pages
analysed, 70% took more than 5
seconds to display visual content above
the fold.
Source: Find out how you stack up to new industry benchmarks for mobile page speed, Google, 2018. @LukeTheMono
36. NetInfo API
Uncover data around mobile connection type and performance within
Google Analytics.
Source: GA Mobile Connection Type, Antoinebr @LukeTheMono
47. Testing tools aplenty
There are many tools we can access when testing, some including:
• Lighthouse
• PageSpeed Insights
• ChromeDevTools
• WebPageTest
• GTmetrix
• SpeedCurve
@LukeTheMono
51. Measurably DaringTMMeasurably DaringTM
Output
• Visibility on speed performance at
URL-level, sitewide.
• Visibility on speed performance at
template level – averaged user-
metrics.
• Insight into current state of
revenue and/or visibility driving
pages from a speed perspective.
@LukeTheMono
54. Measurably DaringTMMeasurably DaringTM
“These tools don't run on your user's devices, so they don't
reflect the actual performance experience of your users.”
Source: User-centric Performance Metrics, Google @LukeTheMono
56. Measurably DaringTMMeasurably DaringTM
First Contentful Paint
First Meaningful Paint
Time to Interactive
Source: User-centric Performance Metrics, Google
PerformanceObserver API
UserTiming API
tti-polyfill
Metric How to Measure
@LukeTheMono
57. PerformanceObserver
Enables collection of accurate real user-measurement data.
PerformanceObserver API collects performance data at runtime,
something that can be pulled into Google Analytics for greater mobile
performance testing and reporting.
Source:
First Contentful Paint
@LukeTheMono
58. UserTiming API
Allows you to track how long it takes for specific content to display.
Source: User Timing and Custom Metrics, SpeedCurve
First Meaningful Paint
@LukeTheMono
59. tti-polyfill
Understand when a site can be interacted with through the tracking of
long tasks and quiet windows.
Image Source: How to Implement Time to Interactive (TTI) using Google Analytics, Thomas
Watson
Time to Interactive
@LukeTheMono
64. Measurably DaringTMMeasurably DaringTM
Streamline
Critical
Path
Prioritise critical content – the content
that is visible within the initial view.
• Minification of all critical assets
(both html and CSS)
• Inline critical CSS (typically that
needed for the header and main
above the fold module)
• Load non-critical CSS
asynchronously
Image Source: The need for Speed: Advanced, Bastian Grimm @LukeTheMono
65. Lazy Loading
Defer all non-critical resource when a page is initially loaded, loading them when
needed.
@LukeTheMono
67. Measurably DaringTMMeasurably DaringTM
The average mobile website is around 50% images.
Source: State of the Web: Top Image Optimization Strategies, HTTP Archive @LukeTheMono
71. Images
That’s not all, there are many other ways to drive performance
efficiencies with images:
Source: Automating image optimization, Google @LukeTheMono
80. Impact Calculator
Highlight potential impact of changes based on initial observations
from monitoring.
Source: Impact Calculator, Google @LukeTheMono
85. Measurably DaringTMMeasurably DaringTM
“We observed improvements across the whole web
ecosystem. On a per country basis, more than 95% of
countries had improved speeds”.
Source: User experience improvements with page speed in mobile search, Google, 2019. @LukeTheMono
89. Measurably DaringTMMeasurably DaringTM
Source: Speed & Performance Optimisation: How to Meet Users’ High Expectations, Rachel Costello @LukeTheMono
Rachell @
Deepcrawl
Exciting developments in website
performance, including personalising
performance via the Network
Information API.