How-to

– Читать 8 минут –

22 марта 2019

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

ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — КОД СТРАНИЦ

Инструкцию одобрил
Middle Front End Developer в Serpstat

Илья Кирилов

Для продвижения важно уделять внимание внутренней оптимизации сайта. Это поможет при ранжировании сайта в поиске. Один из этапов оптимизации — минимизация HTML-кода. Она улучшает скорость загрузки сайта.

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

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

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

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

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

Сократить объем контента в первом секторе кода. Перенести все, что не относится к загрузке первого экрана, вниз. Важные блоки JS и CSS могут встраиваться в HTML-код.

Преобразовать DNS имена. Укажите браузеру, в каком месте искать подключаемые файлы на web-странице — изображения, javascript, файлы стилей. Ниже пример ускорения загрузки страницы для систем аналитики:

<link rel="dns-prefetch" href="http://mc.yandex.ru"/>
<link rel="dns-prefetch" href="http://www.google-analytics.com"/>

Удалить домен из урлов в атрибутах 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, оформляя в спрайты элементы дизайна, и выносить их в листы стилей.

Оптимизировать названия классов. Это также уменьшает размер 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.

В строку достаточно ввести ссылку и выбрать кнопку «Analyze». Сервис выдаст список файлов, которые надо оптимизировать.

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

W3 Total Cache

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

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

Ниже — пример с результатами сайта до и после применения плагина.

Влияние скорости загрузки на ранжирование сайта

Процесс установки:

зайдите в админку;
слева выберите раздел «Плагины»;
после этого — «Добавить новый».

в поисковую строку введите «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

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

Начать работу со «Списком задач»