Мы используем файлы cookie для обеспечения работоспособности сервиса, улучшения навигации и маркетинговых активностей Serpstat. Нажимая "Принять и продолжить", вы соглашаетесь с нашей Политика конфиденциальности

Сообщить об ошибке

Отменить
12560
How-to Читать 8 минут

Как уменьшить размер HTML-кода для ускорения загрузки сайта

Как минимизировать HTML-код страниц
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — КОД СТРАНИЦ
Инструкцию одобрил
Middle Front End Developer в Serpstat
Для продвижения важно уделять внимание внутренней оптимизации сайта. Это поможет при ранжировании сайта в поиске. Один из этапов оптимизации — минимизация HTML-кода. Она улучшает скорость загрузки сайта.

Зачем нужно сокращать размер кода

Страницы сайта быстрее загружаются. Это ценят не только поисковые машины. По статистике, 40% посетителей закрывают ресурс, если тот грузится больше трех секунд. С каждой новой секундой конверсия падает на 7%. В поисковой выдаче быстрые сайты получают более высокие позиции за счет положительных поведенческих факторов.

В чем заключается минимизация HTML-кода

Во время написания кода программисты могут оставлять больше места, чем нужно, добавлять комментарии к коду или ставить ненужные знаки. Это все увеличивает размер файла. Чтобы исправить это, необходимо:
1
Убрать повторяющиеся пробелы и переносы строк. Они увеличивают время на загрузку веб-страницы. В данной ситуации нельзя трогать теги <script>, <textarea>, <pre>, <style>.

Ниже показан пример, как можно уменьшить исходный код. До оптимизации:

Привет,    Мир!<script>//  <![CDATA[
var X =  ‘Привет,     Мир!’;
// ]]><</script>Привет, Мир! <pre> Привет, Мир!</pre>
После оптимизации:
<html>
<head>
<title> Привет, Мир! </title>
<script> var X = ‘Привет, Мир!’; </script>
</head>
<body>
Привет, Мир!
<pre>
Привет,
Мир!
</pre>
</body>
</html>
2
Сократить объем контента в первом секторе кода. Перенести все, что не относится к загрузке первого экрана, вниз. Важные блоки JS и CSS могут встраиваться в HTML-код.
3
Преобразовать DNS имена. Укажите браузеру, в каком месте искать подключаемые файлы на web-странице — изображения, javascript, файлы стилей. Ниже пример ускорения загрузки страницы для систем аналитики:
<link rel="dns-prefetch" href="http://mc.yandex.ru"/>
<link rel="dns-prefetch" href="http://www.google-analytics.com"/>
4
Удалить домен из урлов в атрибутах src, href. Это тоже позволяет уменьшить код.

Ниже пример до оптимизации:
<html>
  <head>
  <base href="http://www.site.com/">
  </head>
  <body>
    <a href="http://www.example.com/bar">Анкор </a>
  </body>
</html>
После:
<html>
  <head>
  <base href="http://www.example.com/">
  </head>
  <body>
    <a href="bar">Анкор</a>
  </body>
</html>
Чтобы ускорить процесс загрузки желательно также отделять во внешние файлы CSS и JavaScript, оформляя в спрайты элементы дизайна, и выносить их в листы стилей.
5
Оптимизировать названия классов. Это также уменьшает размер HTML: имена классов CSS желательно сокращать. Применяя babel-plugin-react-css-modules и css-loader можно изменить имена на любые другие. Используйте индекс имен с помощью модуля incstr для генерации дополнительных идентификаторов для каждой записи в индексе. Например:
const incstr = require ( ' incstr ' );
const createUniqueIdGenerator = () => {
 индекс const = {};
 const generateNextId = incstr . idGenerator ({
   // Удалена буква "d", чтобы избежать случайной конструкции "ad".
   // @ смотри https://medium.com/@mbrevda/just-make-sure-ad-isnt-being-used-as-a-class-name-prefix-or-you-might-suffer-the-wrath -of-на-558d65502793
   алфавит : ' abcefghijklmnopqrstuvwxyz0123456789 '
 });
 return ( name ) => {
   if (index [name]) {
     возвращаемый индекс [имя];
   }
   пусть nextId;
   делать {
     // Имя класса не может начинаться с цифры.
     nextId = generateNextId ();
   } while ( / ^ [ 0-9 ] / . test (nextId));
   index [name] = generateNextId ();
   возвращаемый индекс [имя];
 };
};
const uniqueIdGenerator = createUniqueIdGenerator ();
const generateScopedName = ( localName , resourcePath ) => {
 const componentName = resourcePath . разделить ( ' / ' ). срез ( - 2 , - 1 );
 return uniqueIdGenerator (componentName) + ' _ ' + uniqueIdGenerator (localName);
};

Как оптимизировать HTML-код

Есть два способа оптимизации:

  • ручной — подойдет тем, кто умеет верстать;
  • с помощью специальных плагинов и сервисов — подойдет всем вебмастерам.
Чтобы найти не оптимизированные файлы можно использовать сервис GTmetrix.
Анализ скорости загрузки сайта GTmetrix
В строку достаточно ввести ссылку и выбрать кнопку «Analyze». Сервис выдаст список файлов, которые надо оптимизировать.

Для оптимизации сайта на WordPress можно использовать плагины:

W3 Total Cache

Это один из самых популярных плагинов кэширования — у него больше 1 млн. скачиваний. Он работает с виртуальным хостингом, VPS, VDS. Благодаря ему можно:

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

Ниже — пример с результатами сайта до и после применения плагина.
Влияние скорости загрузки на ранжирование сайта
Процесс установки:

  • зайдите в админку;
  • слева выберите раздел «Плагины»;
  • после этого — «Добавить новый».
Добавить плагин в WordPress
  • в поисковую строку введите «WP Super Cache»;
Плагин WP Super Cache для WordPress
  • нажмите «Установить»;
Установка плагина WP Super Cache
  • активируйте плагин кнопкой. Перед активацией необходимо деактивировать другие кэширующие плагины.

Как настроить плагин:


  • зайдите в «Настройки» плагина, чтобы включить кэширование, и обновите вкладку;

  • во вкладке «Настройки» отметьте «Кэшировать сессии просмотров», «Сжимать файлы кэша» и выберите «Обновить».
Настройка плагина WP Super Cache

Другие сервисы для сокращения кода

Также для оптимизации кода можно использовать Daruse Компрессор HTML. Это онлайн-инструмент. Вставьте существующий код в специальное поле и выберите кнопку «Сжать». Через пару секунд он выдаст новый код.
Сжатие кода с помощью Daruse Компрессор HTML
Компрессор HTML удаляет лишние строки, табуляцию, пробелы. При этом, работая с ним, между тегами «head» код при необходимости можно не сжимать. Функциональность JS после сжатия не нарушается.

Оптимизация подключаемых файлов

Проведите оптимизацию подключаемых файлов. Логика работы подобна описанной выше.

Основные рекомендации:

  • минимизируйте нагрузки на JavaScript путем удаления лишних символов, ненужных комментариев, чтобы в результате получить однострочный JS-файл;

  • проведите обфускацию JS-кода, таким образом уменьшив исходный код. В нем убираются лишние символы и вносятся изменения в сам код, применяется утилита ShrinkSafe;

  • сожмите CSS-код;

  • очистите html-код от мусорных фрагментов.

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

  • Кроссбраузерность — способность веб-страниц правильно отображаться в разных браузерах;

  • наличие адаптированной мобильной версии — Google учитывает ее с 2015 года, а Яндекс — с 2016;

  • размещение контента — его нежелательно прятать под «display:none»;

  • неправильное использование тегов — если они пересекаются, поведенческие факторы ухудшаются, например: <strong>, <b>, <em> & <a href>.

Заключение

Минимизация HTML-кода — важный этап внутренней оптимизации сайта. Минимизировать проще всего с помощью специальных сервисов и плагинов.

Плагины, которые облегчают минимизацию для сайтов на WordPress:

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

Один из таких инструментов — Daruse Компрессор HTML.

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

Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

3.71 из 5 на основе 7 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.