<
zhead
>

Early Access

Link

stylesheet

Learn how to use the stylesheet rel link tag to improve your site.

The stylesheet link relation is used to link a document to an external style sheet. This is essential for defining the presentation of HTML documents.

Code Examples

<link rel="stylesheet" href="styles.css">
Correctly links to an external CSS file for styling the document.
<link rel="stylesheet" href="print.css" media="print">
Links to a stylesheet designed specifically for print media.
<style>@import url("styles.css");</style>
@import within a style tag blocks parallel downloads, slowing down page load.
<link rel="stylesheet" href="styles.css" media="screen, projection" onload="this.media='all'">
Uses JavaScript within onload, which can delay rendering and cause FOUC (Flash of Unstyled Content). Use media queries in the CSS itself.

Recommendations

  • Specify Media Queries
    Use the media attribute to specify the conditions under which the stylesheet should be applied. This optimizes loading and rendering for different devices.
  • Avoid @import
    Instead of using @import inside CSS, link stylesheets directly in the HTML. This improves parallel downloading, reducing page load times.
  • Use Preload for Critical CSS
    For above-the-fold content, consider preloading critical CSS to speed up rendering time. However, use this sparingly as it can also impact performance negatively if overused.
  • Minify CSS Files
    Minifying CSS files reduces their size, leading to faster download times. Always serve production CSS in its minified form.

Related Documentation