Представители компании Google на официальном уровне объявили о том, что один из важных факторов ранжирования в поиске с мобильных устройств – скорость работы сайта и его страниц. Быстродействие веб-ресурсов всегда положительно влияла на впечатления пользователей, но именно официальное заявление Гугла дало начало повальной оптимизации веб-ресурсов.
Ден Лукас, консультант по поисковой оптимизации с запада, упомянул, что тщательно работал над быстротой ресурсов клиентов, но личный блог долгое время оставался медленным. Он считает, что любой держатель веб-ресурса может улучить быстроту своего ресурса и объясняет, как ускорить загрузку сайта на WordPress. Решив, что являться сапожником без своих сапог не самый лучший вариант, Ден начал работу над быстротой открытия страниц на своем сайте. В итоге были получены хорошие результаты: полная версия оценена сервисом Page Speed Insights от компании Google в 100 баллов, а мобильная версия сайта чуть ниже, в 89.
Повышение быстроты WordPress
Есть немало факторов, от которых напрямую или косвенно зависит длительность загрузки веб-страниц и быстродействие:
- количество и «тяжеловесность» элементов страниц;
- ненужные переадресации;
- скорость обработки запросов сервером и многое другое.
Учитывая особенности движка WordPress, Ден Лукас сделал анализ по нескольким направлениям:
- хостинг;
- плагины;
- используемый шаблон;
- картинки и другие ресурсы.
Проблема: отправка байта
Время, использованное на отправку байта – самое очевидное, что выявил Ден со стороны пользователей ресурса. Time To First Byte на любой странице был в промежутке от полутора до двух секунд. Что немаловажно, это не время загрузки самого веб-ресурса, просто медленное соединение с сервером.
Другие проблемы со стороны хостинга – отсутствие HTTP/2 setup/configured (применение CDN могло помочь в решении проблемы), возможности кешировать и т.д. Как ускорить работу сайта на WordPress, при выявлении таких проблем? Базовые возможности хостинга от Hostgator не давали решений этих проблем, из-за чего ресурс было невозможно ускорить в этом направлении.
Решение проблемы: смена хостинга
Ден выбрал два провайдера, предоставляющих услуги хостинга: Kinsta и FlyWheel.
Особенности этих компаний:
- невысокая стоимость тарифов (месяца услуг от 25 до 35 долларов);
- тарифы, адаптированные под WordPress;
- выдача SSL и протокол HTTP/2 бесплатны;
- доступность CDN по умолчанию;
- со стороны сервера – инструменты кэширования.
Проблема: оптимизация мультимедийных ресурсов, шаблонов дизайна и установленных плагинов
Смена хостинга ненамного повлияла на быстроту. Ден делится опытом о том, как ускорить сайт на WordPress помимо смены провайдера. Кроме проблем со стороны сервера, недостатки нашлись внутри самого блога.
Шаблон
Была установлена тема, которую Ден приобрел у сторонних вебмастеров. Шаблоны WordPress часто имеют большой функционал, не всегда востребованный конечным потребителем.
Сторонние темы содержат множество шрифтов, плагины для работы с изображениями и создания слайдов, библиотеки скриптов, конструктор страниц и другие компоненты. Неиспользуемый функционал часто утяжеляет веб-ресурс и существенно влияет на скорость загрузки страниц.
Изображения
Многие пользователи WordPress и других платформ используют картинки из интернета, особа их не оптимизируя – часто ограничиваются одной лишь обрезкой. О том, как ускорить скорость загрузки сайта WordPress оптимизацией графики, знают опытные и начинающие владельцы сайтов. В движке WordPress есть функция для уменьшения размера изображений, но работает она не совсем хорошо. До недавнего времени Ден Лукас ограничивался штатными средствами при работе с изображениями.
Решение: разработка нового дизайна
Ден решил заняться разработкой нового дизайна с нуля, используя выбранный хостинг Flywheel. Было сделано следующее:
- установка базовой сборки Вордпресса на новый хостинг;
- подключение не ресурсоемкого шаблона;
- добавление Elementor, этот конструктор страниц помог повторить визуальную составляющую старого блога;
- полное редактирование всех элементов веб-ресурса;
- использование сервиса imageOptim, чтобы оптимизировать картинки. Для этого в папку uploads, которая находится в каталоге wp-content, были помещены все изображения. После обработки в imageOptim, картинки были возвращены обратно на свои места. Как это помогло ускорить сайт на WordPress? Оптимизация изображений составила практически 90%, относительно ранее использованной графики;
- оптимизация скриптов на JS через Async JavaScript и таблиц стилей при помощи Автотаймайза. Использование этих компонентов привели к объединению кода JavaScript с каскадными стилевыми таблицами и снижению, а в некоторых случаях/полному устранению рендеринговых блокировок.
Когда закончилась доработка в локальном сервере, он был перемещен на промежуточный веб-ресурс, где технические специалисты прикрепили сертификат SSL, прицепили DNS и оптимизировали HTTP/2.
Итоги проделанной работы
Быстродействие в сервисе Page Speed от компании Google было проанализировано в SanityCheck.io.
Успех в ускорении загрузки страниц достигнут. Лукас, несмотря на хорошие результаты, планирует и дальше улучшать оптимизацию. Ден поделился тем, как хочет ускорить работу своего сайта на движке WordPress.
В перспективе он хочет:
- не использовать шрифты от Гугла, заменив их системными, либо поставить Fonts (библиотеку от Google) себе на сервер;
- перейти на CDN от каких-либо сторонних компаний, как вариант – CloudFlare, либо обратиться к сервисам сжатия картинок, очень популярен – WebP;
- проделать работу по оптимизации кеширования ресурсов;
- убрать код CSS и элемент Inline, расположенный в верхней части;
- доработать скрипты на JS, а также оптимизировать код в таблицах стилей.
Выводы
Оптимизация скорости работы сайта – важное направление работы для владельцев веб-ресурсов. Можно применить опыт Дена Лукаса и полностью переделать свой веб-ресурс, либо доработать отдельные компоненты. Независимо от выбранного пути, ускорение загрузки страниц повысит трафик, снизит количество отказов, поможет поднять веб-ресурс в поисковой выдаче.