Золотой партнер Битрикс с 2012 года
Высокая технологическая экспертиза Битрикс, API Битрикс24, PHP

Рефакторинг кода

Оптимизация сайта

За счет переработки устаревшего кода. Улучшение показателей PageSpeed. Меньший вес страниц.
Снижение нагрузки на сервер.
На сайте за время его существования выполнено много доработок.
Со временем накапливаются различные проблемы и возникает потребность в периодическом аудите
и оптимизации сайта с целью поддержания его оптимальной производительности

ЦЕЛЬ

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

в Оптимизацию сайта входит:

  • Поиск и устранение "рудиментов", скриптов и стилей, которые когда-то использовались, но при последующих доработках перестали использоваться. Этот код увеличивает вес страницы, замедляет ее загрузку и отображение.
  • Использование новых инструментов для более эффективного сжатия ресурсов
  • Поиск и переработку функционала, который разрабатывался постепенно, слоями и теперь стало очевидно, что эффективнее его переписать исходя из текущей функциональности.
  • Поиск и переработку недостаточно оптимальных реализаций, которые снижают эффективность использования механизмов ускорения сайта, например, композитного кэша.
  • Поиск путей оптимизации подключения ресурсов с целью максимального снижения совокупного объема кода, кол-ва подключаемых файлов
  • Анализ существующих механизмов ускорения сайта на предмет их оптимизации, например, нами был обнаружен баг в реализации подключения кэширования memcached, что делало его менее эффективным. Был заявлен тикет в техподдержку, а сейчас временно переключились на другой способ подключения кэширования memcached
  • Техническая поддержка интернет-магазинов  в нашей компании начинается с услуги технический аудит

ПОСЛЕДСТВИЯ ОТСУТСТВИЯ ОПТИМИЗАЦИИ:

"утяжеление" страниц

За счет неиспользуемых стилей и скриптов или используемых, но которые могут быть оптимизированы, и, соответственно, замедляют ее

Падение скорости

Увеличение времени отдачи страниц за счет требующего оптимизации бэкэнд-кода

снижение эффективности

Стандартные механизмы ускорения сайта не эффективны, что опять же сказывается на нагрузке на сервер и скорости отдачи страниц

Какова польза от аудита сайта и оптимизации?

Меньший вес страниц, соответственно, быстрее их загрузка

Улучшение показателей PageSpeed

Снижение нагрузки на сервер

Отсутствие лишнего кода, более чистый и производительный код, что облегчает поддержку и доработку проекта

Снижение вероятности срывов сроков задач по причине необходимости оптимизации узких мест, которые всплывают при доработке

Оптимизация сайта. Очистка от лишних стилей

этап № 1:

Начата масштабная очистка сайта от лишних стилей и js-скриптов. Эти работы будут идти по всем коммитам и подробно описываться.


• Ранее на сайте почти во всех шаблонах компонентов, связанных с выводом товаров подключалась библиотека boostrap (boostrap.css). Однажды все её подключения были убраны из компонентов, а подключение файла вынесено в header.

• В ходе диагностики было выявлено, что файл на сайте используется менее чем на 10%, для этого понадобилось очищать его от неиспользуемых стилей.

• Абсолютно все удаляемые стили (здесь и впоследствии в других файлах) были предварительно проверены на "используемость" на сайте (для понимания объема работы, который был произведен). 

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


Что все это даёт:

Значительное уменьшение загружаемых данных на каждой отдельной странице, уменьшение так называемого "неиспользуемого" кода, на который ругается даже PageSpeed. Каждая страница загружает ровно те скрипты и стили, которые на ней используются и ничего лишнего и, как результат, увеличение скорости загрузки и скорости рендеринга и отрисовки в браузере пользователя.

с 7210 до 2482 
был уменьшен размер файла

ОПТИМИЗАЦИЯ САЙТА. переботка шаблона компонента и ajax-запросов

Этап № 2:


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

 • Также у шаблона этого компонента проверены и удалены все неиспользуемые стили. 

 • В ходе аудита определено, что технология Композитный сайт (композитное кеширование) не работает для авторизованных пользователей. При включении для авторизованных пользователей, возникли некоторые проблемы, потребовавшие доработки шаблона сайта 

Так же

Кардинально переработан шаблон этого компонента, полностью удален файл стилей, т. к. они не использовались, удален весь неиспользуемый php-код, а js-код почищен, оптимизирован и 

Более чем в 4
раза был уменьшен размер файла

Результат

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

Сделана доработка, один компонент убран, а второй заполняет данные в верстке вместо первого. Доработка совместима с композитным режимом. Добавление в корзину стало быстрее.

Оптимизация сайта. Кешиование. композит.CSS

Этап № 3:

• Было выявлено, что композитом не кешируются страницы, отсортированные по популярности. Данная недоработка устранена, большое кол-во страниц теперь в композитном кеше.

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

• Доработка по капче. Пользователи не всегда могут с первого раза распознать капчу при регистрации или в других формах. Поэтому им приходится вводить неверную капчу, перезагружать форму и заново вводить некоторые данные, например, пароль и подтверждение пароля. 

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

• Доработана корзина, теперь при удалении товаров, так же, как и изменении их количества, действие будет происходить при помощи ajax-запроса, без перезагрузки страницы. Ещё бы почищен шаблон корзины от html-комментариев и лишнего php-кода. Данная доработка потребует при переносе на тест и на продуктив вручную вносить изменения в файлы на всех сайтах

ОПТИМИЗАЦИЯ САЙТА. Полностью доочищен файл boostrap.css

Этап № 4:


• В компоненте календаря, который загружается на странице оформления заказа удалены файлы стилей, несколько стилей перемещены в inline(так будет быстрее работать, чем если подключать отдельный файл ради нескольких стилей) 

 • Также в этом компоненте удалено подключение библиотеки jquery из ядра, т. к. на сайте уже подключается эта библиотека, причем другой (старой) версии , а это -1 скрипт на странице заказа 

 • Исправлена ошибка отображения значка корзины в шапке на странице оформления заказа. Теперь, как и в корзине, данный блок не отображается 


Что все это даёт:

Полностью доочищен файл boostrap.css, работы по которому начались в коммите 1. Файл уменьшен

с 2482 до 1425
был уменьшен размер файла