Как ускорить сайт на 20+ пунктов в PageSpeed: Практика по Critical CSS

Столкнулись с низкой оценкой в Google PageSpeed Insights из-за "ресурсов, блокирующих отрисовку"? В этой статье мы на реальном примере разберем, как с помощью технологии Critical CSS поднять производительность сайта с 65 до 84 баллов, и предоставим готовые скрипты для автоматизации процесса.

Проблема: Красная зона PageSpeed и "Render-Blocking CSS"

Каждый владелец сайта знает это неприятное чувство: вы вкладываете душу в дизайн и контент, а Google PageSpeed Insights показывает скромные 65 баллов для мобильных устройств. Основной виновник, как правило, один и тот же — ресурсы, блокирующие отрисовку.

"Render-Blocking Resources" — это файлы (чаще всего CSS и JavaScript), которые браузер должен полностью скачать и обработать, прежде чем он сможет показать пользователю хоть что-то на странице. Пока они загружаются, пользователь видит белый экран.

В нашем случае, отчет прямо указывал на файлы output.css и fonts.css, которые задерживали отрисовку на целых 2.2 секунды. Для современного интернета это вечность.

Решение: Магия Критического CSS

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

• Извлекаем "критические" стили. Это минимально необходимый CSS для отрисовки той части страницы, которую пользователь видит сразу, без прокрутки (шапка, меню, главный баннер).
• Встраиваем их прямо в HTML. Браузер получает эти стили мгновенно вместе с основным документом и сразу же рисует "верхушку" сайта.
• Откладываем загрузку остальных стилей. Полный файл output.css загружается в фоновом режиме и применяется, когда он будет готов, не мешая первичному отображению.

Результат? Пользователь видит контент почти мгновенно, а PageSpeed вознаграждает нас высокими баллами.

Шаг за шагом: Создаем свой генератор Critical CSS

Хватит теории, перейдем к практике. Мы создадим профессиональный автоматизированный скрипт на Node.js.

Шаг 1: Установка зависимостей

Для работы нам понадобится Node.js и библиотека critical. Откройте терминал в корне вашего проекта и выполните команду:

npm install critical --save-dev

При первом запуске на "чистом" сервере (в нашем случае Ubuntu 24.04) скрипт может выдать ошибку Failed to launch the browser process. Это значит, что ему не хватает системных библиотек для запуска невидимого браузера Chrome.

Решается это установкой недостающих пакетов. Для Ubuntu 24.04 "Noble" команда выглядит так:

sudo apt-get update && sudo apt-get install -y libx11-xcb1 libxcomposite1 libasound2t64 libatk1.0-0 libatk-bridge2.0-0 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgbm1 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libx11-6 libxcb1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 libnss3

Создайте в корне проекта файл generate-critical-css.js. Использовали код:

// generate-critical-css.js

// Используем современный синтаксис import
import { generate } from 'critical';
import { writeFile } from 'fs/promises'; // Используем промисы для работы с файлами

// Конфигурация осталась прежней
const config = {
    url: 'https://tech4mania.ru/',
    css: 'dist/output.css',
    destFile: 'dist/critical.css', // Сохраняем результат сразу в нужную папку
    width: 1300,
    height: 900,
    penthouse: {
        blockJSRequests: false,
    }
};

async function generateCriticalCSS() {
    try {
        console.log(`🚀 Начинаем генерацию критического CSS для ${config.url}...`);

        // Вызываем функцию generate, импортированную из 'critical'
        const { css } = await generate({
            base: 'dist/',
            src: config.url,
            css: [config.css],
            width: config.width,
            height: config.height,
        });

        // Асинхронно записываем результат в файл
        await writeFile(config.destFile, css, 'utf-8');

        console.log(`✅ Критический CSS успешно сгенерирован и сохранен в файл: ${config.destFile}`);

    } catch (error) {
        console.error('❌ Ошибка при генерации критического CSS:', error.message);
    }
}

generateCriticalCSS();

Не забудьте также добавить "type": "module" в ваш package.json, чтобы избежать предупреждений. Теперь вы можете генерировать актуальный критический CSS одной командой:

node generate-critical-css.js

Шаг 4: Интеграция с PHP

Осталось самое простое — подключить сгенерированный файл в includes/header.php, используя PHP для вставки содержимого файла dist/critical.css в тег <style> и отложив загрузку основных CSS-файлов.

<!-- Styles & Fonts -->
    <style>
    <?php
    // Проверяем, существует ли файл, и если да - вставляем его содержимое
    $critical_css_path = __DIR__ . '/../dist/critical.css';
    if (file_exists($critical_css_path)) {
        echo file_get_contents($critical_css_path);
    }
    ?>
    </style>

    <link rel="preload" href="/dist/output.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="/dist/output.css"></noscript>
    <link rel="preload" href="/dist/fonts.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="/dist/fonts.css"></noscript>

Результаты: С 65 до 84 баллов! 🚀

После внедрения этого метода мы повторно запустили тест в Google PageSpeed Insights. Результат превзошел ожидания:

• Оценка для мобильных устройств выросла с 65 до 84 баллов.
• Проблема "ресурсов, блокирующих отрисовку" была полностью решена.
• Показатели FCP (First Contentful Paint) и LCP (Largest Contentful Paint) значительно улучшились.

Это не просто цифры. Это означает, что пользователи видят контент быстрее, получают лучший опыт взаимодействия, а поисковые системы выше ранжируют сайт за его скорость и техническое совершенство.

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