Клиентская оптимизация

admin

30.01.2021 19:31

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

Причины низкой скорости

Что происходит, когда пользователь открывает сайт? Браузер шлет запрос на сервер, получает содержимое сайта и показывает его посетителю:

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

Как увеличить скорость?

Понятно, что скорость сайта зависит от:

количества дополнительных запросов (JS, CSS, картинки),

объема данных, передаваемых от сервера к посетителю.

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

Снижение количества запросов

Клиентское кеширование

Обязательно устанавливайте HTTP заголовки Expires и Cache-control для того, чтобы CSS/JS файлы кешировались на клиентском браузере. Т.о. клиент будет запрашивать уникальные файлы только один раз на время действия кеша.

Склеивание

По возможности склеивайте все CSS файлы в один. Тоже самое стоит делать и для JS. Тогда будет всего два внешних файла: 1 javascript и 1 CSS.

Загрузка внешних ресурсов

Основное правило — загружайте любые внешние ресурсы максимально близко к концу HTML. Исключение составляет только CSS, его нужно грузить в теге <head>. Javscript нужно грузить перед закрывающимся тегом </body>. Сначала загружайте Javascipt для приложения, а только потом счетчики.

CSS спрайты

Большое количество мелких картинок на одной странице приведут к большому количеству запросов к Web серверу. Используйте CSS спрайты. Мелкие картинки на сайте нужно объединить в одну. А для отображения нужно использовать свойство “background” в CSS.

Уменьшение объема данных

Сжатие

Обязательно использовать. Практически все современные браузеры поддерживают сжатие gzip или deflate. Сжатие имеет смысл только для текстовых файлов (HTML, CSS, JS). Сжатие обычно включается на Web сервере, например в Nginx:

server {
...
gzip on;
gzip_disable "msie6";
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
...
}

Все известные Web серверы имеют модули для сжатия.

Сжатие также можно использовать в приложениях. Например в PHP, компрессия включается в php.ini:

zlib.output_compression On;

Оптимизация картинок

Потенциально существенный прирост. Картинки могут занимать более 80% всего размера страницы. Сжатие картинок без потери качества может уменьшить размер в 2…3 раза. Есть целая куча инструментов для lossless сжатия.

Формат картинок

Уделите внимание выбору формата картинок:

JPEG используйте для фотографий.
PNG лучше подойдет для иконок и иллюстраций.

Подробнее о выборе правильного формата картинки.

Минификация

Используйте механизм minify (минификация) для получения более компактного размера JS и CSS (и HTML). Сам процесс минификации очень простой. Это вырезание всех комментариев и необязательных пробельных символов (переносов, табов и т.п.).

Правильный HTML

Размер современных страниц может быть очень большим из-за сложной верстки и большого количества элементов. Чем больше размер HTML тем хуже. Поэтому соблюдайте правила:

Не используйте встроенных стилей (style=”…”).
Выносите все стили во внешние файлы CSS.
Выносите Javascript во внешние файлы.
Используйте асинхронную загрузку Javascript.

Используйте короткие, но понятные названия классов.
Используйте стандартные элементы разметки для выделения текста (теги strong, em, i, u) вместо создания новых классов.

TL;DR

Правильное использование клиентского кеширования и сжатия gzip могут ускорить сайт в 3…5 раз. Особое внимание обратите на картинки, их оптимизация также может дать существенный прирост в скорости.

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