Оптимизация сайта УралГидроМаш

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

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

Если на версии сайта для больших экранов, производительность более менее хорошая, то на мобильном — никуда не годится:

Шапка с логотипом занимают слишком много места, слайдер отображается не сразу и по мере загрузки, смещает макет. Сайт в целом, загружается достаточно медленно.

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

Этап 1. Измение фасада

В соответствии с требованиями клиента, на главную страницу сайта, были добавлены дополнительные блоки:

• Информация о заказе услуг.
• Как проходит ремонт (с модальным окном определения модели).
• Определение маркировки (с модальным окном формы обратной связи).
• Видео ремонта гидронасоса
• Примеры выполненных работ

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

Этап 2. Оптимизация работы сайта

Сайт работает на системе управления контентом drupal7. В качестве темы оформления используется bootstrap3. Имея такие исходные данные, вряд ли стоит надеяться на хороший результат оптимизации, но мы попробуем.

• Удалён плагин Flexslider, отвечающий за презентацию на главной. Заместо него настроен внутренний слайдер bootstrap.
• Удалены все файлы стилей системы drupal и модулей, они не нужны для гостей и загружаются только для администратора.
• По возможности удалены все лишние ява-скрипты.
• Добавлена ленивая загрузка картинок и видео, там, где это необходимо.
• Для браузеров, которые поддерживают формат изображений .webp, все картинки загружаются в нём.
• На сайте используется тяжёлый внешний плаггин callbackkiller, теперь он, вместе со своими стилями, загружается по факту отображения документа и не препятствует загрузке.
• Кроме того, были выполнены другие работы по оптимизации и визуализации. В частности, уменьшена шапка сайта на мобильных устройствах.

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

Чистый сайт, без счётчиков выдал такие параметры после оптимизации:

Даже с включённым медленным модулем callbackkiller, сайт показывает неплохие результаты. Теперь включим счётчики аналитики.

Достаточно большую нагрузку составляют большие размеры стилей и скриптов систем bootstrap и drupal.

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