Ленивая загрузка для повышения производительности WordPress

Сайты должны загружаться быстро

Важно, чтобы ваш сайт загружался быстро. Люди просто не хотят долго ждать загрузки любого веб-сайта, это просто неудовлетворительно, и в наши дни мы ожидаем, что информация из Интернета будет практически мгновенной. Веб-сайты, которые загружаются медленно, также могут привести к высоким показателям отказов и снижению SEO.

Также важно, чтобы на вашем веб-сайте было много изображений, потому что изображения действительно могут сделать любой веб-сайт привлекательным, а привлекательные веб-сайты также могут привести к снижению показателей отказов и увеличению SEO.

Но это дилемма, потому что чем больше изображений на вашем сайте, тем больше он должен загружаться, чем больше он должен загружаться, тем медленнее он будет загружаться.

Как вы можете улучшить скорость своего сайта WordPress?

Оптимизируйте изображения для Интернета

Вы можете получить плагин, например WP Смуш или же EWWW Оптимизатор изображений, эти плагины просто удаляют данные из файлов изображений, поэтому единственные данные, которые есть в файле, — это данные, необходимые для изображения. Примерами данных, которые будут удалены, могут быть дополнительные пробелы и форматирование, метаданные, созданные другими приложениями для целей ведения записей и индексов).

Кэширование

Кэширование происходит всякий раз, когда веб-сайт загружается, все его изображения загружаются на компьютер, поэтому в следующий раз, когда мы снова просматриваем тот же веб-сайт, мы видим уже загруженные изображения. Без кэширования каждый раз, когда мы загружаем один и тот же веб-сайт, мы должны ждать для изображений снова и снова, поэтому веб-сайт загружается намного быстрее, когда изображения кэшируются. По умолчанию веб-браузеры, такие как Chrome, уже поставляются с кэшированием, но когда вы можете получить плагин, например Общий кэш W3 или же WP Супер Кэш вы можете поднять кэширование на совершенно новый уровень!

Услуга веб-хостинга, которую вы используете, может уже поставляться с собственной службой кэширования, поэтому обратитесь к поставщику услуг веб-хостинга за дополнительной информацией.

CDN (сеть доставки контента)

Вы можете попросить своего веб-хостинг-провайдера разместить ваш сайт на CDN. Это когда ваш сайт размещен не на одном, а на несколько серверов. Таким образом, когда кто-то просматривает ваш веб-сайт в Сингапуре, он будет просматривать веб-сайт, размещенный на сервере Сингапура, когда кто-то просматривает ваш веб-сайт в Лос-Анджелесе, он будет просматривать веб-сайт, размещенный на сервере Лос-Анджелеса. Это всего лишь очень грубый пример, который поможет вам понять, что с CDN люди будут загружать ваш сайт с ближайшего к ним сервера. Чем ближе вы к серверу, тем быстрее будет загружаться ваш сайт. Без CDN веб-сайт может быть быстрее для кого-то в Лос-Анджелесе, но медленнее для кого-то в Сингапуре.

Опять же, услуга веб-хостинга, которую вы используете, может уже поставляться с собственной службой CDN, поэтому обратитесь за дополнительной информацией к поставщику услуг веб-хостинга. В противном случае хорошее место для поиска CloudFlare.

Но у меня уже есть все эти вещи, но это все еще недостаточно быстро?

Есть также ряд других улучшений, которые можно внести в вашу тему WordPress, отредактировав код, а в некоторых случаях это можно сделать с помощью плагина. Эти вещи могут включать, но не ограничиваться;

  • Объединение и минимизация скриптов и стилей
  • Загружайте скрипты в конце тега (вместо тега).
  • Использование спрайта CSS

Однако когда дело доходит до веб-сайтов с большим количеством изображений, все изображения могут занимать от 1 до 4 МБ времени загрузки страницы, в то время как все остальные файлы вместе взятые могут занимать от 800 до 1 МБ. Если мы собираемся добиться скорости загрузки страницы в 3 секунды или меньше, вам действительно нужно учитывать ленивая загрузка!

Что такое ленивая загрузка?

Ленивая загрузка — это просто загрузка только те изображения, которые находятся внутри области просмотра.

Давайте представим, что у нас есть веб-страница с 7 изображениями. И просто для понимания скажем, что каждое изображение загружается примерно за 1 секунду.

веб-страница.jpg

Теперь давайте посмотрим, что произойдет, когда мы загрузим его в наш браузер.

веб-страница-ленивый.jpg

Без ленивой загрузки: Браузер дождался завершения загрузки всех 7 изображений, прежде чем он будет готов для просмотра страницы. Следовательно, нам пришлось ждать 7 секунд.

С ленивой загрузкой: Браузер загрузит только те изображения, которые находятся в области просмотра. Следовательно, нам пришлось ждать всего 3 секунды!

При отложенной загрузке, когда вы прокручиваете страницу вниз, изображения будут загружаться по мере их появления в области просмотра. Ленивая загрузка экономит скорость загрузки страницы, загружая только те изображения, которые пользователь выбирает для просмотра.

Теперь разница между нашими двумя примерами составляет всего 4 секунды, но представьте, если бы на странице было 100 изображений для загрузки, при ленивой загрузке скорость страницы всегда будет 3 секунды.

Как кодировать ленивую загрузку (для вашего веб-разработчика)

HTML

Вместо того, чтобы кодировать изображения, подобные этому…

<img	src="image-500x500.jpg" 
    srcset="image-500x500.jpg 1x"
                image-1000x1000.jpg 2x"
        alt="Image" 
        width="500" 
        height="500"
/>

Кодируем так…

<img	src="image-50x50.jpg"
    data-src="image-500x500.jpg"
    data-srcset="image-500x500.jpg 1x, 
        			image-1000x1000.jpg 2x"
    alt="Image"
    width="500"
    height="500"
        class="lazyload lazy"
/>

Как вы видете…

  • Мы преобразовали src а также srcset теги в теги атрибутов данных
  • Мы добавляем два класса: «ленивая загрузка» и «ленивый».
  • Мы можем даже оставить src тег пуст, если мы хотим, но для SEO, доступности и общих рекомендаций мы поместим изображение-заполнитель, в этом примере очень маленькую версию изображения (та, которая загружается за миллисекунду!).

Javascript

Да, вы уже догадались, на самом деле это довольно просто, как только изображение попадает в окно просмотра, src а также srcset заменяются атрибутами данных.

«Ленивый» класс также удаляется, что позволяет нам улучшить UX (читайте следующий раздел о CSS).

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = document.querySelectorAll(".lazyload");
  var active = false;

  function lazyLoad() {
      if (active === false) {
      active = true;
  
      setTimeout(function() {
          
        for(i = 0; i < lazyImages.length; i++){
          if (
              		(lazyImages[i].getBoundingClientRect().top <= window.innerHeight && lazyImages[i].getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImages[i]).display !== "none"
              	) {

                  lazyImages[i].src = lazyImages[i].dataset.src;
                  lazyImages[i].srcset = lazyImages[i].dataset.srcset;
                  		
            if (lazyImages[i].complete) {
                lazyImages[i].classList.remove("lazy");
            } else {
              lazyImages[i].addEventListener('load', function() {
                this.classList.remove("lazy");
                    })
            }
          }
        };


        active = false;
      }, 200);
    }
  };
  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("load", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});

В моем примере я также сделал, чтобы этот скрипт срабатывал не только при прокрутке, но и при загрузке, изменении размера и изменении ориентации. И поскольку есть событие прокрутки, я добавил небольшое регулирование, чтобы предотвратить перегрузку стека вызовов.

CSS

Наконец, мы используем CSS для улучшения взаимодействия с пользователем. Без CSS мы просто увидим, как изображения переключаются с пиксельного изображения на изображение с высоким разрешением в мгновение ока.

Итак, давайте добавим небольшой фильтр и переход, чтобы сделать его более плавным.

.lazyload  {
  -webkit-transition(.5s);
  transition(.5s);
  -webkit-filter: blur(0px);
  filter: blur(0px);
}
.lazyload.lazy  {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

Этот эффект размытия очень популярен, вы, вероятно, видели его в Середина статьи. С помощью CSS мы можем проявлять творческий подход и делать другие вещи, например делать изображение невидимым видимым (т. е. постепенно появляться) или даже делать так, чтобы изображение исчезало по мере его перемещения вверх по странице…

.lazyload  {
  -webkit-transition(.5s);
  transition(.5s);
  opacity:1;
  -webkit-transform: translateY(0em);
  transform: translateY(0em);
}
.lazyload.lazy  {
  opacity:0;
  -webkit-transform: translateY(50em);
  transform: translateY(50em);
}

Готовы добавить ленивую загрузку на свой сайт WordPress?

Довольно просто э. Хотя мы только поцарапали поверхность. Ленивая загрузка также может применяться к фоновым изображениям, видео и даже к элементам iframe, которые могут быть даже тяжелее изображений.

Есть также много других вещей, которые вы можете использовать для улучшения взаимодействия с пользователем, таких как использование значков загрузки и анимированных элементов, сопровождающих изображение.

Я надеюсь, что вы нашли эту статью полезной, если вам нужна дополнительная помощь, я могу отредактировать вашу тему WordPress, чтобы иметь ленивую загрузку, не только изображения в шаблонах будут лениво загружаться, но и изображения, которые вы загрузили в редактор контента. И если вам также нужен совет о том, как улучшить производительность вашего сайта WordPress, я здесь, чтобы помочь.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *