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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

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

Отменить
2913
How-to Читать 8 минут 22 марта 2019

Как уменьшить размер 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.75 из 5 на основе 4 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

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

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов