Показываем на примере одного из наших проектов
Один из этапов технической оптимизации, чек-пунктами которой мы уже делились, когда рассказывали, что делать с дублями на сайте — проверка скорости загрузки страниц. Мы это делаем через PageSpeed Insights.
На нашем проекте в красной зоне оказались 4 пункта проверки из 6. Особенно нас волновали значения Largest Contentful Paint (скорость загрузки основного контента) и Time to Interactive (время загрузки для взаимодействия). Это 2 из 3 показателей новых факторов ранжирования Google — Core Web Vitals, которым сайт не соответствовал. С запуском Core Web Vitals он потерял бы еще больше позиций в Google, а со временем — и в Яндексе.
Работу по увеличению скорости сайта мы провели в два этапа:
- Поменяли конструктор верстки.
- Переехали на новый хостинг.
Поменяли конструктор верстки
Сайт клиента развернут на WordPress. Страницы верстались с помощью конструктора Elementor — он сильно упрощает и ускоряет разработку посадочных страниц, но перегружает их лишними CSS и JS кодами.
Мы предположили, что это одна из основных причин долгой загрузки, и решили отказаться от Elementor в пользу более чистого кода — на сайте нашего клиента нет хитрых интеграций, интерактивных элементов, анимации, поэтому все возможности, которые давал конструктор, все равно не использовались.
Elementor мы заменили на блочный редактор Gutenberg — инструмент самого WordPress. Так как возможности Gutenberg пока ограничены — например, сложно работать с отступами, рамками, радиусами — мы расширили его функциональность двумя плагинами: GenerateBlocks и Gutenberg Blocks — Ultimate Addons for Gutenberg.
На выходе мы получили красивые шустрые страницы и уже на этом этапе существенно улучшили показатели скорости загрузки.
Переехали на новый хостинг
Вес страниц — не единственный показатель, который влияет на скорость загрузки сайта. Большое значение имеет хостинг, а именно:
- Насколько близко или далеко сервера находятся от пользователейЕсли наша целевая аудитория находится в основном в Питере, а сервера — допустим, в Японии, то сигнал будет в разы дольше идти до базы данных.
- Есть ли возможность настроить MemcachedMemcached кеширует данные в оперативной памяти — когда очередной пользователь зайдет на сайт, хостинг не будет генерировать все заново, а отдаст копию, хранящуюся в оперативной памяти.
Сервера старого хостинга находились в Питере, где и была целевая аудитория клиента, но возможности настроить Memcached там не было. Такой вариант нас не устраивал, поэтому мы перенесли сайт на новый хостинг с более широкими возможностями, сервера которого также находились в Питере.
Это решение помогло нам добиться максимально хороших показателей скорости загрузки: Largest Contentful Paint снизили с 3,7 до 0,9 секунды, а Time to Interactive — с 5,7 до 1,4 секунды.
Читайте в блоге, что еще мы сделали для этого проекта и каких результатов добились →