Какой лучший способ ленивой загрузки изображений и видео в WordPress? Ленивая загрузка — один из лучших способов сделать ваш сайт быстрее.
Это зависит от того, используете ли вы кеш-плагин, поддерживающий отложенную загрузку (WP Rocket, W3 Total Cache, Swift, LiteSpeed Cache). Если ваш плагин кеша поддерживает ленивую загрузку изображений и видео, лучше использовать его, чтобы избежать необходимости устанавливать дополнительный плагин. Но если ваш плагин кеша не поддерживает отложенную загрузку, я рекомендую использовать тот, который поддерживает. Я перечислил альтернативные плагины отложенной загрузки ниже, которые вы можете установить отдельно.
- Что такое ленивая загрузка?
- Как лениво загружать изображения и видео. Плагины
- Native Lazyload
- WP Rocket
- Как включить отложенную загрузку в WP Rocket?
- W3 Total Cache
- Как включить отложенную загрузку в W3 Total Cache?
- Autoptimize
- Как включить отложенную загрузку в Autoptimize?
- Lazy Load By WP Rocket
- Как включить ленивую загрузку в Lazy Load By WP Rocket?
- A3 Lazy Load
- Как включить отложенную загрузку в A3 Lazy Load?
- Ленивая загрузка для комментариев
- Как включить отложенную загрузку для комментариев?
- Отложенная загрузка iframe в WordPress
- Вывод
- Часто задаваемые вопросы
- Какой плагин лучше всего подходит для отложенной загрузки изображений?
- Что делает ленивая загрузка?
- Как отключить ленивую загрузку на определенных страницах?
- Что означает заменить YouTube Iframe предварительным изображением?
- Стоит ли лениво загружать изображения и видео?
Что такое ленивая загрузка?
Ленивая загрузка — это метод оптимизации скорости сайта, который задерживает загрузку объектов до тех пор, пока они не понадобятся посетителю. Это приводит к уменьшению количества HTTP-запросов на странице, однако, если у вас много изображений или встроенных видео, требуется постоянно загружать их, чтобы прокрутить страницу вниз.
При отложенной загрузке весь контент, который виден в верхней части страницы, загружается немедленно. Это не только делает начальную загрузку веб-страницы намного быстрее, но также экономит полосу пропускания, память и использование данных, потому что не все пользователи будут просматривать всю страницу.
Ленивая загрузка чаще всего используется для изображений, но также может использоваться для различных других веб-ресурсов, включая видео, фреймы, рекламу, комментарии и другие элементы.
Как лениво загружать изображения и видео. Плагины
Раньше было необходимо использовать JavaScript для включения отложенной загрузки. С 30 июля 2019 г. последняя версия веб-браузера Google Chrome (Chrome 76) поддерживает встроенную отложенную загрузку. Это означает, что он встроен в сам веб-браузер.
Добавляя простой атрибут HTML loading = ”lazy” к изображениям и фреймам, браузер Chrome теперь загружает их только непосредственно перед тем, как они становятся видимыми в окне браузера.
Чтобы внешние элементы не замедляли загрузку сайта, в тегах iframe нужно прописать loading = "lazy" в для каждой записи и в виджетах сайтах. Для автоматической простановки, не используя плагины, необходимо добавить в файл functions.php темы следующий код.
1 2 3 4 5 6 7 | function lazyIFRAME($content) { $content = str_replace('<iframe', '<iframe loading="lazy"', $content); return $content; } add_filter('widget_custom_html_content', 'lazyIFRAME', 10); add_filter('widget_text', 'lazyIFRAME', 10); add_filter('thee_content', 'lazyIFRAME', 10); |
Native Lazyload
Native Lazyload — это новый плагин для WordPress от Google, который обеспечивает естественную ленивую загрузку. Добавляет атрибут loading = ”lazy” к изображениям и фреймам, заставляя их не загружаться, пока они не понадобятся. Этот простой HTML-атрибут приводит к тому, что изображения и встроенные фреймы в поддерживающих браузерах загружаются с отложенной загрузкой.
1 2 | <img src="example.jpg" loading="lazy" /> <iframe src="https://example.com" loading="lazy" /> |
Нет настроек — вы просто устанавливаете и активируете плагин, и он работает из коробки.
WP Rocket
Поскольку он уже имеет встроенную функцию отложенной загрузки, это означает, что вам не нужно устанавливать дополнительный плагин. В этом все преимущество WP Rocket; он поставляется с большим количеством функций, чем почти любой другой плагин для кэширования, что приводит к лучшему времени загрузки и оценкам GTmetrix. WP Rocket имеет обширную документацию по отложенной загрузке и настройке параметров WP Rocket.
Как включить отложенную загрузку в WP Rocket?
Чтобы включить отложенную загрузку в WP Rocket, перейдите в Настройки> WP Rocket> Мультимедиа> LazyLoad. Вы можете включить его для изображений, фреймов и видео, а также заменить фреймы YouTube предварительным изображением.
W3 Total Cache
В плагине W3 Total Cache также есть опция отложенной загрузки . W3 Total Cache некоторое время считался заброшенным, но с тех пор разработчик начал поддерживать свой плагин.
Как включить отложенную загрузку в W3 Total Cache?
Чтобы включить ленивую загрузку — выберите «Настройки»> «Общие настройки»> «Пользовательский интерфейс»> «Ленивая загрузка». Включите, затем перейдите в User Experience> Lazy Loading. Выберите для обработки тегов изображений HTML, фоновых изображений, исключить слова и метод вставки скрипта.
Autoptimize
Одной из многих функций является отложенная загрузка, но она также позволяет оптимизировать CSS, HTML, JavaScript и Google Fonts.
Как включить отложенную загрузку в Autoptimize?
Чтобы включить загрузочную загрузку в Autoptimize, перейдите в Настройки> Изображения> Ленивая загрузка изображений. У вас также есть возможность использовать CDN ShortPixel для оптимизации изображений.
Lazy Load By WP Rocket
Lazy Load By WP Rocket — это хорошо, если вы не используете WP Rocket, но хотите загружать изображения с отложенной загрузкой.
Как включить ленивую загрузку в Lazy Load By WP Rocket?
Выберите «Настройки»> «LazyLoad». У вас есть возможность лениво загружать изображения, кадры и видео, а также заменять видео YouTube на миниатюру. Есть не так много настроек для настройки. Может быть, поэтому у этого ленивого загрузочного плагина нет лучших отзывов.
A3 Lazy Load
A3 Lazy Load поддерживает отложенную загрузку как изображений, так и видео.
Как включить отложенную загрузку в A3 Lazy Load?
Чтобы включить загрузочную загрузку в A3 Lazy Load, перейдите в настройки> A3 Lazy Load. Вы можете настроить параметры для отложенной загрузки изображений, видео, iframes, Gravatars и выбрать, какие области вашего сайта вы хотите применить для отложенной загрузки (включая мобильные). Также есть опции для включения эффекта отложенной загрузки, загрузки цвета фона и опции для исключения URL-адресов и типов записей.
Ленивая загрузка для комментариев
Вы можете лениво загружать комментарии, используя плагин Lazy Load For Comments. Это может помочь сделать меньше HTTP-запросов, если у вас много комментариев в блоге, тем более что Gravatars может занять много времени для загрузки между всеми сторонними запросами.
Как включить отложенную загрузку для комментариев?
Чтобы включить ленивую загрузку для комментариев, перейдите в «Настройки»> «Обсуждение»> «Ленивая загрузка комментариев» . Это единственная конфигурация настроек для этого плагина, но у него есть хорошие отзывы.
Отложенная загрузка iframe в WordPress
Встроить в WordPress iFrame контейнер, содержащий контент с другого веб-сайта, не сложно. Проще говоря, встраивание iFrame означает встраивание кодов, которые позволяют вам делиться сторонним контентом без нарушения правил авторского права.
iFrame может принимать форму сообщений и аудиоклипов, визуального контента, такого как изображения и видео, которые потребляют много ресурсов сервера. Также можете использовать iFrame для встраивания Google карты.
iFrames можно использовать на любом веб-сайте, независимо от используемой технологии. Но сосредоточимся на WordPress. Чтобы встроить iframe нужно использовать HTML-тег iFrame, в котором вы укажете источник контента. Пример:
1 | <iframe src="website.com"> </iframe> |
Отложенная загрузка iframe в WordPress с использованием встроенной отложенной загрузки браузера. Скопируйте и вставьте приведенный ниже код в файл functions.php.
1 2 3 4 5 6 7 8 9 | add_filter( <span class="hljs-string">'save_post'</span>, <span class="hljs-string">'add_lazy_load'</span>, <span class="hljs-number">10</span>, <span class="hljs-number">3</span> ); <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add_lazy_load</span>(<span class="hljs-params">$post_id, $post, $update</span>) </span>{ <span class="hljs-keyword"> if</span> (wp_is_post_revision($post_id)) { <span class="hljs-keyword"> return</span>; } <span class="hljs-keyword"> if</span> ( ! class_exists( <span class="hljs-string">'DOMDocument'</span>, <span class="hljs-literal">false</span> ) ) <span class="hljs-keyword"> return</span>; remove_action(<span class="hljs-string">'save_post'</span>, <span class="hljs-string">'add_lazy_load'</span>); $post_status = get_post_status(); |
Код автоматически добавит атрибут ‘loading = «lazy»‘ ко всем тегам img и iframe при создании новой записи или страницы.
Вывод
Возможно, самая большая проблема с отложенной загрузкой — это когда объекты загружаются недостаточно быстро. Например, когда вы относительно быстро прокручиваете страницу вниз, и перед отображением изображений появляется заметная задержка.
Эта задержка может сильно отвлекать и иногда заставляет текст прыгать по странице. Вы можете предотвратить это, если ваши изображения хорошо оптимизированы и загружаются быстро. Есть 3 основных способа добиться этого:
- Размеры изображений: перед загрузкой сохраняйте изображения в размерах, которые соответствуют вашим страницам. Изображения шириной 1000 пикселей загружаются намного быстрее, чем изображения шириной 6000 пикселей.
- Плагин для оптимизации изображений: используйте плагин для оптимизации изображений, такой как Imagify, чтобы сжимать изображения без снижения качества.
- CDN. Чтобы посетители могли загружать их с быстрого веб-сервера, расположенного рядом с ними — используйте сети доставки контента (CDN). Cloudflare — отличный бесплатный вариант.
Предоставляя хорошо оптимизированные изображения из быстрой CDN, они должны отображаться так быстро, что ваши посетители даже не заметят, что они загружены лениво.
Часто задаваемые вопросы
Какой плагин лучше всего подходит для отложенной загрузки изображений?
Если вы уже используете плагин кеша, который поддерживает ленивую загрузку (например, WP Rocket, SG Optimizer, W3TC, Swift, LiteSpeed), лучше сначала попробуйте их. В противном случае, Autoptimize или плагин Lazy Load от WP Rocket являются хорошими плагинами ленивой загрузки.
Что делает ленивая загрузка?
Ленивая загрузка ускоряет начальное время загрузки, ожидая загрузки изображений и видео, пока пользователи не прокрутят страницу вниз и не увидят их.
Как отключить ленивую загрузку на определенных страницах?
Большинство плагинов позволяют вам сделать это. Например, если вы используете WP Rocket и редактируете страницу или сообщение, на панели мониторинга вы увидите параметр, позволяющий отключить (или включить) отложенную загрузку этого конкретного фрагмента содержимого.
Что означает заменить YouTube Iframe предварительным изображением?
Если вы вставляете видео на свой сайт WordPress, «проигрыватель YouTube» загружается только после нажатия кнопки «Воспроизвести». Другими словами, единственное, что загружается изначально, это предварительное изображение.
Стоит ли лениво загружать изображения и видео?
Постоянная загрузка изображений при прокрутке страницы может раздражать пользователей. Тем не менее, все мои изображения оптимизированы до 100% в GTmetrix. Я лениво загружаю видео и заменяю iframe на изображение предварительного просмотра. Поскольку загрузка каждого встроенного видео может занять 2 секунды (намного тяжелее, чем изображение), польза от отложенной загрузки видео значительна.
Очень интересная статья. А как вы думаете плагин Lazy Load For Comments как влияет на SEO?
Ведь комментарии — это тоже контент, и они индексируются.
Влияние комментарий на SEO влияет как в положительную, так и в отрицательную сторону. Плагин Lazy Load For Comments в основном играет роль на скорость и загрузку страниц сайта. Если пользователь прочитав статью, не доходя до раздела комментариев, то и загружать комментария не обязательно.