отложить загрузку скрипта до полной загрузки страницы
Отложить загрузку скрипта до полной загрузки страницы
Существует весьма простой способ отложить загрузку скриптов сайта для повышения балла в Google PageSpeed Insights. Как мне кажется, первое что приходит в голову это использовать setTimeout(). Ниже приведу реальный пример, который поднял балл в PageSpeed Insights с 60+ до 90+.
Код JivoSite в оригинале выглядет так:
Приведем это к более читаемому виду:
Скрипт в анонимной функции, которая выполняется сразу. Для того чтобы отсрочить выполнение функции, обзовем как-нибудь анонимную функцию и вызовем ее потом с помощью setTimeout()
function jivo ()
<
var widget_id = ‘0UbgArqBIb’;
var d=document;
var w=window;
function l()
<
var s = document.createElement(‘script’);
s.type = ‘text/javascript’;
s.async = true;
s.src = ‘//code.jivosite.com/script/geo-widget/’+widget_id;
var ss = document.getElementsByTagName(‘script’)[0];
ss.parentNode.insertBefore(s, ss);
>
if(d.readyState==’complete’)
<
l();
>
else
<
if(w.attachEvent)
<
w.attachEvent(‘onload’,l);
>
else
<
w.addEventListener(‘load’,l,false);
>
>
>
Именно в таком формате. Если использовать setTimeout(jivo(),4500); функция jivo() будет вызываться сразу. Форма JivoSite появляется через 5 секунд после загрузки страницы, что никак не мешает пользователю.
Также это можно реализовать с помощью JQuery, вызывая выполнение скрипта после завершения загрузки страницы:
Асинхронная загрузка CSS и JavaScript
Асинхронная загрузка внешних CSS- и JS-ресурсов способствует увеличению скорости загрузки сайта и отображения веб-страниц в браузере, обеспечивая загрузку и выполнение файлов в фоновом режиме без блокировки рендеринга
Содержание
Прежде, чем приступать к реализации асинхронной загрузки CSS- и JS-файлов, рекомендуем ознакомиться со значением структуры кода веб-страниц по отношению к скорости загрузки сайта.
Что такое асинхронная загрузка?
Процесс отображения страницы сайта в браузере сопровождается задержками (Render Blocking) всякий раз, когда браузер обнаруживает внешние CSS- и JS-ресурсы в тегах link и script соответственно. Это приводит к тому, что некоторое время пользователь находится в ожидании отображения веб-страницы на экране до момента, пока не загрузятся и не выполнятся файлы, препятствующие её отображению.
Например, блок head веб-страницы имеет следующее содержание:
Во избежание задержки отображения страницы применяется асинхронная загрузка файлов CSS и JavaScript, обеспечивающая безостановочный процесс отображения страницы в браузере.
Асинхронная загрузка JavaScript
Тег SCRIPT без атрибутов (синхронная загрузка JS)
Задержка рендеринга страницы в браузере обеспечивает выполнение скриптов в порядке их указания в HTML-коде.
Тег SCRIPT с атрибутом ASYNC (асинхронная загрузка JS)
Атрибут async обеспечивает асинхронную загрузку внешнего JS-файла: файл будет загружен и выполнен в фоновом режиме без задержки отображения страницы.
При применении тегов script с атрибутом async следует помнить, что порядок выполнения скриптов (если JS-файлов несколько) не сохраняется: они будут выполняться по окончании их загрузки вне зависимости от их порядка в HTML-коде. Это может привести к ошибкам и несрабатыванию скриптов.
Решением является объединение кода всех JS-файлов в один, или применение атрибута defer, если проблема касается только внешних файлов.
Тег SCRIPT с атрибутом DEFER (отложенная загрузка JS)
Атрибут defer обеспечивает отложенную загрузку внешнего JS-файла: файл будет загружен без задержки отображения страницы и выполнен по окончанию рендеринга.
Следует учитывать, что атрибут defer (как и async ) не откладывает выполнение встроенных в страницу скриптов: они будут проанализированы браузером и в случае, если файл JS-библиотеки, которую они используют, не будет загружен и исполнен, то и скрипты будут проигнорированы:
Для сайтов на CMS
Асинхронная загрузка CSS
Загрузка и обработка браузером внешних файлов стилей также сопровождается блокировкой рендеринга страницы, избежать которую можно посредством их асинхронной загрузки. Сложность в том, что реализовать асинхронную загрузку CSS с помощью атрибутов тега, как это делается для JS-файлов, нельзя. Решить поставленную задачу можно различными способами с помощью JavaScript.
Посредством JS
Обеспечить асинхронную загрузку внешних CSS-файлов можно с помощью JavaScript без применения сторонних библиотек.
Для этого можно использовать следующую JS-функцию:
После объявления функции в коде нужно её вызвать соответствующее количеству CSS-файлов число раз:
Для применения данного способа разместите функцию и её вызов(ы) в теге script перед закрывающим тегом body :
С помощью jQuery
Если на странице применяется JS-библиотека jQuery, то для асинхронной загрузки CSS-файла можно применить следующий код:
Если требуется асинхронно загрузить несколько файлов стилей, нужно перечислить их в JS-функции:
При этом, если JS-файл с jQuery будет загружаться асинхронно (с применением атрибута async или defer ), то скрипт асинхронной загрузки CSS также не сработает, т. к. парсер браузера уже минует данный скрипт, не имея данных для его выполнения (jQuery в этот момент будет только на стадии загрузки):
Чтобы асинхронно загрузить JavaScript (jQuery) и CSS, можно применить следующий приём:
С помощью скрипта headJS
Существует ряд скриптов, созданных для реализации асинхронной загрузки как CSS-файлов, так и JS-файлов. Одним из таких скриптов является headJS.
Для его применения нужно скачать JS-файл и подключить его к странице:
Все перечисленные файлы будут асинхронно загружены и выполнены в указанном порядке.
Чтобы загружать асинхронно в том числе скрипт headJS, можно применить следующий способ:
Т. к. все перечисленные способы реализации асинхронной загрузки CSS-файлов реализуются посредством JavaScript, для подстраховки в код желательно вставить ссылки на эти файлы в теге noscript на случай, если браузер не выполняет JS-код:
Отложенная загрузка стилей
Каждый из предложенных способов откладывает загрузку стилей, в результате сперва происходит отрисовка страницы без их применения, после чего стили резко применяются, преображая страницу.
Для сайтов на CMS
Обеспечить асинхронную загрузку CSS для сайтов на Joomla, WordPress, Magento и Drupal можно с помощью платной версии плагина JCH Optimize.
Плагин JCH Optimize Pro способен:
Выводы и заключение
Асинхронная загрузка:
Скрипты для отложенной загрузки кода внешних сервисов
Новые скрипты для отложенной загрузки кода внешних сервисов, чтобы, в итоге, сократить время загрузки сайта в целом. Предлагаю Вам те наработки, что в данное время использую сам.
Хочу еще раз напомнить — в марте 2021 года, Google, вместо советов и рекомендаций, введет уже реальные требования к скорости загрузки страниц сайта, которые скажутся на их ранжировании в выдаче поисковых систем.
Читайте в одной из статей этой рубрики — Оптимизация сайта под требования PageSpeed Insights.
Внешние сервисы, блокирующие скорость загрузки сайта.
На всех сайтах, особенно больших, очень много стороннего кода, так называемых трекеров. Это коды внешних сервисов, подключенных к сайту — маркетинговые инструменты, инструменты аналитики, А/В-тестирования.
Их можно распознать на любом сайте (наличие и количество), поставив расширение Ghostery в браузер Google Chrome.
Владельцы сайтов не хотят их отключать, но и не знают, что с ними делать. Не каждый может вложиться в разработку собственной системы аналитики — это дорого.
Кроме трекинговых утилит, куки-отслеживателей, Яндекс-метрики, Google-аналитики, Roistat и т. д., есть еще и отдельные сервисы для создания поп-апов (pop-up), квизов (Quiz — викторина), чатов, виджетов, кнопок социальных сетей (типа AddThis), где есть и своя аналитика.
О применении скриптов асинхронной загрузки виджетов, читайте в предыдущем посту — Оптимизация асинхронной загрузки кода виджетов социальных сетей.
Многое можно было сделать самостоятельно на стороне сайта. В место этого люди подключают внешние сервисы. Где не минимизированные Java-скрипты и CSS-стили, ничего не кэшируется.
Это уже беда 21 века.
С каждым днем таких сервисов становиться больше, а сайты, которые их используют, растут в геометрической прогрессии.
Вот здесь, как раз и кроется основная проблема быстродействия сайтов. Внешние скрипты блокируют основной поток, мешают взаимодействию сайта с пользователем.
Показатель TTI — время до взаимодействия с пользователем (PageSpeed Insights) равен 20, а то и 50 секунд. Представляете, сколько ресурсов тратится теми же гаджетами, пока загружается сайт — батарея садится.
Подключение сторонних сервисов.
Сторонние сервисы нужно подключать во многом не так, как предлагают их инструкции.
Использовать отложенную загрузка скриптов по времени, подключать тогда, когда пользователь выполнил какое-то действие — скролл (scroll), сенсорный старт (touch start), щелчок мыши (mousedown), изменение размеров окна (resize) и другие.
Знакомство человека с сайтом всегда начинается со скролла сайта, его визуальной оценки.
Тормозить могут внешние коды, выполняющие задачи, ненужные для первого взаимодействия с посетителем.
Особенно, когда подгружаются некоторые скрипты, необходимые только для настольного компьютера (desktop), а в мобильной версии только грузят процессор.
А теперь, конкретно, перейдем к рассмотрению скриптов для отложенной загрузки аналитических сервисов Google Analytics и Яндекс-метрики.
Скрипты для отложенной загрузки кода Google Analytics.
Потребность в использовании отдельного скрипта для отложенной загрузки кода Google Analytics возникает не всегда.
Усовершенствуя инструменты тестирования PageSpeed Insights скорости загрузки страниц сайтов, Google позаботился и о своих кодах аналитики — применив функцию асинхронной загрузки asunc.
Совсем недавно Google предложил заменить тег Google Аналитики ( analytics.js ) на новый тег ( gtag.js ). Вы его можете увидеть и прочитать о его преимуществах в своем аккаунте.
Это скрипт, который подключается самостоятельно или через Google Tag Manager.
Вот его пример:
Во многих Темах-шаблонах WordPress, особенно Premium, предусмотрена вставка кода, и загрузка его уже оптимизирована. Но не везде. А также на сайтах, созданных программистами под заказ, продающих одностраничников — Landing Page.
Три варианта скрипта для отложенной загрузки кода.
А.Белогородцев, из LOADING.express, предложил три варианта скрипта для отложенной загрузки кода аналитики — отдельно для Google Analytics, Яндекс-метрики и универсальный для всех.
Здесь пример кода подключения Google Analytics для отложенной загрузки, в котором указан src:
Нельзя же, весь код аналитики туда вставить.
Код, который дает Google Analytics, в скрипте оборачиваем в дополнительный Тайм-аут. Не забываем вписать значение ID (UA-XXXXXXXX) вашего кода аналитики.
Время отложенной загрузки в скрипте 5000 м/сек — 5 секунд.
Параметр времени выставляете сами — по результатам тестирования, чтобы сам код не блокировал основной поток (минимальное время).
В этот скрипт, через src, можно подставлять и другие коды от Google, с каждой строки отдельно. С одним лишь условием — время отложенной загрузки скрипта одинаково.
Если время разное, значит и скрипты отдельные.
Есть еще и Универсальный вариант скрипта — своего рода обвертка, используемая здесь.
Через него можно откладывать все внешние скрипты: вроде живосайта, метрики, аналитики, обратные звонки, коллтрекинги и так далее.
Все три скрипта, и отдельно варианты для WordPress, можно скачать в Учебном разделе сайта Centr-Sit-Info Уровень Profi-bizblog.
И не только это. Любые дополнительные материалы — Premium-темы, плагины для WordPress.
Скрипт для отложенной загрузки кода Яндекс-метрики.
Скрипт для отложенной загрузки кода Яндекс-метрики, один из самых востребованных. До сих пор идут дискуссии в Рунете — может ли код метрики тормозить загрузку сайта?
Яндекс-метрика, действительно, может очень сильно блокировать основной поток.
Самой настройкой функционала метрики замедлить сайт нельзя. Даже, если вы не включаете веб-визор (тепловые-карты), они все равно грузятся — код выполняется.
Единственное, что на каждый клик не будут отправляться запросы о действиях пользователей. Но и это не так страшно — запросы не так замедляют скорость сайта, как сам код метрики.
А если там не только Яндекс-метрика?
Передавайте привет Яндексу — когда он, наконец-то представит новый оптимизированный код метрики для всех своих пользователей.
Код должен быть меньше, выполняться в разы быстрее — не так сильно тормозить сайт.
Скрипт для отложенной загрузки кода Яндекс-метрики, по типу обвертки, почти идентичен скрипту Google Analytics, с небольшой разницей.
В новом скрипте, код, который дает сервис Яндекс-метрика, так же оборачивается в дополнительный Timeout.
Время отложенной загрузки в скрипте выставляется исходя из результатов тестирования, чтобы сам код не блокировал основной поток (время минимальное).
В коде подставляется только свой ID счетчика метрики.
Когда будет отложено время выполнения Яндекс-метрики, при замере скорости на PageSpeed, вы увидите, чем на самом деле — еще параллельно, в основном потоке блокируется сайт — ранее скрытый внешний скрипт, который тормозит.
Для отображения счетчика в виджете сайта WordPress, используется код informer — верхняя часть из кода Яндекс-метрики самого сервиса:
Вместо ХХХХХХХХ подставляете номер (ID) вашего счетчика.
Сам код и его WordPress версию, как я уже писал выше, можно скачать, зарегистрировавшись в Учебном разделе сайта Centr-Sit-Info Уровень Profi-bizblog.
В этот скрипт можно вставить не только метрику, но и онлайн-консультант, чат.
Чаты, вообще, можно откладывать на 10 секунд — это минимальное время, когда посетитель начнет с ним какие-либо действия.
Кстати, когда чат появляется через определенное время, он больше привлекает к себе внимание.
Очень важно! Скрипты для отложенной загрузки кода внешних сервисов, которые здесь предлагаются, созданы специально для Web-мастеров. Отнеситесь к ним очень внимательно.
То есть, это образцы — общие примеры применения.
Вам в помощь версия видео-урока из раздела Profi-bizblog:
Весь набор скриптов от LOADING.express предназначен для всех сайтов, любой CMS. Выбор того или иного вида скрипта зависит от структуры вашего сайта, его движка.
Возможно нужно будет что-то изменить.
Обязательно тестируйте скрипты на работоспособность. Проверка тех же счетчиков Яндекс-метрики на правильность подключения. Она очень капризна.
Иногда бывает несовместимость с каким-либо кодом. Особенно в свете последних кардинальных обновлений того же WordPress, за которым не успевают разработчики плагинов.
Продолжение темы об оптимизации HTML, Java-скриптов и кода стилей CSS, их асинхронной или отложенной загрузке, удаление неиспользуемого кода, читайте в следующей статье.
Если возникли сопутствующие вопросы или нужна дополнительная информация? — пишите в комментариях – рад буду помочь.
Подписывайтесь на обновления Sit-Info, чтобы вовремя знать о выходе нового поста.
Не забываете нажать на кнопку Поделиться в социальных сетях.
Как “Отложить” Загрузку JavaScript на Сайте WordPress
Введение
Есть несколько причин для того, чтобы “отложить” (парсинг) загрузку JavaScript на сайте WordPress. Самой важной, станет скорость и производительность сайта. В основном JavaScript находится между тегами и когда сайт открывается, он загружает весь код, начиная с самого верха и донизу. Это означает, что большое количество скриптов или длинных строк увеличит время загрузки сайта и появления его контента, так как сначала ему необходимо полностью загрузить все JavaScript. Откладывая парсинг JavaScript, сайт не будет ждать загрузки JS кода, что выльется в более быстрое время загрузки сайта. В этом руководстве мы рассмотрим два способа для “откладывания” загрузки JavaScript в WordPress.
Что вам понадобится
Перед тем, как вы начнете это руководство, вам понадобится следующее:
Шаг 1 — Анализ сайта
Чтобы выяснить, необходимо ли вам применить это руководство, вы можете проанализировать ваш WordPress используя инструмент GTMetrix.
Средняя рекомендованная оценка в GTMetrix должна быть не менее 71%. Вот результаты тестового сайта на WordPress:
Шаг 2 — «Откладывание» загрузки JavaScript на сайте WordPress
На выбор есть несколько способов, которые помогут вам «отложить» загрузку JS на вашем сайте WordPress.
ВАЖНО! Убедитесь, что перед началом сделали резервное копирование сайта.
Вариант 1 – «Откладывание» загрузки JavaScript через плагины WordPress
Использование WordPress плагинов, таких как WP Deferred JavaScript, является одним из самых легких и быстрых путей для «откладывания» загрузки JS на сайте WordPress.
Еще один плагин который поможет вам в этом деле, это Speed Booster Pack. Помимо основного своего предназначения, он также предлагает вам несколько дополнительных методов оптимизации вашего WordPress.
После установки Speed Booster Pack вам необходимо перейти в раздел Settings (Настройки) плагина.
Отметить флажком Defer parsing of javascript files и нажать Save Changes (Сохранить изменения).
В случае если вы не знаете, как устанавливать плагины WordPress, вы можете найти детальное руководство по этому вопросу здесь.
Вариант 2 – «Откладывание» загрузки JavaScript через functions.php
Для этого, вы должны скопировать данный код в нижнюю часть вашего файла wp-includes/functions.php:
Шаг 3 — Проверка изменений
Используйте тот же инструмент для проверки работы сайта WordPress снова. Здесь представлены результаты после проведенных манипуляций:
Поздравляем, следуя этим простым шагам, вы улучшили производительность вашего сайта для более приятных ощущений от его просмотра.
Заключение
В этом кратком руководстве вы узнали, как улучшить скорость и производительность вашего сайта на WordPress с помощью откладывания загрузки JavaScript. Запомните, чем быстрее и плавнее ваш сайт, тем больше трафика и счастливых посетителей у вас будет!
Елена имеет профессиональное техническое образование в области информационных технологий и опыт программирования на разных языках под разные платформы и системы. Более 10 лет посвятила сфере веб, работая с разными CMS, такими как: Drupal, Joomla, Magento и конечно же наиболее популярной в наши дни системой управления контентом – WordPress. Её статьи всегда технически выверены и точны, будь то обзор для WordPress или инструкции по настройке вашего VPS сервера.
Как задержать выполнение скрипта до загрузки jQuery
Бездумная гонка за показателями Google PageSpeed часто приводит к поломке некоторых динамических элементов на jQuery. Покажу один из частых примеров и способ, как все это можно быстро починить.
Чаще всего ломаются разные слайдеры, карусели, аккордеоны и прочая динамическая мишура. Связано это с тем, что Google PageSpeed рекомендует устранять ресурсы, блокирующие отображение страницы.
«Устраните ресурсы, блокирующие отображение»
Некоторые ресурсы блокируют первую отрисовку страницы. Рекомендуем встроить критическую часть данных JS/CSS в код HTML и отложить загрузку остальных ресурсов.
Поэтому, если в Autoptimize или каком-то другом оптимизационном плагине Вордпресс включить перенос загрузки JS-скриптов в конец страницы, все инлайн инициализации jQuery будут происходить до загрузки самой библиотеки jQuery. И, естественно, работать не будут.
Есть несколько вариантов решения этой проблемы.
Можно собрать все инлайн скрипты в один и загружать после загрузки библиотеки. Некоторые плагины позволяют даже делать это автоматически, но не всегда корректно. Можно добавить в исключение и принудительно загружать все библиотеки в начале. Но Google PageSpeed за это не добавит очков.
Все это умеет тот же Autoptimize, например
Autoptimize: Опции JavaScript
DOMContentLoaded
Напомню, событие DOMContentLoaded происходит когда весь HTML был полностью загружен и пройден парсером, не дожидаясь окончания загрузки таблиц стилей, изображений и фреймов.
Делаю сайты на Вордпресс с 2008 года, занимаюсь их оптимизацией, беру на поддержку, делюсь опытом в блоге и соцсетях (ссылки ниже, подпишитесь)