Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Google's Search Signals For Page Experience - SMX Advanced 2021 Patrick Stox

Wird geladen in …3

Hier ansehen

1 von 72 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (18)

Ähnlich wie Google's Search Signals For Page Experience - SMX Advanced 2021 Patrick Stox (20)


Aktuellste (20)


Google's Search Signals For Page Experience - SMX Advanced 2021 Patrick Stox

  1. 1. @SPEAKERNA@patrickstox #SMX
  2. 2. @SPEAKERNA@patrickstox #SMX Product Advisor,Technical SEO, & Brand Ambassador at • I write for Ahrefs blog but have written for many industry publications in the past • I speak at some conferences like SMX, Pubcon, UnGagged,TechSEO Boost • Organizer for the Raleigh SEO Meetup (most successful in US) and the Beer & SEO Meetup • We also run a conference, the Raleigh SEO Conference • FounderTechnical SEO Slack Group (message me for an invite) • Moderator /r/TechSEO on Reddit Who is Patrick Stox?
  3. 3. @SPEAKERNA@patrickstox #SMX Mid-June to late August rollout The Page Experience Update Is Happening Now
  4. 4. @SPEAKERNA@patrickstox #SMX Is This New?
  5. 5. @SPEAKERNA@patrickstox #SMX 2007 - Safe Browsing 2010 - Page Speed Desktop 2014 - HTTPS 2015 - Mobile Friendly 2017 - No Intrusive Interstitials 2018 - Page Speed Mobile 2021 – Core Web Vitals (Mobile) Yes and No
  6. 6. @SPEAKERNA@patrickstox #SMX https://twitter.com/jeffjose/status/1394776921121067012
  7. 7. @SPEAKERNA@patrickstox #SMX AMP No Longer Required For Top Stories
  8. 8. @SPEAKERNA@patrickstox #SMX But that doesn’t mean you shouldn’t work on them Page Experience Signals Are Small Ranking Signals
  9. 9. @SPEAKERNA@patrickstox #SMX Image Credits: Google I/O 2021
  10. 10. @SPEAKERNA@patrickstox #SMX Page Experience Report In Google Search Console
  11. 11. @SPEAKERNA@patrickstox #SMX Mobile-Friendly
  12. 12. @SPEAKERNA@patrickstox #SMX https://almanac.httparchive.org/en/2020/seo 10.84% Of Mobile Sites Are Probably Not Mobile Friendly
  13. 13. @SPEAKERNA@patrickstox #SMX Bulk Checker In Google Search Console Mobile Usability Report
  14. 14. @SPEAKERNA@patrickstox #SMX Mobile-Friendly Test Single Page Check
  15. 15. @SPEAKERNA@patrickstox #SMX In robots.txt add: User-Agent: Googlebot Allow: .js Allow: .css Don’t Block CSS Or JS Files
  16. 16. @SPEAKERNA@patrickstox #SMX Google is shifting how they index content from the desktop to the mobile version of sites This started in 2016 and is nearly done Mobile-First Indexing
  17. 17. @SPEAKERNA@patrickstox #SMX Safe Browsing
  18. 18. @SPEAKERNA@patrickstox #SMX Source: https://transparencyreport.google.com/safe-browsing/overview Browser Warnings
  19. 19. @SPEAKERNA@patrickstox #SMX Source: https://transparencyreport.google.com/safe-browsing/overview Search Warnings
  20. 20. @SPEAKERNA@patrickstox #SMX https://search.google.com/search-console/security-issues Report in Google Search Console
  21. 21. @SPEAKERNA@patrickstox #SMX HTTPS • Authentication • Data Integrity • Encryption
  22. 22. @SPEAKERNA@patrickstox #SMX HTTPS Check
  23. 23. @SPEAKERNA@patrickstox #SMX Source: https://almanac.httparchive.org/en/2020/seo
  24. 24. @SPEAKERNA@patrickstox #SMX https://twitter.com/patrickstox/status/1289949065606606857 HTTPS – Uncommon SEO Knowledge
  25. 25. @SPEAKERNA@patrickstox #SMX HTTPS Is Required For Many Modern Technologies • HTTP/2, HTTP/3 • Accelerated Mobile Pages (AMP) • Progressive Web Apps (PWAs) • Service Workers • Geolocation • Push Notifications
  26. 26. @SPEAKERNA@patrickstox #SMX Make sure content on the page is easily accessible to the user. No Intrusive Interstitials
  27. 27. @SPEAKERNA@patrickstox #SMX
  28. 28. @SPEAKERNA@patrickstox #SMX Legal notices for cookies or age consent Banners that use a reasonable amount of screen space and can be dismissed What Doesn’t Count Against You
  29. 29. @SPEAKERNA@patrickstox #SMX Core Web Vitals
  30. 30. @SPEAKERNA@patrickstox #SMX Source: web.dev/vitals Largest Contentful Paint (LCP)
  31. 31. @SPEAKERNA@patrickstox #SMX It’s usually going to be a featured image, text, or maybe the <h1> tag LCP Is The Largest Visible Element Loaded In The Viewport
  32. 32. @SPEAKERNA@patrickstox #SMX •<img> element •<image> element inside an <svg> element •The image inside a <video> element •Background image loaded with the url() function •Blocks of text <svg> and <video> may be added in the future. But LCP Can Be Any Of These
  33. 33. @SPEAKERNA@patrickstox #SMX How To See The LCP Element In PageSpeed Insights
  34. 34. @SPEAKERNA@patrickstox #SMX How To See The LCP Element in DevTools • Performance > check “Screenshots” • Click ‘Start profiling and reload page’ • LCP is on the timing graph • Click the node; this is the element for LCP
  35. 35. @SPEAKERNA@patrickstox #SMX Source: web.dev/vitals First Input Delay (FID)
  36. 36. @SPEAKERNA@patrickstox #SMX FID is the time from when a user interacts with your page until the page can respond. You can also think of it as responsiveness. What Is FID?
  37. 37. @SPEAKERNA@patrickstox #SMX Counted •Clicking on a link or button •Inputting text into a blank field •Selecting a drop-down menu •Clicking a checkbox What Counts As An Interaction? Not Counted •Scroll •Zoom
  38. 38. @SPEAKERNA@patrickstox #SMX Avoid Long Tasks
  39. 39. @SPEAKERNA@patrickstox #SMX How To See FID In PageSpeed Insights
  40. 40. @SPEAKERNA@patrickstox #SMX Source: web.dev/vitals Cumulative Layout Shift (CLS)
  41. 41. @SPEAKERNA@patrickstox #SMX CLS measures how elements move around or how stable the page layout is. What Is CLS?
  42. 42. @SPEAKERNA@patrickstox #SMX Simply: It's the 5 second timeframe where the most shifting occurs https://web.dev/evolving-cls/ Cumulative Layout Shift (CLS) Was Changed Recently
  43. 43. @SPEAKERNA@patrickstox #SMX •Images without dimensions •Ads, embeds, and iframes without dimensions •Injecting content with JavaScript •Applying fonts or styles late in the load What Causes CLS?
  44. 44. @SPEAKERNA@patrickstox #SMX How To See CLS in PageSpeed Insights
  45. 45. @SPEAKERNA@patrickstox #SMX How To See CLS in WebPageTest Filmstrip View Options: Highlight Layout Shifts Thumbnail Size: Huge Thumbnail Interval: 0.1 sec
  46. 46. @SPEAKERNA@patrickstox #SMX How To See CLS in defaced.dev Layout Shift GIF Generator
  47. 47. @SPEAKERNA@patrickstox #SMX https://ahrefs.com/blog/advanced-pagespeed-guide/ Speed Is A Complex Topic
  48. 48. @SPEAKERNA@patrickstox #SMX Only 24.2% Of Sites Pass Core Web Vitals Benchmarks Data from CrUX Real user data
  49. 49. @SPEAKERNA@patrickstox #SMX Tools To Measure
  50. 50. @SPEAKERNA@patrickstox #SMX Core Web Vitals report in Google Search Console Easiest Way To See CWV For Your Site
  51. 51. @SPEAKERNA@patrickstox #SMX Specific Issues
  52. 52. @SPEAKERNA@patrickstox #SMX So How Do I Make My Site Load Faster?
  53. 53. @SPEAKERNA@patrickstox #SMX The smallest page: <!DOCTYPE HTML> If you need JavaScript: <!DOCTYPE HTML><html></html> Basic Concept #1 - Smaller Is Faster
  54. 54. @SPEAKERNA@patrickstox #SMX Use a CDN Basic Concept #2 – Location Matters
  55. 55. @SPEAKERNA@patrickstox #SMX Note the delay for each additional connection Basic Concept #3 – Use The Same Server If Possible
  56. 56. @SPEAKERNA@patrickstox #SMX These start the connections earlier if you need to connect to 3rd parties. <link rel="preconnect" href="https://site.com"> <link rel="dns-prefetch" href="//asset1.com"> Preconnect and DNS-Prefetch
  57. 57. @SPEAKERNA@patrickstox #SMX Basic Concept #4 – Caching 1st load 2nd load
  58. 58. @SPEAKERNA@patrickstox #SMX AMP pages clicked from search are prefetched and cached. Now you can do this with Signed Exchanges for any site. https://web.dev/signed-exchanges/ AMP’s Magic Trick
  59. 59. @SPEAKERNA@patrickstox #SMX Goal: Load things people see first, then load other things. Basic Concept #5 – Prioritization Of Resources
  60. 60. @SPEAKERNA@patrickstox #SMX Do you need it? If so, optimize size + quality Preload images above the fold <link rel="preload" as="image" href=“cat.jpg" imagesrcset=“cat_400px.jpg 400w, cat_800px.jpg 800w, cat_1600px.jpg 1600w" imagesizes="50vw"> Images - Early
  61. 61. @SPEAKERNA@patrickstox #SMX Set height and width of images <img src=“cat.jpg" width="640" height="360" alt=“cat with string" /> Reserve the maximum space needed for ads CLS Specific – Include Sizes
  62. 62. @SPEAKERNA@patrickstox #SMX Lazy Load <img src=“cat.jpg" alt=“cat" loading="lazy"> Images - Late
  63. 63. @SPEAKERNA@patrickstox #SMX Remove unused CSS Minify CSS Inline Critical CSS CSS - Early
  64. 64. @SPEAKERNA@patrickstox #SMX Inline
  65. 65. @SPEAKERNA@patrickstox #SMX Defer non-critical CSS <link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'"> CSS - Late
  66. 66. @SPEAKERNA@patrickstox #SMX Same server if possible Preload System fonts over custom fonts font-display: optional Fonts
  67. 67. @SPEAKERNA@patrickstox #SMX Minify Prioritize what’s needed for the site to function only, inline or preload Pre-render or server-side rendering if needed JavaScript - Early
  68. 68. @SPEAKERNA@patrickstox #SMX Break up long tasks – code splitting JavaScript Throughout
  69. 69. @SPEAKERNA@patrickstox #SMX JavaScript - Late
  70. 70. @SPEAKERNA@patrickstox #SMX JavaScript - Late Normal: <script src="https://www.domain.com/file.js"></script> Async: <script src="https://www.domain.com/file.js" async></script> Defer: <script src="https://www.domain.com/file.js" defer></script>
  71. 71. @SPEAKERNA@patrickstox #SMX Make a static copy on your own server and test performance improvements of changes https://youtu.be/ULJ-2AUdZYQ Estimate Impact Of Changes
  72. 72. @SPEAKERNA@patrickstox #SMX SEE YOU AT THE NEXT SMX!

Hinweis der Redaktion

  • Patrick Stox – Product Advisor, Technical SEO, & Brand Ambassador at Ahrefs
    Please ask your questions in the chat and I’ll answer in the live Q&A after the presentation.
    Page Experience was announced about a year ago
  • Lots of Google signals are small factors
  • I say probably because you could technically still make a page mobile friendly without a viewport but it’s way more work and will be difficult to maintain I’m the lead author for the SEO Chapter of the Web Almanac for 2021
  • HTML or CSS fixes
  • If you have an issue, there’s a ton of documentation on cleaning up different issues. There’s also the webmaster help forum and they can help guide you.
  • Authentication, Data Integrity, and Encryption Years ago I wrote a very popular guide on migrating to HTTPs on Search Engine Land
  • Look for the lock. Fun fact, Google doesn’t actually validate certificates, they just look for HTTPs
  • All kinds of things about referral data, using a content security policy called upgrade-insecure-requests to fix mixed content issues at scale, redirects, and more
  • You’ll have to visually check for these
  • You’ll get a boost for jumping up categories but once you hit good you kind of cap out, there’s not an additional boost for improving after this.
  • But it’s basically going to be some kind of image or text
  • You know when you click something and nothing happens
  • Not all users will interact with a page, so they may not have an FID value. This is also why lab test tools won’t have the value because they’re not interacting with the page. Use Total Blocking Time (TBT) instead.
  • Javascript competes for the main thread.  There’s just one main thread, and JavaScript competes to run tasks on it.
    These get flagged with little red tags in Chrome Dev Tools if they’re too long
  • Notice how our font re-styles between 5.1s‑5.2s, shifting the layout as our custom font is applied. I like this view because I can see changes along with the waterfall to see what was loaded at that time.
  • This is usually the territory of devs, so you’re generally going to have to work with them. You’ll generally need to sell the idea that speed is important and maybe even do some testing, but it’s rare that SEOs will actually be the ones implementing speed changes
  • This is the source of data, metrics taken at 75th percentile of users, so ¾ people are having a good user experience At least so far it doesn’t look like sites have made significant improvements. You get some benefit in ranking until you hit good, after that the signal just caps
  • Field = real user data, lab data = tested under specific conditions
    Can you get both lab and field data at scale? Not without the PageSpeed Insights API. We’re planning to add to Site Audit in Ahrefs. You can use that for free in Ahrefs webmaster tools ahrefs.com/awt
  • 28 day moving average, so any changes you make will take some time to be reflected here You can also track your own RUM data if you want and send to Google Analytics for instance
  • You’ll want to look at this to help you prioritize. Look at the issue and click into these and you’ll see groups of pages with the same issue. Then you can look at why specifically they’re not meeting the metrics in pagespeed insights and try to resolve the issues. Many sites struggle with LCP.
  • Smaller JS files, smaller CSS files, smaller font files
  • CDNs basically give you a way to connect and serve your site that’s closer to users. It’s like having copies of your server in different locations around the world
  • If you host your files on the same server, additional connections don’t have to be made
  • A browser would typically wait for the HTML to finish before starting a connection, but here it’s starting before it normally would
    DNS-prefetch has better support than preconnect
  • Cached files can also be re-used across pages. So any subsequent page visits will be faster.
  • They’re fast for users, but AMP pages may not actually test well in lab tests.
  • Preload is similar to what we saw with preconnect for the connections, it starts loading preloaded resources earlier by prioritizing them in the browser.
  • Basically loads images later in the process or when a user is close to seeing them. Many systems kind of handle this for you now.
  • you’re taking critical parts of the CSS and putting it directly into the HTML You can also inline images, but caching is more complicated.
  •  hide text for up to 100ms, then only use the web font if it is available - never swapping
  • Ideally you’d chunk the needed parts so they’re smaller, then load the rest later
  • Maybe async things like analytics to get that data sooner, but in general anything not needed until later or that doesn’t have dependencies you’ll want to defer