Как уменьшить размер файла html

Обновлено: 04.07.2024

HTML сейчас используется более чем на 90 процентах сайтов в Интернете, и 93,4% из этих сайтов используют HTML5. В этом есть смысл: язык разметки гипертекста мощный, универсальный и легкий, что делает его идеальным для постоянно развивающихся веб-сайтов и веб-приложений.

Соревнование? По мере того, как ваш веб-сайт расширяется и включает в себя более настраиваемый контент и интерактивные службы, объем HTML увеличивается в геометрической прогрессии, создавая потенциальные проблемы как на сервере, так и на стороне клиента при просмотре веб-сайта.

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

Решение? Сжатие HTML – уменьшение размера файлов HTML для сокращения времени загрузки и ограничения использования полосы пропускания.

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

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

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

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

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

Зачем сжимать HTML-файл?

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

Между тем, что касается пропускной способности, сжатие может помочь сократить объем HTML-трафика, передаваемого с вашего веб-сервера конечным пользователям, на 90%. А с учетом того, что стоимость веб-хостинга часто привязана к сетевому трафику – некоторые хосты предлагают пакеты с установленными лимитами передачи данных и штрафами за переход, в то время как другие используют цены по запросу – чем меньше ваши HTML-файлы, тем меньше данных вы отправляете и тем меньше вы тратите каждый месяц.

Как сжать HTML-файл

Как отмечалось выше, наиболее распространенной формой сжатия HTML является «сжатие без потерь», то есть данные не теряются во время процесса, а вместо этого изменяются для уменьшения общего размера. Но как это работает?

Рассмотрим эту строку текста: «привет, привет, привет, привет»

Алгоритмы сжатия способны распознавать повторение в нашей строке примера и определять первый экземпляр слова «привет» как ссылку. Он оставляет эту ссылку в покое и использует первую букву второго экземпляра «hello» в качестве маркера ссылки, чтобы получить следующее:

Затем он распознает, что текст ссылки на шесть символов позади и имеет длину шесть символов:

Он также определяет второе повторение еще шести символов и тот факт, что последние четыре символа совпадают с первыми четырьмя ссылочными символами, что дает гораздо меньший конечный продукт:

Параметры сжатия файлов HTML

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

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

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

Держите его маленьким, оставайтесь простым

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

Когда вы сжимаете файлы CSS, HTML и JavaScript на своем веб-сайте, то вы тем самым ускоряете его. И хотя, в данном случае, речь не идёт о глобальном ускорении сайта на WordPress, но хоть и немного, но скорость сайта за счет этого увеличивается.

Термин сжатие или, по другому, «минимизация» (Minify) — это процессы удаления ненужных символов в исходном коде.

Эти символы включают в себя пробелы, разрывы строк, комментарии и разделители блоков, которые полезны для нас, людей, но не нужны для машин.

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

Вот пример того, как выглядит минимизация CSS.

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

Итак, если вы хотите сделать это вручную, то технически это возможно. Но стоит сделать всего одну ошибку, и сайт может стать кривым.

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

Поэтому, такую оптимизацию лучше сделать с помощью специальных сервисов.

Как сжать HTML, CSS и JavaScript с помощью онлайн-инструментов.

Общий принцип работы онлайн инструментом для сжатие просты и обычно включают следующие шаги:

Вставка или загрузка исходного кода в окно сервиса.
Настройка оптимизации (если они доступны)
Отдача команды на сжатие.
Копирование или загрузка готового кода из окна сервиса.

Для начала, найдите и скопируйте нужные файлы и откройте его с помощью простого редактора (лучше всего использовать Блокнот или его аналоги, или специализированный софт для программистов, такой как Sublime Text. Программы наподобие Word, не пойдут).

После этого, выделите и скопируйте код. (Ctrl+A, Ctrl+C).

После того, как код будет готов, скопируйте его и вставьте обратно в свой текстовый редактор (только не забудьте перед этим удалить предыдущее содержимое файла).

Вот и всё! Теперь загрузите обратно файл на хостинг, и ваш сайт станет чуточку быстрее. Вот какой результат получился у меня.

Точно также, нужно поступить и с файлами JavaScript, HTML.

Другие сайты для сжатия.

Есть и другие сервисы для сжатия. Вот основные из них.

Closure Compiler (только JS) — является частью Closure Tools, набора инструментов от разработчиков Google. Он позволяет минимизировать Javascript файл и имеет ряд других полезных опций. Вы можете загрузить Javascript, введя URL-адрес файла, а затем выбрать способ оптимизации и форматирования кода. Например, вы можете выбрать оптимизацию своего кода путем удаления пробелов, только если вы это заходите.

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

Сжатие файлов HTML, CSS и JavaScript с помощью плагинов WordPress.

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

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

Autoptimize

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

Чтобы использовать Autoptimize, его нужно скачать, установить и активировать плагин из панели инструментов WordPress в разделе «Плагины» — «Добавить новый».

Теперь переходим к пунктам: Оптимизировать код JavaScript?,

Оптимизировать код CSS?, Оптимизировать код HTML? и выставляем соответствующие галочки.

WP Fastest Cache

Это бесплатный плагин для кеширования WordPress, пользующийся огромной популярностью. Плагин выполняет различные оптимизации производительности, включая объединение и минимизацию файлов HTML, CSS и JavaScript для повышения производительности.

После того, как плагин установлен, просто перейдите на вкладку WP Fastest Cache на боковой панели управления сайтом WordPress Dashboard. На вкладке настроек вы найдете опции для объединения и минимизации файлов HTML и CSS. Хотя минимизация JavaScript доступна только в профессиональной версии.

И не забудьте нажать кнопку Submit, для того, чтобы применить новые настройки.

W3 Total Cache

Это еще один популярный плагин для ускорения сайта. И здесь, для сжатия файлов HTML, CSS и JavaScript нужно выставить всего одну галочку.

Заключение.

Если вам нужно чтобы ваш сайт быстрее загружался, и как следствие, занимал более высокие позиции в поиске, то вам нужно сжать HTML, CSS и Javascript.

И хотя они не дают прям совсем мощного прироста скорости, но прирост есть. А если учесть, насколько это просто сделать, то это нужно сделать.

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

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

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

Ну а если у вас остались еще вопросы, то задавайте их в разделе с комментариями

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

Что такое сжать HTML

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

Пример минификации.

Видим, что смысл сжатия в удалении пробелов, переноса строк между тегами и комментариев (выделены зеленым цветом). Но для браузеров и поисковых систем без разницы как представлена разработка. В тоге получаем ощутимую экономию размера файла для отображения клиенту пользователя, в некоторых случаях можно достичь результатов компрессии в 2-3 раза.

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

Минификация HTML в плагине Autoptimize

Знаменитый плагин Autoptimize может сжать HTML в WordPress. Является комбайном оптимизации скорости сайта, но пользоваться им нужно осторожно. В настройках включаем галочку.

Aotoptimize.

Есть чекбокс ниже, он оставляет разметку комментариев в HTML, если они нужны то включаем.

Уменьшить код WordPress в Clearfy

В нашем плагине ClearfyPRO содержит модуль, чтобы уменьшить HTML для WordPress. Включается как все остальные составляющие.

Включаем клеарфай.

Clearfy умеет не только сжимать, но и улучшает ресурс и темы с нуля еще по 47 требованиям поисковых систем включая, например, удалять атрибуты prev и next. Предлагаю воспользоваться скидкой на покупку Клерфай, жмите на кнопку цена снизиться сразу.

WE.

С помощью кастомной функции

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

Стандартный редактор тем.

Переходим в Редактор шаблонов (вы делаете через FTP).
Выбираем Function php.
Вниз вставляем скопированную инструкцию.
Обновляем и сохраняем изменения.

После включения минификации любым из методов, проверяем блог, смотрим все ли работает как нужно иначе советую отключить. Есть вариант протестировать на локальном сервере Open Server.

Проверкой является визуальная оценка, как способ мог сжать HTML в исходном коде WordPress. Нажимаем Ctrl+u на любой странице и смотрим результат.

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

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

Чтобы добиться лучших результатов, необходимо совмещать все эти техники.

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

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

Сочетая несколько методов, мы получили следующий результат:

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

Минификация: предварительная обработка и оптимизация на основе контекста

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

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

Посмотрите на простую HTML-страницу сверху и на три типа контента, которые в ней содержатся: HTML-разметка, CSS-стили и JavaScript. Для всех этих типов есть разные правила написания, обозначения комментариев и т. д. Как уменьшить размер такой страницы?

• Комментарии в коде помогают разработчику, но совершенно не нужны в браузере. Просто удалите комментарии CSS ( /* . */ ), HTML (  ) и JavaScript ( // . ), и размер файла значительно уменьшится.
Продвинутый CSS-компрессор может заметить, что мы используем неэффективный способ определения правила для .awesome-container. Он объединит два объявления в одно без изменения других стилей и сэкономит ещё больше байтов.
Пробелы и табуляция нужны только для удобства разработчика. Дополнительный компрессор может удалить их.

После применения этих шагов страница уменьшилась с 406 до 150 символов. Мы сэкономили целых 63%! Конечно, теперь прочитать код непросто, но это и не нужно. Мы можем сохранить оригинальную страницу в качестве версии для разработчика и применить описанные выше шаги, когда мы захотим опубликовать ее на сайте.

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

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

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

Сжатие текста с помощью GZIP

GZIP лучше всего сжимает текстовые ресурсы: CSS, JavaScript и HTML.
Все современные браузеры поддерживают и автоматически запрашивают сжатие GZIP.
На сервере должно быть настроено сжатие GZIP.
В некоторых сетей доставки контента вы должны проверить, включено ли сжатие GZIP.

GZIP - это стандартный компрессор, который может быть применен к любому потоку байтов. Он запоминает встреченный ранее контент, а затем находит и заменяет повторяющиеся фрагменты данных. Прочитать подробное описание работы GZIP можно здесь. GZIP лучше всего сжимает текстовые ресурсы, часто достигая коэффициента сжатия 70-90% при работе с большими файлами. Однако, если вы попытаетесь уменьшить размер ресурсов, уже сжатыхс помощью альтернативных алгоритмов, (например, изображений), не произойдет практически никакого улучшения.

Библиотека	Размер	Размер после сжатия	Коэффициент сжатия
jquery-1.11.0.js	276 КБ	82 КБ	70%
jquery-1.11.0.min.js	94 КБ	33 КБ	65%
angular-1.2.15.js	729 КБ	182 КБ	75%
angular-1.2.15.min.js	101 КБ	37 КБ	63%
bootstrap-3.1.1.css	118 КБ	18 КБ	85%
bootstrap-3.1.1.min.css	98 КБ	17 КБ	83%
foundation-5.css	186 КБ	22 КБ	88%
foundation-5.min.css	146 KB	18 КБ	88%

В таблице сверху показано, насколько уменьшился размер нескольких популярных библиотек JavaScript и CSS-фреймворков при использовании сжатия GZIP. Коэффициент сжатия составляет от 60 до 88%, а при обработке минифицированных файлов (в названии которых есть .min) он становится ещё выше.

Сначала применяйте методы оптимизации для конкретного контента: CSS-, JS- или HTML-минификаторы.
Используйте GZIP для сжатия минифицированных файлов.

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

Какая конфигурация подойдет вашему серверу лучше всего? В проекте HTML5 Boilerplate размещены примеры файлов конфигурации для самых популярных серверов с подробными комментариями для всех параметров и настроек. Найдите в списке нужный сервер, загляните в раздел GZIP и убедитесь, что на вашем сервере установлены рекомендованные настройки.

Чтобы посмотреть результаты работы GZIP, откройте инструменты разработчика в Chrome и найдите столбец Size/Content (Размер/контент) на панели Network (Сеть). Число Размер - это вес передаваемого ресурса, а контент - вес несжатого ресурса. Например, GZIP сжал передаваемый HTML-ресурс из примера выше на 24,8 КБ.

В завершении мы хотим предупредить вас. Большинство серверов автоматически сжимают ресурсы при передаче. Однако при использовании некоторых сетей доставки контента необходимо самостоятельно узнать, отправляется ли пользователю сжатый GZIP-ресурс. Проверьте ваш сайт и убедитесь, что все ресурсы действительно сжимаются.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Читайте также: