Оптимизация сайта «Земля мастеров»

Недавно был сделан редизайн сайта «Земля мастеров«, новая тема оформления теперь использует Bootstrap 4.5 и выглядит более современно, чем старая, сделанная в 2011 году.

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

Как мы видим из вышеприведённых иллюстраций, скорость загрузки сайта на компьютере в целом неплоха, но на мобильном — никуда не годиться. Необходимо оптимизировать работу сайта.

Этапы оптимизации

• Убираем рекламные блоки из видимой области экрана, загружаем их по мере просмотра страницы.
• Блоки материалов, не видимые на экране убираем из исходного кода и загружаем их по мере просмотра. Оставляем блок записей на схожие темы, он необходим для перелинковки страниц.
• Оптимизируем загрузку шрифта, отвечающего за иконки.
• На страницах материалов, ставим отложенную загрузку виджета «Яндекс поделиться».
• Везде, где это возможно ставим ленивую загрузку изображений.

После этих и других операций по оптимизации, сайт стал выдавать следующие показатели:

В зависимости от скорости загрузки счётчиков Яндекс метрики и Гугл аналитики, время загрузки сайта может варьироваться, но в среднем, показатели соответствуют вышеприведённым иллюстрациям.

Как мы видим из рисунков, сайт соответствует требованиям для компьютеров — 99%, и показывает неплохие результаты для мобильных устройств — 88%.

Что дальше

Если с видом для компьютеров всё в порядке, то оптимизация для мобильных устройств ещё далека от идеала.

Давайте посмотрим на самый медленный блок:

Сайт использует систему Bootstrap, которая включает большой функционал и занимает достаточно много места, также на сайте используется много ява-скриптов системы Drupal, обеспечивающих его функционал. Кроме того, на сайте используется много CSS скриптов, которые замедляют загрузку системы.

Для того, чтобы преодолеть порог в 90% для мобильных устройств, необходима более глубокая оптимизация системы, которая должна включать:

• Удаление из системы Bootstrap неиспользуемых функций и перекомпиляция системы, только с необходимыми модулями.
• Удаление из системы Drupal неиспользуемых скриптов.
• Загрузка дополнительных скриптов и стилей только на тех страницах, где они применяются.

Кроме того, ускорению сайта может помочь использование форматов изображений, соответствующих размеру экрана: для маленьких экранов маленькие миниатюрки, для больших — полноразмерные картинки.

Возможно, эти операции будут проведены в будущем, но на данный момент, трудоёмкость их реализации слишком велика, по сравнению с эффектом, который может быть достигнут.

Итог

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

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

Базовый набор оптимизации, позволил нам быстро и эффективно увеличить скорость работы сайта.

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