[Хд] logo

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

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

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

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

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

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

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

  • количества дополнительных запросов (JS, CSS, картинки).
  • объема данных, передаваемых от сервера к посетителю.

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

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

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

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

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

Склеивание

Склеивание статики

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

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

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

CSS спрайты

CSS спрайты

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

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

Сжатие

compress gzip

Важно Практически все современные браузеры поддерживают сжатие 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 серверы имеют модули для сжатия.

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

zlib.output_compression On;

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

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

Важно Картинки могут занимать более 50% всего размера страницы. Сжатие картинок без потери качества может иногда сэкономить несколько сот килобайт. Есть целая куча инструментов для lossless сжатия.

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

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

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

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

Минификация

Minify

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

Правильный HTML

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

  • Не используйте встроенных стилей (style="...")
  • Выносите все стили во внешние файлы CSS
  • Выносите Javascript во внешние файлы
  • Используйте асинхронную загрузку Javascript
  • Используйте короткие, но понятные названия классов
  • Используйте стандартные элементы разметки для выделения текста (теги strong, em, i, u) вместо создания лишних классов

Самое важное

Правильное использование клиентского кеширования и сжатия gzip дадут Вам 80% результата. Если у Вас много картинок на сайте, их оптимизация также может принести существенные преимущества.

  read in english
[Хд]

Подписывайтесь на отборные материалы по продвинутой разработке

Google Email

Esc, чтобы подписаться позже