Почему скрипт тормозит отрисовку страницы
Здравствуйте, уважаемые читатели сайта Uspei.com. Перед тем как браузер сможет отобразить страницу, он должен проанализировать всю разметку HTML. Во время этого процесса, когда браузер сталкивается со скриптом, он должен остановиться и выполнить его, прежде чем он сможет продолжить синтаксический анализ HTML.
В случае внешнего скрипта браузер также вынужден ждать загрузки этого внешнего скрипта, что может привести к одному или нескольким сетевым запросам и отложить время до первого отображения страницы.
Другими словами, JavaScript блокирует работу браузера по отрисовке страницы и, при всех своих достоинствах, может увеличить время загрузки страниц, создав разнообразные препятствия при их визуализации.
Нужно избегать и минимизировать блокировку загрузки страницы JavaScript, особенно если это внешние (подключаемые) скрипты, которые необходимо извлечь, прежде чем они смогут быть выполнены.
Чтобы избежать дополнительных сетевых запросов, скрипты, необходимые для отображения содержимого страницы, могут быть встроены в сам html, однако встроенный контент должен быть небольшим и должен быстро выполняться для обеспечения хорошей производительности.
Скрипты, которые не критичны для первоначальной отрисовки страницы, должны быть сделаны асинхронными или отложенными после начального рендеринга (отрисовки). Имейте в виду, что для повышения времени загрузки вы также должны оптимизировать доставку и CSS.
Встройте JavaScript в html
Как я уже сказал, внешние блокирующие скрипты заставляют браузер ждать, пока JavaScript будет извлечен, что может добавить один или несколько сетевых опросов, прежде чем страница будет отображаться. Если внешние скрипты небольшие, вы можете встроить их содержимое непосредственно в документ HTML и избежать лишних запросов. Например, если HTML-документ выглядит следующим образом:
<html> <head> <script src = "small.js" > </script> </head> <body> <div>Привет, мир!</ div> </body> </html>
И сам скрипт small.jsвыглядит так:
document.write(new Date().getFullYear())
То вы можете встроить скрипт таким образом:
<html> <head> <script> document.write(new Date().getFullYear()) </script> </head> <body> <div>Привет, мир!</div> </body> </html>
К стати, атрибут type = “text / javascript” можно не указывать.
Вложение содержимого скрипта исключает внешний запрос к small.js и позволяет браузеру более быстрее делать отрисовку.
Однако не забудьте, что вложение также увеличивает размер самого HTML-документа и может потребоваться, чтобы содержимое одного и того же сценария было встроено в несколько страниц.
В результате вы должны использовать непосредственно в коде html только небольшие скрипты для обеспечения максимальной производительности.
Сделайте загрузку JavaScript асинхронной (async)
Если скрипт нет возможности встроить в тело html документа из-за его размера – сделайте загрузку скрипта асинхронной с помощью атрибута внешних скриптов async. Это позволит браузеру не дожидаться загрузки скрипта и параллельно продолжать загрузку основного HTML кода и других ресурсов. В результате увеличивается скорость загрузки всего сайта. Например:
<script async src = "my.js">
Отложите загрузку JavaScript (defer)
Ну, а что делать, если два каких-то скрипта связаны между собой и один из них загрузится раньше чем нужно, например, скрипт my.js зависит от jQuery и он загрузится быстрее, тогда мы можем столкнуться с ошибкой.
Нам поможет атрибут script-тега – defer, он откладывает загрузку и выполнение этих файлов до тех пор, пока вся страница не будет загружена и отображена. При этом он гарантирует такой же порядок выполнения скриптов, который изначально и был установлен в html-коде:
<head>
...
<script defer src="my.js"></script>
<script async src="jquery.min.js"></script>
</head>
Проведите ревизию всех скриптов
Нужны ли вам все те скрипты, которые у вас подключены? Нужна ли вам подключенная библиотека jquery? Ведь она весит немало, а, возможно, вы ее совсем и не используете. Просмотрите все, используемые вами скрипты, и проведите ревизию. Возможно, от многих из них вы вообще откажетесь.
Объедините все скрипты в один
Также, с целью уменьшения количества сетевых запросов и ускорения загрузки страницы рекомендую объединить по возможности все оставшиеся скрипты в один, разделив их комментариями, чтобы не запутаться.
В него можно объединить код скриптов всех плагинов, jquery, внутренние скрипты темы, а также коды скриптов счетчиков. Только не забывайте про порядок загрузки скриптов (если один зависит от другого), а также то, что коды скриптов плагина и счетчиков регулярно обновляются и изменяются.
Загрузку полученного скрипта перенесите из раздела head в подвал страницы footer, если он не участвует в отрисовке страницы, а исполняет только функции элементов, необязательных при первоначальной отрисовке.