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

1

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

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

Рисунок 1. Скорость загрузки сайта на компьютере
Рисунок 2. Скорость загрузки сайта на мобильном

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

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

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

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

Рисунок 3. Скорость загрузки на компьютере после оптимизации
Рисунок 4. Скорость загрузки на мобильном после оптимизации

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

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

Что дальше

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

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

Рисунок 5. Элементы блокирующие отображение

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

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

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

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

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

Итог

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

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

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

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

Поделиться:
Один комментарий » Оставить комментарий

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

Вы вошли как Гость. Вы можете авторизоваться

Будте вежливы. Не ругайтесь. Оффтоп тоже не приветствуем. Спам убивается моментально.
Оставляя комментарий Вы соглашаетесь с правилами сайта.

(Обязательно)

Информация о сайте

Компания «Емельянов и партнёры» занимается разработкой, поддержкой и оптимизацией веб сайтов.

На данном сайте публикуются материалы по разработке сайтов и другим интересным вопросам.

Прежде чем приступать к просмотру сайта, ознакомьтесь с разделами:

Сайт может содержать контент, не предназначенный для лиц младше 18-ти лет.
Использование материалов сайта приветствуется при размещении активной ссылки на источник.

Со всеми вопросами и предложениями обращайтесь по почте info@emelianovip.ru