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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И после:

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

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

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

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