Оптимизация загрузки через preload
Немножко поигрался с оптимизацией через <link rel="preload">.
Скорость загрузки выросла так, что некоторые сканеры теперь выдают ошибку. Во всяком случае, я так это понял
Логика простая:
• preconnect + dns-prefetch — заранее готовят соединение с CDN (первое — для современных браузеров, второе — на всякий случай для старых)
• preload — говорит браузеру: «начинай загружать ресурс сразу, не дожидаясь, пока до него дойдёт парсер»* Это упрощённо. Реально приоритеты сложнее.
• stylesheet — уже применяет загруженный CSS
Прим: preload инициирует раннюю загрузку ресурса, но сам по себе не применяет.
Конструкция в <head> выглядит так:
<link rel="preconnect" href="https://ВАШ_CDN.ru" crossorigin>
<link rel="dns-prefetch" href="https://ВАШ_CDN.ru">
<link rel="preload" as="style" href="https://ВАШ_CDN.ru/css/all.min.css">
<link rel="stylesheet" href="https://ВАШ_CDN.ru/css/all.min.css" crossorigin>
Казалось бы, небольшая правка.
А вот результат:
| Параметр | Результат |
|---|---|
| Скорость загрузки | ~0.19 сек |
| Доступность | 100% |
| Нагрузка | от 5 до 50 concurrent пользователей |
| Успешных ответов | 550 из 550 |
Проверка выполнялась на loaddy.com
Что по технике:
Если ресурс сначала подключается через preload, а потом как stylesheet, браузер действительно начинает загрузку на раннем этапе, не дожидаясь полного парсинга HTML.
Некоторые инструменты типа PageSpeed могут ругаться на «неиспользуемый CSS» (если анализ поверхностный) или на то, что preload применяется не к критическим ресурсам.
Во многом это зависит от того, как именно инструмент анализирует страницу. В реальной загрузке всё работает корректно.
Тонкие настройки — тоже важны.
Там секунда, здесь полсекунды — в сумме получается та самая скорость, которая уже влияет и на конверсию, и на доверие к сайту.
К слову, этот блог сделан на Hugo. Для таких вещей статические генераторы — отличный вариант: минимум лишней логики, полный контроль над загрузкой.
На более сложных проектах — с динамикой, авторизацией и каталогами — без CMS и мощных производительных серверов уже не обойтись. Там такая оптимизация требует больше ресурсов: кэширование, настройка сервера, работа с архитектурой.
Но сам подход с preconnect и preload остаётся рабочим в любом случае.
Если кто-то использует похожие подходы или знает, как это можно улучшить — буду рад обсудить.
*P.S. Если что — чукча не программист. Чукча любитель и осваивает специальности по мере необходимости. Но результат вроде получился, и это главное.