如何为首屏（Above the Fold）内容使用内联CSS优化加载性能

Hey there! Let’s break this down clearly for you, so you can tackle that performance optimization task with confidence.

First: Clarifying the Fold Concepts #

Your initial understanding is spot-on! The "fold" is the invisible line that splits a page into two parts:

• Above the Fold (首屏): The area users see immediately when they load the page, no scrolling required. This varies by device (desktop vs mobile, screen size) but we use common viewport sizes as a baseline.
• Below the Fold (尾屏): Everything that’s hidden until the user scrolls down.

And yes—your second question is correct too: we want to inline only the CSS needed for the above-the-fold content directly in the <head>, then load the rest of the CSS (for below-the-fold) in a way that doesn’t block initial page rendering.

Step-by-Step Optimization for Your Task #

Let’s apply this to your code specifically:

1. Extract Above-the-Fold CSS #

First, identify which parts of your page are above the fold:

• The <header class="header"> section
• The <div class="ribbon"> section (including its button)

Plus the base styles that affect these elements (html, body, h1, h2). Extract these into an inline <style> block:

html { background-color: #FFF; }
body { background-color: #FFF; color: #848484; font-family: "Helvetica","Arial",sans-serif; margin: 0; min-height: 100vh; }
h1 { font-size: 28px; font-weight: 100; }
h2 { color: #FFF; font-size: 38px; font-weight: 100; }
.header { align-items: center; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); display: flex; height: 10vh; padding: 0 16px; }
.ribbon { align-items: center; background-color: #848484; display: flex; flex-direction: column; height: 90vh; justify-content: space-around; }
.ribbon button { background-color: #FFF; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12); color: #848484; cursor: pointer; font-size: 25px; padding: 0.7em 0.57em; }

2. Modify Your HTML to Optimize Loading #

Update your <head> to inline the above CSS, and load the remaining CSS asynchronously (so it doesn’t block rendering):

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Socializer</title>
  <!-- Inline above-the-fold CSS for instant rendering -->
  <style>
    html { background-color: #FFF; }
    body { background-color: #FFF; color: #848484; font-family: "Helvetica","Arial",sans-serif; margin: 0; min-height: 100vh; }
    h1 { font-size: 28px; font-weight: 100; }
    h2 { color: #FFF; font-size: 38px; font-weight: 100; }
    .header { align-items: center; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); display: flex; height: 10vh; padding: 0 16px; }
    .ribbon { align-items: center; background-color: #848484; display: flex; flex-direction: column; height: 90vh; justify-content: space-around; }
    .ribbon button { background-color: #FFF; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12); color: #848484; cursor: pointer; font-size: 25px; padding: 0.7em 0.57em; }
  </style>
  <!-- Async load remaining CSS (below-the-fold) without blocking rendering -->
  <link rel="stylesheet" href="styles/main.css" media="print" onload="this.media='all'">
  <!-- Fallback for users with disabled JS -->
  <noscript><link rel="stylesheet" href="styles/main.css"></noscript>
  <!-- Optimize script loading with defer (matches your DOMContentLoaded logic) -->
  <script src="scripts/app.js" type="text/javascript" defer></script>
</head>

3. Clean Up main.css #

Remove the above-the-fold styles from main.css, leaving only the styles for below-the-fold content:

h3 { color: #000; font-size: 38px; font-weight: 100; line-height: 125%; margin: 0 40px; }
.card { margin: 0 auto; max-width: 79%; }
.card-content { align-items: center; box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2); display: flex; justify-content: space-around; padding: 10px; }
.conversation-diag { align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; }
.conversation-headline { color: #000; font-size: 38px; font-weight: 100; line-height: 125%; margin: 0 40px; }
.conversation-pane { display: flex; flex-direction: column; height: 40vh; justify-content: space-around; padding: 40px; }
.flipped { transform: scaleX(-1); }

Why This Works #

• Inline above-the-fold CSS: The browser doesn’t have to wait for an external file to download before rendering the first visible content, drastically improving perceived load speed.
• Async CSS loading: Using media="print" tells the browser this CSS isn’t critical for screen rendering, so it doesn’t block the page. Once loaded, onload="this.media='all'" applies the styles to the page.
• Deferred script: The defer attribute ensures your script runs after the DOM is fully loaded, matching your original DOMContentLoaded logic without blocking HTML parsing.

内容的提问来源于stack exchange，提问作者volna