YSlow: Put CSS at the top
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
Keep style sheets in headers to ensure progressive rendering.
How does your site score on this recommendation?
Details from Yahoo!
The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer.
These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.
Summary
CSSMedium
Easy
YSlow recommends:
Moving style sheets to the document HEAD element helps pages appear to load quicker since this allows pages to render progressively.
The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: "Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times."
Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.