Хостинг: как ускорить загрузку сайта. Клиентская оптимизация |
Клиентская оптимизация, в отличие от обычной серверной, направлена на все, что происходит в веб-браузере пользователя.
В связи с этим усложняется контроль (разные браузеры и устройства) и возникает множество различных направлений оптимизации. Мы посмотрим на наиболее эффективные и универсальные способы, которые можно использовать почти в любом проекте.
Хостинг и клиентская оптимизация
Оптимизация критического пути: 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, необходимо подключить одну из систем веб-аналитики и затем посмотреть отчеты по времени загрузки интернет-ресурса. Для более точных и подробных данных можно применять специальные сервисы мониторинга скорости.
Заключение
Индустрия ускорения веб-ресурсов — это достаточно молодая сфера веб-разработки и она очень активно развивается. Важность скорости интернет-проектов для онлайн-бизнеса очевидна. Она становится одним из важных факторов конкуренции. В связи с этим следует заниматься оптимизацией скорости веб-ресурса и делать вложения в данную область, а также выбирать хороший хостинг.
Тема скорости интернет-портала обширна. Она затрагивает очень многие нюансы разработки, поддержки веб-приложения: от контента до серверного кода. Это означает, что получение высоких результатов просто невозможно без вовлечения хорошей команды разработки.
Самое главное — это помнить о пользователях, всегда учитывать разные условия использования веб-ресурса. Ускорение сайта — это процесс, который с различной интенсивностью осуществляется на всем жизненном цикле интернет-ресурса.