Здравствуй, дорогой читатель! Сегодня поговорим про ленивую загрузку изображений и подключим ее к своему ресурсу. А так же о том, что такое прелоадер и зачем он нужен.
Вопрос ускорения загрузки сайта я уже поднимала. Ранее мы рассмотрели способы повышения его производительности, оптимизируя базу данных, кэшируя страницы, а также через чистку кода и сжатие иллюстраций. Сегодня рассмотрим способ отложенной загрузки изображений. Он актуален для возрастных сайтов и ресурсов, основу которых составляют иллюстрации.
Содержание
Ленивая загрузка изображений
Что же такое ленивая или по-другому отложенная загрузка изображений? Пока сайт молодой и на нем мало контента, он загружается очень быстро. Но по мере увеличения количества страниц и накопления информации время его загрузки будет увеличиваться. Текстовый материал загружается быстрее и легче. А вот медиаконтент тяжеловесен и медлителен, тормозит загрузку страницы.
Отложенная загрузка позволяет растянуть во времени появление отдельных элементов страницы. Они будут представлены по мере необходимости. Сначала текст. Пока читатель с ним знакомится, начнут поочередно подгружаться изображения. Это позволит увеличить скорость отображения страницы.
Варианты отложенной загрузки изображений возможны разные. Бывает фоновая постепенная загрузка иллюстраций при открытии страницы. Либо ленивая загрузка реализуется по клику на изображение или по скроллингу, когда читатель до него доскролливает. Страница же в процессе ожидания загрузки изображений не должна иметь пустот. Как же их заполнить?
Плейсхолдер — что это?
Пространство с отсутствующими иллюстрациями на странице, уже представленной пользователю, не должно пустовать. И требует пусть и временного, но заполнения.
Вообще, поле с временным тестовым заполнением с подсказкой для пользователя используется в различных формах сбора данных на сайтах и называется плейсхолдером.
Графический плейсхолдер — это поле с временным графическим заполнением. В него можно загружать статические картинки или анимированные прелоадеры. Этот прием и помогает заполнять пустоты на странице в ожидании появления иллюстраций.
Что такое прелоадер и зачем нужны прелоадеры
Нет человека, который бы любил ждать. Но это часто происходит. В том числе и при загрузке сайтов. Когда пользователь заходит на ресурс, он ожидает увидеть его заголовок, описание необходимой ему услуги или запрошенную информацию. А тут появляются какие-то анимации, тексты. Это и есть прелоадер — предзагрузка сайта. То есть прежде чем станет видна полноценная страница или изображение, появляется какое-то анимированное действие. Это позволяет задержать посетителя и в первый же момент выделить сайт среди других.
Главный смысл прелоадера сводится к привлечению и удержанию внимания: «Посмотри на меня». А также в его информировании о том, что все в порядке, идет процесс загрузки и все под контролем. Это снижает процент отказов в первые секунды. Имеются даже прелоадеры, имитирующие состояние загрузки в процентном выражении, дающее пользователю ощущение контроля над ситуацией.
Кроме того, задача прелоадера — развлечь пользователя в период ожидания. Повторяющиеся анимационные действия, особенно круговые движения, завораживают, успокаивают и гипнотизируют. Поэтому среди прелоадеры часто используют круги и движение по кругу.
При первом посещении ресурса увиденная анимация увлекает. Но если сайт тяжеловесный, а каждая его страница загружается очень долго с показом одного и того же прелоадера, то это утомляет и надоедает.
Поэтому работа с сайтом по увеличению его скорости загрузки — важнейшая задача веб-мастера и первый способ снижения отказов. Рекомендую также прочитать о плагинах Clearfy и WP Fastest Cache и их настройках, которые помогут ускорить ресурс.
Использование же прелоадера должно быть очень аккуратным. Поэтому одним из возможных решений является загрузка через него не целиком страниц, а только изображений на них. То есть контент должен представляться пользователю сразу для своевременного ознакомления с ним. А иллюстрации — с некоторым опозданием, по мере необходимости.
Как раз это и позволяет сделать плагин BJ Lazy Load. Поэтому далее мы его установим и настроим его работу с картинками на сайте.
Настраиваем отложенную загрузку изображений с BJ Lazy Load
Начнем с установки плагина. Для этого заходим в раздел Плагины в подраздел Добавить новый. Вставляем в поисковую строку название нужного плагина BJ Lazy Load. После чего получили его в выдаче на второй позиции. Нажимаем на карточке плагина кнопку Установить, затем Активировать.
После его активации в панели управления в разделе Настройки появился одноименный подраздел BJ Lazy Load. Переходим в него и видим, что необходимо загрузить графический плейсхолдер. Будем использовать прелоадер.
Выбрать его можно в Яндекс Картинках через запрос gif loader. Подобранный элемент открываем. Правой кнопкой мыши запускаем меню и выбираем в нем строку Сохранить изображение как… В открывшемся окне выбираем место сохранения на компьютере и сохраняем. Обратите внимание: формат файла — gif.
Далее в панели управления переходим в раздел Медиафайлы, в подраздел Добавить новый. В открывшемся окне нажимаем кнопку Выбрать файлы. В новом окне с содержимым компьютера находим место сохранения только что скачанного файла с прелоадером. Выбираем его и нажимаем кнопку Открыть. Мы загрузили прелоадер на сайт.
Теперь нажимаем кнопку Изменить, после чего попадаем на страницу изменения файла для копирования ссылки.
На данной странице нужно нажать кнопку Скопировать URL в буфер.
Затем в панели управления переходим во вкладку BJ Lazy Load и вставляем скопированную ссылку в поле Ссылка на графический плейсхолдер. В поле следующей строки Пропускать изображения, использующие значения class, добавляем related-post grid. Это значит, изображения, связанные сеткой (например, Похожие записи) будут подгружаться без прелоадера. И сохраняем изменения.
Проверяем скорость загрузки сайта
Проверить скорость загрузки сайта можно с помощью анализаторов сайта, например,с бесплатным сервисом Pr-cy. Необходимо ввести URL-адрес в поле и нажать кнопку Анализировать.
Сервис протестирует ваш ресурс по многим параметрам, в том числе и на скорость загрузки страниц. Представит анализ мобильной и десктопной версии отдельно, а также даст советы по ее повышению.
Заключение
Сегодня мы поговорили про ленивую загрузку изображений и подключили ее к своему ресурсу. Так же познакомились с тем, что такое графический плейсхолдер и прелоадер. Зачем нужен прелоадер и где его можно найти для установки на свой сайт.
Вы теперь понимаете, что отложенная загрузка необходима крупным сайтам с большим количеством изображений для увеличения скорости загрузки их страниц. Если этот инструмент необходим вашему ресурсу, то вы теперь сможете его установить и настроить. Прелоадер возможно еще больше наполнить смыслом. Например, создать свой собственный, который будет показывать ваш логотип и развивать ваш брэнд.
На моем сайте вы можете прочитать о том, как ускорить загрузку ресурса с помощью плагина Clearfy. Он очищает код сайта от мусора и дублей, устраняет ошибки других плагинов и уязвимости WP, отключает неиспользуемые функции. В паре с плагином Robin image optimizer оптимизирует изображения. Также рекомендую ознакомиться со статьями о повышении продуктивности сайта через оптимизацию базу данных и кэширование страниц.
Не забывайте делать бэкап своего сайта перед установкой нового плагина. Рекомендую также прочитать о создании резервного копирования сайта с помощью UpdraftPlus и способах его восстановления.
