Declare Stylesheets In Head

ID

html.stylesheets_at_top

Severity

info

Remediation Complexity

low

Remediation Risk

low

Remediation Effort

low

Resource

Efficiency

Language

Html

Tags

efficiency

Description

Flags a <link rel="stylesheet"> placed inside <body> instead of the document <head>.

Rationale

Stylesheets discovered in the body force the browser to recalculate styles and re-layout content that has already been rendered, causing a flash of unstyled content and avoidable reflow. Declaring all stylesheets in <head> lets the browser fetch them early and render the page once, styled.

<body>
  <link rel="stylesheet" href="a.css">    <!-- FLAW — stylesheet in body -->
</body>

<head>
  <link rel="stylesheet" href="a.css">    <!-- OK — stylesheet in head -->
</head>

Remediation

Move the <link rel="stylesheet"> element into the document <head>.