Web Performance Optimization & Lighthouse · レッスン

クリティカルCSSとCSS配信

クリティカルCSSを抽出してHTMLにインライン化し、残りのスタイルシートの配信を最適化してレンダリングを高速化します。

レッスン 1/411 ステップ

「クリティカルCSSとCSS配信」はCoddyKit上の無料Web Performance Optimization & Lighthouseレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはWeb Performance Optimization & Lighthouse学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Performance Optimization & Lighthouseコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Introduction to Critical CSS

When a browser loads a webpage, it needs to download and process all CSS files before it can display any content. This is known as render-blocking CSS.

This lesson explores how to deliver the essential styles needed for the initial view of your page quickly, making your website feel much faster to users.

Understanding Render-Blocking CSS

Imagine waiting for a book to be fully bound and covered before you can read even the first page. That's similar to how external CSS files can block rendering.

The browser must download all CSS.
It then processes these styles.
Only after this can it paint the page.

This delay directly impacts your website's First Contentful Paint (FCP) and Largest Contentful Paint (LCP) scores.

What is Critical CSS?

Critical CSS refers to the minimum set of CSS rules required to render the content that is immediately visible to the user when they first load your page. This is often called the 'above-the-fold' content.

By delivering these essential styles first, users see meaningful content much sooner, improving perceived performance.

Benefits of Critical CSS

Implementing Critical CSS offers several key advantages:

Faster Initial Render: Users see content quicker.
Improved User Experience: Less waiting, more engagement.
Better Core Web Vitals: Positive impact on FCP and LCP scores.
SEO Benefits: Search engines favor faster-loading pages.

It's a crucial step in optimizing your site's loading speed.

Identifying Critical Styles

How do you find which CSS is 'critical'? You need to analyze the styles applied to content visible in the initial viewport.

Browser DevTools: Use the 'Coverage' tab to find unused CSS.
Automated Tools: Libraries like PurgeCSS or critical-path-css-tools can help extract this automatically.
Manual Inspection: For smaller sites, you can manually identify key styles.

The goal is to extract only what's absolutely necessary for the first screen.

Inlining Critical CSS

Once you've identified your critical CSS, the next step is to inline it. This means embedding the CSS directly into the HTML document, specifically within a <style> tag in the <head> section.

This allows the browser to render the initial content without waiting for an external CSS file to download.

Example: Inlining Critical CSS

Here's how you might inline critical CSS for a simple header and hero section. Notice the <style> tag in the <head>.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Critical CSS Example</title>
  <style>
    body { font-family: sans-serif; margin: 0; }
    .header { background-color: #f0f0f0; padding: 20px; text-align: center; }
    .hero { background-color: #e0e0e0; padding: 50px; text-align: center; }
    .hero h1 { color: #333; font-size: 2em; }
  </style>
  <!-- Non-critical CSS will be loaded later -->
</head>
<body>
  <header class="header">My Website</header>
  <main>
    <section class="hero">
      <h1>Welcome!</h1>
      <p>This content loads fast.</p>
    </section>
    <!-- More content below the fold -->
  </main>
</body>
</html>

Loading Remaining CSS Asynchronously

After inlining critical CSS, you still have the rest of your stylesheets. These non-critical styles should be loaded asynchronously, meaning they don't block the initial render.

A common technique involves using <link rel="preload"> combined with an onload event handler to ensure the stylesheet is applied only after it's loaded.

Example: Async CSS Loading

This snippet shows how to load styles.css asynchronously. It first preloads the CSS, then applies it to the document once loaded, preventing render-blocking.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Async CSS Example</title>
  <style>
    /* Critical CSS here */
  </style>
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
<body>
  <!-- Content -->
</body>
</html>

Test Your Knowledge

What are the primary benefits of implementing Critical CSS and loading remaining stylesheets asynchronously?

対話的なレッスンで答える

Recap: Faster CSS Delivery

You've learned how to optimize CSS delivery for a faster loading experience!

Critical CSS is key for above-the-fold content.
Inlining these styles prevents render-blocking.
Asynchronous loading handles the rest of your CSS efficiently.

By implementing these strategies, you can dramatically improve your website's perceived performance and Core Web Vitals.

無料で開始

AI チューターと学ぶ Web Performance Optimization & Lighthouse — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 12
レッスン: 48

無料で学習を始めるコース全体を表示

よくある質問

「クリティカルCSSとCSS配信」レッスンは無料ですか？

はい。「クリティカルCSSとCSS配信」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Performance Optimization & Lighthouseコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Performance Optimization & Lighthouseコースには全4レッスンが含まれています。

「クリティカルCSSとCSS配信」で何を学びますか？

クリティカルCSSを抽出してHTMLにインライン化し、残りのスタイルシートの配信を最適化してレンダリングを高速化します。ブラウザで直接実行するハンズオンコードでWeb Performance Optimization & Lighthouseを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Web Performance Optimization & Lighthouseを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのWeb Performance Optimization & Lighthouseは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「クリティカルCSSとCSS配信」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWeb Performance Optimization & Lighthouseレッスンでコードを書いて実行できますか？

はい。すべてのWeb Performance Optimization & Lighthouseレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Web Performance Optimization & Lighthouseに戻る