) я писала о том, какой эффект оказывают JavaScript-файлы на Критический Путь Рендеринга(CRP).
JavaScript является блокирующим ресурсом для парсера. Это означает, что JavaScript блокирует разбор самого HTML-документа. Когда парсер доходит до тега <script> (не важно внутренний он или внешний), он останавливается, забирает файл (если он внешний) и запускает его.
Такое поведение может доставить проблемы, если мы загружаем несколько JavaScript-файлов на странице, так как это увеличивает время первой отрисовки, даже если документ на самом деле не зависит от этих файлов.
К счастью, элемент имеет два атрибута async и defer , которые дают нам возможность контролировать то, как внешние файлы загружаются и выполняются.
Нормальное выполнениеПрежде чем понять разницу между этими двумя атрибутами, давайте посмотрим что происходит в их отсутствие. Как было сказано ранее, по умолчанию файлы JavaScript прерывают парсинг HTML-документа до тех пор, пока не будут получены и выполнены.
Возьмём пример, в котором элемент расположен где-то в середине страницы:
... ... ....
Вот что произойдёт, когда парсер будет обрабатывать документ:
Парсинг HTML приостанавливается, пока скрипт не будет загружен и выполнен, тем самым увеличивая количество времени до первой отрисовки.
Атрибут asyncAsync используется для того, чтобы указать браузеру, что скрипт может
быть выполнен асинхронно.
Парсеру HTML нет необходимости останавливаться, когда он достигает тега для загрузки и выполнении. Выполнение может произойти после того, как скрипт будет получен параллельно с разбором документа.
Атрибут доступен только для файлов, подключающихся внешне. Если внешний файл имеет этот атрибут, то он может быть загружен в то время как HTML-документ ещё парсится. Парсер будет приостановлен для выполнения скрипта, как только файл скрипта будет загружен.
Атрибут deferАтрибут defer указывает браузеру, что скрипт должен быть выполнен после того, как HTML-документ будет полностью разобран.
Как и при асинхронной загрузке скриптов - файл может быть загружен, в то время как HTML-документ парсится. Однако, даже если файл скрипта будет полностью загружен ещё до того, как парсер закончит работу, он не будет выполнен до тех пор, пока парсер не отработает до конца.
Асинхронное, отложенное или нормальное выполнение?Итак, когда же следует использовать асинхронное, отложенное или нормальное выполнение JavaScript? Как всегда, это зависит от ситуации и существуют несколько вопросов, которые помогут принять вам правильное решение.
Где расположен элемент ?Асинхронное и отложенное выполнения наиболее важны, когда элемент не находится в самом конце документа. HTML-документы парсятся по порядку, с открытия до его закрытия. Если внешний JavaScript-файл размещается непосредственно перед закрывающим тегом , то использование async и defer становится менее уместным, так как парсер к тому времени уже разберёт большую часть документа, и JavaScript-файлы уже не будут оказывать воздействие на него.
Скрипт самодостаточен?Для файлов, которые не зависят от других файлов и/или не имеют никаких зависимостей, атрибут async будет наиболее полезен. Поскольку нам не важно, когда файл будет исполнен, асинхронная загрузка - наиболее подходящий вариант.
Полагается ли скрипт на полностью разобранный DOM?Во многих случаях файл скрипта содержит функции, взаимодействующие с DOM. Или, возможно, существует зависимость от другого файла на странице. В таких случаях DOM должен быть полностью разобран, прежде чем скрипт будет выполнен. Как правило, такой файл помещается в низ страницы, чтобы убедиться, что для его работы всё было разобрано. Однако, в ситуации, когда по каким-либо причинам файл должен быть размещён в другом месте - атрибут defer может быть полезен.
Скрипт небольшой и зависим?Наконец, если скрипт является относительно небольшим и/или зависит от других файлов, то, возможно, стоит определить его инлайново. Несмотря на то, что встроенный код блокирует разбор HTML-документа, он не должен сильно помешать, если его размер небольшой. Кроме того, если он зависит от других файлов, может понадобиться незначительная блокировка.
Поддержка и современные браузерные движкиПоддержка атрибутов async и defer очень распространена:
Стоит отметить, что поведение этих атрибутов может немного отличаться в разных движках JavaScript. Например, в V8 (используется в Chromium), сделана попытка разобрать все скрипты, независимо от их атрибутов, на отдельном выделенном потоке для выполнения скрипта. Таким образом, «блокирующая парсер» природа JavaScript-файлов должна быть минимизирована по умолчанию.
25.12.2012 job 18356
Поговорим немножко об оптимизации загрузки страницы в 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 появилась в HTML5, он разрешает браузеру загружать js-файлы параллельно и выполнять сразу после загрузки, не дожидаясь обработки остальной части страницы.
| 1 | < async src = "example.js" > |
Схема последовательности обработки:
Это асинхронная загрузка. Атрибут рекомендуется применять для таких скриптов, которые не оказывают значительного влияния на отображение документа. К ним относятся счетчики сбора статистики (Google Analytics, Яндекс Метрика), коды рекламных сетей (Рекламная сеть Яндекса, Google AdSense), кнопки социальных сетей и так далее.
Скорость загрузки сайта — один из факторов ранжирования в Google.
Асинхронное подключение JavaScript снижает время загрузки страниц за счет отсутствия задержки. Наряду с этим я рекомендую сжимать и объединять js-файлы в один, например, с помощью библиотеки . Пользователям нравятся быстрые сайты 😎
Большинство (если не все) современных сайтов используют Javascript. Кнопки социальных сетей? Плагины? Даже шаблоны! В 99% случаев эти компоненты будут использовать Javascript. Это означает, что на ваших сайтах используются скрипты. Но скрипты замедляют скорость работы сайта. Сегодня мы хотим представить вам 2 плагина, которые позаботятся об этой проблеме.
Асинхронное и отложенное… что?
Перед тем, как мы начнем, вам следует учитывать три вещи:
В рамках обычной среды работы сайта HTML парсинг приостанавливается на время выполнения скриптов. Если ваш сайт похож на мой, то это означает, что пользователь, перед тем, как сможет воспользоваться вашим сайтом, должен будет немного подождать (загрузки вашего кода, дизайна, контента и так далее). Давайте взглянем на то, как выглядит обычная загрузка скрипта:
Отложенная загрузка просто позволяет вашему коду HTML загрузиться до того, как начнут выполять работу скрипты. Здесь преимущество заключается в том, что сайт мгновенно будет отображен в окне браузера, как бы демонстрируя молниеносную производительность. Лично я рекомендую использовать отложенную загрузку в тех случаях, если некоторые ваши пользователи используют браузеры, где отсутствует поддержка асинхронной загрузки скриптов. Давайте взглянем на то, как работает отложенная загрузка:
Асинхронная загрузка скриптов – это лучшая опция. HTML-парсинг и загрузка скриптов будет продолжаться, но выполнение скриптов будет возможным только тогда, когда вся загрузка будет завершена. Это позволит вам максимально быстро представить контент сайта вниманию посетителей. Однако не все браузеры поддерживают асинхронную загрузку скриптов. Давайте взглянем на то, как происходит асинхронная загрузка:
- Я, конечно же, рекомендую вам оптимизировать скрипты, используя оба метода.
При использовании этих атрибутов, вам будут доступны 3 режима. Если вы используете атрибут async, то скрипт будет выполняться асинхронно, как только это станет возможным. Если вы не используете атрибут async, и вместо этого используете defer, то скрипт будет выполняться тогда, когда закончится парсинг страницы. Если вы не используете ни один из этих атрибутов, то скрипт будет загружаться и выполняться мгновенно, еще до того, как браузер начнет парсинг страницы.
С чего начать?
Итак, если Асинхронный javascript – это лучшая опция, позвольте представить вам лучший WordPress-плагин для асинхронной загрузки Javascript. Кто бы мог подумать, что называется он !
Скачайте его, установите и – вы готовы к работе! Однако он будет конфликтовать с некоторыми плагинами, особенно если вы используете слайдеры. В настройках шаблонов WordPress зачасту присутствует такая функция. Вы можете исключить скрипты, которые должны загружаться мгновенно.
Далее хочется перейти к отложенной загрузке Javascript. Я познакомился с плагинами, и мне показалось, что лучше всего работают плагины с точным соответствием названий. Лучшим в данной категории мне показался плагин под названием .
Скачайте его, установите, и он начнет работу без каких-либо настроек, потому что в нем их просто-напросто нет. Он будет автоматически запускаться для тех пользователей, чьи браузеры не поддерживают асинхронную загрузку javascript. Я решил оставить этот пост максимально коротким, но при этом представил вам действительно самые лучшие плагины для оптимизации работы скриптов на ваших сайтах.
