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

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

Если у вас есть веб-сайт, вы уже должны знать, как используйте правильные форматы изображений и оптимизируйте свои изображения для Интернета. Тем не менее, в то время как сжатие изображений является хорошо известной практикой, на сжатие HTML часто не обращают внимания, что является позором, потому что преимущества того стоят.





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



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

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





Минификация

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

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





Your Title Here



Send 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 , который представляет собой формат файла, в котором используется алгоритм сжатия без потерь называется DEFLATE.

Алгоритм ищет повторяющиеся вхождения текста в 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-файле и о том, сколько в нем повторений. Почти каждый тег, например

, имеет соответствующий закрывающий тег, например

. Кроме того, многие теги повторяются повсюду, например

,

,

,

  • и т. д. Атрибуты также часто повторяются, в том числе

    class

    ,

    href

    , а также

    src

    . Легко понять, почему сжатие GZIP так эффективно с HTML.

    Единственным недостатком является то, что веб-серверу требуется немного больше ЦП для выполнения сжатия каждый раз, когда запрашивается страница. Но поскольку сейчас процессор не вызывает особого беспокойства, почти всегда лучше включить 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 Самый быстрый кеш а также W3 Общий кэш оба имеют настройки одним щелчком, которые позволяют включить минификацию HTML и сжатие GZIP, а также другие функции, которые еще больше ускоряют загрузку страниц и уменьшают использование полосы пропускания.

    если ты Только хотите минификации, мы рекомендуем Минимизировать HTML плагин. Это просто, поддерживает HTML / CSS / JS и позволяет немного настроить метод минификации (например, нужно ли удалять

    http:

    а также

    https:

    из URL-адресов).

    Статические минификаторы HTML

    Если ваши HTML-файлы статичны (т.е. не генерируются динамически CMS или веб-фреймворком), вы можете поддерживать два набора HTML-файлов: «исходный» набор, который не минимизирован для удобного редактирования, и «минимизированный» набор, которые вы создаете каждый раз, когда вносите изменения в исходный файл.

    Чтобы минимизировать, используйте один из этих инструментов:

    Это жизнеспособный метод, если вы отошли от 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

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

    Для максимальной эффективности вам также следует узнать, как проверить, очистить и оптимизировать свой CSS .

    Делиться Делиться Твитнуть Эл. адрес Следует ли вам немедленно перейти на Windows 11?

    Скоро выйдет Windows 11, но стоит ли обновиться как можно скорее или подождать несколько недель? Давайте разберемся.

    Читать далее     Похожие темы
    • Программирование
    • HTML
    • Веб-разработка
    Об авторе Джоэл Ли(Опубликовано 1524 статей)

    Джоэл Ли является главным редактором MakeUseOf с 2018 года. У него есть степень бакалавра наук. Кандидат компьютерных наук и более девяти лет профессионального опыта написания и редактирования.

    Ещё от Joel Lee

    Подписывайтесь на нашу новостную рассылку

    Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

    Нажмите здесь, чтобы подписаться