SEO: Google Devs Recomendations

SEO: Google Devs Recomendations

Google has made many recommendations to web developers for improving website performance over the years, but the full set is overwhelming for any one person or site to follow. The Chrome team has spent the past year trying to determine the most impactful recommendations to give to developers.

It is much sorter then usually but still too much text.

You can treat this blog as "TL;DR" summary of main points.

Largest Contentful Paint (LCP)

  • Avoid using the JS or other indirect image loading technics.
  • To load images use the <img> tag whenever you can
  • Avoid loading hero images from CSS (even scope)
  • If you need to load an image from CSS or JS, use the <link rel=preload> tag
  • Prioritize CLP content (hero images) using the new attribute etchpriority="high" in the <img> or <link> tags
  • Don't use the 'lazy loading' for any LCP content
  • Defer non-critical resources (like analytics scripts or social widgets, basically anything that is not UI)
  • Use CDN for all static content (especially images)

Cumulative Layout Shift (CLS)

  • Set explicit sizes to any content loaded from the page
  • Remember that images are not the only content to setup explicit sizes. Remember about videos, ads, text blocks.
  • Optimize your page for bfcache (you can check your website with this Chrome Tool
  • Don't use Never use the unload event
  • Avoid animations that could affect the layout, especialy animations taht changes the margin or border
  • For the animations that uses aboslute positons like top , left use instead transform:translateX() or transform:translateY(), you can read more about high performance animations on Google Blog
  • In general never animate or transition any CSS property that requires the browser to update the page layout

First Input Delay (FID)

  • Avoid or break up long tasks like rendering, layout, parsing, compling and executing scripts
  • Avoid unnecessary JavaScript, use Google tools like Coverage to find unused scripts
  • Do code splitting for the scirpts that are not used directly after page loads
  • Periofically check your tags to make sure they are optimized
  • Avoid using requestAnimationFrame() for any non-visual work
  • Keep DOM size small
  • Use CSS containment (property that tells browser how to do layout for the container).

Stats Quoted by Devs

  • 72% of mobile pages have an image as their LCP
  • 39% of those pages have the LCP element not statically discoverable
  • 10% of the pages have image-based CLP that use lazy-loading
  • only 0.03% of eligible pages uses the new API element fetchpriority=high
  • only 29% HTML document requests were served from a CDN
  • 72% of pages has at least one unsized (without explicit dimensions set) image.
  • Pages that animate any CSS property that could affect layout are 15% less likely to have good CLS
  • only 51% of all websites meets the Google CLP
  • 26% of websites still dont meet the Google recomended threshold for CLS
  • 8% of websites are still not passing Google FID recomendations
  • only 31% of websites have good INP

Resources - Links

Related Articles

Terms explanation

Mentioned Tools

CSS Properties

Google Tutorials and Howtos