Удалите код JavaScript, препятствующий показу страницы
Это правило срабатывает, когда PageSpeed Insights обнаруживает, что код HTML ссылается на блокирующий внешний файл JavaScript в верхней части страницы.Общая информация
Перед отображением страницы браузер должен выполнить ее синтаксический анализ. Если при этом он обнаруживает внешний скрипт, он должен его загрузить. Это лишний цикл операций, который замедляет показ страницы.Рекомендации
Код JavaScript, необходимый для отображения верхней части страницы, должен быть встроенным, а код, отвечающий за дополнительные функции, должен выполняться после загрузки верхних элементов. Обратите внимание, что для ускорения загрузки страниц необходимо также оптимизировать CSS.Встройте небольшие ресурсы 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 не блокировал загрузку страницы, используйте атрибут async. Например:
<script async src="my.js">
Если в ресурсах JavaScript используется метод document.write, использовать асинхронную загрузку небезопасно. Рекомендуется переписать скрипты с использованием других средств.
Кроме того, если на странице используются взаимозависимые скрипты, при асинхронной загрузке JavaScript убедитесь, что скрипты загружаются в правильном порядке.
Часто задаваемые вопросы
- Что, если я использую библиотеку JavaScript, например jQuery?
- Библиотеки JavaScript повышают интерактивность страницы, добавляют анимацию и другие эффекты. Но многие из этих функций безопасно использовать только после загрузки контента в верхней части страницы. Попробуйте отложить выполнение и выполнять код JavaScript после загрузки страницы.
- Что, если я использую среду JavaScript для создания страницы?
- Если содержание страницы создано кодом JavaScript на стороне клиента, попробуйте встроить соответствующие модули JavaScript, чтобы избежать лишних запросов к серверу. Кроме того, оптимизация обработки на стороне сервера может ускорить первую загрузку страницы. Обработайте шаблоны JavaScript на сервере, встройте результаты в HTML, а потом используйте шаблоны на стороне клиента после загрузки приложения. Чтобы получить более подробную информацию по обработке на стороне сервера, см. видео: http://youtu.be/VKTWdaupft0?t=14m28s.