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

2

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

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

Рисунок 1. Вид сайта на ПК.

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

Рисунок 2. Вид сайта на мобильном.

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

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

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

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

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

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

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

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

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

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

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

Рисунок 3. Вид сайт на ПК после оптимизации, без счётчиков.
Рисунок 4. Вид сайт на мобильном после оптимизации, без счётчиков.

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

Рисунок 3. Вид сайт на ПК после оптимизации, со счётчиками.
Рисунок 4. Вид сайт на мобильном после оптимизации, со счётчиками.

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

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

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

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

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

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

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

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

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

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

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

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

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