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

Для чего это нужно?

Все очень просто. Современный сайт представляет из себя сборник самых разнообразных скриптов, тегов, сниппетов, стилей, шрифтов и всего прочего. Как вы понимаете, чем больше «плюшек», тем дольше грузится ваш сайт. Что касается JavaScript, тут отдельная песня. Замечали ли вы такой косяк, когда страница вроде бы загрузилась, но вкладка показывает, что страница все еще грузится? Так бывает, когда какой-то отдельный скрипт не прогрузился до конца. Ладно бы так, иногда страница вообще простаивает до тех пор, пока не загрузится тот самый, вроде бы и не совсем важный скрипт. А у ваших пользователей просто может не хватить терпения.

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

Асинхронный вызов скрипта выглядит так:

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

Как автоматизировать процесс?

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

Находим уже знакомый нам файл functions.php вашей темы и вставляем туда (например в конец) следующий код:

// асинхронный javascript function wcs_defer_javascripts ($url) { if (FALSE === strpos($url, ".js")) return $url; if (strpos($url, "jquery.js")) return $url; return "$url" async="async"; } add_filter("clean_url", "wcs_defer_javascripts", 11, 1);

Заключение

Что можно добавить в заключение. Данный скрипт, возможно, подойдет не всем, так-как, кто его знает, какие скрипты подключены именно у вас, поэтому, ставьте и экспериментируйте. Минуса у такого скрипта быть не может, разве что несовместимость с конкретным сайтом ввиду его специфики. Это был еще один маленький шаг по большой оптимизации вашего сайта.

25.12.2012 job 18355

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

Построение шаблона

Как правило верстальщики на Joomla не обращают внимание на порядок загрузки стилей и скриптов, а это важный аспект оптимизации для распараллеливания загрузки. CSS файлы следует всегда включать перед файлами JavaScript.

Если в Вашем шаблоне загрузка css и javascript выглядит следующим образом:

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

А вот как правильно включать файлы в рендеринг:

Не обращаем внимание на валидность doctype и html, писал сокращенно для примера.

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

А вот тут я бы больше заострил внимание и дочитал статью до конца! Часто заказчик на оптимизацию требует реализовывать асинхронную загрузку javascript. Как ни странно разработчики Joomla предусмотрели и такую возможность, а вот разработчики сторонних компонентом, модулей и плагинов забывают про данный функционал, видимо поэтому Jooml"у часто и критикуют за низкую оптимизацию, с чем бы я и поспорил.

Как рассматривалось ранее в рендеринге документа существует функция addScript(); . Но видимо некоторые и не подозревают что она имеет четыре переменные - $url , $type , $defer , $async .

$this->addScript($this->baseurl."/templates/beez_20/js/jquery-latest.min.js"); $this->addScript($this->baseurl."/templates/beez_20/js/script.js");

Но в нашем случае нам необходимо загрузку скриптов браузером поставить в очередь, для этого необходимо использовать атрибут async и/или defer . Оба отличаются лишь тем что defer сохраняет порядок выполнения скриптов. Defer нужен в том случае если script.js используется фреймворк jQuery, который предотвратит его загрузку раньше самой библиотеки, ну и если необходимо сохранить некую последовательность.

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

$this->addScript($this->baseurl."/templates/beez_20/js/jquery-latest.min.js", "text/javascript"); // или $this->addScript($this->baseurl."/templates/beez_20/js/jquery-latest.min.js", "text/javascript", false, false); // Выводит $this->addScript($this->baseurl."/templates/beez_20/js/jquery-latest.min.js", "text/javascript", true, false); // Выводит $this->addScript($this->baseurl."/templates/beez_20/js/jquery-latest.min.js", "text/javascript", false, true); // Выводит

И еще один маленький моментик. В принципе данные атрибуты это элементы HTML5, следовательно нет смысла использовать вид async="async" и defer="defer", достаточно async и defer соответственно.

Внесем коррективы в библиотеку joomla. Открываем сайт.ру/libraries/joomla/document/html/renderer/head.php

Ищем (примерно строка 150):

// Generate script file links foreach ($document->_scripts as $strSrc => " . $lnEnd; }

заменяем на:

// Generate script file links foreach ($document->_scripts as $strSrc => $strAttr) { $buffer .= $tab . "" . $lnEnd; }

Вот и вся соль. Все манипуляции мной проводились в Joomla 2.5, как это будет работать в 1.5 хз, не рассматривал, да и пора уже забыть про нее))). Да и вышеописанная техника совсем не панацея, к каждому нужен индивидуальных подход.

Спасибо за внимание!

Приветствую, друзья! Знаете ли Вы, что загрузка JavaScript является одним из самых узких мест в производительности сайта? Сегодня моя основная задача — объяснить что такое скрипта и каким образом она влияет на быстродействие и производительность сайта.

Браузер, загружающий тег script , останавливает рендеринг страницы до тех пор, пока не загрузится и не исполнится скрипт. Страница заблокирована и браузер пару секунд не отвечает на действия пользователя. Время задержки зависит от нескольких факторов:

  • конфигурации ,
  • скорости интернет-соединения,
  • размера файла и других…

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

Если код скрипта влияет на отображение верхней части сайта — не выносите его в отдельный файл, а встраивайте непосредственно в HTML.

JS может изменить содержимое сайта и даже перенаправить на другой URL-адрес. В таком случае подключение скрипта в конце документа приведет к эффекту «подергивания» страницы, подгружая новые или изменяя существующие элементы в верхней части.

Применение атрибутов async и defer для тега script

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

1 < src = "example.js" >

В наглядном примере я буду использовать следующие условные обозначения:

— обработка страницы
— загрузка скрипта
— выполнение скрипта

Таким образом последовательность обработки происходит по следующей схеме:

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

Атрибут defer

Атрибут defer позволяет браузеру начать загрузку js-файлов параллельно, не останавливая дальнейшую обработку страницы. Их выполнение происходит после полного разбора объектной модель документа (от англ. Document Object Model, сокращенно DOM), при этом браузер гарантирует последовательность на основе порядка подключения файлов.

1 < defer src = "example.js" >

Атрибут async

Поддержка атрибута async появилась в HTML5, он разрешает браузеру загружать js-файлы параллельно и выполнять сразу после загрузки, не дожидаясь обработки остальной части страницы.

1 < async src = "example.js" >

Схема последовательности обработки:

Это асинхронная загрузка. Атрибут рекомендуется применять для таких скриптов, которые не оказывают значительного влияния на отображение документа. К ним относятся счетчики сбора статистики (Google Analytics, Яндекс Метрика), коды рекламных сетей (Рекламная сеть Яндекса, Google AdSense), кнопки социальных сетей и так далее.

Скорость загрузки сайта — один из факторов ранжирования в Google.

Асинхронное подключение JavaScript снижает время загрузки страниц за счет отсутствия задержки. Наряду с этим я рекомендую сжимать и объединять js-файлы в один, например, с помощью библиотеки . Пользователям нравятся быстрые сайты 😎

Скорость загрузки страниц вашего сайта - очень важный параметр не только для его посетителей, но и для поисковых систем. По скорости загрузки поисковик может судить о качестве сайта. Выполнение рассмотренных в статье рекомендаций возможно как на этапе создания веб сайта, так и в процессе его дальнейшего обслуживания. Техническая поддержка сайта после его разработки является той задачей, к которой необходимо относиться со всей ответственностью и не пренебрегать ею. Рассмотрим рекомендации от 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;