Создание сайтов на Wordpress — Олег Саулевич

Ускоряем сайт на WordPress по PageSpeed Insights. Часть 1.

Сегодня будем ускорять сайт на WordPress. Для чего? В первую очередь для удобства пользователей. У нас есть от 5 до 15 секунд, чтобы успеть «понравиться». Если сайт большую часть этого времени будет только грузиться, то шансы на успех будут стремительно падать. Проблема актуальна для всех видов сайтов — лендингов, блогов, интернет-магазинов, многостраничников.

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

Инструменты для замера

В качестве инструментов для замеров берем популярные:

Начальное состояние PageSpeed Insights

Итак, поехали! Начальное состояние:

Наши действия и измеренные параметры будем заносить в таблицу:

И на старуху бывает проруха – забыл занести в таблицу параметр TTFB (time to first byte). Время до получения первого байта. Ладно. Исправлюсь.

Оптимизируем загрузку картинок

Для начала поработаем с загрузкой картинок – изображений на сайт. Почему начинаем с этого пункта? Здесь одним выстрелом можно убить сразу 3 (трех!!!) зайцев, точнее убрать 3 замечания GPSI:

image demands

Первое замечание связано с использованием, а точнее пока с неиспользованием, нами технологии lazy load – ленивой загрузки. Т.е. когда картинки загружаются не сразу, а после того как пользователь до них «доскролит». Решается это разными путями, например, проставлением соответствующего атрибута в HTML-коде. Но, мы ведь пользуемся преимуществами замечательной CMS WordPress, поэтому нашу работу возьмет на себя плагин Image optimization & Lazy Load by Optimole.

Кроме ленивой загрузки, плагин умеет также оптимизировать (сжимать) изображения и использовать формат WebP. Те самые зайцы № 2 и № 3.

Есть и другие плагины с подобным функционалом. Наиболее популярные – Smush, EWWW, Imagify. Но наш выбор сегодня это Optimole. Основные настройки, которые нужно сделать, — в базовых настройках включить оптимизацию и ленивую загрузку изображений:

В расширенных настройках включаем lazy load для фоновых картинок, что, кстати, умеют не все плагины.

Сохраняем изменения в настройках и делаем замеры:

Отметим рост показателя PageSpeed Score в GTMetrix c 34% до 63% и двукратное снижение размера страницы с 4.9 Mb до 2.4 Mb.

Отключаем неиспользуемые плагины

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

Я, пока удалил 3 плагина, функции которых не использовал на своем сайте: Crocoblock Wizard, JetMenu, JetReviews For Elementor. Понятно, что у каждого будет свой набор и свои «паразиты» — кандидаты на удаление. Смотрим изменения:

Отметим рост показателей по скорости GTMetrix до 67%, сокращение размера страницы, уменьшение количества запросов и TTFB.

Отключаем jQuery-migrate и Emojis

Среди ресурсов блокирующих отображение, на которые жалуется GPSI замечаем скрипт jQuery migrate.

jquery migrate demand

Т.к. у нас на сайте установлена свежая премиальная тема Astra Pro и последние версии плагинов,то скорее всего данный скрипт нам не нужен. Для его отключения и с прицелом на дальнейшие работы по оптимизации сайта воспользуемся плагином Clearfy. Устанавливаем его и активируем:

Плагин Clearfy

Отключаем jQuery Migrate и Emojis:

Удаляем jquery-migrate

Тестируем:

Отметим только сокращение числа запросов на целых 2 штуки. Но, как говорится, с миру по нитке.

Избавляемся от «сторонних» анимаций

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

Из положительных моментов отметим опять же сокращение числа запросов и рост оценки Pingdom. Несколько вырос размер страницы – но это временно, пока новую картинку не успел оптимизировать плагин Optimole.

Меняем «тяжелый» фон первого экрана

Обращаю внимание на «тяжелый» фон первого экрана. Картинка красивая, но весит около 1 Мб. Меняю на другую весом всего 44 Кб. Тестируем:

Как и ожидалось, заметно снизился размер страницы.

Переподключение и оптимизация шрифтов

Практически обязательный пункт при разгоне сайтов – это переподключение  шрифтов. Пожалуй, на 80% всех сайтов используются шрифты Google Fonts и Font Awesome. Задача состоит в том, чтобы отключить те шрифты, которые не используются, а нужные шрифты подключить так, как это просит GPSI.

Итак, смотрим, какие шрифты у нас подключаются при загрузке:

Видим гугловские шрифты Montserrat, Raleway и Poppins, а также иконочные шрифты fa-solid, fa-regular и fa-brands. Шрифты Montserrat и Poppins подключает плагин Elementor. А шрифт Raleway подключает тема Astra:

Шрифты темы Astra

Т.к.  у себя на сайте я не использую шрифты Montserrat и Poppins, то отключим шрифты Google в Elementor. Для этого можно вставить данный php-скрипт в файл functions.php нашей темы:

add_filter( ‘elementor/frontend/print_google_fonts’, ‘__return_false’ );

Либо воспользоваться плагином Tweaks for Elementor:

Плагин Tweaks for Elementor

Устанавливаем и активируем плагин. Включаем соответствующую опцию в настройках:

Проверяем… И да! От гугловских шрифтов остался только нужный нам Raleway.

Тестируем:

Отметим снижение размера страницы и количества запросов.

Также отметим тот факт, что тема Astra подключает шрифты Google так, как это нравится PageSpeed Insights:

В Google PageSpeed Insights остались жалобы на шрифты иконок:

fontawesome demands

Чем мы и займемся.

Избавляемся от иконок Font Awesome

Рассмотрев возможные варианты оптимизации работы с иконками, я решил поступить радикально – заменить  иконки Font Awesome на иконки svg. Нужные иконки я взял здесь. Встали, что называется, как родные.

После чего, с помощью все того же плагина Tweaks for Elementor отключаем Font Awesome. Также попутно отключаем иконки плагина Elementor на фронтенде, т.к. они нужны только разработчику, а не пользователю.

Отключение Font Awesome
settings elementor

Тестируем и видим, что шрифты Font Awesome более не грузятся:

И вместе с Font Awesome ушли жалобы PageSpeed Insights на загрузку ключевых запросов и шрифтов:

Успешная загрузка шрифтов

Смотрим, как изменятся показатели тестов:

Отмечаем рост оценки GPSI, снижение размера страницы и количества запросов.

Продолжение читайте здесь.

Оставьте комментарий

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

Задать вопрос или заказать

Оставьте ваше сообщение в форме ниже и я свяжусь с вами как можно скорее!