Render-blocking элементы приостанавливают загрузку страницы до того момента, пока не будет загружен какой-то внешний ресурс. Например, загрузка CSS:
<link rel="stylesheet" href="/styles.css" />
Когда браузер встретит эту инструкцию, он приостановит показ страницы, и будет ждать окончания загрузки файлы styles.css. Все это время посетитель будет видеть белую страницу.
Если человек впервые попадает на Ваш сайта это может быть проблемой. Вместо того, чтобы загрузить и показать HTML, браузер вынужден сделать несколько дополнительных запросов перед тем, как показать посетителю результат.
На страницах приземления от внешних стилей лучше избавляться. Вместо них лучше использовать встроенные стили, которые будут содержать только используемые на странице селекторы:
<html>
<head>
<title>[Хд] Как делать быстрые и большие сайты</title>
<link rel="stylesheet" href="/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body { margin: 0 }
h1 { color: #444; }
* и другие стили используемые на этой странице
</style>
</head>
</body>
...
Страница приземления
...
</body>
</html> Убираем внешнюю загрузку CSS и используем встроенные стили
CSS Extractor позволит вырезать нужные стили. Для этого достаточно просто указать URL страницы и инструмент покажет набор стилей, которые используются только для нее.
После этого Вы просто вставляете показанные стили в тег style и обеспечиваете более эффективную работу сайта для новых посетителей.
Этот текст был написан несколько лет назад. С тех пор упомянутые здесь инструменты и софт могли получить обновления. Пожалуйста, проверяйте их актуальность.
Visual Code от Microsoft, вероятно, один из самых популярных редакторов кода. Разработчики любят его за…
Япония сама по себе — сплошной киберпанк. Это заметил даже культовый писатель жанра Уильям Гибсон,…
Сам по себе телефон Айфон 17 Про Макс – отличный подарок. У него красивая заводская…
На фоне роста спроса на ликвидность в бычьем рынке 2025 года, криптозаймы снова выходят на…
Прокси (proxy), или прокси-сервер — это программа-посредник, которая обеспечивает соединение между пользователем и интернет-ресурсом. Принцип…
Согласитесь, было бы неплохо соединить в одно сайт и приложение для смартфона. Если вы еще…