Что такое блокировка рендеринга css?
Почему блокирующий рендеринг CSS это плохо?
Блокировка рендеринга css замедляет работу вашего сайта.
Независимо от того, как вы зарабатываете деньги на своем веб-сайте, быстрее означает больше денег.
Как устранить блокировку рендеринга css?
- Правильно вызывать свои файлы css
- Уменьшить количество файлов css в критическом пути
- Используйте меньше css в целом
В этой статье мы подробно рассмотрим каждый из этих вариантов и включим способы сделать это самостоятельно, полезные советы, которые помогут вашим дизайнерам или веб-мастерам сделать это за вас, а также достаточно проиллюстрируют проблемы, тогда вы понимете каждое решение.
Мы начнем с самой простой части решения... Правильный вызов ваших файлов css в соответствии с рекомендациями Google. 1
1. Как правильно вызывать CSS
CSS можно вызывать разными способами с вашей веб-страницы, и некоторые из них совершенно неуместны в нашем современном, быстром и мобильном мире.
Вот две вещи, на которые следует обращать внимание при вызове css.
Использование @import и неправильная маркировка css являются проблемами блокировки рендеринга, и каждую из них легко решить, давайте рассмотрим их подробнее.
Не используйте @import для вызова css
Проблема: этот метод вызова CSS плох, потому что он увеличивает время, необходимое для загрузки вашего CSS, прежде чем ваша страница сможет загрузиться.
Решение: Найдите вызовы @ import и замените их.
Подробности: Импорт CSS выглядит так и обычно находится в верхней части файла.
@import url("style.css")
Вместо того, чтобы вызывать этот css-файл с помощью метода импорта , лучше просто сохранить этот дополнительный css только в одном файле (скопируйте и вставьте импортированный css в исходный css-файл). Если по какой-то причине вы не можете этого сделать, включите эти css-файлы из html-файла, используя следующий код...
<link rel="stylesheet" href="style.css">
Не забудьте заменить «style.css» на местоположение и имя вашего файла CSS.
Правильно пометить условный css
Проблема: когда css помечен неправильно, браузер по умолчанию загружает все css перед отображением веб-страницы.
Решение. Правильно пометьте вызываемые css-файлы, чтобы браузер знал, что для начала рендеринга требуется не весь css.
Обнаружение: изучите свой html и посмотрите, как помечен ваш css (описано ниже).
Подробности: типичный файл css вызывается, как показано ниже:
<link href="style.css" rel="stylesheet">
В приведенном выше коде просто говорится «вот ссылка» и «ссылка для моего css».
Любой css, вызванный вышеописанным способом, всегда будет загружаться браузером до того, как что-либо отобразится на вашей веб-странице.
Теперь давайте рассмотрим пример файла css, который не нужно загружать перед рендерингом страницы, а именно инструкции css для печати...
<link href="print.css" rel="stylesheet" media="print">
Приведенный выше код говорит «вот ссылка», «ссылка для моего css», а также говорит «css только для печати».
Поскольку css был помечен как media="print", современные браузеры знают, что файл css не требуется для отображения страницы. В результате браузер присвоит этому файлу css более низкий приоритет. Он по-прежнему загрузит его, но сделает это таким образом, чтобы не блокировать рендеринг.
Давайте посмотрим на другую условную ситуацию, здесь у нас есть файл css, который используется, когда страница имеет определенную ширину:
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
Современные браузеры могут понять, что этот CSS-файл используется в одних ситуациях и не используется в других, поэтому браузер может не загружать этот CSS-файл перед рендерингом, если он не нужен.
2. Используйте меньше файлов CSS в критическом пути
Критический путь рендеринга — это еще один способ сказать «то, что браузер должен сделать перед отображением вашей веб-страницы».
Если вы правильно пометили свой css, как мы обсуждали выше, вы уже начали удалять файлы css с критического пути. Однако мы можем сделать гораздо больше.
Просто для ясности: здесь мы говорим о файлах css, таких как «main.css» и «page.css» и т. д., мы конкретно говорим о реальных файлах, в которых находится ваш css, а не о коде css, найденном внутри этих файлы.
Каждый физический файл, который вы можете удалить, ускорит загрузку вашей страницы.
В основном есть два способа использовать меньше файлов css.
Объединить css-файлы
Проблема: Каждый файл css, который использует ваша страница, увеличивает время загрузки вашей веб-страницы, требуя вызова дополнительного файла.
Решение: объедините файлы CSS в один файл (или два, в зависимости от того, насколько велик ваш CSS).
Подробности: веб-страница обычно содержит один большой файл CSS и несколько «вспомогательных» файлов CSS. Это происходит по многим причинам, например, сайт WordPress, на котором CSS вашего веб-дизайна находится в одном большом файле CSS, но добавляемые вами виджеты и плагины могут иметь небольшие файлы CSS, связанные с ними, которые загружаются отдельно от вашего основного файла CSS.
Это также происходит со статическими веб-сайтами, потому что многие веб-дизайнеры считают, что было бы хорошо иметь отдельные файлы css для ясности и простоты работы. К сожалению, это вызвало большие проблемы с производительностью в Интернете.
Хорошей новостью является то, что, поскольку очень часто приходится иметь несколько отдельных файлов css, можно получить большое преимущество в скорости по сравнению с вашими конкурентами, обратив внимание на эту проблему. Разница между загрузкой одного или двух файлов css вместо нескольких файлов css часто может сократить время загрузки страницы на секунду или больше.
Еще более важным, чем секунда, которую вы сохраняете, является тот факт, что уменьшение сложности вашего css позволяет другим вещам загружаться намного быстрее. Если вы зарабатываете деньги на Adsense, ваши объявления будут отображаться быстрее (поскольку им не нужно конкурировать с загружаемыми файлами css). Если вы хотите, чтобы пользователи вашего интернет-магазина максимально быстро работали, опять же, меньшее количество файлов css обеспечит гораздо более быструю и четкую работу для ваших пользователей.
Другими словами, когда вы думаете о повышении скорости страницы, каждая удаленная сложность позволяет не только сэкономить «х» времени, но и позволяет другим элементам ваших страниц работать очень хорошо.
Как комбинировать CSS
Чтобы объединить CSS, вы должны скопировать CSS из одного файла CSS и вставить его в другой. Как только вы это сделаете, вы должны удалить вызов для этого файла CSS.
На изображении выше мы взяли содержимое файлов «other.css» и « Third.css» и поместили их в файл «main.css». Сделав это, мы перешли от веб-страницы, для загрузки которой требовалось три файла css, к веб-странице, для загрузки которой требуется только один файл css.
Встроенные файлы CSS
Проблема: Каждый файл css, который использует ваша страница, увеличивает время загрузки вашей веб-страницы, требуя вызова дополнительного файла.
Решение: Удалите один файл css, поместив его в сам html.
Подробности: используя теги стиля html, инструкции css могут находиться внутри html-файла, а не во внешнем файле css.
Как встроить CSS
Чтобы встроить CSS, вы должны скопировать css из одного файла css и правильно вставить его в свой html-файл (это можно сделать только с небольшими файлами css, иначе ваш html-файл станет слишком большим). Как только вы это сделаете, вы должны удалить вызов для этого файла CSS.
На изображении выше мы взяли содержимое файла «small.css» и поместили его в файл HTML. Сделав это, мы перешли от веб-страницы, для загрузки которой требовалось два файла css, к веб-странице, для загрузки которой требуется только один файл css.
Встроенный css размещается в Head html-документа с помощью тегов стиля...
<style>
.... ваш css здесь .....
</style>
3. Используйте меньше css в целом
Легко сказать «используйте меньше css», но это очень сложно сделать.
Есть несколько причин, по которым на большинстве веб-сайтов загружается так много неиспользуемого CSS.
Какой бы ни была причина, по которой ваш css огромен, вам все равно нужно выяснить, как сделать его меньше и умнее.
Реальность
Если вы написали css или контролируете его, вы можете потратить время на то, чтобы включить только тот css, который необходим.
Однако более вероятно, что вы купили тему или дизайн у кого-то другого, и в этом случае единственное реальное решение — поговорить с дизайнером, который создал CSS, и запросить более тонкую версию.
Если вы рассматриваете новый дизайн или тему, вы можете сэкономить время и деньги, сделав оптимизированную доставку CSS обязательным требованием проекта.
Копать глубже
Если вы хотите узнать больше о том, как и почему CSS влияет на скорость загрузки вашей страницы, вы можете взглянуть на объектную модель CSS .
