PHP
JavaScript
HTML5
Задача проекта
Для сайта exyte.com требовалось провести техническую оптимизацию фронтенда и максимально сократить количество HTTP-запросов, которые браузер выполняет при загрузке страниц.
На сайте использовалось большое количество небольших графических элементов и иконок. При стандартном подключении каждый такой файл создаёт отдельный запрос к серверу, что увеличивает общее количество обращений, добавляет накладные расходы на установку соединений и может негативно влиять на скорость первоначальной загрузки страницы.
Оптимизация количества запросов к серверу
Основной задачей стало сокращение количества отдельных ресурсов, загружаемых браузером. Оптимизация проводилась на уровне графики, CSS и способа подключения небольших элементов интерфейса.
При этом важно было сохранить существующий внешний вид сайта и корректную работу интерфейса на разных разрешениях экрана.
Перевод иконок в Data URI и Base64
Небольшие графические элементы и иконки были проанализированы и, где это было оправдано, встроены непосредственно в стили при помощи Data URI.
Изображения кодировались в Base64 и размещались внутри CSS. Благодаря этому браузеру не требовалось выполнять отдельный HTTP-запрос для загрузки каждой небольшой иконки.
Такой подход особенно эффективен для небольших служебных изображений, поскольку позволяет сократить количество обращений к серверу без заметного увеличения времени обработки страницы.
Использование CSS Sprite
Для групп графических элементов, которые было целесообразнее оставить в виде изображений, применялась технология CSS Sprite.
Несколько отдельных изображений объединялись в один общий графический файл, после чего нужный элемент отображался при помощи CSS-свойств background-position.
В результате вместо загрузки множества отдельных файлов браузеру требовалось получить только один ресурс.
Оптимизация графических ресурсов
В процессе работы была пересмотрена структура подключения графики на сайте. Для каждого типа элементов подбирался наиболее подходящий способ:
- небольшие иконки — Data URI и Base64;
- группы однотипных изображений — CSS Sprite;
- крупные изображения — отдельные оптимизированные файлы;
- декоративные элементы — по возможности средствами CSS.
Это позволило избежать ситуации, когда даже простой элемент интерфейса создаёт отдельный сетевой запрос.
Снижение нагрузки на сервер
Уменьшение количества HTTP-запросов важно не только для скорости загрузки сайта, но и для снижения нагрузки на веб-сервер.
При большом количестве посетителей каждый дополнительный запрос означает отдельную обработку соединения и выдачу ресурса. Оптимизация структуры фронтенда позволяет уменьшить число таких обращений и сделать загрузку страниц более эффективной.
Работа без изменения дизайна сайта
Все изменения выполнялись на техническом уровне. Внешний вид сайта, структура страниц и пользовательские сценарии оставались без изменений.
Оптимизация затрагивала способы хранения и подключения ресурсов, поэтому пользователь получал тот же интерфейс, но с более рациональной схемой загрузки элементов страницы.
Результат
В результате была оптимизирована загрузка графических элементов сайта и существенно сокращено количество отдельных обращений браузера к серверу.
- часть небольших изображений переведена в Data URI;
- иконки встроены в CSS в формате Base64;
- для групп изображений использованы CSS Sprite;
- уменьшено количество отдельных HTTP-запросов;
- снижена нагрузка на сервер при загрузке страниц;
- сохранён исходный дизайн и функциональность сайта.
Для каких проектов подходит такая оптимизация
Подобная работа особенно актуальна для сайтов с большим количеством небольших изображений, иконок и декоративных элементов, а также для проектов, где требуется дополнительная оптимизация скорости загрузки и нагрузки на сервер.
Перед внедрением необходимо учитывать размер ресурсов: крупные изображения переводить в Base64 обычно нецелесообразно, поэтому способ оптимизации подбирается отдельно для каждого типа файлов.
Проект: exyte.com
