Содержание
Если вы используете веб-сайт, вы уже должны знать, как использовать правильные форматы изображений и оптимизировать ваши изображения для Интернета
, Тем не менее, хотя сжатие изображений является общеизвестной практикой, сжатие HTML имеет тенденцию игнорироваться, и это позор, потому что преимущества того стоят.
В этой статье мы рассмотрим два основных метода сжатия HTML-файлов: почему HTML-файлы должны быть сжаты и как это сделать.
Сжатие против минификации
Что касается оптимизации файлов HTML, для этого есть два основных метода: компрессия а также минификация. На первый взгляд они похожи, но на самом деле это две разные техники, так что не путайте их.
минификация
Вы можете думать о минификации как об удалении ненужных символов и строк в исходном коде. Подумайте об отступах, комментариях, пустых строках и т. Д. В HTML ничего из этого не требуется — они существуют для того, чтобы облегчить чтение файла. Обрезка этих деталей может уменьшить размер файла, не затрагивая ничего.
Пример HTML-страницы:
Your Title Here
This is a Header
Send me mail at support@yourcompany.com.
This is a new paragraph!
This is a new paragraph in bold and italics.
Пример HTML-страницы, свернутый:
Your Title Here
![]()
"
This is a HeaderSend me mail at support@yourcompany.com.
This is a new paragraph!
This is a new paragraph in bold and italics.
Оригинальный размер: 354. Минимальный размер: 272. Экономия: 82 (23,16%).
Многие веб-разработчики и владельцы сайтов оставляют за собой минификацию только для файлов JS и CSS, но эта устаревшая практика является ошибкой. Минимизация HTML также важна.
Еще в 2000-х годах инструменты минификации были редкостью. Вы должны были вручную минимизировать файлы каждый раз, когда что-то менялось. Так как HTML-файлы меняются чаще, чем JS и CSS-файлы, минимизировать каждый раз тогда было слишком утомительно. В наше время это спорный вопрос.
компрессия
Когда пользователи посещают ваш сайт, они делают это, используя протокол HTTP. Браузер отправляет запрос на ваш веб-сервер для конкретной страницы, ваш веб-сервер находит страницу, а затем отправляет содержимое этой страницы обратно в браузер посетителя.
Но поскольку протокол HTTP поддерживает сжатие, ваш веб-сервер может сжать страницу перед отправкой ее посетителю (при условии, что сжатие включено в настройках вашего сервера), а затем браузер посетителя может распаковать страницу обратно в исходное состояние.
Наиболее распространенная схема сжатия GZIP, это формат файла, который использует алгоритм сжатия без потерь
называется дефлятом.
Алгоритм ищет повторные вхождения текста в файле HTML, а затем заменяет эти повторные вхождения ссылками на предыдущее вхождение. Каждая ссылка — это просто два числа: как далеко назад находится ссылка и сколько символов мы ссылаемся.
Рассмотрим строку текста, подобную этой (пример взят с сайта GZIP):
Blah blah blah blah blah.Алгоритм распознает следующее повторение:
B{lah b}{lah b}{lah b}{lah b}lah.Первое вхождение — это наша ссылка, поэтому оставьте это так:
Blah b{lah b}{lah b}{lah b}lah.Второе вхождение ссылается на первое вхождение, которое имеет пять символов позади и пять символов длиной:
Blah b[5,5]{lah b}{lah b}lah.Но в этом случае алгоритм распознает, что следующее вхождение — это та же последовательность символов, поэтому он увеличивает опорную длину еще на пять:
Blah b[5,10]{lah b}lah.И опять:
Blah b[5,15]lah.И алгоритм достаточно умен, чтобы понять, что следующие три символа являются первыми тремя символами в ссылке, поэтому он расширяется на три:
Blah b[5,18].Теперь подумайте о типичном HTML-файле и о том, сколько повторений существует внутри. Почти каждый тег, такой как , имеет соответствующий закрывающий тег, как . Кроме того, многие теги повторяются повсюду, такие как
,
учебный класс, HREF, а также ЦСИ. Легко понять, почему сжатие GZIP так эффективно работает с HTML.Единственным недостатком является то, что веб-серверу требуется немного больше ресурсов ЦП для выполнения сжатия каждый раз, когда запрашивается страница. Но поскольку в настоящее время CPU не сильно беспокоит, почти всегда лучше включить GZIP, чем обходиться без него, даже если у вас есть веб-хостинг начального уровня.
,
Почему вы должны сжать и минимизировать
Есть два основных преимущества, оба из которых имеют решающее значение в сегодняшнем мобильном веб-пространстве.
Быстрая загрузка страниц
В среднем, минимизатор HTML может уменьшить размер файла примерно на 3 процента с базовыми настройками. С дополнительными дополнительными настройками файл HTML может быть уменьшен еще на 3–7 процентов, что может привести к сокращению до 10 процентов. Это напрямую приводит к ускорению загрузки страницы.
Меньше используемой полосы пропускания
Допустим, у вас есть 10 файлов, каждый из которых уменьшен с 50 КБ до 45 КБ, а общий размер составляет 50 КБ. И скажем, ваш веб-сайт обслуживает в среднем 1000 посетителей каждый день, при этом каждое посещение составляет в среднем десять страниц. Только минимизация HTML сокращает использование полосы пропускания на 50 МБ в день (1,5 ГБ в месяц).
Сжатие + минификация
Как видите, минимизация HTML полезна сама по себе, особенно когда ваш сайт становится больше, файлы становятся больше, а трафик увеличивается. Обратите внимание, что в рекомендациях Google PageSpeed рекомендуется минимизировать HTML, поэтому, если вы настроены скептически, пусть это убедит вас в обратном.
Но что хорошо в оптимизации HTML, так это то, что вам не нужно выбирать минификацию или сжатие. Вы можете сделать оба! На самом деле, вы должны сделать оба.
В среднем можно ожидать, что сжатие GZIP сократит HTML-файл на 70-90 процентов. Используя приведенный выше пример с консервативной оценкой сжатия, минимизированные HTML-файлы будут иметь размер от 45 КБ до 13,5 КБ каждый при общей сумме сжатия 365 КБ. По сравнению с несжатыми / несжатыми, пропускная способность вашего сайта теперь уменьшается на 365 МБ в день (11 ГБ в месяц).
Помимо экономии пропускной способности, каждая страница загружается значительно быстрее, поскольку браузеру конечного пользователя нужно всего лишь загрузить 13,5 КБ против 50 КБ на страницу.
Как сжать и минимизировать HTML
К счастью, ни то, ни другое не очень сложно в наши дни, и вам не нужно много технических знаний, чтобы их настроить.
Плагины для WordPress
Если вы запускаете сайт WordPress, все, что вам нужно сделать, это установить один плагин, и вы сможете воспользоваться преимуществами сжатия и минимизации.
Большинство плагинов для кэширования делают больше, чем просто кэшируют страницы. Например, WP Fastest Cache и W3 Total Cache имеют настройки одним щелчком, которые позволяют включить минимизацию HTML и сжатие GZIP, а также другие функции, которые дополнительно ускоряют загрузку страниц и уменьшают использование полосы пропускания.
Если вам нужна только минификация, мы рекомендуем плагин Minify HTML. Он прост, поддерживает HTML / CSS / JS и позволяет немного настроить метод минимизации (например, удалить ли) HTTP: а также https: из URL).
Статические HTML Minifiers
Если ваши HTML-файлы статичны (т.е. не генерируются динамически с помощью CMS или веб-инфраструктуры), то вы можете поддерживать два набора HTML-файлов: исходный набор, который не минимизирован для простого редактирования, и «минимизированный» набор, который вы создаете каждый раз, когда вносите изменения в исходный файл.
Чтобы минимизировать, используйте один из этих инструментов:
- HTMLCompressor
- HTML Minifier
- HTML Minifier (отличается от приведенного выше)
Это жизнеспособный метод, если вы отошли от CMS, таких как WordPress, и теперь используете статические генераторы сайтов.
,
Включить сжатие GZIP
Действия по включению сжатия GZIP могут различаться в зависимости от того, какое программное обеспечение веб-сервера вы используете. Поскольку Apache является наиболее популярным вариантом, мы рассмотрим, как включить его с помощью .htaccess.
Подключитесь к вашему веб-серверу через FTP, затем создайте файл с именем .Htaccess в корневом каталоге. Отредактируйте файл .htaccess, чтобы иметь следующие настройки:
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
SetOutputFilter DEFLATE
Не уверены, что сжатие работает на вашем сайте? Проверьте это с помощью этого инструмента.
Была ли эта статья полезна? Теперь, когда вы сжимаете и минимизируете, ваши веб-страницы должны загружаться быстрее и использовать меньшую полосу пропускания. Если у вас есть какие-либо вопросы, не стесняйтесь задавать их ниже!
