Отложенная загрузка JavaScript

22.01.2016 в категории Скорость загрузки сайта на wp 0 3

Отложенная загрузка JavaScript это одна из задач во фронтенд-разработке, от которой вам реально захочется рвать себе волосы на голове.

Некоторые вам скажут “просто используй defer” или “просто используй async”, а другие посоветуют “просто положить ваши скрипты в конце страницы”.

Не один из вышеперечисленных советов не является фактическим решением проблемы: сначала загрузить целиком и только потом начать загрузку внешних JS-скриптов. И не один не поможет вам пройти предупреждение “Отложите загрузку javascript” инструмента Google PageSpeed. Но решение представленное в этой статье будет и является рекомендуемым решением из справочных страниц Google.
Как отложить загрузку JavaScript?

Нижеприведенный код является рекомендуемым Google. Этот код должен вставляться прямо перед закрывающим тегом (в конце вашей страницы). Я выделил название внешнего js-файла.

<script type=«text/javascript»>
function downloadJSAtOnload() {
var element = document.createElement(«script»);
element.src = «test.js»;
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener(«load», downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent(«onload», downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Что этот код делает?

Этот код говорит браузеру: “Сначала дождись полной загрузки страницы, а потом загрузи внешний файл test.js”.
Инструкции к применению:

Скопируйте код выше.
Вставьте код прямо перед закрывающим тегом .
Измените “test.js” на имя вашего внешнего js-файла.
Убедитесь, что путь к вашему файлу прописан правильно, относительно html-страницы.

Для чего вы можете или не можете использовать этот код?

Этот код не будет загружать скрипты до того, как вся страница не загрузится. Из этого следует, что вы не должны его использовать для загрузки скриптов, которых требует страница при загрузке. Вы должны разделить свой скрипты на две группы. Первая, это скрипты, которые необходимы странице при его загрузке, вторая – это javascript, который делает что-то после загрузки страницы (например, обработчик клика на кнопку). Весь javascript, который может подождать пока страница загрузится должны быть перенесены в один файл, который вы будете загружать с помощью кода, приведенного выше.

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

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

Почему это так важно?

Это важно потому что Google судит о времени загрузки страницы, как о факторе ранжирования в поисковой системе и потому что пользователи хотят чтобы страницы всегда загружались как можно быстрее. Google измеряет скорость загрузки страницы с начала запроса на нее и времени, когда она начинает отображаться. Это означает, что вы должны стараться чтобы страница начала загружалась настолько быстро, насколько это вообще возможно. Этот начальный момент времени загрузки страницы является тем, что Google использует для оценки вашей веб-страницы (и давайте не будем забывать что и пользователи будут ждать, чтобы страница начала рисоваться немендленно). Google активно продвигает приоритизацию видимой части страницы и тем самым рекомендует положить инлайном все необходимые стили и скрипты для видимой части вашего сайта, чтобы браузер первым запросом мог получить все необходимое для того, чтобы начать немендленное отображение страницы. И если это делает счастливыми ваших пользователей и делает счастливым Google, то вам наверняка стоит сделать это.

Ключевой момент

Нашим главным приоритетом должно быть обеспечение получения пользователем нужного контента, как можно быстрее. Юзер не должен ждать загрузки какого-то скрипта, который находится далеком вне поле его зрения (например в футере), чтобы получить контент, за которым он пришел.

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

Источник: http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

© 2014-2017 г.
POWERED BY MSSITE.RU