Оптимизация сайта УралГидроМаш
Недавно ко мне обратился клиент, с просьбой обновить главную страницу сайта. Нужно было добавить несколько блоков с основной информацией об услугах компании и парочку всплывающих окон с дополнительной информацией.
Прежде чем приступать к работе по изменению фасада, я проверил, на сколько сайт отвечает современным требованиям производительности.
Если на версии сайта для больших экранов, производительность более менее хорошая, то на мобильном — никуда не годится:
Шапка с логотипом занимают слишком много места, слайдер отображается не сразу и по мере загрузки, смещает макет. Сайт в целом, загружается достаточно медленно.
Если сайт, с достаточно простой структурой, уже не соответствует современным стандартам, что будет если эту структуру усложнить, внеся дополнительные блоки на главную страницу, которые требуются клиенту. Вместе с усложнением фасада, нужно упростить работу самой системы, оптимизировав её.
Этап 1. Измение фасада
В соответствии с требованиями клиента, на главную страницу сайта, были добавлены дополнительные блоки:
- Информация о заказе услуг.
- Как проходит ремонт (с модальным окном определения модели).
- Определение маркировки (с модальным окном формы обратной связи).
- Видео ремонта гидронасоса
- Примеры выполненных работ
Теперь вся основная информация содержится на главной странице и потенциальному заказчику нет необходимости переходить в дополнительные разделы.
Этап 2. Оптимизация работы сайта
Сайт работает на системе управления контентом drupal7. В качестве темы оформления используется bootstrap3. Имея такие исходные данные, вряд ли стоит надеяться на хороший результат оптимизации, но мы попробуем.
- Удалён плагин Flexslider, отвечающий за презентацию на главной. Заместо него настроен внутренний слайдер bootstrap.
- Удалены все файлы стилей системы drupal и модулей, они не нужны для гостей и загружаются только для администратора.
- По возможности удалены все лишние ява-скрипты.
- Добавлена ленивая загрузка картинок и видео, там, где это необходимо.
- Для браузеров, которые поддерживают формат изображений .webp, все картинки загружаются в нём.
- На сайте используется тяжёлый внешний плаггин callbackkiller, теперь он, вместе со своими стилями, загружается по факту отображения документа и не препятствует загрузке.
- Кроме того, были выполнены другие работы по оптимизации и визуализации. В частности, уменьшена шапка сайта на мобильных устройствах.
Традиционно, сайт использует внешние счётчики посещений: Яндекс метрику и Гугл аналитику, которые могут снижать производительность сайта.
Чистый сайт, без счётчиков выдал такие параметры после оптимизации:
Даже с включённым медленным модулем callbackkiller, сайт показывает неплохие результаты. Теперь включим счётчики аналитики.
Достаточно большую нагрузку составляют большие размеры стилей и скриптов систем bootstrap и drupal.
Далее, чтобы увеличить скорость работы сайта можно оптимизировать boostrap, откомпилировав его только с используемыми стилями скриптами и перебрать скрипты drupal. Но в рамках этого проекта, такой производительности будет вполне достаточно.
