Page Experience Update SMX 2020 (Aleks Shklyar)
•Download as PPTX, PDF•
0 likes•194 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Page Experience Update SMX 2020 (Aleks Shklyar)
Similar to Page Experience Update SMX 2020 (Aleks Shklyar) (20)
Recently uploaded
Recently uploaded (20)
Page Experience Update SMX 2020 (Aleks Shklyar)
- 1. @SPEAKERNAME/#SM X Page Experience Is The Best Teacher Google's Page Experience Update
- 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
- 4. @SPEAKERNAME/#SM X Page Speed: Is It All About Being Fast?
- 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/
- 6. @SPEAKERNAME/#SM X In the End, It Doesn’t Even Matter https://neilpatel.com/blog/does-speed-impact-rankings/
- 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
- 8. @SPEAKERNAME/#SM X Core Web Vitals as a Part of Page Experience • Top Stories will not need to be AMP • Rewards positive page experience
- 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)
- 10. @SPEAKERNAME/#SM X What You Can Do to Improve Your 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
- 12. @SPEAKERNAME/#SM X CSS • Minify • Defer non-critical • Inline critical JavaScript • Minify/compress JavaScript files • Defer unused JavaScript • Minimize unused polyfills Render-Blocking JavaScript and CSS
- 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
- 16. @SPEAKERNAME/#SM X • Minimize critical JavaScript • Use server-side rendering • Use pre-rendering Client-Side Rendering
- 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
- 25. @SPEAKERNAME/#SM X • Defer unused JavaScript • Code-splitting • Defer non-critical JavaScript • Minimize unused polyfills Reduce JavaScript Execution Time
- 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
- 29. @SPEAKERNAME/#SM X • Check Security Issues in GSC religiously • Ensure emails about warnings go to someone who checks them Safe Browsing
- 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
- 32. @SPEAKERNAME/#SM X Your Page Experience Is Not Just SEO
- 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
- 34. @SPEAKERNAME/#SM X SEE YOU AT THE NEXT SMX!
- 35. @SPEAKERNAME/#SM X Work Referenced in This Deck Slide 5 • http://seroundtable.com/google-time-to-first-byte-24847.html • https://www.seroundtable.com/google-dont-worry-too-much-about-page-speed-21976.html • https://neilpatel.com/blog/does-speed-impact-rankings/ Slide 6 • https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html • https://developers.google.com/search/blog/2020/11/timing-for-page-experience Slide 7 • https://developers.google.com/search/blog/2020/05/evaluating-page-experience Slide 8 • https://web.dev/lcp/ Slides 9-15 • https://web.dev/optimize-lcp/ • https://developers.google.com/web/fundamentals/performance/critical-rendering-path • https://www.udacity.com/course/website-performance-optimization--ud884 Slides 16-18 • https://web.dev/cls/ Slides 19-24 • https://web.dev/fid/ • https://web.dev/optimize-fid/ Slide 27 • https://developers.google.com/search/blog/2020/07/prepare-for-mobile-first-indexing-with Slide 28 • https://developers.google.com/search/blog/2016/09/more-safe-browsing-help-for-webmasters Slide 30 • https://developers.google.com/search/blog/2016/08/helping-users-easily-access-content-on
Editor's Notes
- 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