Главная
»
Блог
»
Технические работы и оптимизация сайта компании по продаже прицепов

Подбор сервера с высокой частотой процессора

Оптимизация изображений

Оптимизация базы данных

Оптимизация вёрстки сайта

Подключение кэширования: Memcached

Отключение сторонних библиотек

Улучшение коммерческих факторов и лояльности

Заключение

Технические работы и оптимизация сайта компании по продаже прицепов

А йрат Рахим зянов | 13 марта 2025

Время чтения 18 минут

Мы уже публиковали общий SEO-кейс по этому проекту и кратко там писали о технических правках. В этой статье мы приводим полный и подробнейший перечень технических работ по оптимизации скорости загрузки страниц и какие результаты были достигнуты.

О проекте

Тематика: Продажа и обслуживание прицепов и полуприцепов импортных и отечественных марок.
Регион: Москва
Период работы: с мая 2021 г.

Подбор сервера с высокой частотой процессора для Битрикс

Битрикс – это мощная CMS, которая требует значительных вычислительных ресурсов для обработки запросов и выполнения сложных операций.

Основные компоненты Битрикса (веб-сервер, PHP и база данных) зависят от производительности процессора.

Выбор сервера с высокой частотой процессора

Для оптимальной работы Битрикса выбран сервер с процессором, имеющим высокую тактовую частоту. Это связано с тем, что многие задачи Битрикса выполняются в один поток, и высокая частота процессора позволяет быстрее обрабатывать эти задачи.
Важно отметить, что тактовая частота процессора (измеряемая в ГГц) определяет, сколько операций процессор может выполнить за одну секунду. Чем выше частота, тем больше операций может быть выполнено за тот же промежуток времени.

Почему высокая частота важна для Битрикса

Битрикс активно использует PHP для выполнения большинства серверных задач. Высокая частота процессора позволяет быстрее интерпретировать и выполнять PHP-скрипты, что ускоряет обработку запросов.
База данных (MySQL) также выигрывает от высокой частоты процессора, так как сложные SQL-запросы и транзакции могут выполняться быстрее.
Веб-сервер (Nginx), обрабатывающий HTTP-запросы, также выигрывает от высокой частоты процессора, так как это позволяет быстрее обрабатывать запросы и передавать ответы клиентам.
Процессоры с большим объемом кеша L3 могут значительно улучшить производительность за счет уменьшения времени доступа к часто используемым данным, это также учитывалось при выборе.

Высокая частота позволяет быстрее выполнять операции, уменьшать время обработки запросов и улучшать общую производительность сайта.

Для сравнения, сайт работал на хостинге beget.com:

Так как на Бегете подходящего оборудования не было, арендовали на timeweb.com:

Оптимизация изображений

1. Аудит текущих изображений

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

2. Использование современных форматов сжатия

Для оптимизации изображений были выбраны современные форматы, такие как WebP и JPEG 2000. Эти форматы обеспечивают высокую степень сжатия без потери качества.

WebP: Этот формат поддерживает как сжатие с потерями, так и без потерь, и обеспечивает более высокую степень сжатия по сравнению с JPEG и PNG.
JPEG 2000: Формат с высоким качеством и эффективным сжатием, часто используемый для изображений с высоким разрешением.

Было:

Стало:

Сократили количество запросов, уменьшили общий вес страницы, тем самый загрузка сократилась с 14 сек до 0,6 сек

Все изображения были конвертированы в выбранные форматы с помощью инструментов командной строки (cwebp для WebP) Битрикса.

3. Сжатие

Использованы инструменты для сжатия изображений, такие как ImageMagick, TinyPNG и другие онлайн-сервисы.
Проведено сжатие всех изображений с минимальной потерей качества, что позволило значительно уменьшить их размер.
Так как у нас установлена CentOS на хостинге, конвертацию изображений производили с помощью cwebp.

4. Оптимизация размеров

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

5. Кэширование

Настроено кэширование изображений на стороне сервера и в браузере пользователей.
Добавлены заголовки Cache-Control и Expires для увеличения времени хранения изображений в кэше браузера, что позволяет уменьшить количество загрузок одних и тех же изображений при повторных посещениях сайта.

6. Автоматизация процесса оптимизации

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

Примеры используемых инструментов и методов

cwebp: Инструмент командной строки для конвертации изображений в формат WebP.
ImageMagick: Мощный инструмент для обработки изображений, который позволяет выполнять сжатие, изменение размеров и конвертацию форматов.
TinyPNG: Онлайн-сервис для сжатия PNG и JPEG изображений с минимальной потерей качества.
Pngquant и jpegoptim: Инструменты для сжатия PNG и JPEG изображений без потерь.

Результаты:

Значительное уменьшение размера изображений без потери качества. (фото размером в 2мб удалось сжать без потери качества до 150кб)
За счет уменьшения общего объема данных загрузка страниц стала быстрее как на десктопных, так и на мобильных устройствах.
Примеры фотографий до оптимизации и после можете просмотреть в облаке.
Оптимизированные изображения способствуют улучшению показателей PageSpeed, что положительно влияет на SEO.

До оптимизации скорости работы сайта:

После оптимизации скорости работы сайта:

По данным Google PageSpeed Insights производительность сайта выросла с 27 до 100.

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

Оптимизация базы данных

1. Анализ структуры базы данных

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

2. Оптимизация SQL-запросов

Проведен анализ всех SQL-запросов, выполняемых на сайте, с помощью инструментов профилирования MySQL Slow Query Log.
Выявлены «тяжелые» запросы, которые занимают наибольшее время выполнения и потребляют много ресурсов.

Один из примеров подобных запросов

Отсутствие индексов:

Индексы добавлены:

Еще один пример с выводом элементов инфоблока на странице

До:

После:

В последнем примере мы запрашиваем более точно данные из базы, а не выгружаем все, какие есть, как это было ранее. Это до 300% ускоряет выполнение программы.

Переписаны сложные и неэффективные запросы для повышения их производительности:

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

3. Создание и настройка индексов

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

4. Оптимизация структуры таблиц

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

5. Архивация данных

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

6. Оптимизация соединений и транзакций

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

7. Настройка кэширования запросов

Настроено кэширование часто выполняемых запросов на уровне базы данных (с использованием query cache).
Включено кэширование результатов всех запросов с помощью Memcached.
Разработаны стратегии для обновления и сброса кэша при изменении данных.

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

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

8. Оптимизация конфигурации базы данных

Проведен аудит и оптимизация конфигурации MySQL для повышения производительности.
Настроены ключевые параметры, такие как innodb_buffer_pool_size, query_cache_size, tmp_table_size, max_connections, и другие.
Настроена периодическая проверка и дефрагментация таблиц для поддержания их в оптимальном состоянии.

9. Тестирование и мониторинг

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

Результаты

Время выполнения самых «тяжелых» запросов значительно уменьшилось, что положительно сказалось на скорости работы сайта.

До:

После:

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

Улучшение структуры базы данных и настройка соединений повысили стабильность и отказоустойчивость системы.

Оптимизация верстки сайта

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

1. Анализ и чистка HTML

Проведен анализ HTML-кода на наличие избыточных, неиспользуемых или устаревших тегов и атрибутов.
Удалены дублирующиеся и пустые теги, что позволило уменьшить объем HTML-кода.
Пересмотрена и оптимизирована структура HTML-документов для лучшего семантического значения и повышения читабельности кода.
Внедрение современных тегов HTML5 для улучшения SEO и доступности (<header>, <footer>, <article>, <section> и т.д.).

2. Оптимизация CSS

Проведен аудит CSS-файлов для выявления избыточных и неиспользуемых стилей.
Удалены устаревшие и неиспользуемые стили, что позволило уменьшить размер CSS-файлов.
Все CSS-файлы были объединены в один или несколько файлов для уменьшения количества HTTP-запросов.
Проведена минификация CSS с использованием инструментов, таких как CSSNano, для уменьшения размера файлов.

3. Оптимизация JavaScript

Проведен аудит JavaScript-кода для выявления избыточных и неиспользуемых скриптов.
Удалены устаревшие и дублирующие скрипты, что позволило уменьшить объем JS-кода.
Все JS-файлы были объединены в один или несколько файлов для уменьшения количества HTTP-запросов.
Проведена минификация JS с использованием инструментов, таких как UglifyJS, для уменьшения размера файлов.
Реализована асинхронная загрузка скриптов с использованием атрибута async для не блокирующей загрузки.
Внедрена отложенная загрузка скриптов с использованием атрибута defer для снижения времени загрузки страницы.

4. Ускорение рендеринга страницы

Внедрена практика извлечения критического CSS (critical CSS) и его инлайновая вставка в HTML для ускорения рендеринга первой отрисовки страницы.
Оптимизирован порядок загрузки CSS и JS-файлов для уменьшения количества блокирующих рендеринг ресурсов.

5. Кэширование и оптимизация загрузки ресурсов

Настроено кэширование статических ресурсов на сервере и на стороне браузера с использованием заголовков Cache-Control и Expires.
Оптимизирована загрузка веб-шрифтов с использованием font-display: swap для устранения задержки отображения текста.

Результаты

Оптимизация HTML, CSS и JavaScript позволила значительно уменьшить общий размер страниц.
За счет уменьшения количества HTTP-запросов и размеров файлов страницы загружаются быстрее как на десктопных, так и на мобильных устройствах.
Улучшение производительности сайта положительно сказалось на показателях PageSpeed, что в свою очередь улучшило позиции сайта в поисковых системах.
Быстрая загрузка страниц и оптимизированный интерфейс улучшили общее восприятие сайта пользователями.

По данным административной панели Битрикс

До:

После:

Подключение кэширования: Memcached

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

Причины для внедрения кэширования

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

Проведенные работы

Установлен сервер Memcached на хостинг-платформе. Настроены параметры для оптимального использования ресурсов:
Memcached интегрирован в систему Битрикс через конфигурационные файлы. Настроено кэширование результатов сложных и часто выполняемых SQL-запросов.
Установлены оптимальные сроки жизни (TTL) кэша для различных типов данных. Разработаны механизмы для автоматической очистки и обновления кэша при изменении данных в базе или обновлении контента.
Настроены инструменты для мониторинга состояния Memcached для отслеживания использования памяти, количества подключений и других метрик.
Разработаны скрипты и инструменты для управления кэшем, включая принудительное обновление или очистку кэша при необходимости.

Мониторинг устроен на уровне CentOS:

Результаты

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

Отключение сторонних библиотек

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

Проведенные работы

1. Аудит подключенных библиотек

Проведен анализ всех сторонних библиотек и скриптов, подключенных к сайту.
Использованы инструменты разработчика браузера (DevTools).
Проведен аудит исходного кода и конфигурационных файлов.

2. Выявление неиспользуемых библиотек

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

3. Отключение и удаление неиспользуемых библиотек

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

4. Оптимизация оставшихся библиотек

Проведена оптимизация оставшихся библиотек для уменьшения их размера и повышения производительности.
Обновлены библиотеки до последних стабильных версий.

Примеры отключенных библиотек

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

Результат

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

Улучшение коммерческих факторов и лояльности

1. Расширение поддержки мобильных устройств

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

Далее - скриншоты при минимальных рекомендациях яндекса в 320px.

Результат до:

Результат после проведенных работ:

2. Реализация скачивания спецификаций товаров

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

После изменения алгоритмов спецификации стали работать корректно:

Каждая такая спецификация имеет свою уникальную ссылку и файлом можно поделиться:

3. Добавление рейтинга товаров

Реализована система рейтингов, позволяющая пользователям оценивать товары по 5-балльной шкале.
Реализовано хранение и отображение средних оценок на страницах товаров.
Внедрена форма для оставления отзывов, включающая поля для оценки, текста отзыва и контактной информации.

Ранее такой возможности не было:

После работ:

4. Функция «Оставить отзыв»

Внедрена форма для оставления отзывов на страницах товаров.
Обеспечена модерация и управление отзывами через административную панель Битрикс.
Настроены уведомления администраторам о новых отзывах для оперативного реагирования.

Ранее страница не имела возможности оставить отзыв:

После реализации возможность оставить отзыв на товар появилась и появилась возможность указать рейтинг по 5 бальной шкале ниже, также сохранен блок “Похожая техника”:

5. Обновление микроразметки

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

Для примера приведем часть кода:

Проведено тестирование и валидация микроразметки с помощью инструментов Google Structured Data Testing Tool и Bing Webmaster Tools:

6. Обновление страницы «Лизинг и кредит»

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

До:

После:

7. Добавление юридических документов

Разработаны и опубликованы страницы с юридической информацией: «Политика конфиденциальности», «Правила пользования сайта», «Сообщение об использовании Cookies».
Добавлены ссылки на юридические документы в подвале сайта и на соответствующих страницах.

8. Проработка страниц новостей

Обновлено форматирование новостей для лучшего восприятия.
Добавлены даты публикации.

Заключение

Очень важно уделять внимание технической составляющей сайта. SEO — это мощный инструмент продаж, но он работает только в комплексе. Важна не только внешняя, но и внутренняя оптимизация. Быстро работает сайт — пользователи реже его покидают. Удобнее интерфейс — посетители активнее им пользуются и быстрее решают свои задачи. Как итог — значительное улучшение поведенческих факторов и рост в выдаче.

Хотите, чтобы и ваш сайт работал со скоростью света? Обращайтесь к нам!