Ускорьте WordPress с помощью отложенной загрузки изображений и видео (плагин не нужен)
Ленивая загрузка — один из самых простых и эффективных способов ускорить загрузку вашего сайта WordPress, особенно на мобильных устройствах, и для ее реализации вам даже не понадобится плагин. В этом руководстве мы покажем вам, как вручную включить встроенную отложенную загрузку для изображений и видео, используя чистый и легкий код.
Что такое ленивая загрузка?
Ленивая загрузка — это метод повышения производительности, при котором медиа-ресурсы, такие как изображения и видео, загружаются только тогда, когда они собираются попасть в область просмотра пользователя (т. е. стать видимыми на экране). Это уменьшает количество HTTP-запросов при начальной загрузке страницы, делая сайт быстрее и легче.
Почему отложенная загрузка имеет решающее значение для производительности WordPress
- Уменьшает начальный вес страницы: Страницы загружаются быстрее, поскольку заранее запрашивается меньше ресурсов.
- Экономит пропускную способность: Невидимые медиафайлы не загружаются без необходимости.
- Улучшает основные веб-показатели: Ленивая загрузка улучшает такие показатели, как отрисовка самого большого содержимого (LCP).
- Улучшение SEO и пользовательского опыта: Скорость — фактор ранжирования. Более быстрый сайт поддерживает вовлеченность пользователей.
Как реализовать собственную отложенную загрузку изображений
Начиная с WordPress 5.5, встроенная отложенная загрузка автоматически добавляется к тегам изображений с помощью loading="lazy" Атрибут. Вы можете убедиться, что это работает правильно с минимальными корректировками:
<img src="your-image.jpg" alt="description" loading="lazy" width="600" height="400">Лучшая практика: Всегда указывайте width и height чтобы избежать смещений макета (важно для оценки CLS).
Как принудительно включить отложенную загрузку для всех изображений (необязательно)
Если некоторые темы или плагины пропускают добавление loading="lazy", вы можете принудительно выполнить это с помощью простого фрагмента JavaScript:
<script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll('img:not([loading])').forEach(function(img) { img.setAttribute("loading", "lazy"); }); }); </script>Добавьте этот скрипт в нижний колонтитул или используйте дочернюю тему, чтобы включить его должным образом.
Ленивая загрузка видео без плагинов
Видео тяжелые. Вставки с YouTube или Vimeo загружают несколько внешних скриптов. Чтобы лениво загружать их без плагинов, замените iframe на кликабельный предварительный просмотр изображения и загружайте видео только после взаимодействия.
Пример: Ленивая загрузка видео YouTube
<div class="youtube-lazy" data-id="VIDEO_ID"> <img src="https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg" alt="YouTube preview" loading="lazy"> <div class="play-button"></div> </div> <script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll(".youtube-lazy").forEach(function(el) { el.addEventListener("click", function() { let iframe = document.createElement("iframe"); iframe.setAttribute("src", "https://www.youtube.com/embed/" + el.dataset.id + "?autoplay=1"); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", "1"); el.innerHTML = ""; el.appendChild(iframe); }); }); }); </script>Заменять VIDEO_ID с реальным идентификатором видео YouTube.
Полезный стиль (необязательно)
Добавьте немного базового CSS, чтобы все выглядело красиво:
.youtube-lazy { position: relative; cursor: pointer; max-width: 100%; aspect-ratio: 16/9; background: #000; } .youtube-lazy img { width: 100%; height: auto; } .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: url('play-icon.svg') center center no-repeat; background-size: contain; }Почему бы не использовать плагин?
Плагины удобны, но часто поставляются с дополнительными скриптами, стилями или раздутыми. Ручная ленивая загрузка дает вам:
- Больше контроля над тем, что загружается
- Отсутствие влияния сторонних функций на производительность
- Более чистый вывод на переднем плане
Когда вам следует рассмотреть вариант использования плагина
Если у вас большой веб-сайт с частой загрузкой медиафайлов или у вас есть участники, не знакомые с кодом, рассмотрите эти оптимизированные плагины для отложенной загрузки:
- Кэш LiteSpeed (если ваш сервер поддерживает это)
- FlyingPress
- Perfmatters (премиум)
Но помните, что даже при использовании этих плагинов необходимо обязательно проверять фактическое поведение ленивой загрузки в DevTools.
Последние советы
- Используйте браузер DevTools для проверки
loading="lazy"применяется - Протестируйте свой сайт с помощью Google PageSpeed Insights
- Отслеживайте улучшения LCP после включения отложенной загрузки
Нужна помощь экспертов по улучшению скорости WordPress без громоздких плагинов? Попробуйте бесплатный ручной аудит на SpeedWP Pro — мы оптимизируем из ядра.
