Сообщение "Удалите код JavaScript, препятствующий показу страницы" появляется когда PageSpeed Insights обнаруживает, что код HTML ссылается на блокирующий внешний файл JavaScript в верхней части страницы.
Перед отображением страницы браузер должен выполнить ее синтаксический анализ. Если при этом он обнаруживает внешний скрипт, он должен его загрузить. Это лишний цикл операций, который замедляет показ страницы.
Код JavaScript, необходимый для отображения верхней части страницы, должен быть встроенным, а код, отвечающий за дополнительные функции, должен выполняться после загрузки верхних элементов. Обратите внимание, что для ускорения загрузки страниц необходимо также оптимизировать CSS.
Если внешние скрипты имеют небольшой размер, их можно включить в документ HTML. Подобное встраивание позволяет браузеру продолжать загрузку страницы. Например, если HTML выглядит следующим образом:
Для исключения излишек и объединения кода можно воспользоваться Webpack 2 или Rollup
А в "подвале", после подключения JQuery, еще один скрипт:
Перед отображением страницы браузер должен выполнить ее синтаксический анализ. Если при этом он обнаруживает внешний скрипт, он должен его загрузить. Это лишний цикл операций, который замедляет показ страницы.
Код JavaScript, необходимый для отображения верхней части страницы, должен быть встроенным, а код, отвечающий за дополнительные функции, должен выполняться после загрузки верхних элементов. Обратите внимание, что для ускорения загрузки страниц необходимо также оптимизировать CSS.
Если внешние скрипты имеют небольшой размер, их можно включить в документ HTML. Подобное встраивание позволяет браузеру продолжать загрузку страницы. Например, если HTML выглядит следующим образом:
<html>а ресурс small.js выглядит так:
<head>
<script type="text/javascript" src="small.js"></script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
/* contents of a small JavaScript file */то этот скрипт можно встроить, как показано ниже:
<html>Это избавит от необходимости выполнять внешний запрос small.js, так как он располагается внутри документа HTML.
<head>
<script type="text/javascript">
/* contents of a small JavaScript file */
</script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
Отложите загрузку кода JavaScript
Об асинхронной загрузке скриптов можно прочитать тут.Объединение скриптов
Использование большого количества небольших подключаемых файлов скриптов может сильно снизить производительность.Для исключения излишек и объединения кода можно воспользоваться Webpack 2 или Rollup
Минификация
Для оптимизации JavaScript можно использовать Closure Compiler, JSMin или YUI Compressor. Можно запускать скрипты по расписанию, переименовывать файлы и сохранять их в рабочий каталог.Подключение JQuery
Подключение библиотеки JQuery тоже должно происходить в "подвале". Это сопряжено с рядом трудностей. Чтобы метод ready корректно работал, можно использовать заглушку от Colin Gourlay. В шапку сайта добавляем скрипт:А в "подвале", после подключения JQuery, еще один скрипт:
Комментарии
Отправить комментарий