PageSpeed: Put CSS in the document head

Recommendations

Lighthouse

Metrics

• What are Web Vitals and How to Improve Them?
• What is Cumulative Layout Shift (CLS) and How to Improve It
• What is First Contentful Paint (FCP) and How to Improve It
• What is Interaction to Next Paint (INP) and How to Improve It
• What is Largest Contentful Paint (LCP) and How to Improve It
• What is Speed Index (SI) and How to Improve It
• What is Time to Interactive (TTI) and How to Improve It
• What is Total Blocking Time (TBT) and How to Improve It

Audits

• Allow back/forward cache restoration
• Avoid an excessive DOM size
• Avoid chaining critical requests
• Avoid CSS @import
• Avoid document.write()
• Avoid enormous network payloads
• Avoid large layout shifts
• Avoid long main-thread tasks
• Avoid multiple page redirects
• Avoid non-composited animations
• Avoid serving legacy JavaScript to modern browsers
• Avoid unload event listeners (Deprecated)
• Combine images using CSS sprites
• Defer offscreen images
• Don't lazy load Largest Contentful Paint image
• Efficiently encode images
• Eliminate render-blocking resources
• Enable Keep-Alive
• Enable text compression
• Ensure text remains visible during webfont load
• Keep request counts low and transfer sizes small
• Lazy load third-party resources with facades
• Minify CSS
• Minify JavaScript
• Minimize main-thread work
• Preconnect to required origins
• Preload key requests
• Preload Largest Contentful Paint image
• Properly size images
• Reduce initial server response time
• Reduce JavaScript execution time
• Reduce the impact of third-party code
• Reduce unused CSS
• Reduce unused JavaScript
• Remove duplicate modules in JavaScript bundles
• Replace large JavaScript libraries with smaller alternatives (deprecated)
• Serve images in next-gen formats
• Serve static assets with an efficient cache policy
• Use a <meta name="viewport"> tag with width or initial-scale
• Use a Content Delivery Network (CDN)
• Use explicit width and height on image elements
• Use HTTP/2 for all resources
• Use passive listeners to improve scrolling performance
• Use video formats for animated content
• User Timing marks and measures

PageSpeed (Legacy)

• Avoid a character set in the meta tag
• Avoid bad requests
• Avoid CSS @import
• Avoid CSS expressions (deprecated)
• Avoid document.write (deprecated)
• Avoid Flash on mobile webpages (deprecated)
• Avoid landing page redirects
• Avoid Plugins (deprecated)
• Combine external CSS (deprecated)
• Combine external JavaScript (deprecated)
• Combine images using CSS sprites
• Defer loading of JavaScript (deprecated)
• Defer parsing of JavaScript
• Enable compression
• Enable Keep-Alive
• Improve server response time (deprecated)
• Inline small CSS
• Inline small JavaScript
• Leverage browser caching
• Leverage proxy caching (deprecated)
• Make landing page redirects cacheable (deprecated)
• Minify CSS
• Minify HTML (deprecated)
• Minify JavaScript
• Minimize cookie size (deprecated)
• Minimize DNS lookups (deprecated)
• Minimize redirects
• Minimize request size
• Optimize images
• Optimize the order of styles and scripts (deprecated)
• Parallelize downloads across hostnames (deprecated)
• Prefer asynchronous resources
• Put CSS in the document head
• Remove query strings from static resources (deprecated)
• Remove unused CSS (deprecated)
• Serve resources from a consistent URL
• Serve scaled images
• Serve static content from a cookieless domain (deprecated)
• Specify a cache validator
• Specify a character set early
• Specify a Vary: Accept-Encoding header (deprecated)
• Specify a viewport for mobile browsers (deprecated)
• Specify image dimensions
• Use an application cache (deprecated)
• Use efficient CSS selectors (deprecated)

YSlow (Legacy)

• Add Expires headers
• Avoid AlphaImageLoader filter
• Avoid CSS expressions
• Avoid empty src or href
• Avoid HTTP 404 (Not Found) error
• Avoid URL redirects
• Compress components
• Configure entity tags (ETags)
• Do not scale images in HTML
• Make AJAX cacheable
• Make favicon small and cacheable
• Make fewer HTTP requests
• Make JavaScript and CSS external
• Minify JavaScript and CSS
• Put CSS at the top
• Put JavaScript at bottom
• Reduce cookie size
• Reduce DNS lookups
• Reduce the number of DOM elements
• Remove duplicate JavaScript and CSS
• Use a Content Delivery Network (CDN)
• Use cookie-free domains
• Use GET for AJAX requests