PageSpeed: Inline small CSS
Recommendations
- Lighthouse
-
- Metrics
- 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
Overview
Inlining small external CSS files can save the overhead of fetching these small files. A good alternative to inline CSS is to combine the external CSS files.
How does your site score on this recommendation?
Summary
CSSHigh
Easy
99%