Как отложить загрузку .js скриптов
Несмотря на то, что все скрипты мы перенесли из шапки в подвал, они по прежнему в не лучшую сторону влияют на скорость сайта. Не основным JS-скриптам (метрики, соцсети, реклама и т.д.) нужно отложить загрузку или сделать её асинхронной с помощью атрибутов async и defer.
Кроме того, увесистые скрипты быстрее будут загружаться с сервера на котором расположен сайт, а не со сторонних ресурсов. Скачиваем .js скрипт и закидываем его в отдельную папку.
Вот, как это выглядит:
<script async src=»skript/share.js»></script>
defer или async
Тут можно поиграть с атрибутами, так как по разному, при разных обстоятельствах, строении сайта они могут влиять на скорость загрузки, проверенно:)
№4 Отложенная загрузка с эффектом размытия
Если читаете Medium.com, то наверняка заметили, как сайт загружает основное изображение внутри поста. Первое, что увидите, это размытая копия изображения с низким разрешением, тогда как его версия с высоким разрешением лениво загружается:
Размытое изображение-заглушка на сайте Medium.com
Лениво загруженное изображение высокого разрешения на веб-сайте Medium.com
Лениво загружать изображения с этим интересным эффектом размытия можно несколькими способами. Вот один из них:
- Небольшой объём: всего 463 байта CSS и 1 007 байтов минимизированного JS
- Поддержка ретины
- Нет зависимостей: не использует jQuery или другие библиотеки и фреймворки
Асинхронная загрузка и ленивая прокрутка
Но, опять же не всегда только сжатием можно обойтись и получить максимальный результат в процессе сделать сайт быстрым. На страницы может быть размещено много картинок или большого размера и опять долгая загрузка несмотря, что им уменьшили вес. Нужно сделать так, чтобы загрузка картинок была асинхронной или открывались только те, которые попадают в поле зрения монитора устройства, а при прокручивании страницы постепенно подгружались, подключить картинкам ленивую прокрутка.
Асинхронная загрузка jmg:
Для небольших и(или) малого количества изображений на странице, достаточно к элементу jmg добавить атрибут loading=»lazy», чтобы подсказать браузеру, что загрузку данных элементов можно немного отложить:
<img src=»index.files/13.jpg» loading=»lazy» title=»» width=»» height=»» alt=»/></a>
Ленивая прокрутка:
Для сайта (страниц) где много изображений, лучше подключить ленивую прокрутку. Для этого скачайте lazyload.js и залейте на свой хостинг, я сделал отдельную папку skript там и хранятся все подобные файлы, далее копируем «ленивый» код:
<script src=»/skript/lazyload.js»></script><noscript><style>img {display:none !important;}</style></noscript><script>let images = document.querySelectorAll(«img»);lazyload(images);</script>
и чтобы страницы загружались быстрее, вставляем скопированное ближе к закрывающемуся тегу </body>. Не забываем исправить адрес .js файла (название папки) на свой src=»/skript/lazyload.js»>.
В .css нужно добавить стили, для картинок участвующих в подгруздке при прокрутке страницы:
img {opacity:0 !important} img {opacity:1 !important}
перед каждым src=»» тега jmg, того изображения, что должно подгружаться дописать data-
Пример:
<img data-src=»index.files/13.jpg» title=»» width=»» height=»» alt=»/>
Скрипт, желательно устанавливать там, где это действительно необходимо, на страницы где много картинок, так как, ненуждающиеся в ленивой прокрутке страницы, скрипт при загрузке немного, но будет тормозить и его не отложить. В общем-то, экспериментируйте, как будет быстрее:)
Как отложить загрузку Google AdSense рекламы
Для Google AdSense, если у вас имеется такая реклама на сайте, можно сделать ленивую загрузку и отложить показ рекламы, пока пользователь не тронул страницу. Очень прилично получается сэкономить и поднять скорость загрузки страниц, но не всех такой вариант может устроить, в частности у кого реклама первой при загрузке странице попадает в поле зрения пользователя, впрочем…
Скопируйте код:
<script type=’text/javascript’> //<![CDATA[ // Lazy Load AdSense var lazyadsense=!1;window.addEventListener(«scroll»,function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement(«script»);e.type=»text/javascript»,e.async=!0,e.src=»https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js»;var a=document.getElementsByTagName(«script»);a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0); //]]> </script>
и установите его перед тегом </body> вместо уже имеющегося у вас на сайте, он должен быть примерно такого вида:
<script async=»src=»https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js»></script>
Почему вы должны позаботиться о ленивой загрузке изображений?
Есть по крайней мере несколько веских причин, по которым вам стоит задуматься о ленивой загрузке изображений для вашего сайта:
- Если ваш веб-сайт использует JavaScript для отображения содержимого или предоставления пользователям какой-либо функциональности, время загрузки DOM очень скоро становится узким местом в производительности страниц. Скрипты, прежде чем начать работать, обычно ждут полной загрузки DOM. На сайте со значительным количеством изображений, отложенная загрузка, или загрузка изображений асинхронно, может иметь решающее значение для пользователей, которые начинают размышлять: оставаться и подождать или уже покинуть ваш сайт.
- Поскольку большинство решений загружают изображения только в том случае, когда пользователь прокрутил до места, где они станут видны внутри области просмотра, то эти изображения никогда не будут загружены, если пользователи никогда не достигнут этой точки. Это означает значительную экономию трафика, за что большинство пользователей, особенно с доступом к Интернету на мобильных устройствах и медленных соединениях, будут вам благодарны.
Если ленивая загрузка изображений помогает повысить производительность сайта, то как лучше это сделать?
Вряд ли существует идеальный вариант.
Если вы живете и дышите JavaScript, реализация собственного lazy load решения не должна быть проблемой. Ничто не даёт вам больше контроля, чем кодирование чего-либо самостоятельно. Кроме того, вы можете просматривать веб-страницы для поиска подходящих подходов и поэкспериментировать с ними.
Простой способ отложить загрузку стилей CSS
Замените свой:
<link rel=»stylesheet» type=»text/css» href=»mystyle.css»>
на:
<link rel=»preload» href=»mystyle.css» as=»style» onload=»this.rel=’stylesheet'»>
в href mystyle.css пропишите свой и готово:).
Но к сожалению не все браузеры могут сотрудничать с атрибутом rel=»preload», браузеры Chrome и Яндекс поддерживают, отстаёт Firefox. Для Firefox и остальных подобных браузеров нужен на сайте дополнительный скрипт cssrelpreload.js, чтобы css правильно подгружался:
<link rel=»preload» href=»mystyle.css» as=»style» onload=»this.rel=’stylesheet'»>
<script async src=»cssrelpreload.js»></script>
Добавим <noscript></noscript> чтобы стили подключались как обычно, когда у браузера нет возможности работать со скриптами.
Вот, что получилось:
<link rel=»preload» href=»mystyle.css» as=»style» onload=»this.rel=’stylesheet'»>
<noscript><link rel=»stylesheet» href=»path/to/mystyle.css»></noscript>
<script defer src=»cssrelpreload.js»></script> — прописываем отдельно ближе к тегу </body>
Как настроить кэш отдельным файлам
С одним .htaccess файлом на сайте, у меня не получалось решить проблему кэширование в браузере пользователя. Проверяя сайт через Google сервис PageSpeed Insights, всегда выпадала ошибка: «Используйте кэш браузера для следующих ресурсов:», там были и картинки и .js файлы. Обычным способом, то-есть прописать в одном .htaccess <ifModule mod_expires.c> и подключить кэширование не получалось. Обратился в техподдержку хостинга Спринтхост, с вопросом: почему кэшируются не все файлы, получил достаточно подробный ответ:
Выбрал аналогичный способ, добавил в папку картинки и где скрипты хранятся, в каждую свой .htaccess, оставляя ExpiresByType для нужной директории:
AddDefaultCharset «windows-1251»
php_value default_charset «windows-1251»
# кэш браузера <ifModule mod_expires.c> ExpiresActive On #кэшировать флэш и изображения на одну неделю ExpiresByType image/x-icon «access plus 7 days» ExpiresByType image/jpeg «access plus 7 days» ExpiresByType image/png «access plus 7 days» ExpiresByType image/gif «access plus 7 days» ExpiresByType application/x-shockwave-flash «access plus 7 days» #кэшировать css, javascript и текстовые файлы на одну неделю ExpiresByType text/css «access plus 7 days» ExpiresByType text/javascript «access plus 7 days» ExpiresByType application/javascript «access plus 7 days» ExpiresByType application/x-javascript «access plus 7 days» #кэшировать html и htm файлы на один день ExpiresByType text/html «access plus 1 day» #кэшировать xml файлы на десять минут ExpiresByType application/xhtml+xml «access plus 10 minutes» </ifModule>
Проблема с кэш браузера для файлов JPEG, PNG, GIF, JS, хранившихся на сервере сайта, была полностью решена. Сервисы проверки на скорость это подтвердили и перестали что либо предъявлять, скорость загрузки сайта немного выросла.
№1 Нативный lazy load
Нативная ленивая загрузка для и очень крутая. Ничто не может быть более простым, чем такая разметка:
Как видите, нет JavaScript, нет динамической подмены значения атрибута , просто «старый, тёплый, ламповый» HTML.
Атрибут даёт возможность задерживать скрытые за пределами окна изображения и фреймы, пока пользователь не прокрутит страницу до них. может принимать любое из этих трёх значений:
- : отличный вариант для ленивой загрузки
- : указывает браузеру не ждать и загружать контент сразу
- : оставляет опцию включения отложенной загрузки на усмотрение браузера
У этого метода нет конкурентов: у него нет ничего лишнего, он чистый и простой. Однако, хотя на момент написания статьи большинство основных браузеров уже хорошо , большинство — это ещё не все.
№2 Ленивая загрузка с использованием API Intersection Observer
Intersection Observer API — это современный интерфейс, который вы можете использовать для отложенной загрузки изображений и другого контента. Вот как MDN представляет этот API:
Тут всё понятно: асинхронно отслеживается пересечение одного элемента с другим. Допустим, вы хотите лениво загрузить галерею изображений. Разметка для каждого изображения будет выглядеть так:
Обратите внимание, что путь к изображению содержится внутри атрибута , а не. Причина в том, что при использовании изображение будет загружаться немедленно
В CSS вы указываете каждому изображению значение минимальной высоты, скажем, . Это резервирует место каждому изображению (элемент без атрибута ):
В JavaScript вы добавляете объект с конфигурацией и регистрируете его в экземпляре :
Затем, надо перебрать все изображения и добавить их в этот экземпляр iterationObserver:
Преимущества этого решения: его легко внедрить, оно эффективно и перекладывает выполнение тяжелых вычислений на API intersectionObserver.
С другой стороны, хотя API-интерфейс Intersection Observer , но не всеми. Однако, для маргинальных браузеров доступен полифилл.
