← Назад ко всем вопросам

Что такое critical CSS

1️⃣ Как кратко ответить

Critical CSS — это часть CSS, необходимая для рендеринга видимой части веб-страницы. Она загружается и применяется в первую очередь, чтобы ускорить отображение контента для пользователя, минимизируя время до первого отрисованного пикселя.

2️⃣ Подробное объяснение темы

Critical CSS — это концепция, направленная на оптимизацию скорости загрузки веб-страниц. Основная идея заключается в том, чтобы выделить и загрузить только те стили, которые необходимы для отображения видимой части страницы (above-the-fold content), прежде чем загружать остальные стили. Это позволяет пользователю быстрее увидеть содержимое страницы, улучшая пользовательский опыт.

Зачем это нужно

Когда пользователь открывает веб-страницу, браузер загружает HTML и CSS, чтобы отобразить страницу. Если CSS-файлы большие и содержат много стилей, которые не нужны для начального отображения, это может замедлить процесс рендеринга. Critical CSS помогает решить эту проблему, позволяя браузеру быстрее отобразить видимую часть страницы.

Как это работает

  1. Выделение критических стилей: Определите, какие стили необходимы для отображения видимой части страницы. Это можно сделать вручную или с помощью инструментов автоматизации.

  2. Встраивание критических стилей: Вставьте выделенные стили непосредственно в <head> HTML-документа. Это позволяет браузеру применить их сразу же, без необходимости загружать внешний CSS-файл.

  3. Асинхронная загрузка остальных стилей: Остальные стили загружаются асинхронно, чтобы не блокировать рендеринг страницы.

Пример

Рассмотрим пример HTML-документа с использованием critical CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Page</title>
    <!-- Встраивание критических стилей -->
    <style>
        /* Critical CSS */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 10px;
        }
    </style>
    <!-- Асинхронная загрузка остальных стилей -->
    <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <main>
        <p>This is the main content of the page.</p>
    </main>
</body>
</html>

  • Встраивание критических стилей: Внутри тега <style> в <head> мы определяем стили, которые необходимы для отображения заголовка страницы. Это позволяет браузеру сразу применить их, не дожидаясь загрузки внешнего CSS-файла.

  • Асинхронная загрузка остальных стилей: Внешний CSS-файл styles.css загружается асинхронно с помощью атрибута media="print" и onload="this.media='all'". Это позволяет сначала загрузить и применить критические стили, а затем загрузить остальные стили без блокировки рендеринга.

Critical CSS — это важная техника для оптимизации производительности веб-страниц, особенно на мобильных устройствах и при медленном интернет-соединении. Она помогает улучшить время загрузки и восприятие скорости работы сайта пользователем.

Тема: CSS
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки