Доработка сайта Atlantic Cargo
Задача
Стояла задача - оптимизировать проект на Drupal до зеленых показателей Google PageSpeed. Сверстать и внедрить в текущую тему шаблон страницы услуг по стране. Настроить цели для сервисов Яндекс.Метрика и Google Analytics.
Решение
После анализа проекта - предложено было переписать фронт, сделав сборку на webpack'е, которое позволит уменьшить вес js и css, убрать неиспользуемые стили или логику. Изменения коснулись и бекенда, в том числе и железа. Сайт был перенесен с тарифа хостинга на VDS, что дало выигрыш во времени отклика и генерации страниц.
Цветовая палитра
Макеты сайта
Результаты
В проекте оказалось много легаси кода, который пришлось переписать и поменять настройки админки для этого. Увы все выбросить не получилось, поскольку есть разделы, которые трогать не нужно было.
По мере рефакторинга проекта, были найдены места, которые кушали много ресурсов там, где в принципе это можно избежать. Такие места были переписаны, что дало выигрыш по времени генерации страниц.
Также была обнаружена большая проблема с координатами и маршрутами перевозок грузов - они были представлены одним большим статическим файлом с js, который занимал порядка ~15 Мб и такой файл влиял на время загрузки страницы. Этот файл подгружался на страницу с картой перевозок, например - из Китая, хотя внутри файла не только маршруты перевозок из Китая. По-началу, проблему удалось решить исходя из возможностей на тот момент - создать несколько забитых маршрутов в json и подгружать нужные маршруты на карту асинхронно. Затем, когда на проекте нужно было обновлять железо и саму систему - проблема была решена по-другому - маршруты теперь хранились в админке и кешировались, они передавались на фронт теперь через API.
Ситуация с формами на проекте - имелись проблемы, при внесении изменения в обработчик форм и редактирование непосредственно самой разметки форм - разметка вставлялась напрямую в контент страницы, во вставки элементов шаблона. Т.е. если что-то нужно будет добавить или изменить - пришлось бы пройтись по всему контенту и внести изменения. Перед тем чтобы развешивать цели на формы - разработан компонент форм, который бы вставлялся единожды и с параметрами на входе, влияющими какую брать форму (с каким набором полей), какой давать ответ и какие цели на нее вешать. С помощью такого компонента реализованы сквозные формы, настроены цели на проекте на всех формах.
Заключение
Проект оказался сложным не только с точки зрения технических доработок и оптимизаций, но и с тем, что на проекте стоит CMS Drupal, которой оказалось много расширений, настроек и не все прозрачно для восприятия. Сама система имеет много возможностей, расширений, с которыми пришлось знакомиться, чтобы найти неоптимизированные места на проекте. На самом деле, расширений действительно много, но не все хорошо написаны и можно использовать далеко не все. Чтобы решить задачу с оптимизацией картинок, было написано свое расширение, которое адекватно перехватывает сжатые картинки в контенте и оборачивало их в lazyload блоки.