Как уменьшить количество HTTP-запросов и зачем это нужно
Как уменьшить размер HTML-кода для ускорения загрузки сайта

Middle Front End Developer в Serpstat
Зачем нужно сокращать размер кода
В чем заключается минимизация HTML-кода
Ниже показан пример, как можно уменьшить исходный код. До оптимизации:
Привет, Мир!<script>// <![CDATA[
var X = ‘Привет, Мир!’;
// ]]><</script>Привет, Мир! <pre> Привет, Мир!</pre>
<html>
<head>
<title> Привет, Мир! </title>
<script> var X = ‘Привет, Мир!’; </script>
</head>
<body>
Привет, Мир!
<pre>
Привет,
Мир!
</pre>
</body>
</html>
<link rel="dns-prefetch" href="http://mc.yandex.ru"/>
<link rel="dns-prefetch" href="http://www.google-analytics.com"/>
Ниже пример до оптимизации:
<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>
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-код
- ручной — подойдет тем, кто умеет верстать;
- с помощью специальных плагинов и сервисов — подойдет всем вебмастерам.

Для оптимизации сайта на WordPress можно использовать плагины:
W3 Total Cache
- улучшить производительность сайта в 10 раз;
- ускорить время загрузки веб-страниц;
- улучшить производительность сервера;
- оптимизировать прогрессивную визуализацию, чтобы страницы могли рендериться быстрее.
Ниже — пример с результатами сайта до и после применения плагина.

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

- в поисковую строку введите «WP Super Cache»;

- нажмите «Установить»;

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

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

Оптимизация подключаемых файлов
Основные рекомендации:
- минимизируйте нагрузки на JavaScript путем удаления лишних символов, ненужных комментариев, чтобы в результате получить однострочный JS-файл;
- проведите обфускацию JS-кода, таким образом уменьшив исходный код. В нем убираются лишние символы и вносятся изменения в сам код, применяется утилита ShrinkSafe;
- сожмите CSS-код;
- очистите html-код от мусорных фрагментов.
Другие параметры, которые важно учитывать при верстке
- Кроссбраузерность — способность веб-страниц правильно отображаться в разных браузерах;
- наличие адаптированной мобильной версии — Google учитывает ее с 2015 года, а Яндекс — с 2016;
- размещение контента — его нежелательно прятать под «display:none»;
- неправильное использование тегов — если они пересекаются, поведенческие факторы ухудшаются, например: <strong>, <b>, <em> & <a href>.
Заключение
Плагины, которые облегчают минимизацию для сайтов на WordPress:
Также разработаны готовые онлайн инструменты, которые способны оптимизировать код. Все, что вам нужно сделать, — перенести его на свой сайт.
Один из таких инструментов — Daruse Компрессор HTML.
После несложных манипуляций можно ускорить процесс загрузки страниц, улучшить поведенческие факторы и, наконец, повысить позиции продвигаемого ресурса в выдаче.
Эта статья — часть модуля «Список задач» в Serpstat

о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач» |
Сэкономьте время на изучении Serpstat
Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?
Оставьте заявку и мы свяжемся с вами ;)
Рекомендуемые статьи
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор Анастасия подберет материалы, которые точно помогут в работе. Присоединяйся к уютному комьюнити :)
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.
Комментарии