Хостинг: как ускорить загрузку сайта. Клиентская оптимизация

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

В связи с этим усложняется контроль (разные браузеры и устройства) и возникает множество различных направлений оптимизации. Мы посмотрим на наиболее эффективные и универсальные способы, которые можно использовать почти в любом проекте.

Хостинг: как ускорить загрузку сайта. Клиентская оптимизация

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

Оптимизация критического пути: JS, CSS

Критический путь рендеринга — это набор ресурсов для старта отрисовки странички в веб-браузере. В основном, в данный список входят сам документ HTML, веб-шрифты, CSS-стили и JS-код.

Наша задача как оптимизаторов скорости уменьшить данный путь и по времени, и по трафику.

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

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

Для более отложенной загрузки CSS сегодня можно использовать динамическое подключение стилей через JS.

Оптимизация веб-шрифтов

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

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

Для того, чтобы сократить трафик необходимо применять современные форматы: WOFF2 для веб-браузеров, WOFF для совместимости. Вдобавок, следует включать лишь те наборы символов, которые применяются на веб-сайте.

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

Изображения — большинство веса современного интернет-ресурса. Разумеется, картинки — это не такие критичные ресурсы для странички, как CSS- или JS-код. Однако для множества интернет-порталов изображения составляют важную часть всего контента: вспомним карточки товаров в интернет-магазине.

Главная методика при оптимизации картинок — это сокращение их размера. Для этого надо применять правильный формат и средства сжатия:

  • PNG для изображений с текстом и прозрачностью.
  • JPEG для фотографий и сложных картинок.
  • SVG для различной векторной графики.

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

Для PNG есть очень много утилит по оптимизации, которые можно применять для сокращения размера, к примеру, OptiPNG, ect и PNGout. Внутреннюю оптимизацию сжатия информации также можно выполнять посредством zopfliPNG. Ключевая идея этого ПО в подборе наиболее оптимальных параметров компрессии, устранении лишних данных из файла. Здесь надо быть очень осторожным, так как некоторые утилиты имеют режим с потерей качества, что вполне может вам не подходить.

Оптимизация формата JPEG тоже разделяется на два вида: с потерями и без. В общем можно посоветовать пакет Mozilla JPEG, который разработан специально для лучшего сжатия в данном формате. Для оптимизации без потерь используется jpegtran, а с потерями — cjpeg.

Хостинг: как ускорить загрузку сайта. Клиентская оптимизация

Кэширующие заголовки

Это самая простая методика современной клиентской оптимизации. Ее смысл в кэшировании веб-браузером различных редко изменяемых ресурсов: картинок, JS-файлов, CSS, шрифтов, иногда даже самого документа HTML. В итоге каждый ресурс запрашивается с сервера лишь один раз.

В случае если вы пользуетесь Nginx, надо просто добавить такую директиву:

add_header Cache-Control «max-age=31536000, immutable»;

С этого момента веб-браузер может кэшировать ресурсы на срок до года. Параметр «immutable» говорит, что ресурс вообще не планируется изменять.

Безусловно, сразу возникает вопрос: что делать, если нам надо изменить закэшированный ресурс? Ответ: просто изменить его адрес, URL. К примеру, можно добавить версию в название файла. Для документов HTML этот способ тоже применим, однако, как правило, используется намного более короткий срок кэширования (к примеру, одна минута, час).

Сжатие информации

Обязательная практика — сжатие любой текстовой информации при передаче от сервера веб-браузеру. Подавляющее большинство веб-серверов имеет реализацию gzip-сжатия ответов.

Тем не менее, простой активации сжатия здесь недостаточно.

  • Во-первых, уровень сжатия настраивается и должен быть близким к максимальному.
  • Во-вторых, можно применять статическое сжатие. То есть заранее сжать все файлы и положить на диск. В таком случае веб-сервер будет искать сжатую версию и затем сразу ее отдавать.
  • В-третьих, можно применять более действенные алгоритмы сжатия: brotli и zopfli. Brotli будет работать лишь с HTTPS. Поскольку данные алгоритмы затратны при сжатии, в обязательном порядке применяем их в статическом варианте.

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

Хостинг: как ускорить загрузку сайта. Клиентская оптимизация

CDN и хостинг в Украине

Использование CDN для ускорения веб-ресурса очень разрекламированная мера, которая вокруг сути технологии имеет много маркетинговой шелухи.

Теория: зачем

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

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

Сегодня подавляющее большинство CDN себя позиционируют как инструмент ускорения веб-ресурсов, прежде всего за счет сокращения расстояния от клиента до контента.

Возможные эффекты

Как можно ускорить веб-портал посредством CDN?

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

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

Недостатки применения CDN

Как обычно, недостатки — это продолжение преимуществ. Объект может быть совсем не в кэше узла CDN. К примеру, он еще не запрашивался, либо его нельзя кэшировать. В таком случае мы получаем уже дополнительные задержки между нашим сервером и узлом CDN.

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

Сети доставки контента — это крайне сложные системы, где также как везде возможны сбои и прочие проблемы.

Закрепляем результат

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

Для достижения постоянного хорошего качества работы веб-ресурса надо постоянно поддерживать его и выполнять мониторинг.

Хостинг: как ускорить загрузку сайта. Клиентская оптимизация

Поддержка ускорения

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

Каждое изменение способно влиять на скорость интернет-ресурса. Для контроля данного воздействия необходимо внедрять систему синтетического мониторинга скорости веб-ресурса на стадии разработки.

Для оптимизации поступающего содержимого необходима интеграция различных оптимизирующих процедур в CMS. Это прежде всего касается обработки картинок.

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

Мониторинг скорости у пользователей

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

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

Заключение

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

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

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


Оставить комментарий



Хостинг с отличным саппортом — HOSTiQ