Использовать директивы предзагрузки: preconnect, dns-prefetch, preload, prefetch, prerender.
| Директива | Описание | Пример |
|---|---|---|
preconnect | Устанавливает соединение (DNS lookup, TCP handshake, TLS negotiation) с другим источником данных заранее. | <link rel="preconnect" href="https://cdn.example.com"> |
dns-prefetch | Выполняет разрешение доменного имени заранее. | <link rel="dns-prefetch" href="//api.example.com"> |
preload | Запрашивает ресурс (JS, CSS, шрифты) заранее с высоким приоритетом, не блокируя рендеринг. | <link rel="preload" href="/styles.css" as="style"> |
prefetch | Запрашивает ресурс, который скорее всего понадобится в будущем (например, на следующей странице). | <link rel="prefetch" href="/next_page.html"> |
prerender | Рендерит следующую страницу в скрытой вкладке заранее. | <link rel="prerender" href="/upcoming_page.html"> |
Использовать атрибут async или defer для тега <script> для асинхронной загрузки и выполнения скриптов, не блокируя парсинг HTML:
htmlИспользовать атрибут loading="lazy" для изображений и <iframe> для их отложенной загрузки, когда они попадают в область видимости:
htmlОптимизировать изображения (сжимать, использовать современные форматы вроде WebP), шрифты (подмножества, форматы WOFF/WOFF2) и другие ресурсы.
Минифицировать и сжимать CSS, JavaScript и HTML.
Использовать Service Worker для кеширования ресурсов и обеспечения офлайн-доступа.
Разбивать большой JavaScript-код на более мелкие части (code splitting) и загружать их по требованию.
Использовать HTTP/2 и HTTP/3 для более эффективного мультиплексирования и сжатия заголовков.
Устанавливать правильные заголовки кеширования (Cache-Control, Expires) на сервере.
Использовать <link rel="modulepreload"> для предзагрузки модулей JavaScript ES.
html