как отложить загрузку скрипта

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

Существует весьма простой способ отложить загрузку скриптов сайта для повышения балла в 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, вызывая выполнение скрипта после завершения загрузки страницы:

Источник

Скрипты: async, defer

В современных сайтах скрипты обычно «тяжелее», чем HTML: они весят больше, дольше обрабатываются.

Это ведёт к двум важным проблемам:

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

Но это решение далеко от идеального. Например, браузер замечает скрипт (и может начать загружать его) только после того, как он полностью загрузил HTML-документ. В случае с длинными HTML-страницами это может создать заметную задержку.

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

К счастью, есть два атрибута тега

. содержимое после скрипта.

Следующий пример это показывает:

Отложенные с помощью defer скрипты сохраняют порядок относительно друг друга, как и обычные скрипты.

Поэтому, если сначала загружается большой скрипт, а затем меньшего размера, то последний будет ждать.

Браузеры сканируют страницу на предмет скриптов и загружают их параллельно в целях увеличения производительности. Поэтому и в примере выше оба скрипта скачиваются параллельно. small.js скорее всего загрузится первым.

Атрибут defer будет проигнорирован, если в теге

. содержимое после скриптов.

Асинхронные скрипты очень полезны для добавления на страницу сторонних скриптов: счётчиков, рекламы и т.д. Они не зависят от наших скриптов, и мы тоже не должны ждать их:

Динамически загружаемые скрипты

Мы можем также добавить скрипт и динамически, с помощью JavaScript:

Динамически загружаемые скрипты по умолчанию ведут себя как «async».

Мы можем изменить относительный порядок скриптов с «первый загрузился – первый выполнился» на порядок, в котором они идут в документе (как в обычных скриптах) с помощью явной установки свойства async в false :

Например, здесь мы добавляем два скрипта. Без script.async=false они запускались бы в порядке загрузки ( small.js скорее всего запустился бы раньше). Но с этим флагом порядок будет как в документе:

Итого

У async и defer есть кое-что общее: они не блокируют отрисовку страницы. Так что пользователь может просмотреть содержимое страницы и ознакомиться с ней сразу же.

Но есть и значимые различия:

Пользователь может знакомиться с содержимым страницы, читать её, но графические компоненты пока отключены.

Поэтому обязательно должна быть индикация загрузки, нерабочие кнопки – отключены с помощью CSS или другим образом. Чтобы пользователь явно видел, что уже готово, а что пока нет.

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

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

Источник

Как “Отложить” Загрузку 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 сервера.

Источник

Асинхронная загрузка JavaScript, CSS: что это, скрипты и настройка

Асинхронная загрузка – это загрузка, которая позволяет браузеру загружать основной HTML и прочие ресурсы без ожидания загрузки стилей CSS и JavaScript, что существенно ускоряет работу сайта.

Проще говоря, пользователь, посещая ресурс, не дожидается последовательной загрузки всех скриптов и стилей, они подгружаются в конце. Тем самым не тормозя процесс загрузки HTML, который загружается последовательно (строка за строкой) и может долго подгружаться на CSS и JavaScript.

Синхронная загрузка JavaScript

По умолчанию JS файлы загружаются следующим образом:

Асинхронная загрузка скрипта HTML5

Использование HTML5 позволяет сделать асинхронную загрузку скриптов, благодаря чему страница будет загружаться в разы быстрее. Достаточно для файла JS добавить атрибут defer либо async.

Чем отличаются атрибуты async и defer?

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

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

При использовании async, скрипт выполнится моментально после его полной загрузки и до загрузки window.

На заметку. Данный механизм актуален не для всех браузеров, в частности, Internet Explorer. Еще он не функционирует, если в script.js есть строки document.write.

Загрузка JavaScript асинхронно скриптом от Google

В отличие от других поисковых систем, Google уделяет огромное внимание скорости загрузки веб-ресурсов. Из-за этого даже качественному сайту, если он загружается медленно, оказаться в ТОПе будет практически нереально.

Во избежание проблем с загрузкой, Google разработал и предложил вебмастерам собственный скрипт, позволяющий загружать JS непоследовательно.

Для его использования достаточно заменить

Но метод также подходит не для всех, потому что опять-таки неактивен в файлах с document.write.

Универсальная асинхронная загрузка JS

А вот вариант, подходящий всем браузерам (кроме IE 6 и старее, которыми уже практически никто не пользуется), сервисов и даже для document.write.

Во фрагменте страницы, предназначенном для отображения элемента, пропишите блок div и оставьте его пустым:

Источник

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

Если вы серьезно относитесь к ускорению вашего сайта, и для работы ваших веб-страниц требуются большие CSS скрипты, то для оптимизации доставки CSS пользователю вам придется использовать технику отложенной загрузки CSS файлов. Отложенная загрузка позволяет загрузить файлы CSS после того, как ваша веб-страница (DOM) полностью сформирована.

Какие файлы CSS нужно загружать в отложенном режиме?

Вы должны отложить загрузку всех CSS файлов, которые блокируют отображение вашей страницы. Чтобы увидеть, какие файлы блокируют рендеринг, вы можете проверить свой сайт при помощи специальных сервисов, например, https://www.giftofspeed.com/.

Как определить, какую часть CSS скрипта следует перевести в отложенную загрузку?

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

При составлении плана любых работ серьезную помощь может оказать составление алгоритма действий. Сделать это помогут онлайн-сервисы для создания блок-схем алгоритмов и диаграмм. Блок-схема алгоритмов наглядно покажет с чего начать и как оптимизировать свою работу.

Не переводите в отложенную загрузку небольшие скрипты CSS

Не стоит беспокоиться об отложенной загрузке, когда дело доходит до небольших скриптов CSS. Гораздо больший выигрыш в скорости вам даст перенос таких стилей в код самой HTML страницы.

Отложенная загрузка должна применяться только с большими CSS

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

Как сделать отложенную загрузку CSS при помощи небольшой программы Javascript

Для отложенной и асинхронной загрузки Javascript файлов есть особые HTML-инструменты, а именно атрибуты defer и async тега script. К сожалению, эти атрибуты не работают с CSS файлами. Но не стоит переживать, нам на помощь придет следующий код Javascript. Он позволяет осуществить отложенную загрузку любого файла CSS:

Вставьте этот скрипт в HTML код вашей страницы (лучше всего в футер) и замените строку «../css/yourcssfile.css» на путь к CSS файлу, загрузку которого вы хотите отложить. Если отложенная загрузка применяется только к одному файлу, то удалите секцию, относящуюся к файлу CSS #2. Если же вам нужно сделать отложенную загрузку более чем для двух файлов, то скопируйте секцию для CSS #2 и вставьте ее столько раз, сколько файлов вам нужно загрузить. При этом не забудьте заменить цифру 2 в именах переменных так, чтобы сделать их уникальными.

Обязательно в HTML теге head вставьте следующий код:

Это нужно на тот случай, если устройство или браузер пользователя не поддерживает Javascript. При этом CSS файлы все равно будут загружены.

Источник