Как ускорить загрузку сайта на WordPress? Ленивая загрузка изображений

Приветствую! Сегодня пойдет речь о наболевшем – медленной загрузке сайта, предупреждениях от Яндекс.Вебмастера и неутешительных показателях Гугла. Также я поделюсь, как увеличила скорость загрузки своего блога, используя ленивую загрузку изображений.

Вы можете посмотреть наглядный видеоурок к статье:

Недавно мне прилетело такое вот неприятное сообщение от Яндекс.Вебмастера про то, что страницы моего блога грузятся дольше 3 секунд.

Я начала истерично проверять самые тяжеловесные страницы сайта их инструментом «Проверка ответа сервера». Таких «страшных» цифр не обнаружила (возможно, был временный сбой на хостинге, из-за чего сайт долго грузился), но ряд страниц показывали время загрузки 1,5 и более секунд. Это не приговор, но хотелось бы быстрее, тем более, я начала сравнивать с другими сайтами коллег, где странички грузятся вполовину быстрее моих…

Затем заглянула в инструмент Google PageSpeed Insights, там картина тоже не приятная, особенно для мобильных:

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

И один из таких советов мне бросился в глаза – оказалось, что существенную нагрузку на моем сайте создают изображения. Да, у меня их много, особенно скриншотов в инструкциях. И хотя перед загрузкой на блог я их оптимизирую – подрезаю в редакторе и уменьшаю вес (сжимаю) в сервисе TinyPNG (иногда вес сокращается вполовину, а то и на 60%), тем не менее, полностью проблему это не решает.

Так вот, в подсказках Гугла я узнала о Lazy Load (ленивой загрузке скрытых изображений) – это когда картинки и встроенные через код видео загружаются не сразу все при переходе на страницу сайта, а постепенно, по мере приближения к ним курсора пользователя.

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

Я начала копать в поисковике про варианты реализации этой ленивой загрузки. Встретила варианты со скриптами и внедрением вручную в код. Но так как я не технарь, хотелось чего-то попроще. И я нашла несколько плагинов для ленивой загрузки — a3 Lazy Load и BJ Lazy Load.

Выбрала плагин a3 Lazy Load , так как обновляется он чаще, последний раз несколько месяцев назад. Плагин BJ Lazy Load обновлялся последний раз 2 года назад, а так как движок Вордпресс постоянно обновляется, то лучше, когда и плагины тоже актуализируются…

Как установить и настроить плагин?

Установить его можно из консоли Вордпресс. Заходим в раздел «Плагины» — «Добавить новый».

Вбиваем точное название плагина в поисковую строку справа.

Нажимаем «Установить».

Затем «Активировать».

Переходим к настройкам плагина. Для этого заходим в раздел «Настройки» на панели слева и кликаем по названию нашего плагина.

У него меню с русским переводом, поэтому с настройками все довольно понятно.

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

Вторая настройка полезна при полном удалении плагина – он все вычистит после себя, не оставив лишнего мусора.

Активация ленивой загрузки – чтобы плагин работал, эта настройка должна быть включена.

Далее можно выбрать, для каких изображений работает ленива загрузка. По умолчанию включены все варианты. Я у себя так и оставила.

Можно указать классы изображений, для которых вы не хотите использовать ленивую загрузку.

А также можно включить поддержку Noscript, чтобы посетители, у которых в браузере выключен Javascript, увидели изображения.

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

Следующий блок настроек позволяет исключить страницы, где вы не хотите использовать ленивую загрузку. Можно указать конкретные url-адреса, а также выбрать отдельные типы страниц.

На скриншоте я перевела, что означают эти надписи.

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

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

Следующие настройки касаются визуального эффекта ленивой загрузки.

В частности, эффект может быть в виде плавного появления или спиннера. Посмотрите оба варианта и выберите тот, что вам кажется более удачным. Я оставила спиннер.

Также можно выбрать цветовой фон для загружаемого изображения. Я оставила белый цвет.

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

В конце не забудьте сохранить изменения настроек плагина!

Как изменились показатели загрузки сайта для Гугл после установки плагина?

Что касается Яндекса, то там ощутимого уменьшения времени ответа сервера я не обнаружила, уменьшилось на десятки миллисекунд. И при повторных попытках проверки всегда по-разному – показатель то меньше, то больше.

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

Для мобильных:

Для компьютеров:

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

Кстати, в моем случае предупреждение о скрытых изображениях полностью не исчезло. Остались смайлики – в плагине a3 Lazy Load по их ленивой загрузке нет отдельного пункта настроек. Так что, если совсем уж оптимизировать, то, как вариант, отключить плагин смайлов (у меня это wp-Monalisa) или попробовать найти им альтернативу…

Еще один инструмент, где вы можете проверить скорость загрузки сайта до и после установки плагина — gtmetrix.com

Мои показатели до включения плагина:

И после:

Друзья, буду рада, если данная информация была вам полезной. А также жду ваших комментариев и вопросов!

P.S. Кстати, если вы хотите создать свой сайт/блог в интернете, научиться его развивать и монетизировать, то приглашаю вас в нашу обновленную бесплатную школу «Я блогер».

С уважением, Виктория Карпова