Рекламное объявление

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

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

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

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

минификация

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

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

Это заголовок
Отправь мне письмо на [email protected].
Это новый абзац!
Это новый абзац, выделенный жирным шрифтом и курсивом.

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

Это заголовок
Отправь мне письмо на [email protected].
Это новый абзац!
Это новый абзац, выделенный жирным шрифтом и курсивом.

Оригинальный размер: 354. Минимальный размер: 272. Экономия: 82 (23,16%).

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

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

компрессия

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

Но поскольку протокол HTTP поддерживает сжатие, ваш веб-сервер может сжать страницу перед отправкой посетителю (при условии, что сжатие включено в настройках вашего сервера), и тогда браузер посетителя может распаковать страницу обратно в исходное состояние.

Наиболее распространенная схема сжатия GZIP, который является форматом файла, который использует алгоритм сжатия без потерь Как работает сжатие файлов?Как работает сжатие файлов? Изучите основы сжатия файлов и разницу между сжатием с потерями и сжатием без потерь. Подробнее называется ДЕФЛАТ.

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

Рассмотрим строку текста, подобную этой (пример взят с сайта GZIP):

Бла-бла-бла-бла-бла.

Алгоритм распознает следующее повторение:

B {lah b} {lah b} {lah b} {lah b} lah.

Первое вхождение - это наша ссылка, поэтому оставьте это так:

Бла б {лах б} {лах б} {лах б} лах.

Второе вхождение относится к первому вхождению, которое имеет пять символов позади и пять символов длиной:

Бла б [5,5] {Лах б} {Лах б} Лах.

Но в этом случае алгоритм распознает, что следующее вхождение - это та же последовательность символов, поэтому он увеличивает опорную длину еще на пять:

Бла б [5,10] {Лах б} Лах.

И опять:

Бла б [5,15] Лах.

И алгоритм достаточно умен, чтобы понять, что следующие три символа являются первыми тремя символами в ссылке, поэтому он расширяется на три:

Бла б [5,18].

Теперь подумайте о типичном HTML-файле и о том, сколько повторений существует внутри. Почти каждый тег, такой как, имеет соответствующий закрывающий тег, как. Кроме того, многие теги повторяются повсюду, такие как, , ,, так далее. Атрибуты также часто повторяются, в том числе учебный класс, HREF, и ЦСИ. Легко понять, почему сжатие GZIP так эффективно работает с HTML.

Единственным недостатком является то, что веб-серверу требуется немного больше ресурсов ЦП для выполнения сжатия при каждом запросе страницы. Но поскольку в настоящее время CPU не сильно беспокоит, почти всегда лучше включить GZIP, чем обходиться без него, даже если у вас есть веб-хостинг начального уровня Лучшие услуги веб-хостинга: общий, VPS и выделенныйИщете лучший веб-хостинг для ваших нужд? Вот наши лучшие рекомендации для вашего блога или сайта. Подробнее .

Почему вы должны сжать и минимизировать

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

Быстрая загрузка страниц

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

если ты только хотим минификации, мы рекомендуем Сократить HTML плагин. Он прост, поддерживает HTML / CSS / JS и позволяет немного настроить метод минимизации (например, удалить ли) HTTP: и https: из URL).

Статические HTML Minifiers

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

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

• HTMLCompressor
• HTML Minifier
• HTML Minifier (отличается от приведенного выше)

Это жизнеспособный метод, если вы отошли от CMS, таких как WordPress, и теперь используете генераторы статического сайта 7 причин отказаться от вашей CMS и рассмотреть статический генератор сайтовНа протяжении многих лет публикация сайта была сложной для многих пользователей. CMS, такие как WordPress, изменили это, но они все еще могут сбивать с толку. Другой альтернативой является генератор статического сайта. Подробнее .

Включить сжатие GZIP

Действия по включению сжатия GZIP могут отличаться в зависимости от того, какое программное обеспечение веб-сервера вы используете. Поскольку Apache является наиболее популярным вариантом, мы рассмотрим, как включить его с помощью .htaccess.

Подключитесь к вашему веб-серверу через FTP, затем создайте файл с именем .htaccess в корневом каталоге. Отредактируйте файл .htaccess, чтобы иметь следующие настройки:

 mod_gzip_on Да mod_gzip_dechunk Да Файл mod_gzip_item_include. (html? | txt | css | js | php | pl) Обработчик $ mod_gzip_item_include ^ сценарий cgi $ 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 11 полезных инструментов для проверки, очистки и оптимизации файлов CSSХотите улучшить свой код CSS? Эти CSS-контролеры и оптимизаторы помогут улучшить CSS-код, синтаксис и минимизировать ваши веб-страницы. Подробнее .