Document

Google PageSpeed Insights: «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы»

В этой статье я расскажу, что означает рекомендация удалить блокирующие скрипты и стили и как её выполнить.

Это одна из наиболее распространенных проблем, которую я встречаю, анализируя веб-сайты. Решение данной задачи — один из самых сложных моментов при оптимизации скорости загрузки страницы, поскольку требует глубоких технических знаний.

Хочу обратить внимание – каждый сайт индивидуален. И если для одного сайта некоторые решения будут полезны, то для другого могут оказать негативное влияние.

Суть проблемы

Данное предупреждение срабатывает, когда в коде документа между тегами … обнаружены ссылки на внешние файлы javascript и css. И пока они не будут загружены, дальнейший рендеринг страницы не будет выполняться. Таким образом они блокируют вывод контента на странице.

Как удалить JavaScript, препятствующий отображению верхней части страницы

Большинство рекомендаций в Интернете сводятся к тому, чтобы перенести все скрипты в подвал сайта. Однако не стоит слепо выполнять эту рекомендацию — есть большая вероятность того, что функционал сайта будет нарушен:

• Для начала мы должны убедиться, что JavaScript не участвует в процессе отображения страницы.
• Скрипты небольшого размера размещаем в самом содержимом HTML страницы. Например:
• ‘ . file_get_contents($_SERVER[‘DOCUMENT_ROOT’] .’/smallscript.js’) . ‘‘; ?>
• Проверяем скрипты на зависимости и очередность загрузки. Если ни того, ни другого не имеется, то добавляем к ним атрибут «async»:
• Благодаря этому атрибуту такие скрипты будут загружаться асинхронно.

Данную инструкцию нельзя применять к библиотеке JQuery, которая используется в подавляющем большинстве сайтов. Далее рассмотрим правильное решение для JQuery.

Если поместить jquery.js перед закрывающим тегом или попытаться загрузить его асинхронно, то зависимые скрипты попросту перестанут работать и многие функции сайта «отвалятся». Правильным решением в данном случае может послужить использование события onload :

На популярных cms для решения таких задач используются плагины. Их принцип несколько отличается от описанного выше. Рассмотрим на примере Autoptimize для WordPress:

• Плагин объединяет все *.js и инлайновые скрипты в один файл. При этом очередность загрузки сохраняется.
• Единый файл подключается в подвале страницы с атрибутом async .

Вы так же можете использовать данный метод для самописных cms или сайтов на чистом HTML:

Блокирующие css – варианты решения

На данный момент самым новым способом решить эту проблему является использование стандартизированной директивы preload . Она позволяет браузерам получать style.css не блокируя рендеринг.

Первооткрывателем этого способа был Scott Jehl, дизайнер и разработчик из The Filament Group.

Несомненно, будущее за этим решением. Но, к сожалению, в настоящее время еще не все браузеры поддерживают preload .

Поэтому мы не будем сейчас обсуждать этот метод более подробно, а рассмотрим консервативный способ.

Смысл этого метода заключается в том, чтобы поместить в секцию head самые важные фрагменты стилей (critical css), которые необходимы для первоначальной отрисовки страницы. В свою очередь, основные файлы css будут загружаться после загрузки контента. Большинство новичков допускают серьезную ошибку на этом этапе, и вставляют все имеющиеся стили в документ. Это не только не решает ситуацию, но и усугубляет ее.

Правильное решение:

Контент страницы

.

Еще одной распространенной ошибкой является создание большого количества правил для критического css. Это характерно для сайтов с большим количеством контента на странице – разнообразные слайдеры, виджеты и прочее. Если мы уменьшим количество правил, страница будет дергаться. Если увеличим – получим предупреждение «Оптимизируйте загрузку видимого контента». В этом случае я бы рекомендовал объединить все стили в один файл и подключить традиционным способом.

В заключение хочу добавить, что Google PageSpeed – хороший инструмент для выявления проблемных мест вашего сайта. Но при анализе он не учитывает его индивидуальных особенностей. Поэтому самый главный совет: подходите обдуманно к выполнению его рекомендаций!

Источник

CSS, JavaScript и блокировка парсинга веб-страниц

Недавно мне попался материал, посвящённый проблеме загрузки CSS-файлов, которая замедляет обработку материалов страниц. Я читал ту статью, стремясь научиться чему-то новому, но мне показалось, что то, о чём там говорилось, не вполне соответствует истине. Поэтому я провёл собственное исследование этой темы и поэкспериментировал с загрузкой CSS и JavaScript.

Может ли загрузка CSS-ресурсов блокировать парсинг страницы?

Прежде всего скажу, что на вопрос из заголовка этого раздела можно, без всякого сомнения, дать положительный ответ. Загрузка CSS-файлов способна не только заблокировать парсинг HTML-кода, но и не дать выполняться JavaScript-коду.

Для начала предлагаю поэкспериментировать. Для этого нам понадобится соответствующим образом настроить браузер. CSS-файл мы будем загружать с CDN, поэтому ограничим скорость работы с сетью в браузере Google Chrome. Для этого, на вкладке инструментов разработчика Performance , поменяем значение параметра Network на Slow 3G . Исследовать будем следующую страницу:

           
hello
   

CSS-файл мы загружаем с CDN, при этом, так как скорость подключения к интернету искусственно ограничена, загрузка стилей займёт некоторое время. В результате до загрузки CSS-файла ничего не попадёт в консоль JavaScript и на экран не будет выведено содержимое страницы. То, что мы видим, указывает на то, что загрузка CSS блокирует загрузку и обработку других материалов страницы.

Вывод данных в JS-консоль

Может ли загрузка и выполнение JS-кода блокировать парсинг страницы?

Загрузка и обработка JS-файлов, безусловно, блокирует парсинг страницы. Но, чтобы исправить эту проблему, при подключении скриптов к странице можно пользоваться атрибутами defer и async тега . Сейчас мы изучим их воздействие на загрузку страницы.

▍Обычные загрузка и выполнение скрипта

Если в теге не используются атрибуты async или defer — процесс загрузки и обработки материалов страницы происходит так, как показано на следующей схеме. Загрузка JS-файлов и выполнение содержащегося в них кода блокирует парсинг HTML-кода.

Использование тега без атрибутов async и defer

Здесь и далее мы будем пользоваться следующими цветовыми обозначениями.

HTML parsing — Парсинг HTML; HTML parsing paused — Парсинг HTML приостановлен; Script download — Загрузка скрипта; Script execution — Выполнение скрипта

▍Использование тега с атрибутом async

Когда браузер обрабатывает тег с атрибутом async , загрузка JavaScript-кода осуществляется в асинхронном режиме. Код скрипта выполняется сразу после загрузки. При этом выполнение JS-кода блокирует парсинг HTML.

Использование тега с атрибутом async

▍Использование тега с атрибутом defer

Если в теге имеется атрибут defer — код скрипта загружается асинхронно. При этом код, после завершения его загрузки, выполняется только тогда, когда будет завершён парсинг HTML-кода.

Использование тега с атрибутом defer

Эксперименты

Давайте поэкспериментируем с атрибутами async и defer . Начнём со следующей страницы:

           
hello world
    

Эта страница, помимо загрузки скрипта jquery-1.4.4.min.js с CDN, загружает пару собственных скриптов — index.js и index2.js . Ниже приведён их код.

В ходе загрузки этой страницы в JS-консоль попадает то, что показано ниже.

Вывод данных в JS-консоль

В результате у нас есть доказательство того, что загрузка и обработка JS-файлов блокирует рендеринг HTML-кода. Сообщения, выводимые скриптами, появляются в консоли до сообщения, указывающего на завершение загрузки содержимого DOM.

Теперь посмотрим на то, как ведут себя скрипты, в тегах которых используется атрибут :

             
hello world
    

Изучим то, что попадёт в консоль.

Вывод данных в JS-консоль

Скрипт библиотеки jQuery загружается асинхронно. То, что попадает в консоль, выводится там до его загрузки. Если скрипт библиотеки загружается слишком медленно — это не помешает парсингу HTML-кода. Сообщение DOMContentLoaded может быть выведено и до, и после завершения загрузки и выполнения async-скрипта. А при применении атрибута defer скрипт будет загружен асинхронно, дождётся завершения обработки материалов документа, а потом, но — до события DOMContentLoaded , будет выполнен.

Если вам интересна тема оптимизации веб-страниц с учётом возможной блокировки обработки их кода при загрузке внешних стилей — возможно, вам стоит взглянуть на этот материал.

Сталкивались ли вы с проблемами, связанными с блокировкой обработки материалов веб-страниц?

Источник