Как сократить html код

Как сократить код HTML?

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

Одно из решений проблемы — оптимизация HTML-кода, которая заключается в редактировании шаблонов страниц и уменьшении объема кода. Эти простые действия «помогут» поисковым системам сократить время анализа контента вашего сайта.

Рассмотрим основные методы сокращения HTML-кода:

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

Как видите, «чистка» кода не требует глубоких познаний в программировании. Вы можете выполнить эти действия сами. Однако будьте осторожны, так как в данном случае присутствует риск удалить нужные теги или атрибуты. Если вы не уверены в своих силах, обратитесь к разработчикам вашего сайта.

Также вы можете удалить перечисленные выше элементы, воспользовавшись автоматическим минимизатором кода.

Для этого:

1

загрузите ваш код в HTML compressor и нажмите Compress:

2

на выходе вы получаете сжатый HTML код:

3

в правом верхнем углу отображается результат сжатия и ссылка на скачивание файла:

Также вы можете воспользоваться рекомендациями по сокращению HTML-кода от Google.

Как сократить HTML код страницы сайта?

Как сжать, сократить HTML код?

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

Каким образом можно сжать HTML-код?

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

1. Удаление пустых строк.
2. Удаление лишних пробелов.
3. Удаление отступов.
4. Удаление комментариев.
5. Изменение длинных тэгов на аналогичные, но более короткие. Например, изменить на .
6. Удаление необязательных закрывающих тэгов.

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

Сжатие HTML кода на сайте WordPress

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

Как должен выглядеть оптимальный HTML код?

Все знают и видели главную страницу Яндекса. А Вы заглядывали в его HTML код? Выглядит он отлично! Там нет ничего лишнего. Приблизительно так и должен выглядеть HTML код. Так же, хорошую подсказку может дать расширение Page Speed для Google Chrome, которая покажет как должен выглядеть HTML код Вашей страницы. Отталкиваясь от его показателей Вы с легкостью сможете сжать HTML-код Вашей страницы.

SEO Маяк

Всем привет! Сегодня на seo-mayak.com мы продолжим выполнять рекомендации PageSpeed и разберем пункт «Сократите CSS», что позволит еще немного ускорить загрузку сайта.

После выхода статьи «Как включить gzip сжатие и кратно ускорить сайт» мне написал один мой читатель и посетовал на то, что он не может включить статическое gzip сжатие, так как его сайт еще находится в стадии становления и ему приходиться постоянно редактировать файлы.

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

Наверно самое большое влияние на скорость загрузки сайте оказывают изображения. Если анализ PageSpeed определил в красную зону пункты «Оптимизируйте изображения», «Предоставьте изображения с нужными пропорциями» и «Укажите размеры изображений», то чем раньше Вы приступите к выполнению данных рекомендаций, тем меньше Вам впоследствии придется возится с картинками. Т.е. лучше заранее оптимизировать изображения и уже потом загружать их на сервер.

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

В общем, все что касается кеша и изображений, за исключением пункта «Объедините изображения в CSS-спрайты» можно начинать выполнять хоть с самого рождения проекта.

А такие рекомендации как: «Сократите CSS», «Сократите JavaScript», «Сократите HTML», «Включите gzip сжатие» (имеется в виду статическое gzip сжатие), «Встройте небольшие CSS», «Встройте небольшие ресурсы JavaScript», «Объедините изображения в CSS-спрайты» лучше выполнять на уже сформировавшихся ресурсах, так как в ходе работ придется сжимать, изменять содержание файлов, что затруднит последующие их редактирование.

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

Итак, если Вы закончили с дизайном сайта и его функционалом, то самое время приступить к сокращению объема файлов, которые подгружаются вместе с основным контентом, а это css-файлы, js-файлы и html-файлы, что позволит ускорить загрузку сайта.

Про сокращение js и html файлов мы поговорим в другой раз, а сейчас я расскажу, как сократить CSS. Поехали!

Технология удаления «мертвых» стилей

Прежде всего надо провести тщательную ревизию в файле style.css и выявить стили, которые не используются в шаблоне.

Но как определить какие стили используются, а какие нет? На самом деле сложного в этом ничего нет. Если у Вас нет свежей резервной копии файлов, то сделайте ее с помощью FTP клиента FileZilla.

Затем в редакторе Notepad++ открываем файл style.css, выделяем любой класс или идентификатор (выделать надо только слово, без точки или решетки) и во вкладке «Поиск» выбираем пункт «Найти в файлах»:

В открывшимся окне жмем на кнопку «…», как показано на скриншоте:

И в резервной копии фалов ищем папку с темой:

Далее жмем на кнопку «Найти все»:

После чего в редакторе появится дополнительное окно с результатами поиска:

В моем случаи результаты таковы. Notepad++ нашел только одно совпадение, которое находится в файле style.css.

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

Поэтому смело удаляем данный идентификатор со всеми селекторами и их значениями:

Давайте рассмотрим другой пример. Я произвольно выбрал класс и результат поиска показал следующее:

Видно, что класс «homepage_post» используется в файлах шаблона, таких как: 404.php, archve.php, index.php, page.php, search.php и sindle.php.

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

Если в файлах Вашей темы используются функции post_class() и body_class(), советую ознакомится с данным материалом, чтобы не удалить лишнего.

Надеюсь понятно. Таким способом проверьте все классы и идентификаторы. Уверен, что вы обязательно найдете «мертвые стили», избавившись от которых, сократите код CSS. Работа конечно нудная, но проделать ее надо, если мы хотим ускорить загрузку сайта. Идем дальше.

Объединение файлов CSS

Теперь, когда мы избавились от «мертвых» стилей, можно приступать ко второму этапу сокращения CSS.

В некоторый шаблонах может использоваться несколько файлов стилей. Они могут по разному называться, но все они должны иметь расширение .css. Эти файлы также стоит проверить на «мертвые» стили.

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

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

Важно! Будьте аккуратны при объединении файлов стилей! Всегда оставляйте возможность вернуть все на свои места, если что-то пойдет не так.

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

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

Как сократить CSS

Итак, мы имеем один файл style.css. Теперь на надо сократить его объем (не путать с сжатием файлов).

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

Что касается меня, то я постоянно редактирую стили и уверен, что многие веб-мастера делают тоже самое. Сокращение CSS можно разделить на три вида: прогрессивное, умеренное и щадящие.

Прогрессивное сокращение CSS подразумевает размещение всех классов, идентификаторов и их селекторов в одной строке. Т,е, в файле style.css, после такого сокращения, останется только одна строка, но очень длинная.

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

Для реализации прогрессивного сокращения можно воспользоваться сервисом . Копируем содержимое файла style.css и вставляем в поле на странице сервиса:

Выбираем наибольшее сжатие «Highest (no readability, smallest size)» и жмем на кнопку «Compress».

Мой подопытный css код имел исходный размер 10240 байт. После сокращения он похудел примерно на 43% и стал весить 6546 байт:

При щадящем сокращении CSS, на одной строке размещается класс или идентификатор, селекторы и их значения, а следующий класс прописывается уже с новой строки. Например:

Чтобы не заниматься нудной работой и вручную не удалять все пробелы табуляции и т.д, можно воспользоваться вышеописанным сервисом csscompressor.com, только перед сокращением, в настройках надо выбрать строчку «High (moderate readability, smaller size)»:

Также можно воспользоваться расширением PageSpeed для браузера Mozilla Firefox. Для этого, в результатах анализа выбираем пункт «Сократите CSS», жмем на стрелочку рядом с ним. Затем кликаем по ссылке «optimizet version»:

 

И  PageSpeed предоставит нам щадящее сокращении CSS кода:

Останется только скопировать и вставить код в файл style.css.

Умеренное сокращение CSS — это вручную доработанное щадящие сокращение. Данный способ я использую сам. Заключается он в том, что в одну строку помещаются стили, отвечающие за определенный участок сайта, при этом я помечаю каждую строчку, соответствующим комментарием:

В общей сложности у меня получилось 38 строк, но при желании можно сделать еще меньше.

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

До встречи!

С уважением, Виталий Кириллов

« Оптимизация WordPress. Нагрузка на сервер и как ее снизить « PageSpeed — реальное ускорение сайта « Как включить gzip сжатие и кратно ускорить сайт « Как включить кэш браузера на стороне пользователя

Как сократить код CSS?

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

Если на сайте подключено слишком большое количество внешних файлов, это отражается на его скорости загрузки. Сокращение кода CSS — одна из основных рекомендаций сервиса Google Page Speed. Об этом вы можете прочитать в статье Google speed test и продвижение сайта.

Как сократить код CSS

К самым распространенным советам по сокращению стилей CSS относят объединение внешних файлов и сжатие кода. Рассмотрим их подробней.

Объединение файлов CSS

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

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

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

Сжатие CSS

Оптимизируйте содержимое файла CSS, воспользовавшись любым сервисом по сжатию CSS-стилей. Например, CSS Compressor. Для этого выделите текстовый код CSS и скопируйте его. Затем вставьте в специальное поле и нажмите кнопку Compress:

В нижнем поле сервис выдаст сокращенный CSS-код и статистику оптимизации (исходный и конечный размер, процент оптимизации):

Далее скопируйте полученный код, создайте новый файл CSS, вставьте содержимое и сохраните его под новым названием. Затем подключите к текстовому коду вашего сайта новый файл с обработанным кодом CSS.

Также вы можете оптимизировать CSS-файл вручную. Для этого очистите код от:

• комментариев;
• пробелов;
• знаков табуляции;
• отступов.

---

Смотрите также

• 
  Как строить диаграммы в word
• 
  Как изменить размер колонтитула word 2010
• 
  Как настроить word
• 
  Дочерние селекторы в css
• 
  Как открыть php файл на компьютере
• 
  Градиент в css
• 
  Как в word сделать шаблон документа
• 
  Как в word создать заголовок
• 
  Цвет в css
• 
  Позиционирование в css
• 
  Как сделать гиперссылку в html