Как работает сжатый HTML и зачем он вам нужен

Если вы используете веб-сайт, вы уже должны знать, как использовать правильные форматы изображений и оптимизировать ваши изображения для Интернета

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

В этой статье мы рассмотрим два основных метода сжатия HTML-файлов: почему HTML-файлы должны быть сжаты и как это сделать.

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

Что касается оптимизации файлов HTML, для этого есть два основных метода: компрессия а также минификация. На первый взгляд они похожи, но на самом деле это две разные техники, так что не путайте их.

минификация

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

Пример HTML-страницы:


Your Title Here

This is a Header

Send me mail at [email protected]

This is a new paragraph!

This is a new paragraph in bold and italics.

Пример HTML-страницы, свернутый:

Your Title Here
"
This is a Header

Send me mail at [email protected]

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, так это то, что вам не нужно выбирать минификацию или сжатие. Вы можете сделать оба! На самом деле, вы должны сделать оба.

    Как работает сжатый 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
    

    Не уверены, что сжатие работает на вашем сайте? Проверьте это с помощью этого инструмента.

    Была ли эта статья полезна? Теперь, когда вы сжимаете и минимизируете, ваши веб-страницы должны загружаться быстрее и использовать меньшую полосу пропускания. Если у вас есть какие-либо вопросы, не стесняйтесь задавать их ниже!

  • Ссылка на основную публикацию
    Adblock
    detector