Как отложить загрузку js

Эффективная загрузка стороннего кода JavaScript

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

Удалить скрипт, если он не приносит явную пользу сайту.

Оптимизировать процесс загрузки.

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

Заблаговременное создание подключений к требуемым источникам

Оптимизация передачи сторонних скриптов

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

Так как синхронные скрипты задерживают создание DOM и рендеринг, следует всегда загружать сторонние скрипты асинхронно за исключением случаев, когда нужно запускать скрипт до рендеринга страницы.

Атрибуты async и defer сообщают браузеру, что он может продолжить синтаксический анализ HTML во время загрузки скрипта в фоновом режиме и выполнить этот скрипт по окончании его загрузки. Таким образом, загрузка скрипта не будет мешать создавать модель DOM и выполнять рендеринг страницы. В результате можно будет отобразить страницу для пользователя еще до завершения загрузки всех скриптов.

Разница между атрибутами async и defer появляется тогда, когда дело доходит до выполнения скриптов.

async #

Скрипты с атрибутом async выполняются при первой возможности после завершения их загрузки и до появления события load окна. Соответственно, возможно (и вероятно), скрипты с атрибутом async не будут выполняться в том порядке, в котором они появляются в HTML. Это также означает, что они могут прервать процесс создания DOM, если их загрузка будет завершена во время работы средства синтаксического анализа.

defer #

Скрипты с атрибутом defer выполняются после полного завершения синтаксического анализа HTML, но до появления события DOMContentLoaded . При использовании атрибута defer скрипты будут гарантированно выполняться в том порядке, в котором они появляются в HTML, и не будут блокировать работу средства синтаксического анализа.

Используйте атрибут async , если важно, чтобы скрипт выполнялся на ранних этапах процесса загрузки.

Используйте атрибут defer для менее важных ресурсов. Например, для видеоплеера в части страницы, расположенной за пределами экрана.

Используя эти атрибуты, можно значительно ускорить загрузку страницы. Например, недавно на веб-сайте Telegraph стали отложенными все скрипты, в том числе связанные с рекламными объявлениями и аналитикой, после чего время загрузки рекламных объявлений уменьшилось в среднем на четыре секунды.

Создание заблаговременных подключений к необходимым источникам #

Вы можете сэкономить 100–500 мс, заблаговременно создавая подключения к важным сторонним источникам.

preconnect #

Атрибут &LTlink rel=»preconnect»> сообщает браузеру, что страница намеревается создать подключение к другому источнику и что нужно начать этот процесс как можно скорее. При создании запроса на получение ресурса из предварительно подключенного источника загрузка начинается немедленно.

Внимание

dns-prefetch #

Атрибут &LTlink rel preconnect»> . При создании подключения выполняется поиск DNS и подтверждение TCP, а для безопасных источников — согласование TLS. Атрибут dns-prefetch сообщает браузеру, что нужно только сопоставлять DNS определенного домена до совершения явного вызова к нему.

Атрибут preconnect лучше всего использовать только для самых важных подключений; для менее важных сторонних доменов используйте атрибут &LTlink rel=dns-prefetch> .

Браузеры поддерживают атрибут dns-prefetch немного по-другому, чем атрибут preconnect , поэтому атрибут dns-prefetch можно использовать в качестве резервного варианта для браузеров, которые не поддерживают атрибут preconnect . Для безопасной реализации этого подхода используйте отдельные теги ссылок:

Отложенная загрузка сторонних ресурсов #

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

Один из эффективных методов — отложенная загрузка стороннего контента после загрузки содержимого главной страницы. Этот метод хорошо подходит для рекламных объявлений.

Рекламные объявления — важный источник дохода для многих сайтов, но пользователи приходят за контентом. За счет отложенной загрузки рекламных объявлений и более быстрой доставки основного контента вы можете увеличить общий процент просмотра объявления. Например, сайт MediaVine перешел на отложенную загрузку рекламных объявлений, после чего скорость загрузки страниц сайта увеличилась на 200%. В официальной документации DoubleClick есть руководство по отложенной загрузке объявлений.

Альтернативный метод — загружать сторонний контент только тогда, когда пользователи прокручивают страницу вниз до соответствующего раздела.

Intersection Observer — это API браузера, который эффективно определяет, когда элемент входит в окно просмотра браузера и выходит из него. Его можно использовать для реализации этого метода. lazysizes — это популярная библиотека JavaScript для отложенной загрузки изображений и элементов iframe . Она поддерживает внедренные элементы YouTube и виджеты. В ней также имеется дополнительная поддержка API IntersectionObserver.

Внимание

Использование атрибута loading для отложенной загрузки изображений и элементов iframe — отличная альтернатива методам с использованием JavaScript, и недавно этот атрибут стал доступен в Chrome 76.

Оптимизация передачи сторонних скриптов #

Размещение скриптов в сторонних CDN #

Сторонние поставщики часто предоставляют URL-адреса размещаемых у них файлов JavaScript (обычно они размещены в сетях доставки контента [CDN]). Преимущество такого подхода заключается в том, что вы можете быстро начать использовать скрипты — достаточно скопировать и вставить URL-адрес. При этом у вас не будет дополнительных затрат на обслуживание. Сторонний поставщик выполняет настройку сервера и обновляет скрипты.

Но так как скрипты не находятся в том же источнике, что и остальные ваши ресурсы, для загрузки файлов из общедоступных CDN требуются затраты на передачу данных по сети. Браузеру необходимо выполнить поиск в DNS, создать подключение HTTP и (при использовании защищенных источников) выполнить подтверждение SSL для сервера поставщика.

Когда вы используете файлы со сторонних серверов, вы можете контролировать кеширование только в редких случаях. Использование чужой стратегии кэширования может привести к слишком частому повторному получению скриптов по сети.

Размещение сторонних скриптов на собственном ресурсе #

• Уменьшение времени поиска DNS и кругового пути.
• Улучшение HTTP-кэширования заголовков.
• Использование операций push сервера HTTP/2.

Например, веб-сайту Casper удалось уменьшить время загрузки на 1,7 секунды, разместив скрипт A/B-тестирования на собственном ресурсе.

Тем не менее у размещения скриптов на собственных ресурсах есть один большой недостаток: скрипты могут устаревать и не будут получать автоматические обновления (при изменении API) или исправления для системы безопасности.

Внимание

Использование служебных сценариев для кеширования скриптов со сторонних серверов #

Альтернатива размещению скриптов на собственных ресурсах, которая позволяет лучше управлять кешированием и при этом пользоваться преимуществами сторонних CDN, — использование служебных сценариев для кэширования скриптов со сторонних серверов. Вы сможете управлять периодичностью повторной загрузки скриптов из сети и создать стратегию загрузки, с помощью которой можно будет ограничивать запросы к несущественным сторонним ресурсам до тех пор, пока страница не достигнет ключевого для пользователя момента. В этом случае можно в некоторой степени уменьшить расходы на передачу данных по сети, создавая заблаговременные подключения с использованием атрибута preconnect .

Руководство: как увеличить скорость загрузки страницы со скриптами с помощью defer и async

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

Это адаптированный перевод статьи Efficiently load JavaScript with defer and async из блога проекта flaviocopes. Повествование ведется от лица автора оригинала.

Расположение имеет значение

Стандартный способ встраивания скрипта в HTML-код страницы выглядит так:

Каждый раз, когда встретится такая или похожая строка, будет выполнен запрос на получение данных файла, а парсер продолжит свою работу после выполнения скрипта.

Классический подход к обучению HTML предполагает, что теги скрипта должны находиться в <head> :

Однако такой подход приводит к задержкам при загрузке страницы. Когда анализатор доходит до строки со скриптом, он на время останавливается для его извлечения и выполнения, и только после этого переходит к разбору <body> .

Распространенное решение проблемы — перенос скрипта в нижнюю часть страницы, перед закрывающим тегом <body> . В этом случае скрипт выполняется после того, как вся страница уже проанализирована до тега.

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

async и defer

Прежде чем начать, стоит уточнить, что использование обоих атрибутов накладывает некоторые ограничения, а приведенное ниже руководство по времени загрузки — не исчерпывающее. С некоторыми ограничениями async и defer можно ознакомиться здесь.

Синтаксически и async и defer — булевые атрибуты, которые используются следующим образом:

Если в коде есть оба атрибута, async имеет приоритет и выполняется в первую очередь в современных версиях браузеров. В старых версиях, напротив, приоритет будет отдан defer .

Проверить совместимость атрибутов с разными версиями браузеров можно по этим таблицам: раз и два

Важно отметить, что оба атрибута стоит использовать только в верхней части страницы (в <head> ): перенос в <body> делает их совершенно бесполезными.

Производительность

Если async и defer отсутствуют в <head>

Синтаксический анализатор прекращает работу до тех пор, пока скрипт не будет выполнен. Как только этот процесс завершится, анализ продолжится.

Читайте также: Как сохранять фокус на протяжении всего обучения: советы от Хекслета

Если async и defer отсутствуют в <body>

Парсинг выполняется без пауз: сразу по его завершению загружается и выполняется скрипт. Синтаксический анализ выполняется еще до загрузки скрипта, поэтому страница загружается быстрее, чем в предыдущем случае.

Если async находится в <head>

Сценарий загружается асинхронно, а синтаксический анализатор приостанавливает работу на время его выполнения.

Если defer находится в <head>

Скрипт извлекается асинхронно и выполняется только после завершения анализа HTML.

Парсинг проходит с той же скоростью, как если бы скрипт находился в конце тега body , но в целом выполнение скрипта завершается намного раньше, поскольку он загружается параллельно с парсингом HTML. Таким образом этот вариант — наиболее выигрышный с точки зрения скорости загрузки страницы.

Блокировка синтаксического анализа

async приостанавливает синтаксический анализ страницы, а defer — нет.

Блокировка рендеринга

Ни async , ни defer не блокируют рендеринг — этот процесс полностью зависит от кода на странице. Поэтому важно убедиться, что сценарии запускаются после события onLoad .

domInteractive

Скрипты defer выполняются сразу после события domInteractive . Последнее, в свою очередь, происходит после загрузки, анализа и построения DOM HTML.

СSS и изображения на этом этапе еще не проанализированы и не загружены: как только это произойдет, браузер сначала выдаст событие domComplete , а затем — onLoad .

Порядок выполнения

Еще один аргумент за использование defer — скрипты, помеченные как async , выполняются в случайном порядке, тогда как скрипты с defer — в строго определенном.

Как ускорить загрузку страницы

Лучший способ — прописать скрипты в <head> и добавить атрибут defer в тег script . Этот сценарий быстро запускает событие domInteractive :

Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях

Загрузка JavaScript(без блокировки отрисовки документа, асинхронная загрузка)

С ростом скорости интернет соединения и увеличении мощности не только десктопных, но и мобильных устройств веб страницы стают более «тяжелыми». Количество и размер подключаемых файлов растет: JavaScript файлы, css файлы, изображения, виджеты сторонних сайтов, iframe. На данный момент специфика работы браузеров такая, что при загрузке js файла блокируется отривсовка до того момента, пока скрипт не выполниться. Современные браузеры в фоновом режиме будут парсить документ и скачивать скрипты и стили, но отрисовка будет заблокирована. Сравнение сетевых параметров для различных браузеров можно посмотреть на browserscope.org. Мы не можем устранить блокировку полностью, но можем оптимизировать серверную и клиентскую часть приложения, что бы блокировка отрисовки занимала наименьший промежуток времени.

Решения для серверной части:
— Уменьшить размер передаваемых файлов
— Использовать CDN
— Вынести статические файлы на отдельный домен или под домен, таким образом увеличить количество одновременных соединений браузера.
— Включить сжатие передаваемых файлов(gzip)

Решения для клиентской части:
— Уменьшить количество запросов.
— Кэшировать файлы на стороне клиента с помощью заголовков Expires и Etags.
— Использовать общедоступные CDN(Google CDN, Yandex CDN). Таким образом, существует вероятность, что файл с общедоступного CDN уже будет храниться в кеше браузера.
— Асинхронная загрузка подключаемых файлов.

Одним из способов оптимизации скорости загрузки сайта является асинхронная загрузка файлов, которая не блокирует отрисовку.

Скрипт асинхронной загрузки JavaScript:

Если JavaScript нужно выполнить после загрузки всей страницы, включая содержание, изображения, стилевые файлы и внешние скрипты, то к загрузчику нужно добавить отслеживания события onload.

Скрипт асинхронной загрузки JavaScript с учетом события onload

Но это единичный случай, когда требуется загрузка одного файла. Часто на практике подключается множество файлов.

Скрипт асинхронной загрузки множества подключаемых JavaScript файлов

Но в такой реализации есть минус — скрипты будут загружаться в произвольном порядке и соответсвенно выполнятся они будут произвольно во времени. Данный скрипт асинхронной загрузки идеально подходит, если выполнение JavaScript файлов не зависят один от другого и не зависит от DOM. В обратном случае его использование может привести к ошибкам на странице или непредвиденному результату выполнения. Для последовательного выполнения, но асинхронной загрузки, нужно указать async=false, тогда файлы будут скачиваться в произвольном порядке, но выполняться по очереди.

HTML 5. Асинхронная загрузка JavaScript

Стандарт HTML 5 поддерживает асинхронную загрузку JavaScript. Это можно сделать путем добавления ключевого слова async или defer. Например:

В обеих вариантах загрузка javascript будет асинхронной. Разница состоит только в начале времени выполнения скрипта.

Скрипт, который подключен с атрибутом defer выполнится не нарушая порядок выполнения по отношению к остальным скриптам и его выполнение произойдет после полной загрузки и парсинга страницы, но перед тем, как вызовется DOMContentLoaded.

Скрипт, который подключен с атрибутом async выполнится при первой возможности после полной загрузки, но при этом не ожидает окончания парсинга документа и до загрузки объекта window. Браузеры не гарантируют выполнение скриптов в том же порядке в котором они подключены.

Библиотеки для асинхронной загрузки JavaScript

RequireJS — модуль загрузки JavaScript. Оптимизирован под браузеры, но он может использоваться в других средах, таких как Node, Rhino.