Часто задаваемые вопросы
Какой плагин лучше всего подходит для отложенной загрузки изображений?
Если вы уже используете плагин кеша, который поддерживает ленивую загрузку (например, WP Rocket, SG Optimizer, W3TC, Swift, LiteSpeed), лучше сначала попробуйте их. В противном случае, Autoptimize или плагин Lazy Load от WP Rocket являются хорошими плагинами ленивой загрузки.
Что делает ленивая загрузка?
Ленивая загрузка ускоряет начальное время загрузки, ожидая загрузки изображений и видео, пока пользователи не прокрутят страницу вниз и не увидят их.
Как отключить ленивую загрузку на определенных страницах?
Большинство плагинов позволяют вам сделать это. Например, если вы используете WP Rocket и редактируете страницу или сообщение, на панели мониторинга вы увидите параметр, позволяющий отключить (или включить) отложенную загрузку этого конкретного фрагмента содержимого.
Что означает заменить YouTube Iframe предварительным изображением?
Если вы вставляете видео на свой сайт WordPress, «проигрыватель YouTube» загружается только после нажатия кнопки «Воспроизвести». Другими словами, единственное, что загружается изначально, это предварительное изображение.
Стоит ли лениво загружать изображения и видео?
Постоянная загрузка изображений при прокрутке страницы может раздражать пользователей. Тем не менее, все мои изображения оптимизированы до 100% в GTmetrix. Я лениво загружаю видео и заменяю iframe на изображение предварительного просмотра. Поскольку загрузка каждого встроенного видео может занять 2 секунды (намного тяжелее, чем изображение), польза от отложенной загрузки видео значительна.
How our lazy loading works
We use a small (2.5 KB), open-source JavaScript library for lazy loading images, iframes, etc. We also support lazy-loading WebP files. You will see a request to the following file on your site:
Perfmatters lazy loading vs native lazy loading
WordPress 5.5 now has native lazy loading by default. However, we recommend using the lazy loading solution in Perfmatters. Why? Our solution is faster and better than native lazy loading for the following reasons:
- Native means it’s letting the browser decide what should be lazy loaded. Unfortunately with that is the problem that by default, it’s way too eager. This can be an advantage as you probably won’t need any exclusions, but in general, not as many resources will be lazy loaded. This means it won’t be as fast.
- Native lazy loading is making improvements but still lacks support for certain things. We’ve been adding a lot of features to ours, as you can see below.
Important: When lazy loading in Perfmatters is enabled, the default native lazy loading in WordPress is automatically disabled.
Устраните ресурсы, блокирующие отображение
Чем больше на вашем сайте CSS и JS-кода, тем дольше браузер будет его отрисовывать. Поэтому рекомендуется загрузку менее важные скриптов и стилей отложить «в долгий ящик», чтобы они грузились в самую последнюю очередь. Самый лучший вариант — вообще убрать неиспользуемый JS-код или перенести его в футер — чем меньше такого кода будет в <head>, тем выше будет показатель Page Speed. Если вы подключаете Jquery в <head>, то это блокирует отображение страницы, так как браузер ожидает пока загрузится все что находится в <head>
Сильно тормозит загрузку страницы код Jquery, поэтому, если есть возможность, не стоит использовать его на своем сайте. В крайнем случае, как уже писали выше, jquery библиотеки, лучше поместить в футер сайта (это можно сделать с помощью плагина Hummingbird, см. ниже), из-за блокировки отображения. Google советует искать плагины в библиотеке по ключевым словам: defer css javascript. И мы нашли несколько.
Disable lazy loading in other parts
Considering the particular case of disabling lazy loading in the first image, important to avoid errors in the LCP reading of the main web metrics, let’s see how to disable deferred loading on other resources.
With WP Rocket
This plugin, as usual, allows all kinds of operations, such as excluding any media by adding in the exclusions box of lazy loading its CSS class or even the name of the file, really simple.
Disable lazy load on specific entries
Do you want to disable the lazy load on specific posts or pages, there is not much mystery. With WP Rocket you will find in the editor settings box from which to enable or disable any general optimization.
However, if you prefer to use codes, it is also possible, here are a few…
A very practical code would be to disable lazy loading on featured images, like this:
With this code you will disable deferred loading on posts, but it is maintained on pages and in the blog archive:
With this code you disable deferred loading on entries but not on pages:
If you prefer not to have deferred loading in the post archive, in the blog, the code is this one:
With this other code you disable deferred loading on the home page of your website:
Disable lazy load by file name
Do you have several images with similar names that you want to exclude from the deferred upload? See what a neat code to exclude all those containing certain text in the file name:
An interesting use would be to be able to exclude images from deferred loading based on the source domain, for example:
If you do not want deferred loading in Gravatar.com avatars the code to add will be this:
Disable lazy load in CSS classes with code
Finally, if you prefer a code to disable deferred loading in certain CSS classes the code would look like this:
With Autoptimize
In the Autoptimize plugin we will find an exclusion box, in which as with WP Rocket, we can include CSS classes or file names. Simple and effective.
With SG Optimizer
I end with SG Optimizer as it is the plugin that I believe offers the best solution for selective activation/deactivation of deferred loading, as it is completely optional, by means of simple selectors.
Simply enable or disable where you want to apply lazy loading:
- Images (default)
- Iframes
- Videos
- Gravatars
- Thumbnails
- Responsive images
- Widgets
- For mobiles
- In shortcodes
In addition to the possibility of excluding CSS classes in the exclusion box, as we saw before.
It seems to me the perfect way to address this need.
Еще немного о плейсхолдерах
Напомню, плейсхолдер (placeholder) — это заглушка, которое показывается пока загружается изображение. Как только изображение будет загружено заглушка будет заменена оригинальным изображением.
В примере выше в качестве заглушки мы использовали прозрачную gif-картинку, закодированную в base64. Вообще, если не использовать прелодер, то во время загрузки мы вообще ничего не увидим. Есть варианты разнообразить этот момент.
Плейсхолдер доминирующего цвета
Данная техника состоит в том, чтобы взять в оригинале картинки доминирующий (базовый) цвет и показывать его до загрузки. Такой подход используют сайты Pinterest и Google картинки. Вот как это выглядит.
Источник изображения — https://manu.ninja/dominant-colors-for-lazy-loading-images
Извлечь доминирующий цвет можно, как с помощью JavaScript, так и с помощью PHP, используя расширение . Наиболее подробнее об этом можете почитать здесь. Я не буду тут останавливаться подробно, так как это тема для отдельного разговора. Может быть как нибудь в отдельной статье…
Плейсхолдер низкого качества (LQIP)
Также, до загрузки изображения мы в качестве заглушки можем показывать мутное оригинальное изображение. Такой трюк использует Facebook для изображений. Это дает некое представление о том, какая будет загружаемая картинка, да и выглядит довольно не плохо. Рабочий пример можете посмотреть на CodePen.
Плейсхолдер низкого качества (LQIP)
Вот HTML-код изображения.
Сравнение результатов
Заметно, что размер страницы и количество запросов к ней значительно увеличились. Чем же объяснить эту разницу? Давайте сначала взглянем на снимок размера контента при активированном плагине a3 Lazy Load.
Картинки занимают совсем мало места: чуть более 150 kb. Оба плагина — BJ Lazy Load и Lazy Load XT — выдают страницу весом в 2.0 MB. Вот, как выглядит скриншот контента, который весит 2.0 MB.
Размер скриптов, HTML, CSS и другого контента практически идентичный. А вот изображения стали весить 1.86 MB, что значительно превышает 150 kb. Так что же произошло?
Как уже было упомянуто ранее, WordPress автоматически выбирает самый легкий вариант изображения.
Оба плагина BJ Lazy Load и Lazy Load XT изменяют это поведение WordPress, доставляя изображение с высоким разрешением, в то время, как a3 Lazy Load не изменяет это поведение, и соответственно вес страницы здесь не увеличивается.
Не смотря на увеличение размера страниц, быстрее всего сайт загружается с плагином BJ Lazy Load, а не с a3 Lazy Load.
На первый взгляд, кажется, что BJ Lazy Load посылает больше запросов. Но, если мы посмотрим на файловую структуру, то поймем, что на самом деле происходит.
Если BJ Lazy Load активирован, то посылается 20 запросов, которые начинаются с data:image/gif. Это скорее данные URI, нежели HTTP-запросы. Таким образом, они говорят браузеру создавать gif локально, вместо того, чтоб запрашивать с сервера. В результате BJ Lazy Load нужно только 17 HTTP запросов, а a3 Lazy Load – аж, 27, и это объясняет, почему страницы загружаются так быстро.
Exclude images from lazy loading
There may be times where you will want to exclude a specific image from being lazyloaded. There are a couple ways to do that.
Exclude using Perfmatters UI
The easiest way is to use the UI in Perfmatters. Exclude an element by adding the source URL (example.png) or by adding any unique portion of its attribute string (class=”example”). Format: one per line
Exclude image from lazy loading
If you have a plugin like ShortPixel or Imagify serving WebP images you might need to target the tag.
Here are a couple of examples:
- If you’re using a theme like GeneratePress and want to exclude the logo from lazy loading, you can add their class.
- If you’re wanting to exclude featured images from lazy loading in your blog posts, you can use their thumbnail class, for example .
no-lazy CSS class
If you have access to add a CSS class to the specific image you are wanting to exclude, simply add the class and it should be ignored when the document is being prepared for lazyloading.
perfmatters_lazyload_excluded_attributes filter
If the image you want to exclude is a bit harder to access and manipulate directly, we have a WordPress filter available which can be used to add any attributes or portions of attributes that are specific to the image in question.
In the example below, we are targeting any images that contain either the attribute or the partial attribute. This is simply a string match, so any portion of any attribute should work, it just needs to be an exact match for the image or images you are wanting to exclude.
Here is an example of an exclusion based on an image file name match.
This filter can be used in a variety of ways, please reach out to us if you have any questions.
Exclude page/post from lazy loading
You can exclude an individual post, page, or custom post type from lazy loading. In the editor, on the right-hand side uncheck “Lazy Loading.” This will exclude the entire page from the script.
Exclude page from lazy loading
Что такое ленивая загрузка (Lazy Load) изображений и как она работает?
Вместо того, чтобы загружать все изображения одновременно, Lazy Load загрузка загружает только те изображения, которые видны на экране пользователя. А все другие изображения заменяются заполнителем (например, цветовой заливкой или размытой копией изображения низкого качества).
Когда пользователь прокручивает страницу вниз, сайт загружает изображения, которые в данный момент видны в области просмотра браузера.
Слово ленивый у нас ассоциируется с человеком, который как можно дольше избегает работы, или у которого явное желание вообще ничего не делать.
В данном же контексте речь идет о том, что ленивая загрузка откладывает загрузку ресурсов на странице до тех пор, пока они не нужны. Вместо того, чтобы загружать все картинки на странице сразу, мы разрешаем им загружаться позже, когда эти ресурсы действительно будут нужны. Поэтому, данная техника называется ленивой или отложенной загрузкой (Lazy Load).
Техника отложенной загрузки может применяться не только к картинкам, но и практически к любым ресурсам на странице. Это могут быть JavaScript файлы, видео, и даже текст.
Эффективность техники ленивой загрузки
Если посетитель вашего сайта не прокручивает страницу до большой картинки, например, в футере, соответственно он ее не увидит, а значит и загружать ее не нужно. Здесь можно добиться двух позитивных моментов: увеличения скорости загрузки сайта и снижения нагрузки на сервер.
Если мы не загружаем картинки на странице, соответственно эта страница будет загружаться быстрее. Поскольку браузер не будет загружать эти картинки с сервера, сайт будет рендериться (визуализироваться) быстрее. Также это гарантирует, что на сервер будет меньшая нагрузка.
Теория реализации отложенной загрузки
Типичная HTML-разметка для изображения выглядит так:
<img src="/{путь к картинке}/image.jpg?x70531" />
Браузер использует атрибут тега , чтобы найти адрес хранения изображения и начать его загрузку. Когда браузер получает атрибут , он запускает одновременную загрузку всех изображений на странице
И неважно, сколько картинок вы разместили на странице: одну или тысячу
Соответственно, первая задача для достижения отложенной загрузки – это предотвратить загрузку изображений. Чтобы отложить загрузку, нужно поместить URL-адрес изображения в атрибут, который отличается от . Допустим, если для этих целей мы будем использовать атрибут , тогда код будет выглядеть так:
<img data-src="/{путь к картинке}/image.jpg?x70531" />
Теперь, когда атрибут пустой, браузер не будет запускать загрузку изображения.
После этого нам нужно сообщить браузеру, когда нужно запускать загрузку. В противном случае этого никогда не случится. Мы проверяем вхождение изображения (т.е., его заполнителя) в область просмотра (видимую часть экрана), после чего запускаем загрузку.
Есть два способа проверить, когда изображение попадает в видимую часть экрана. Давайте рассмотрим эти способы на практике, с примерами рабочего кода.
Что такое ленивая загрузка (lazy load wordpress) и чем она полезна
Ленивая загрузка – это способ не дать браузеру загружать все части страницы одновременно. Веб-страница становится легче и требуется меньше данных для передачи с сервера в браузер.
Суть этого способа заключается не в том, чтобы запрещать браузеру загружать ресурсы и изображения. Ленивая загрузка просто задерживает их отображение до того момента, когда они понадобятся пользователю.
Например, картинка не нужна на странице, пока пользователь не прокрутит ползунок, чтобы ее увидеть. Поэтому браузеру не обязательно загружать эту картинку, пока она не понадобится. Именно это и делает ленивая загрузка.
Использование кэширования
Кэширование – это еще один важный фактор, который стоит учитывать, если мы хотим разогнать WordPress. Кэширование позволяет хранить ваши страницы и записи в виде статичных файлов, которые затем доставляются вашим посетителям, минимизируя процесс загрузки на вашем сервере. Вы можете использовать кэширование, используя WordPress плагины кэширования и тем самым внедрив кэширование браузера и кэширование со стороны сервера.
Плагины кэширования
Вот несколько лучших бесплатных и платных плагинов кэширования:
Cache EnablerW3 Total CacheWP Super CacheWP Rocket
Установка и правильная настройка плагина кэширования может привести к увеличению производительности в 200-300%!
Обход PHP для кэшируемых страниц
Ниже представлена более продвинутая конфигурация Nginx обхода PHP для кэширования страниц. Этот пример оптимизирован для плагина Cache Enabler.
Пример конфигурации Nginx
set $cache_path $request_uri;
# bypass cache if query string not empty
if ( $query_string ) {
set $cache_path 'nocache';
}
# bypass cache for POST requests
if ( $request_method = POST ) {
set $cache_path 'nocache';
}
# bypass cache for admin area
if ( $request_uri ~ /wp-admin/ ) {
set $cache_path 'nocache';
}
# bypass cache for logged in users
if ( $http_cookie ~ (wp-postpass|wordpress_logged_in|comment_author)_ ) {
set $cache_path 'nocache';
}
location / {
try_files /wp-content/cache/cache-enabler/${http_host}${cache_path}index.html $uri $uri/ /index.php?$args;
}
Кэширование браузера – добавьте заголовки Expires к WordPress
Вы также можете добавить кэширование браузера, добавив заголовки expires. Заголовки Expires говорят браузеру, должны kb они запросить определенный файл с сервера или они должны захватить их из кэша браузера. Добавляя их, вы можете уменьшить количество HTTP-запросов, которые им нужны. Некоторые плагины кэширования для WordPress позволяют добавить их, но вы также можете просто добавить код в ваш файл .htaccess
<IfModule mod_expires.c> # Enable expirations ExpiresActive On # Default directive ExpiresDefault "access plus 1 month" # My favicon ExpiresByType image/x-icon "access plus 1 year" # Images ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 month" # Javascript ExpiresByType application/javascript "access plus 1 year" </IfModule>
Кэширование сервера
Помимо плагинов кэширования для WordPress и кэширования браузера вы можете использовать преимущества кэширования со стороны сервера. Такой вид кэширования обычно используется на сайтах с большим количеством трафика. Кэширование с Varnish может быть очень мощным, если его скомбинировать с плагином кэширования и CDN.
Prefetch обычно используемых доменов
Prefetching – это нечто сходное кэшированию в том смысле, что вы тоже говорите браузеру, типа Chrome, что нужно найти DNS-настройки перед тем, как они на самом деле понадобятся. Благодаря этому «прошиваются» страницы и запросы любых prefetched-доменов, которые еще не кэшируются, и они начинают работать быстрее.
Вы можете использовать prefetch для доменов в WordPress, добавив синтаксис домена в ваш файл header.php между тегами <head> </head> . Этот процесс не блокируются и будет включаться только тогда, когда возможно. Вот распространенные примеры.
Prefetch Google шрифты:
<link rel="dns-prefetch" href="//fonts.googleapis.com">
Prefetch Google код (jQuery)
<link rel="dns-prefetch" href="//ajax.googleapis.com">
Prefetch Google Analytics
<link rel="dns-prefetch" href="//www.google-analytics.com">
Удаляем Query Strings из статичных ресурсов
Также можно извлечь пользу из удаления query strings из ваших статичных ресурсов, так как они могут приводить к возникновению проблем с прокси кэша и CDN. В WordPress для этого есть парочка опций.
Отредактируйте ваш файл functions.php, чтоб включить туда функцию, которая удалит query strings.
function _remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts;
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );
Если вы используете плагин кэширования типа W3 Total Cache, то у вас есть опция, которая предотвращает создание query strings. Есть бесплатные WordPress-плагины, которые также могут удалить query strings, и это плагины Query Strings Remover и Remove Query Strings From Static Resources.
№2 Ленивая загрузка с использованием API Intersection Observer
Intersection Observer API — это современный интерфейс, который вы можете использовать для отложенной загрузки изображений и другого контента. Вот как MDN представляет этот API:
Тут всё понятно: асинхронно отслеживается пересечение одного элемента с другим. Допустим, вы хотите лениво загрузить галерею изображений. Разметка для каждого изображения будет выглядеть так:
Обратите внимание, что путь к изображению содержится внутри атрибута , а не. Причина в том, что при использовании изображение будет загружаться немедленно
В CSS вы указываете каждому изображению значение минимальной высоты, скажем, . Это резервирует место каждому изображению (элемент без атрибута ):
В JavaScript вы добавляете объект с конфигурацией и регистрируете его в экземпляре :
Затем, надо перебрать все изображения и добавить их в этот экземпляр iterationObserver:
Преимущества этого решения: его легко внедрить, оно эффективно и перекладывает выполнение тяжелых вычислений на API intersectionObserver.
С другой стороны, хотя API-интерфейс Intersection Observer , но не всеми. Однако, для маргинальных браузеров доступен полифилл.
Уменьшите влияние стороннего кода
Наверное, самый дельный «совет», который дал нам сервис. Действительно, чем больше сторонних API, чужого JS-кода подгружается с сайтом, тем дольше он будет отрисовываться в браузере пользователя
Совсем избавиться от него вряд ли получится — Яндекс.Метрика, Adsense и многие нужные сервисы всё равно придётся интегрировать, если вам, конечно, важно отслеживать статистику и откручивать рекламу
С нашей стороны был отключен виджет «Инстаграма», который подгружал картинки с нашего неофициального аккаунта. Решили ограничиться виджетом иконок социальных сетей, который почти не потребляет трафика. Как вариант, можно отключить показ сайдбара в мобильной версии. В нашей теме для WP такого функционала, к сожалению, не оказалось.
What Lazy Loading Is and How it Works
Lazy loading images means loading images on your WordPress site asynchronously. In other words, loading images and other content on your web page at different times.
In a nutshell, here’s how lazy loading works: when someone visits your website, images will load above the fold, but the remaining images on the page will only download when they come into view on the user’s screen. In other words, lazy loading means deferring offscreen images.
Lots of image-heavy websites use this technique. As you scroll down the page, you’ll see placeholder images that quickly fill up with real images.
A great example is Medium, the popular blogging website.
Lazy loading in action on the Medium website.
As you can see from the image above, Medium displays a blurred placeholder image until the actual high-resolution image has fully loaded. Hence, visitors know that an image is coming.
Lazy Loading on Mobile
Lazy loading works on mobile as it works on desktop — and the same goes for how lazy loading should be implemented.
What’s more, mobile lazy loading gives users a higher benefit as they don’t have to consume any mobile data for loading images they don’t scroll to.
Please note that AMP for images doesn’t work the same. Amp-img uses JavaScript to handle lazy loading with a fallback to the main image if JS is disabled.
Что такое ленивая загрузка изображений?
Полагаю, вам уже известно о том, что быстрый сайт способствует росту посетителей. Скорость загрузки влияет как на хорошее отношение поисковых систем, так и на поведенческие факторы. Мы же не хотим, чтобы читатель, не дождавшись загрузки страниц, закрыл сайт и ушёл?
Что такое ленивая загрузка? Это постепенная загрузка изображений. То есть, когда пользователь откроет страницу, то не сразу все картинки начнут загружаться. А будет происходить постепенная подгрузка по мере пролистывания данной страницы вниз.
И настроить можно будет не только обложки. Но, представьте себе, и картинки баннеров, заставки видеоматериалов, миниатюр и т.д. А в настройках плагина a3 Lazy Load вы сами сможете определить, на какие именно элементы будет распространяться действие. А на какие нет.
Download / Install
| Dev version: | jquery.lazyloadxt.js | jquery.lazyloadxt.extra.js |
| Minified version: | jquery.lazyloadxt.min.js | jquery.lazyloadxt.extra.min.js |
Effects:
| Dev version: | jquery.lazyloadxt.fadein.css | jquery.lazyloadxt.spinner.css |
| Minified version: | jquery.lazyloadxt.fadein.min.css | jquery.lazyloadxt.spinner.min.css |
Addons:
| jquery.lazyloadxt.script.js | jquery.lazyloadxt.script.min.js | |
| jquery.lazyloadxt.srcset.js | jquery.lazyloadxt.srcset.min.js | |
| jquery.lazyloadxt.print.js | jquery.lazyloadxt.print.min.js | |
| jquery.lazyloadxt.bg.js | jquery.lazyloadxt.bg.min.js | |
| jquery.lazyloadxt.autoload.js | jquery.lazyloadxt.autoload.min.js | |
| jquery.lazyloadxt.bootstrap.js | jquery.lazyloadxt.bootstrap.min.js | |
| jquery.lazyloadxt.jquerymobile.js | jquery.lazyloadxt.jquerymobile.min.js |
Get full snapshot of Lazy Load XT: lazy-load-xt-master.zip
If you have any feature to request or bug to report please use
GitHub issues.
