Помимо отказа от скачивания ненужных ресурсов, лучший способ ускорить загрузку страницы – уменьшить общий размер скачиваемых данных за счет оптимизации и сжатия оставшихся ресурсов.
Основы сжатия данных
После того как вы настроите сайт так, чтобы не скачивать неиспользуемые ресурсы, следующим шагом будет сжатие всех оставшихся подходящих ресурсов, которые браузер должен скачать. В зависимости от типа ресурса (текст, изображения, шрифты и т. д.) можно выбрать разные методы: общие инструменты, которые можно включить на веб-сервере, оптимизацию предварительной обработки для определенных типов контента и оптимизацию для конкретных ресурсов, требующую участия разработчика.
Чтобы добиться максимальной эффективности, необходимо сочетать все перечисленные ниже методы.
- Сжатие – это процесс кодирования информации с использованием меньшего количества битов.
- Удаление ненужных данных всегда дает наилучшие результаты.
- Существует множество различных методов и алгоритмов сжатия.
- Чтобы добиться наилучшего сжатия, вам потребуется использовать различные методы.
Процесс уменьшения размера данных называется сжатием данных. Многие разработчики внесли свой вклад в создание алгоритмов, методов и оптимизаций, направленных на улучшение коэффициентов сжатия, скорости сжатия и объема памяти, требуемого различными алгоритмами сжатия.
Подробное обсуждение сжатия данных выходит за рамки этого руководства. Однако важно понимать, как работает сжатие и какие методы можно использовать для уменьшения размера различных ресурсов, необходимых вашим страницам.
Чтобы проиллюстрировать основные принципы этих методов, рассмотрим процесс оптимизации простого формата текстовых сообщений, который был изобретен только для этого примера:
# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA
- Сообщения могут содержать произвольные аннотации, которые иногда называют комментариями. Они начинаются с символа #. Аннотации не влияют на смысл сообщения или его поведение.
- Сообщения могут содержать заголовки – пары "ключ-значение" (в примере выше они разделены символом
":"), которые находятся в начале сообщения. - Сообщения содержат текстовые полезные нагрузки.
Как можно сократить предыдущее сообщение, которое начинается с 200 символов?
- Комментарий интересный, но не влияет на смысл сообщения. Удалите его при передаче сообщения.
- Существуют эффективные методы кодирования заголовков. Например, если вы знаете, что у всех сообщений есть формат и дата, вы можете преобразовать их в короткие целочисленные идентификаторы и отправлять только их. Однако это может быть не так, поэтому лучше пока оставить все как есть.
- Полезная нагрузка содержит только текст. Хотя мы не знаем, что именно в нем содержится (судя по всему, используется
"secret-cipher"), даже беглого взгляда на текст достаточно, чтобы понять, что в нем много избыточности. Возможно, вместо того, чтобы отправлять повторяющиеся буквы, вы можете просто посчитать количество повторяющихся букв и закодировать их более эффективно. Например,"AAA"превращается в"3A", что означает последовательность из трех букв "А".
В результате получается следующее:
format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A
Новое сообщение содержит 56 символов, то есть вы сократили исходное сообщение на 72 %. Это значительное снижение!
Это простой пример того, как алгоритмы сжатия могут эффективно уменьшать размер передаваемых данных для текстовых ресурсов. На практике алгоритмы сжатия гораздо сложнее, чем показано в предыдущем примере, и в интернете алгоритмы сжатия могут использоваться для значительного сокращения времени загрузки ресурсов. Сжатие текстовых объектов позволяет сократить время загрузки ресурсов веб-страницы, чтобы пользователи могли быстрее увидеть результаты их работы.
Минификация: предварительная обработка и оптимизация с учетом контекста
Первый метод – минификация. Минификация не является алгоритмом сжатия в строгом смысле, но позволяет удалить из исходного кода ненужные и повторяющиеся символы, которые используются для того, чтобы сделать код более читаемым для человека. Однако для работы кода на сайте это не требуется, а загрузка ресурсов может замедлиться.
Минификация – это тип оптимизации, зависящий от контента, который может значительно уменьшить размер доставляемых ресурсов. Оптимизацию лучше всего применять в процессе сборки и развертывания. Например, сборщики – это часто используемый тип программного обеспечения, который может автоматически минифицировать ресурсы непосредственно перед развертыванием нового рабочего кода на сайте.
Лучший способ сжать избыточные или ненужные данные – удалить их. Однако вы не можете просто удалить произвольные данные. Однако в некоторых случаях, когда у нас есть информация о формате данных и его свойствах, можно значительно уменьшить размер полезной нагрузки, не влияя на ее фактическое значение или возможности.
<html>
<head>
<style>
/* awesome-container is only used on the landing page */
.awesome-container {
font-size: 120%;
}
.awesome-container {
width: 50%;
}
</style>
</head>
<body>
<!-- awesome container content: START -->
<div>
This is my awesome container, and it is <em>so</em> awesome.
</div>
<!-- awesome container content: END -->
<script>
awesomeAnalytics(); // Beacon conversion metrics
</script>
</body>
</html>
Рассмотрим приведенный выше фрагмент HTML-кода и три разных типа контента, которые он содержит:
- HTML-разметка.
- CSS для настройки внешнего вида страницы.
- JavaScript для обеспечения интерактивности и других расширенных возможностей страницы.
Для каждого из этих типов контента действуют разные правила, определяющие, что считается допустимым контентом, как указывать комментарии и т. д. Остается вопрос: как уменьшить размер этой страницы?
- Комментарии в коде очень полезны для разработчиков, но браузеру они не нужны. Удаление комментариев из кода CSS (
/* ... */), HTML (<!-- ... -->) и JavaScript (// ...) позволяет уменьшить общий объем передаваемых данных для страницы и ее подресурсов. - "Умный" компрессор CSS может заметить, что мы неэффективно определяем правила для
.awesome-container, и объединить два объявления в одно, не затрагивая другие стили и сэкономив ещё больше байтов. В большом наборе правил CSS удаление такой избыточности может дать заметный эффект, но не всегда возможно, поскольку селекторы часто дублируются в разных контекстах, например в запросах медиа. - Пробелы и табуляция в HTML, CSS и JavaScript используются для удобства разработчиков. Дополнительный компрессор может удалить все вкладки и пробелы. В отличие от других методов дедупликации, этот тип оптимизации можно применять довольно агрессивно, если такие пробелы или табуляции не нужны для представления страницы. Например, вы можете сохранить пробелы в текстовых фрагментах HTML-документа, поскольку они обеспечивают читаемость контента, который пользователи увидят на самом деле.
<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>
После выполнения предыдущих шагов количество символов на странице уменьшилось с 516 до 204, то есть примерно на 60 %. Конечно, он не очень читабелен, но это и не нужно. Современные методы разработки также позволяют хранить хорошо отформатированные и читаемые версии исходного кода отдельно от оптимизированного кода, который вы отправляете в производство. В сочетании с картами кода, которые представляют преобразованный рабочий код в удобном для чтения виде и упрощают устранение неполадок, это позволяет разработчикам оптимизировать производительность и улучшать взаимодействие с пользователем.
Предыдущий пример иллюстрирует важный момент: компрессор общего назначения, например предназначенный для сжатия произвольного текста, может неплохо справиться со сжатием страницы в предыдущем примере, но он никогда не узнает, как удалить комментарии, свернуть правила CSS или выполнить десятки других оптимизаций, специфичных для контента. Вот почему так важны предварительная обработка, минификация и другие оптимизации с учетом контекста.
Описанные выше методы можно применять не только к текстовым объектам. Изображения, видео и другие типы контента содержат собственные формы метаданных и различные полезные нагрузки. Например, когда вы делаете снимок на камеру, в файл обычно встраивается много дополнительной информации: настройки камеры, местоположение и т. д. В зависимости от приложения эти данные могут быть критически важными (например, для сайта, на котором пользователи делятся фотографиями) или совершенно бесполезными. Подумайте, стоит ли его удалять. На практике эти метаданные могут добавлять до десятков килобайт к каждому изображению.
Короче говоря, в качестве первого шага по оптимизации эффективности ваших ресурсов создайте инвентарь различных типов контента и подумайте, какие виды оптимизации, специфичные для контента, вы можете применить, чтобы уменьшить их размер. Затем, когда вы определите, что именно нужно сделать, автоматизируйте эти оптимизации, добавив их в этапы сборки и выпуска, чтобы они применялись к каждому новому выпуску в рабочей версии.
Сжатие текста с помощью алгоритмов сжатия
Следующим шагом по уменьшению размера текстовых ресурсов является применение к ним алгоритма сжатия. Этот метод идет на шаг дальше, активно ища повторяющиеся шаблоны в текстовых полезных нагрузках перед их отправкой пользователю и распаковывая их, как только они попадают в браузер пользователя. В результате объем ресурсов значительно уменьшается, а скорость загрузки увеличивается.
- GZIP и Brotli – это популярные алгоритмы сжатия, которые лучше всего подходят для текстовых объектов: CSS, JavaScript и HTML.
- Все современные браузеры поддерживают сжатие gzip и Brotli и сообщают об этом в заголовке HTTP-запроса
Accept-Encoding. - Чтобы включить сжатие, необходимо настроить сервер. Серверное ПО веб-сервера часто по умолчанию включает модули для сжатия текстовых ресурсов.
- И gzip, и Brotli можно настроить для улучшения степени сжатия путем регулировки уровня сжатия. Для gzip настройки сжатия варьируются от 1 до 9, где 9 – наилучшее сжатие. Для Brotli этот диапазон составляет от 0 до 11, где 11 – наилучшее значение. Однако чем выше степень сжатия, тем больше времени требуется на обработку. Для ресурсов, которые сжимаются динамически (в момент запроса), оптимальное соотношение между коэффициентом сжатия и скоростью обеспечивают средние значения. Однако возможно статическое сжатие, когда ответ сжимается заранее и поэтому может использовать наиболее агрессивные настройки сжатия, доступные для каждого алгоритма сжатия.
- Сети доставки контента (CDN) обычно предлагают автоматическое сжатие подходящих ресурсов. Сети доставки контента также могут управлять динамическим и статическим сжатием, что избавляет вас от необходимости беспокоиться об этом.
gzip и Brotli – это распространенные компрессоры, которые можно применять к любому потоку байтов. Они запоминают часть ранее проанализированного содержимого файла, а затем пытаются найти и заменить повторяющиеся фрагменты данных эффективным способом.
На практике и gzip, и Brotli лучше всего работают с текстовым контентом, часто достигая степени сжатия до 70–90 % для больших файлов. Однако при обработке объектов, которые уже сжаты с помощью других алгоритмов (например, большинства графических форматов, использующих методы сжатия с потерями или без потерь), эти алгоритмы дают незначительное улучшение или не дают его вообще.
Все современные браузеры поддерживают gzip и Brotli в заголовке HTTP-запроса Accept-Encoding. Однако хостинг-провайдер должен обеспечить правильную настройку веб-сервера, чтобы он мог предоставлять сжатый ресурс по запросу клиента.
| Файл | Алгоритм | Размер в несжатом состоянии | Размер в сжатом виде | Степень сжатия |
|---|---|---|---|---|
| angular-1.8.3.js | Brotli | 1346 КиБ | 256 КиБ | 81% |
| angular-1.8.3.js | gzip | 1346 КиБ | 329 КиБ | 76% |
| angular-1.8.3.min.js | Brotli | 173 КиБ | 53 КиБ | 69% |
| angular-1.8.3.min.js | gzip | 173 КиБ | 60 КиБ | 65% |
| jquery-3.7.1.js | Brotli | 302 КиБ | 69 КиБ | 77% |
| jquery-3.7.1.js | gzip | 302 КиБ | 83 КиБ | 73% |
| jquery-3.7.1.min.js | Brotli | 85 КиБ | 27 КиБ | 68% |
| jquery-3.7.1.min.js | gzip | 85 КиБ | 30 КиБ | 65% |
| lodash-4.17.21.js | Brotli | 531 КиБ | 73 КиБ | 86% |
| lodash-4.17.21.js | gzip | 531 КиБ | 94 КиБ | 82% |
| lodash-4.17.21.min.js | Brotli | 71 КиБ | 23 КиБ | 68% |
| lodash-4.17.21.min.js | gzip | 71 КиБ | 25 КиБ | 65% |
В таблице выше показано, насколько можно уменьшить размер нескольких популярных библиотек JavaScript с помощью сжатия Brotli и gzip. Экономия составляет от 65 % до 86 % в зависимости от файла и алгоритма. Для справки: к каждому файлу был применен максимальный уровень сжатия как для Brotli, так и для gzip. По возможности используйте Brotli вместо gzip.
Включение сжатия – один из самых простых и эффективных способов оптимизации. Если вы не используете эту возможность, то упускаете отличный шанс повысить производительность сайта. К счастью, многие веб-серверы предоставляют конфигурации по умолчанию, которые позволяют выполнить эту важную оптимизацию, а сети доставки контента (CDN) особенно эффективны при ее реализации таким образом, чтобы сбалансировать скорость и степень сжатия.
Чтобы быстро проверить, как работает сжатие, откройте инструменты разработчика в Chrome, перейдите на панель Сеть, загрузите любую страницу и посмотрите на нижнюю часть панели.
Как показано на изображении выше, вы увидите разбивку по следующим показателям:
- Количество запросов, то есть число ресурсов, загруженных для страницы.
- Размер передаваемых данных для всех запросов. Это позволяет оценить эффективность сжатия ресурсов страницы.
- Размер ресурса для всех запросов. Это размер ресурсов страницы после распаковки.
Влияние на Core Web Vitals
Улучшения производительности невозможно измерить, если нет показателей, отражающих эти улучшения. Инициатива Core Web Vitals направлена на создание и популяризацию показателей, отражающих реальное удобство сайта для пользователей. В отличие от таких показателей, как время загрузки страницы, они напрямую связаны с удобством для пользователей.
Когда вы применяете оптимизации, описанные в этом руководстве, к ресурсам на вашем сайте, влияние на Core Web Vitals может варьироваться в зависимости от оптимизированных ресурсов и задействованных показателей. Однако в некоторых случаях оптимизация может улучшить показатели Core Web Vitals:
- Минификация и сжатие HTML-ресурсов могут ускорить загрузку HTML-кода и обнаружение его субресурсов, а значит, и их загрузку. Это может положительно повлиять на показатель Largest Contentful Paint (LCP). Подсказки ресурсов, такие как
rel="preload", могут влиять на видимость ресурсов, но если их слишком много, это может привести к проблемам с пропускной способностью. Если HTML-ответ на запрос навигации сжат, сканер предварительной загрузки может обнаружить ресурсы в нем как можно быстрее. - Некоторые кандидаты на роль самого крупного контента можно загружать быстрее, если использовать сжатие. Например, для изображений SVG, которые являются кандидатами на LCP, можно сократить длительность загрузки ресурсов за счет сжатия на основе текста. Это отличается от оптимизации, которую вы бы сделали для других типов изображений, которые по своей природе сжаты с помощью других методов сжатия, например, как изображения JPEG используют сжатие с потерями.
- Кроме того, кандидатами на LCP могут быть текстовые узлы. Применение описанных в этом руководстве методов зависит от того, используете ли вы веб-шрифт для текста на своих веб-страницах. Если вы используете веб-шрифт, то к нему применяются рекомендации по оптимизации веб-шрифтов. Однако если вы не используете веб-шрифты, а применяете системные шрифты, которые отображаются без задержки на загрузку ресурсов, то минификация и сжатие CSS сокращают эту задержку, а значит, отрисовка потенциальных текстовых узлов LCP может происходить быстрее.
Заключение
Оптимизация кодирования и передачи текстовых ресурсов – это базовый принцип повышения производительности, который может оказать значительное влияние на работу сайта. Убедитесь, что вы делаете все возможное, чтобы ресурсы, подходящие для минификации и сжатия, получали пользу от этих оптимизаций.
И самое главное – убедитесь, что эти процессы автоматизированы. Для минификации используйте сборщик, который применит ее к подходящим ресурсам. Убедитесь, что конфигурация вашего веб-сервера поддерживает сжатие, и используйте наиболее эффективный из доступных методов. Чтобы максимально упростить эту задачу, используйте CDN для автоматизации сжатия, поскольку они могут не только сжимать ресурсы за вас, но и делать это очень быстро.
Если вы заложите эти базовые концепции производительности в архитектуру своего сайта, вы сможете быть уверены, что ваши усилия по оптимизации производительности будут иметь хорошую основу и что последующие оптимизации смогут опираться на прочную основу хороших базовых практик.