Ускоряем сайт на WordPress по PageSpeed Insights. Часть 1.
Сегодня будем ускорять сайт на WordPress. Для чего? В первую очередь для удобства пользователей. У нас есть от 5 до 15 секунд, чтобы успеть «понравиться». Если сайт большую часть этого времени будет только грузиться, то шансы на успех будут стремительно падать. Проблема актуальна для всех видов сайтов — лендингов, блогов, интернет-магазинов, многостраничников.
И, конечно, скорость загрузки сайта оценивается поисковиками Гугл и Яндекс. При прочих равных условиях, выше в поисковой выдаче будет стоять более скоростной сайт. Сразу оговоримся, скорость – это важный, но не основной критерий оценки. Основным критерием является качество и количество контента на сайте. Но сегодня занимаемся скоростью …
Инструменты для замера
В качестве инструментов для замеров берем популярные:
- Google Page Speed Insight https://developers.google.com/speed/pagespeed/insights/,
- GTmetrix https://gtmetrix.com,
- Pingdom https://tools.pingdom.com/
Начальное состояние PageSpeed Insights
Итак, поехали! Начальное состояние:
Наши действия и измеренные параметры будем заносить в таблицу:
И на старуху бывает проруха – забыл занести в таблицу параметр TTFB (time to first byte). Время до получения первого байта. Ладно. Исправлюсь.
Оптимизируем загрузку картинок
Для начала поработаем с загрузкой картинок – изображений на сайт. Почему начинаем с этого пункта? Здесь одним выстрелом можно убить сразу 3 (трех!!!) зайцев, точнее убрать 3 замечания GPSI:
Первое замечание связано с использованием, а точнее пока с неиспользованием, нами технологии 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 и Emojis:
Тестируем:
Отметим только сокращение числа запросов на целых 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:
Т.к. у себя на сайте я не использую шрифты Montserrat и Poppins, то отключим шрифты Google в Elementor. Для этого можно вставить данный php-скрипт в файл functions.php нашей темы:
add_filter( ‘elementor/frontend/print_google_fonts’, ‘__return_false’ );
Либо воспользоваться плагином Tweaks for Elementor:
Устанавливаем и активируем плагин. Включаем соответствующую опцию в настройках:
Проверяем… И да! От гугловских шрифтов остался только нужный нам Raleway.
Тестируем:
Отметим снижение размера страницы и количества запросов.
Также отметим тот факт, что тема Astra подключает шрифты Google так, как это нравится PageSpeed Insights:
В Google PageSpeed Insights остались жалобы на шрифты иконок:
Чем мы и займемся.
Избавляемся от иконок Font Awesome
Рассмотрев возможные варианты оптимизации работы с иконками, я решил поступить радикально – заменить иконки Font Awesome на иконки svg. Нужные иконки я взял здесь. Встали, что называется, как родные.
После чего, с помощью все того же плагина Tweaks for Elementor отключаем Font Awesome. Также попутно отключаем иконки плагина Elementor на фронтенде, т.к. они нужны только разработчику, а не пользователю.
Тестируем и видим, что шрифты Font Awesome более не грузятся:
И вместе с Font Awesome ушли жалобы PageSpeed Insights на загрузку ключевых запросов и шрифтов:
Смотрим, как изменятся показатели тестов:
Отмечаем рост оценки GPSI, снижение размера страницы и количества запросов.
Продолжение читайте здесь.
