With Google's upcoming Page Experience Update scheduled for May 2021, find out its SEO impacts and ways you can optimize you LCP (Largest Contentful Paint), FID (First Input Delay), and CLS (Cumulative Layout Shift) scores.
2. @SPEAKERNAME/#SM
X
Areas of focus:
1. Google’s Core Web Vitals and their relation to page speed
2. Importance of a great mobile experience
3. Why your site(s) need to be secure
4. Avoiding ads that will wreck your site
5. Jokes and memes to keep you engaged
Presentation Overview
3. @SPEAKERNAME/#SM
X
• SEO Engineer at iPullRank
• 9 years of agency and in-house
experience
• Work under Mike King (this
year’s keynote speaker)
• Love nature and hiking
About Aleks
5. @SPEAKERNAME/#SM
X
• Looking at first byte to make sure pages are
crawled
• Looking at load time to see if full page would
load
• Google Webmaster Tools–Fetch&Render
The Old Days of Optimizing Page Speed
https://webpagetest.org/
7. @SPEAKERNAME/#SM
X
• Largest Contentful Paint(LCP)
• Cumulative Layout Shift (CLS)
• First Input Delay (FID)
• Found on PageSpeed Insights, Google
Search Console, and Lighthouse
• Will start affecting rankings May 2021!!!
Enter Core Web Vitals
9. @SPEAKERNAME/#SM
X
• “Point in the page load timeline
when the page's main content has
likely loaded”
• Looks at the largest image or text
block visible within the viewport
• Ideally under 2.5 seconds
Largest Contentful Paint (LCP)
11. @SPEAKERNAME/#SM
X
• Optimize server
• Cache static assets
• Use CDN
• Serve HTML assets cache-first
• Establish 3rd party connections
early (rel-preconnect)
Optimize Your Server Response Time
14. @SPEAKERNAME/#SM
X
Free Udacity course with Ilya Grigorik
Learn About Critical Rendering Path
https://www.udacity.com/course/website-performance-optimization--ud884
15. @SPEAKERNAME/#SM
X
• Optimize and compress images
• Preload important resources
• Compress text files
• Deliver different assets based on network
connection (adaptive serving)
• Cache assets using a service worker
Slow Resource Load Times
<img><image> <video>
Block-level elements
17. @SPEAKERNAME/#SM
X
• “Measures the sum total of all
individual layout shift scores for
every unexpected layout shift that
occurs during the entire lifespan of the
page”
• Looks at unstable elements in the
viewport
• Ideally a score of 0.1 or lower
Cumulative Layout Shift (CLS)
18. @SPEAKERNAME/#SM
X
Address these:
• Images without dimensions
• Ads, embeds, and iframes without
dimensions
• Dynamically injected content
• Web Fonts causing FOIT/FOUT
• Actions waiting for a network
response before updating DOM
What You Can Do to Improve Your CLS
19. @SPEAKERNAME/#SM
X
• Always include width and height size
attributes on your images and video
elements
• Include width and height size attributes on
ads, embeds and iframes
• Anticipate the maximum space needed (can
result in some blank space)
Add Dimensions And Use Placeholders
20. @SPEAKERNAME/#SM
X
• “Measures load responsiveness because it
quantifies the experience users feel when
trying to interact with unresponsive pages”
• Only focuses on input events from discrete
actions like clicks, taps, and key presses
• Ideally 100 ms or faster
First Input Delay (FID)
21. @SPEAKERNAME/#SM
X
• Break up long tasks
• Optimize your page for interaction
readiness
• Use a web worker
• Reduce JavaScript execution time
What You Can Do To Improve FID
22. @SPEAKERNAME/#SM
X
• Code that blocks main thread for 50 ms or more
• Explore code-splitting
• Check the waterfall in Chrome Inspect Element for examples
Break Up Long Tasks
23. @SPEAKERNAME/#SM
X
• Address Total Blocking Time (TBT)
through optimization of the Critical
Rendering Path
• Move slow and non-essential
components out of Critical Path
Optimize Your Page for Interaction Readiness
24. @SPEAKERNAME/#SM
X
A Web Worker can run JavaScript in the background
helping to cut thread blocking time
• Comlink: A helper library that
abstracts postMessage and makes it easier to use
• Workway: A general purpose web worker exporter
• Workerize: Move a module into a web worker
Use a Web Worker
26. @SPEAKERNAME/#SM
X
Core Web Vitals in a Nutshell (SMX Insights)
1. LCP (Largest Contentful Paint): look to your Critical Rendering Path
and optimize your server response to ensure main content in the
viewport loads <2.5 s
2. CLS (Cumulative Layout Shift): improve by reserving static space
for images, videos, ads, etc; aim for a score <0.1
3. FID (First Input Delay): reduce Total Blocking Time (TBT) and
review Critical Rendering Path; aim for <100ms
28. @SPEAKERNAME/#SM
X
• If your site is not mobile friendly, fix that first
• Use mobile friendly test
• Check GSC reports to identify errors
• Compare pages to desktop versions
• March 2021 Google will only look at mobile pages
• Try to convince your team to move to responsive design
Mobile-Friendly Design
30. @SPEAKERNAME/#SM
X
• Purchase the SSL Certificate
• Prepare for the migration
• Keep old GSC “http” profile
• Monitor performance after the move
Go Secure–Migrate to HTTPS
31. @SPEAKERNAME/#SM
X
• Avoid interstitials that cover main
content
• This is horrible UX
• It will get you penalized
• For legal items (e.g. cookies), find
a strategic location on the page
Avoid Interstitial Pop-Ups
33. @SPEAKERNAME/#SM
X
• Check out iPullRank’s blog,
webinars, and other resources
(SEO and more!)
• Follow @iPullRankAgency on
Twitter
• Find me on Twitter: @AleksAtWork
(no hate mail)
Shameless Plug
New Core Web Vitals: LCP, CLS, and FID
Mobile-first + mobile-only indexing + mobile-friendly
Https and SSL certificate
Ad experiences can ruin everything: interstitials and ads that ruin UX
Jokes
What metrics are important besides the load time? How do Core Web Vitals change the landscape?
In the past, we looked at TTFB and total load time
Fetch&render (sort of) showed us whether pages were being loaded
People hypothesized that Time to First Byte had a huge direct impact on rankings. Even though you could do a study (140K URLs), there was no way to prove causation as multiple variables were always at play.
Google reps essentially denied page speed as a major impact, then that TTFB is a factor, then said only the really slow sites are affected by mobile speed update.
Core Web Vitals were introduced May 5, 2020 on Google Chrome blog
Could be tested in the lab (simulation tools) and in the field (real user experience)
November 10 announced on Google Search Central that these will be ranking factors in May 2021
Can get into Top Stories with good page experience metrics
Don’t need to implement AMP or can roll it back potentially
TTFB relevant again as it’s a way to ensure your server speed. May need test server performance for expensive requests, e.g. pulling database data to dynamically load the page.
If your HTML is static and doesn't need to change on every request, caching can prevent it from being recreated unnecessarily. By storing a copy of the generated HTML on disk, server-side caching can reduce TTFB and minimize resource usage.
If the content on your web page is being hosted on a single server, your website will load slower for users that are geographically farther away because their browser requests literally have to travel around the world.
When installed, a service worker runs in the browser background and can intercept requests from the server. This level of programmatic cache control makes it possible to cache some or all of the HTML page's content and only update the cache when the content has changed.
Use rel="preconnect" to inform the browser that your page intends to establish a connection as soon as possible. Prefetch as fallback for browsers that don’t use preconnect
For easier legibility, CSS files can contain characters such as spacing, indentation, or comments. These characters are all unnecessary for the browser, and minifying these files will ensure that they get removed. Ultimately, reducing the amount of blocking CSS will always improve the time it takes to fully render the main content of the page (LCP).
Remove unused CSS files. Clean up old stylesheets. Inline CSS in <head> if needed.
When loading resources that make up the main content of a page, it can be effective to conditionally fetch different assets depending on the user's device or network conditions. This can be done using the Network Information, Device Memory, and HardwareConcurrency APIs.
When installed, a service worker runs in the browser background and can intercept requests from the server. This level of programmatic cache control makes it possible to cache some or all of the HTML page's content and only update the cache when the content has changed.
Use server-side rendering #
Minimizing the amount of JavaScript should always be the first thing to focus on for sites that are mostly client-rendered. However, you should also consider combining a server rendering experience to improve LCP as much as possible.
This concept works by using the server to render the application into HTML, where the client then "hydrates" all the JavaScript and required data onto the same DOM content. This can improve LCP by ensuring the main content of the page is first rendered on the server rather than only on the client, but there are a few drawbacks:
Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.
Dynamic content, e.g. related articles widget
The fallback font is swapped with a new font (FOUT - flash of unstyled text)
"Invisible" text is displayed until a new font is rendered (FOIT - flash of invisible text)
If there are actions that affect the DOM and they’re waiting on the network response, they can change the layout once loaded
Use placeholders!!!!
Statically reserve space for the ad slot.
In other words, style the element before the ad tag library loads.
If placing ads in the content flow, ensure shifts are eliminated by reserving the slot size. These ads shouldn't cause layout shifts if loaded off-screen.
Avoid collapsing the reserved space if there is no ad returned when the ad slot is visible by showing a placeholder.
Eliminate shifts by reserving the largest possible size for the ad slot.
Chrome UX Report
Optimize your page for interaction readiness: look at Total Blocking Time (TBT) and try to optimize (this is FCP to TTI)
Web Worker runs JavaScript in the background