С ростом скорости интернет соединения и увеличении мощности не только десктопных, но и мобильных устройств веб страницы стают более "тяжелыми". Количество и размер подключаемых файлов растет: JavaScript файлы, css файлы, изображения, виджеты сторонних сайтов, iframe. На данный момент специфика работы браузеров такая, что при загрузке js файла блокируется отривсовка до того момента, пока скрипт не выполниться. Современные браузеры в фоновом режиме будут парсить документ и скачивать скрипты и стили, но отрисовка будет заблокирована. Сравнение сетевых параметров для различных браузеров можно посмотреть на browserscope.org . Мы не можем устранить блокировку полностью, но можем оптимизировать серверную и клиентскую часть приложения, что бы блокировка отрисовки занимала наименьший промежуток времени.
Решения для серверной части:
- Уменьшить размер передаваемых файлов
- Использовать CDN
- Вынести статические файлы на отдельный домен или под домен, таким образом увеличить количество одновременных соединений браузера.
- Включить сжатие передаваемых файлов(gzip)
Решения для клиентской части:
- Уменьшить количество запросов.
- Кэшировать файлы на стороне клиента с помощью заголовков Expires и Etags.
- Использовать общедоступные CDN(Google CDN, Yandex CDN). Таким образом, существует вероятность, что файл с общедоступного CDN уже будет храниться в кеше браузера.
Одним из способов оптимизации скорости загрузки сайта является асинхронная загрузка файлов, которая не блокирует отрисовку.
Скрипт асинхронной загрузки JavaScript:
(function() { var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "URL файла"; document.getElementsByTagName("head").appendChild(script); })();
Если JavaScript нужно выполнить после загрузки всей страницы, включая содержание, изображения, стилевые файлы и внешние скрипты, то к загрузчику нужно добавить отслеживания события onload.
If (window.addEventListener) { window.addEventListener("load", async_load, false); } else if (window.attachEvent) { window.attachEvent("onload", async_load); }
Скрипт асинхронной загрузки JavaScript с учетом события onload (function() { function async_load(){ var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "URL файла"; document.getElementsByTagName("head").appendChild(script); } if (window.addEventListener) { window.addEventListener("load", async_load, false); } else if (window.attachEvent) { window.attachEvent("onload", async_load); } })();Но это единичный случай, когда требуется загрузка одного файла. Часто на практике подключается множество файлов.
Скрипт асинхронной загрузки множества подключаемых JavaScript файлов (function() { function async_load(){ [ "URL_файла_1.js", "URL_файла_2.js", "URL_файла_3.js" ].forEach(function(src) { var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = src; document.getElementsByTagName("head").appendChild(script); }); } if (window.addEventListener) { window.addEventListener("load", async_load, false); } else if (window.attachEvent) { window.attachEvent("onload", async_load); } })();Но в такой реализации есть минус - скрипты будут загружаться в произвольном порядке и соответсвенно выполнятся они будут произвольно во времени. Данный скрипт асинхронной загрузки идеально подходит, если выполнение JavaScript файлов не зависят один от другого и не зависит от DOM. В обратном случае его использование может привести к ошибкам на странице или непредвиденному результату выполнения. Для последовательного выполнения, но асинхронной загрузки, нужно указать async=false, тогда файлы будут скачиваться в произвольном порядке, но выполняться по очереди.
HTML 5. Асинхронная загрузка JavaScriptСтандарт HTML 5 поддерживает асинхронную загрузку JavaScript. Это можно сделать путем добавления ключевого слова async или defer. Например:
Скрипт, который подключен с атрибутом defer выполнится не нарушая порядок выполнения по отношению к остальным скриптам и его выполнение произойдет после полной загрузки и парсинга страницы, но перед тем, как вызовется DOMContentLoaded.
Скрипт, который подключен с атрибутом async выполнится при первой возможности после полной загрузки, но при этом не ожидает окончания парсинга документа и до загрузки объекта window. Браузеры не гарантируют выполнение скриптов в том же порядке в котором они подключены.
Библиотеки для асинхронной загрузки JavaScriptRequireJS - модуль загрузки JavaScript. Оптимизирован под браузеры, но он может использоваться в других средах, таких как Node, Rhino.
Require(["script"], function(script) { console.log("start after load script.js"); });
extsrc.js - библиотека, которая запускает скрипты на выполнение после того, как страница загрузится и отобразится пользователю. Работает корректно с document.write.
yepnope.js - позволяет совершать асинхронную загрузку JavaScript и CSS файлов.
Yepnope([ "script.js", "style.css" ]);
Простой способ загрузки JavaScript скриптовОказывается, что на практике добиться оптимальной кросс браузерной загрузки JavaScript скриптов, которые не блокируют отображение сложно, а порой невозможно. Наиболее оптимальный способом является добавление в конец документа перед закрывающимся тегом body. Из за ограничения разных браузеров и самого HTML такой вариант загрузки, который не блокирует отображение, можно считать наиболее простой.
Скорость загрузки страниц вашего сайта - очень важный параметр не только для его посетителей, но и для поисковых систем. По скорости загрузки поисковик может судить о качестве сайта. Выполнение рассмотренных в статье рекомендаций возможно как на этапе создания веб сайта, так и в процессе его дальнейшего обслуживания. Техническая поддержка сайта после его разработки является той задачей, к которой необходимо относиться со всей ответственностью и не пренебрегать ею. Рассмотрим рекомендации от Google, призванные оптимизировать (уменьшить) скорость загрузки вашего сайта.
Итак, приступим:
Часто ваш HTML- или CSS-код может запрашивать какое либо изображение или файл. В том случае, если запрашиваемый объект не найден или не существует, скорость работы сайта существенно замедляется и увеличивается нагрузка на сервер, приводя к большому количеству неправильных запросов несуществующего объекта. И таких запросов намного больше, чем можно себе представить.
Исправление ошибочных запросов гораздо проще нахождения их. Если вы нашли какой-либо неправильный запрос, просто уберите ненужный код из HTML- или CSS-файла или скорректируйте его.
Крайне важно контролировать скорость загрузки страницы и отслеживать обращения к несуществующим ресурсам!
Использование таких методов в CSS-файлах, как @import , может замедлять скорость загрузки стилей в частности и страниц в целом. Наибольшая сложность заключается в последовательной загрузке стилей (друг за другом) вместо использования возможности их параллельной (одновременной) загрузки. Это добавляет дополнительные шаги в процесс загрузки сайта.
Просмотрите все ваши файлы на наличие директив импорта. Выглядеть они могут следующим образом:
@import url("style.css")
Заменить их необходимо на прямое подключение стилей в HTML-коде:
Каждый CSS-файл, который использует страница вашего сайта, добавляет время и снижает скорость загрузки страницы (подключение → загрузка, подключение → загрузка и т.д.). Иногда использование нескольких файлов стилей неизбежно (например, в том случае, когда с дизайном сайта проще и целесообразней работать при помощи нескольких файлов), но по возможности необходимо объединять их в один файл.
Для этого сделайте простую операцию copy-paste из нескольких файлов в один! Один CSS-файл будет содержать ровно столько же полезной информации для сайта, но увеличит скорость загрузки!
После объединения файлов не забудьте удалить лишние подключения старых файлов в HTML-коде страниц.
Избегайте функции «document.write» в HTML
Для того, чтобы вывести что-то на странице через JavaScript или для подключения внешнего ресурса, можно использовать функцию document.write , однако необходимо осознавать, что при использовании ее из HTML-кода для ее выполнения интернет-браузер будет осуществлять неоправданные операции загрузки-чтения-записи, негативно влияющие на скорость загрузки страниц сайта.
Проверьте весь ваш HTML-код на наличие директив document.write , которые могут выглядеть так:
document.write("");
Вместо этого используйте просто подключение внешнего скрипта при помощи такого вызова в HTML-коде страницы:
JavaScript-файлы очень часто используются путем подключения большого количества внешних скриптов.
По аналогии с объединением CSS-файлов, необходимо объединять и JS-файлы в один (по возможности). Качество выполнения прописанных в них функций от этого не пострадает, однако положительно скажется на скорости загрузки веб-страниц.
В качестве дополнительных мер можно использовать включение небольших скриптов в тело страниц и отложенную загрузку скриптов .
На каждом сайте используется большое количество всевозможных изображений. И для отображения каждого из них веб-браузер передает по одному запросу, в ответ на которых сервер «отдает» соответствующее изображение.
Количество обращений к серверу и, соответственно, скорость загрузки страниц можно уменьшить, объединяя несколько изображений в один CSS-спрайт (CSS-sprite). Вместо загрузки большого количества изображений ваш браузер теперь будет загружать одно! И в этом - прелесть CSS-спрайтов! Конечно, это в большей степени касается объединения нескольких небольших изображений, используемых в элементах оформления WEB-страницы (фоны меню, смайлы, углы, иконки и пр.).
В этом случае для использования отдельно взятого элемента из состава CSS-спрайта потребуется вызов данного спрайта с последующим указанием размера и позиционированием необходимого элемента относительно общего размера CSS-спрайта.
На примере двух изображений (рупора и смайла), объединенных в один спрайт, для отображения рупора напишем следующий CSS-стиль:
Rupor {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}
Для смайла стиль будет выглядеть следующим образом:
Smile {width:50px; height:50px; background:url(images/sprite.png) 0 –50px;}
Соответствующие им фрагменты HTML-кода будут такими:
Для рупора:
И для смайла:
Откладывание загрузки JavaScript в процессе обращения к странице веб-сайта — один из наиболее важных и сложных вопросов. Отложенная загрузка внешних скриптов, как можно догадаться, позволит странице сайта загрузиться намного быстрее, нежели загрузка страницы последовательно, строчка за строчкой исходного кода. Кто-то может сказать, что достаточно поместить вызывающий скрипт в конец страницы, и дело будет решено. Но на самом деле это не так.
Только обозначенное ниже решение позволит загружать внешний скрипт ТОЛЬКО после полной загрузки страницы и не вызовет предупреждение «Defer loading of javascript» в инструментах для веб-мастеров от Google. Вот он, рекомендуемый Google, метод:
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "script.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;
Стандарт HTML5 поддерживает возможность асинхронной загрузки скриптов, что может значительно ускорить общее время получения страницы. Просто добавьте async или defer .
< script async src= "http://www.site.ru/script.js" type= "text/javascript" >
< script defer src= "http://www.site.ru/script.js" type= "text/javascript" >
Чем же отличаются атрибуты async и defer
В обоих случаях мы получаем асинхронную загрузку скриптов. Разница заключается только в моменте, когда скрипт начинает выполнятся. Скрипт с атрибутом async выполнится при первой же возможности после его полной загрузки, но до загрузки объекта window. В случае использования атрибута defer – скрипт не нарушит порядок своего выполнения по отношению к остальным скриптам и его выполнение произойдет после полной загрузки и парсинга страницы, но до события DOMContentLoaded объекта document.
К сожалению, этот механизм на сегодняшний день не работает во всех браузерах (особенно это касается IE). Также не будет работать, если в файле script.js есть строки document.write .
Асинхронная загрузка javascript скриптом от GoogleКак известно всем мастерам, Google уделяет особое внимание скорости загрузки сайтов, и понижает медленные в поисковой выдаче. Что бы помочь, Гугл разработал специальный скрипт, при помощи которого можно сделать асинхронную загрузку javascript.
Чтобы использовать, просто заменяем
на
И подключаем файл скрипта extsrc.js
Получится так:
< script src= "http://extsrcjs.googlecode.com/svn/trunk/extsrc.js" > < script extsrc= "...." >
К сожалению, этот способ тоже не подойдет к файлам с document.write
Лучшая рабочая асинхронная загрузка javascriptУниверсальный способ для всех браузеров. Работает даже с document.write
В том месте страницы, где нужно реально отобразить наш элемент создаем пустой div блок:
< div id= "script_block" class = "script_block" >
В самом конце страницы перед вставляем скрипт для асинхронной загрузки файлов:
< div id= "script_ad" class = "script_ad" style= "display:none;" > Здесь любой файл или скрипт, который нужно загрузить. < script type= "text/javascript" > // переместить его в реальную позицию отображения document. getElementById("script_block" ) . appendChild(document. getElementById("script_ad" ) ) ; // показать document. getElementById("script_ad" ) . style. display = "block" ;
В самых старых версиях IE (6 и ниже) асинхронная загрузка к сожалению не работает, но таких пользователей уже практически нет. Все остальные браузеры и сервисы успешно пользуются современной ускоренной загрузкой web-страниц.
Если Вы когда-нибудь задумывались о проблемах скорости загрузки страниц Вашего сайта, то наверняка уже знакомы с таким сервисом от Гугла как PageSpeed Insights. А если так, то наверняка знакомы с проблемой когда основное содержимое страницы загружается после того как будут загружены определённые скрипты и стили.
Гугл в свою очередь пытается ткнуть носом в это безобразие и предлагает свое решение проблемы - Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы.
Что с этим делать? Конечно, можно пойти наиболее трудоемким, но действенным способом - перебрать весь движок Джумлы, внести изменения в расширения и так далее. Способ этот действительно хорош, но если честно настолько трудоемкий что связываться с ним нет никакого желания, а для новичков такой метод вовсе не выход.
Наиболее простой и не менее верный способ это воспользоваться определенными расширениями, которые сделают всю (или почти всю) работу за нас. Одно из таких расширений это плагин Javascript Async & Defer , с помощью которого можно запускать скрипты асинхронно либо отложить их запуск, но при условии, что это не навредит работе сайта.
Для начала необходимо скачать плагин Javascript Async & Defer, а следом установить. Но одной установки будет недостаточно, главное правильно настроить данное расширение. Как это сделать я сейчас постараюсь объяснить.
После установки плагина можно приступать к его настройке, ведь сам себя он настроить не сможет. Для этого в панели управления переходим на страницу «Менеджер плагинов: Плагины» (Расширения -> Плагины). Находим только что установленное расширение в виде плагина «Javascript Async and Defer» (для этого лучше воспользоваться поиском или фильтром по ID):
Как видите, плагин по умолчанию отключен, но как я и говорил, одного включения для правильной работы будет недостаточно. Давайте откроем плагин для редактирования и посмотрим, что мы имеем. А имеем мы ни много ни мало всего одну вкладку «Плагин» с немногочисленными настройками:
В настройках плагина мы видим сообщение от разработчиков, которое говорит нам о том, что данный плагин будет добавлять теги асинхронного или отложенного запуска в указанные скрипты. Но тут же есть предупреждение, что настройку этого плагина лучше производить экспертам и с осторожностью, иначе возможны ошибки в работе сайта.
Для начала давайте разберемся, что и как тут настраивать, как узнать какие скрипты запускаются и как их прописать. Для начала разберем суть каждой настройки:
- данный переключатель дает возможность сделать загрузку скриптов в асинхронном режиме. - отложенная загрузка указанных скриптовПервое, что нам необходимо узнать, это какие скрипты запускаются при загрузке той или иной страницы, для этого нужно воспользоваться режимом отладки «Debug». В этом режиме на сайте в области системных сообщений (уведомлений) будет выведен список скриптов, которые загружаются совместно со страницей.
Но не все так просто, если честно, то этот самый список будет выведен только в том случае, если вы укажите хотя бы один скрипт для модификации в поле Scripts to modify. А как быть, если вы знать ни знаете какой скрипт там указывать? Ничего страшного для начала можно написать в данное поле что угодно, любое слово или символ, после этого включаем режим отладки, активируем плагин и сохраняем результат:
Теперь можно перейти на сайт и посмотреть на результат, у Вас должно получиться, что то вроде этого:
Любопытно, не так ли, получается, что совместно со страницей загружается еще 16 скриптов (это в моем случае), как системных, так и от различных установленных расширений. И каждый из них увеличивает время загрузки страницы, а это не есть хорошо.
Самый простой вариант скопировать все те скрипты, которые выдал нам плагин и добавить в поле для модификации «Scripts to modify». Затем выбрать режим загрузки (асинхронный, отложенный, или сразу оба) сохранить изменения и проверить результат.
Но в таком случае Вы неминуемо заметите некоторые ошибки на сайте, например не правильно работающие всплывающие окна и так далее. Связано это с тем что страница загрузилась до того как отработали определенные скрипты, соответственно не будут работать те функции за которые они отвечают.
Тут главное не паниковать, внимательно изучить список скриптов понять, за что отвечает каждый из них и модифицировать только те, которые не нарушат функционал сайта, а я Вас уверяю, в Joomla таких не мало
Если такой подход Вас не устраивает по причине того что все скрипты для Вас важны, а так же в том случае если Ваш сервер не поддерживает протокол HTTP/2.0 тогда советую пойти другим путем - объединить все скрипты в один . В таком случае браузеру потребуется гораздо меньше сессий для загрузки целевой страницы, а как следствие меньше времени.
