В этой статье я расскажу, что означает рекомендация удалить блокирующие скрипты и стили и как её выполнить.
Это одна из наиболее распространенных проблем, которую я встречаю, анализируя веб-сайты. Решение данной задачи - один из самых сложных моментов при оптимизации скорости загрузки страницы, поскольку требует глубоких технических знаний.
Хочу обратить внимание – каждый сайт индивидуален. И если для одного сайта некоторые решения будут полезны, то для другого могут оказать негативное влияние.
Суть проблемы
Данное предупреждение срабатывает, когда в коде документа между тегами <head>…</head> обнаружены ссылки на внешние файлы javascript и css. И пока они не будут загружены, дальнейший рендеринг страницы не будет выполняться. Таким образом они блокируют вывод контента на странице.
Как удалить JavaScript, препятствующий отображению верхней части страницы
Большинство рекомендаций в Интернете сводятся к тому, чтобы перенести все скрипты в подвал сайта. Однако не стоит слепо выполнять эту рекомендацию - есть большая вероятность того, что функционал сайта будет нарушен:
- Для начала мы должны убедиться, что JavaScript не участвует в процессе отображения страницы.
- Скрипты небольшого размера размещаем в самом содержимом HTML страницы. Например:
echo '<script>' . file_get_contents($_SERVER['DOCUMENT_ROOT'] .'/smallscript.js') . '</script>'; - Проверяем скрипты на зависимости и очередность загрузки. Если ни того, ни другого не имеется, то добавляем к ним атрибут «async»:
<script async src="script.js"></script> - Благодаря этому атрибуту такие скрипты будут загружаться асинхронно.
Данную инструкцию нельзя применять к библиотеке JQuery, которая используется в подавляющем большинстве сайтов. Далее рассмотрим правильное решение для JQuery.
Если поместить jquery.js перед закрывающим тегом </body> или попытаться загрузить его асинхронно, то зависимые скрипты попросту перестанут работать и многие функции сайта «отвалятся». Правильным решением в данном случае может послужить использование события onload:
<script>
function asyncjs() {
…
}
</script>
<script src="jquery.js" async onload="asyncjs()"></script>
На популярных cms для решения таких задач используются плагины. Их принцип несколько отличается от описанного выше. Рассмотрим на примере Autoptimize для Wordpress:
- Плагин объединяет все
*.jsи инлайновые скрипты в один файл. При этом очередность загрузки сохраняется. - Единый файл подключается в подвале страницы с атрибутом
async.
Вы так же можете использовать данный метод для самописных cms или сайтов на чистом HTML:
<script src="allscripts.js" async></script>
Блокирующие css – варианты решения
На данный момент самым новым способом решить эту проблему является использование стандартизированной директивы preload. Она позволяет браузерам получать style.css не блокируя рендеринг.
Первооткрывателем этого способа был Scott Jehl, дизайнер и разработчик из The Filament Group.
<link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'">
Несомненно, будущее за этим решением. Но, к сожалению, в настоящее время еще не все браузеры поддерживают preload.
Поэтому мы не будем сейчас обсуждать этот метод более подробно, а рассмотрим консервативный способ.
Смысл этого метода заключается в том, чтобы поместить в секцию head самые важные фрагменты стилей (critical css), которые необходимы для первоначальной отрисовки страницы. В свою очередь, основные файлы css будут загружаться после загрузки контента. Большинство новичков допускают серьезную ошибку на этом этапе, и вставляют все имеющиеся стили в документ. Это не только не решает ситуацию, но и усугубляет ее.
Правильное решение:
<html>
<head>
<style>
/*Критический css*/
h1 {text-align: center; color: #ccc }
</style>
</head>
<body>
<h1>Контент страницы</h1>
...
<!-- Подключаем основные файлы стилей при помощи JQuery -->
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("head").append("<link rel='stylesheet' href='styles.css' />");
});
</script>
</body>
</html>
Еще одной распространенной ошибкой является создание большого количества правил для критического css. Это характерно для сайтов с большим количеством контента на странице – разнообразные слайдеры, виджеты и прочее. Если мы уменьшим количество правил, страница будет дергаться. Если увеличим – получим предупреждение «Оптимизируйте загрузку видимого контента». В этом случае я бы рекомендовал объединить все стили в один файл и подключить традиционным способом.
В заключение хочу добавить, что Google PageSpeed – хороший инструмент для выявления проблемных мест вашего сайта. Но при анализе он не учитывает его индивидуальных особенностей. Поэтому самый главный совет: подходите обдуманно к выполнению его рекомендаций!