Как сжать HTML и другой код сайта

Пользователи веб-сайта ожидают, что контент будет высокого качества и будет доступен быстро. Это важно для оптимального взаимодействия с пользователем. Хорошая новость заключается в том, что с помощью нескольких строк кода и некоторых небольших хитростей вполне возможно сжать HTML и другой код веб-сайта на 40-70% (а в некоторых случаях даже больше). В этой статье я покажу вам, как это сделать.

>> Оптимизация скорости страницы: как сократить время загрузки <<

Зачем сжимать код сайта?

Теперь вы можете задать себе вопрос: зачем мне сжимать исходный код моего сайта? В конце концов, в несжатом виде он занимает всего несколько сотен килобайт.

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

Например, для гиганта электронной коммерции Amazon задержка загрузки в 100 мс стоит им около 1% продаж. По прогнозам на полный финансовый год это приведет к расходам примерно в 245 миллионов долларов. Эти цифры показывают сильное влияние, которое может оказать скорость загрузки веб-сайта.

Вы также должны учитывать долю пользователей, которые выходят в Интернет с мобильных устройств. Покрытие беспроводных сетей LTE и 4G по-прежнему нуждается в улучшении. Это означает, что мобильный интернет часто довольно медленный, что делает более высокую скорость страницы еще более важной.

Значительного улучшения времени загрузки можно добиться, например, за счет использования технологий сжатия Gzip или Deflate. Это экономит деньги и пропускную способность.

Можно ли сжать HTML, CSS и JavaScript?

Сжатие сжимает запрошенные данные для клиента, чтобы сократить время передачи. Двумя наиболее распространенными методами сжатия в Интернете являются Gzip и Deflate. Процесс сжатия находит похожие строки в документе и заменяет их временными строками с тем же заполнителем.

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

Как работает сжатие кода веб-сайта

Для передачи сжатых данных браузер клиента должен сначала запросить сжатую передачу данных. Это делается через HTTP-запрос со спецификацией «Accept-Encoding: gzip, deflate». Можно указать только один или несколько методов сжатия, а в примере можно использовать сжатые данные как gzip, так и deflate.

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

Около 90% всех браузеров поддерживают сжатие. Влияния на настройку «Accept-Encoding» или разрешенные методы сжатия браузера обычно не существует. Либо браузер поддерживает сжатие данных, либо нет.

Сервер отвечает на HTTP-запрос клиента так называемым «HTTP-ответом». Если сервер поддерживает сжатие, данные передаются клиенту в сжатом виде. Затем в заголовке HTTP-ответа сервер сообщает, например, «Content-Encoding: gzip». В противном случае запрошенный ресурс отправляется клиенту в несжатом виде.

Как активируется сжатие кода сайта?

В зависимости от сервера сжатие кода можно активировать с помощью соответствующего файла конфигурации.

Рисунок 1: Схема сжатия Gzip

Активация сжатия кода с помощью .htaccess

На веб-серверах, совместимых с NCSA (например, Apache, который является наиболее широко используемым веб-сервером), сжатие Gzip можно установить с помощью файла конфигурации .htaccess. Для этого в файл .htaccess необходимо вставить следующий код:

<IfModule mod_deflate.c>
<FilesMatch "\\.(js|css|html|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
</ЕслиМодуль>

Во-первых, с помощью «<IfModule mod_deflate.c>» запускается тест, чтобы увидеть, установлен ли модуль расширения mod_deflate. В этом случае использование «<FilesMatch»\\.(js|css|html|xml)$»>» определит, к каким типам файлов следует применять фильтр.

Пример фильтрует файлы JavaScript, CSS, HTML и XML. Затем с помощью «SetOutputFilter DEFLATE» определяется, что все файлы, соответствующие ранее заданному шаблону, отправляются с фильтром DEFLATE. Впоследствии сопоставление и запрос модуля снова закрываются.

Теоретически этот фильтр можно применять и к другим типам данных (например, к файлам изображений .jpg, .gif или .png). Сопоставление файлов должно быть адаптировано следующим образом:

«<FilesMatch»\\.(js|css|html|xml|png|jpg|gif)$»>»

Однако здесь следует отметить, что эти форматы обычно уже сжаты, и что повторное сжатие часто приводит к потере качества файлов изображений. Поэтому рекомендуется сжимать двоичные файлы (например, изображения) перед их загрузкой и воздерживаться от сжатия с помощью gzip. Для этого можно использовать такие инструменты, как JPEGmini или TinyPNG.

Активация сжатия кода с помощью PHP

Если у вас нет доступа к серверному файлу .htaccess или если вы хотите передавать только отдельные файлы, сжатые gzip, вы можете включить сжатие, используя следующие коды:

<?php ob_start("ob_gzhandler"); ?>

Если возможно, эту функцию следует разместить перед первым HTML-кодом.

Пример:

<?php ob_start ( "ob_gzhandler" ); ?>
<html>
<тело>
<p>Это должна быть сжатая страница.</p>
</тело>
</html>

5 подводных камней при сжатии кода сайта

Сжатие HTML и другого кода веб-сайта также может привести к ошибкам или рискам. Вы должны подумать о следующих моментах:

1. При использовании Gzip через https можно использовать любые недостатки в безопасности. Это может вызвать проблемы с файлами, содержащими конфиденциальную информацию. Поэтому сжатие типов файлов, содержащих конфиденциальную информацию, с помощью Gzip не рекомендуется.

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

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

4. На этапе сжатия следите за тем, чтобы не сжимать слишком сильно. Часто между слабыми, нормальными и сильно сжатыми файлами существует небольшая разница в размере файлов. Однако среднее или сильное сжатие требует значительно большей вычислительной мощности.

5. Поскольку в процессе сжатия идентичные или повторяющиеся строки заменяются, использование имен переменных и классов (например, в файлах CSS и HTML) приводит к более успешному сжатию, чем если бы все переменные и классы назывались по-разному, и, следовательно, имеет небольшой потенциал для обеспечить компрессию.

Дальнейшие меры по оптимизации для тонких кодов

Минимизация HTML и другие стратегии

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

То, что чрезвычайно полезно для разработчика, не нужно поисковому роботу и поэтому должно быть удалено. Вырезание ненужных символов называется «минификацией» и помогает сохранить ценные байты. Количество байтов, сэкономленных при минимизации, впечатляюще продемонстрировано в следующем примере с использованием бесплатной библиотеки JavaScript jQuery.

В то время как исходный файл фреймворка в Версии 2.1.4 имеет размер около 242 КБ (jQuery 2.1.4.js (несжатый)), уменьшенный размер файла после удаления ненужных символов и комментариев составляет всего около 82 КБ (jQuery 2.1.4. min.js (сжатый)). Только за счет минимизации — другими словами, за счет сокращения ненужных символов — можно уменьшить размер файла примерно на 66%. Замечательный результат.

Исходный код до и после процесса минификации

Минификация работает для файлов HTML, CSS и JavaScript.

Кроме того, уменьшенный файл jQuery можно уменьшить еще на 65% с помощью сжатия Gzip. Из исходных 242кб в итоге осталось только невероятные 29,5кб.

Инструменты для сокращения кода CSS и JavaScript

Для того, чтобы уменьшить код CSS, вы можете использовать, например, YUI Compressor или cssmin.js. Есть также несколько инструментов, которые можно использовать для сокращения кода JavaScript. Google PageSpeed ​​Insights рекомендует Closure Compiler, JSMin или YUI Compressor.

Совет: Поскольку используемые переносы строк, пробелы и комментарии очень важны для разработчика и для быстрого и несложного обслуживания, рекомендуется сохранить как файл в исходном состоянии (с ненужными символами), так и файл оптимизированного/уменьшенного состояния. . Таким образом, код легко поддерживать, но поисковые роботы также значительно быстрее загружают его.

Объединение файлов CSS и JavaScript

Часто бывает так, что несколько файлов CSS и JavaScript загружаются в HTML-заголовок веб-сайта. Каждый раз, когда они вызываются, это HTTP-запрос, который должен быть обработан браузером. Современные браузеры могут одновременно обрабатывать от 2 до 8 HTTP-запросов с одного домена — все остальные запросы будут ждать.

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

То же самое относится к файлам JavaScript, загружаемым через элемент <script>. Здесь также следует убедиться, что, если это технически возможно, все файлы JavaScript объединены в один файл.

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

Кроме того, может иметь смысл использование поддоменов или сети доставки контента (CDN). Скрипты и ресурсы, которые не нужны немедленно, можно перезагрузить с помощью AJAX.

Резюме по сжатию кода веб-сайта

Предоставляя данные веб-сайта с помощью Gzip или Deflate, можно добиться значительного сокращения времени загрузки. Оба метода отлично подходят для сжатия файлов HTML, CSS и JavaScript. Кроме того, минификация — еще один полезный способ сделать код компактным.

Поскольку сканерам поисковых систем не нужны полезные для разработчика разрывы строк, отступы и т. д. в исходном коде, вы можете сократить количество этих ненужных символов. Есть также полезные инструменты, которые сокращают код CSS и JavaScript. Это также может сэкономить много байтов.

Чтобы веб-сайту не требовалось слишком много HTTP-запросов, файлы CSS и JavaScript можно сгруппировать вместе. Они составляют только HTTP-запрос, что экономит дополнительные ресурсы.

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

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