< H / $ > Хак/Собесов

Перейти на PRO

Какие знаешь способы оптимизации критического пути рендеринга

«Какие знаешь способы оптимизации критического пути рендеринга» — вопрос из категории HTML, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Тип вопроса: HTML Вероятность: 10% Категория: Frontend Разработчик

Ответ

Оптимизация критического пути рендеринга ускоряет отображение контента. Основные методы:

Минификация и сжатие ресурсов (HTML, CSS, JS)
Уменьшение CSS-блокировки:
- Использовать media-атрибуты (<link media="print">)
- Инлайнить критический CSS

    <style>/* критичные стили */</style>

Отложить неключевой JS:

    <script defer src="non-critical.js"></script>

Приоритезация видимого контента (Lazy Load нижележащих элементов)
Оптимизация шрифтов:
- font-display: swap
- Предзагрузка (<link rel="preload" href="font.woff2" as="font">)
Использование SSR/SSG для быстрого первого рендера

Пример порядка в <head>:

<head>
  <meta charset="UTF-8">
  <title>Критичный заголовок</title>
  <style>/* инлайновые стили */</style>
  <link rel="preload" href="font.woff2" as="font">
</head>