Удалить JavaScript, блокирующий рендеринг

Это правило срабатывает, когда PageSpeed ​​Insights обнаруживает, что ваш HTML ссылается на блокирующий внешний файл JavaScript в верхней части вашей страницы.

Обзор

Прежде чем браузер сможет отобразить страницу, он должен построить дерево DOM путем анализа разметки HTML. Во время этого процесса всякий раз, когда анализатор встречает сценарий, он должен остановить и выполнить его, прежде чем продолжить анализ HTML. В случае внешнего скрипта синтаксический анализатор также вынужден ждать загрузки ресурса, что может привести к одному или нескольким сетевым обходам и задержке времени первого рендеринга страницы. См. раздел «Добавление интерактивности с помощью JavaScript» , чтобы узнать больше о том, как JavaScript влияет на критический путь рендеринга.

Рекомендации

Вам следует избегать и минимизировать использование блокировки JavaScript, особенно внешних скриптов, которые необходимо получить до их выполнения. Скрипты, необходимые для отображения содержимого страницы, можно встроить, чтобы избежать дополнительных сетевых запросов, однако встроенный контент должен быть небольшим и должен выполняться быстро, чтобы обеспечить хорошую производительность. Скрипты, которые не имеют решающего значения для первоначального рендеринга, следует сделать асинхронными или отложить до первого рендеринга. Имейте в виду, что для сокращения времени загрузки вам также необходимо оптимизировать доставку CSS .

Встроенный JavaScript

Сценарии внешней блокировки заставляют браузер ждать загрузки JavaScript, что может добавить один или несколько сетевых циклов, прежде чем страница сможет быть отображена. Если внешние сценарии небольшие, вы можете встроить их содержимое непосредственно в HTML-документ и избежать задержки сетевых запросов. Например, если HTML-документ выглядит так:
<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
 А ресурс small.js выглядит так:
  /* contents of a small JavaScript file */
 Затем вы можете встроить скрипт следующим образом:
<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
 Встраивание содержимого скрипта исключает внешний запрос small.js и позволяет браузеру ускорить первый рендеринг. Однако обратите внимание, что встраивание также увеличивает размер HTML-документа и что одно и то же содержимое сценария может потребоваться встроить на несколько страниц. В результате вам следует встраивать только небольшие сценарии, чтобы обеспечить максимальную производительность.

Сделать JavaScript асинхронным

По умолчанию JavaScript блокирует построение DOM и, таким образом, задерживает время первого рендеринга. Чтобы предотвратить блокировку синтаксического анализатора JavaScript, мы рекомендуем использовать атрибут HTML async во внешних скриптах. Например:
<script async src="my.js">
См. раздел Блокировка парсера и асинхронный JavaScript, чтобы узнать больше об асинхронных скриптах. Обратите внимание, что асинхронные сценарии не гарантированно выполняются в указанном порядке и не должны использовать document.write . Сценарии, которые зависят от порядка выполнения или требуют доступа или изменения DOM или CSSOM страницы, возможно, придется переписать с учетом этих ограничений.

Отложить загрузку JavaScript

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

Часто задаваемые вопросы

Что, если я использую библиотеку JavaScript, например jQuery?
Многие библиотеки JavaScript, такие как JQuery, используются для улучшения страницы, добавляя дополнительную интерактивность, анимацию и другие эффекты. Однако многие из этих вариантов поведения можно безопасно добавить после отрисовки содержимого верхней части страницы. Попробуйте сделать такой JavaScript асинхронным или отложите его загрузку.
Что, если для создания страницы я использую фреймворк JavaScript?
Если содержимое страницы создано с помощью клиентского JavaScript, вам следует изучить возможность встраивания соответствующих модулей JavaScript, чтобы избежать дополнительных сетевых обращений. Аналогичным образом, использование рендеринга на стороне сервера может значительно повысить производительность загрузки первой страницы: визуализировать шаблоны JavaScript на сервере, чтобы обеспечить быстрый первый рендеринг, а затем использовать шаблоны на стороне клиента после загрузки страницы. Дополнительную информацию о рендеринге на стороне сервера см. http://youtu.be/VKTWdaupft0?t=14m28s .

Обратная связь

Была ли эта страница полезной?