Оптимизация html: Как уменьшить размер HTML и оптимизировать код страниц

Оптимизация HTML, CSS и JavaScript: как настроить и ускорить

Оптимизация JS, HTML и CSS нужна каждому сайту. Неважно, в какой сфере работает сайт: личный блог или полноценный интернет-магазин. В любой сфере сайт должен работать максимально быстро. Такое требование обусловлено двумя важными вещами:

1. Это требование поисковых систем. Медленные и неадаптированные сайты, которые долго загружают собственный контент, ранжируются хуже и попадают в конец поисковой выдачи.

2. Это негласное требование пользователей. Многочисленные исследования показали, что современные пользователи не готовы долго ждать загрузки контента, если они находятся в поиске какой-то информации. Оптимальное время загрузки веб-ресурса — 3 секунды. Этого времени хватает, чтобы удержать около 90% пользователей. Каждая последующая секунда загрузки отсеивает определенное количество пользователей. Критическое время загрузки сайта — 6-7 секунд. Если сайт загружается дольше этого времени, тогда у него будет очень мало посетителей с поисковых систем.

Исключения по времени загрузки касаются 2-х видов сайтов:

Оптимизация JS, HTML, CSS

Ускорение загрузки сайта обычно начинают с его анализа. То есть сначала нужно проанализировать производительность веб-сайта на специальных сервисах, чтобы выявить проблемные места. Таких сервисов очень много:

• платные и бесплатные;

• устанавливаемые и онлайн-инструменты;

• с рекомендациями по решению проблем с сайтом и без;

• и др.

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

Важное замечание: многие подобные ресурсы находят проблемы и дают рекомендации по оптимизации JavaScript, CSS, изображений, работы хостинга. Редко какие сервисы затрагивают проблемы в HTML. Для обнаружения проблем с разметкой нужно «прогнать» сайт через валидатор, например, через «validator.w3.org» и др. Валидаторы проверяют корректность разметки веб-ресурса и выявляют ошибки. Любая ошибка в разметке ограничивает скорость загрузки веб-ресурса, поэтому устранять и выявлять HTML-ошибки нужно.

Оптимизация JS и CSS

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

Оптимизация JS и CSS проводится двумя путями:

Ручной способ подразумевает, что вы владеете необходимыми знаниями и можете самостоятельно залезть в код сайта. К примеру, прогнав сайт через «PageSpeed Insights», вы получили рекомендации. Прочитав рекомендации, вы поняли, о чем идет речь и где это нужно исправить. Дополнительно вы владеете JavaScript, HTML и CSS, поэтому проблем с редактированием у вас не возникнет. Если есть знания и желание все исправить, тогда проблем с оптимизацией не возникнет, потому что сервис подскажет вам, что нужно исправить, а вы будете знать, как это делается.

Оптимизация при помощи плагинов — это вариант попроще. Он актуален в тех случаях, когда сайт работает на какой-либо популярной платформе, например WordPress или Joomla. В этом случае для оптимизации можно применить специализированные плагины.

Ускорение загрузки сайта: специальные плагины

Мы подобрали несколько плагинов для CMS WordPress, которые помогут оптимизировать сайт. Почему именно для WordPress? Потому что эта платформа является самой популярной и часто используемой для управления сайтом.

Подборка плагинов:

1. Optimize Database. Помогает оптимизировать базу данных сайта.

2. WP-Optimize. Комплексный плагин, который может оптимизировать базу данных, сжимать изображения, кэшировать, удалять резервные копии и др.

3. WP fastest Cache. Отличный плагин для кэширования html-страниц.

4. PageSpeed Ninja. Плагин для комплексной оптимизации сайта на Вордпресс.

5. PageSpeed Module. Добавляет в Вордпресс дополнительные настройки страниц, ускоряющие их загрузку.

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

7. Autoptimize. Оптимизация JS и CSS — это основная деятельность плагина. Может воздействовать на код страниц.

8. Smush Image Compression. Плагин оптимизирует изображения на сайте.

9. И др.

Использовать плагины на сайте нужно осторожно. Большое количество плагинов негативно влияет на производительность сайта. Больше плагинов — больше мусора. Поэтому предпочтительней проводить оптимизацию «руками». Если нет знаний, тогда необходимо подобрать 2-3 плагина, затрагивающих все сферы оптимизации.

Заключение

Оптимизация JS, HTML, CSS может показаться сложным процессом, однако при использовании правильных инструментов не нужно иметь глубокие знания в программировании, чтобы ее провести. Если знания есть, тогда процесс оптимизации будет еще проще.

SEO-friendly HTML для верстальщика / Хабр

В этой статье не будет подробного разбора всех аспектов SEO-friendly сайта. Я собрал здесь лишь тот объем информации, с которым мне необходимо было познакомиться для решения SEO-задач в компании.

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

Наш сайт, без преувеличения, состоит из огромной кодовой базы, и каждый день мы планомерно улучшаем его, добавляя новые фичи и исправляя существующие баги. Еще в начале своего пути я получил несколько крупных задач по улучшению текущей верстки проекта с использованием validator.w3.org. После окончания работ над этими задачами у меня возникла мысль собрать некоторую информацию по написанию валидной и SEO-пригодной верстки в одну небольшую статью с указанием ссылок на дополнительную и более подробную информацию.

Вы познакомитесь с несколькими важными областями валидной SEO-верстки и найдете примеры работы с validators. w3.org. Дополнительные материалы, указанные ниже, будут весьма полезны в повседневной работе верстальщика.

Семантические теги

Семантическая верстка — это html элементы со смыслом понятные разработчику, браузеру и поисковым роботам. К таким относят: header, footer, main, article, section, nav, aside и тд. Использование перечисленных тегов описывается по спецификациям W3C или WHATWG. Короткую вводную можно получить в цикле видео\статей “HTML шорты” от Вадима Макеева. Приведу описание к нескольким тегам.

Section — определяет раздел в документе. В соответствии со спецификацией W3C по HTML5: «Раздел — это тематически сгруппированный контент, как правило с заголовком.»
Article — определяет независимый, самодостаточный контент. Контент, помещенный в этот элемент, должен иметь смысл сам по себе, т. е. он должен быть понятен в отрыве от остальных частей веб-сайта.
Подробнее о article, а так же section написано здесь.
Header — предназначен для определения заголовочного блока или «шапки» документа или раздела. Подробнее здесь.
Footer — предназначен для определения «подвала» документа или раздела.
Nav — Предназначен только для основного блока навигационных ссылок.
Aside — определяет некий контент, находящийся в стороне от контента, внутри которого он расположен (как боковой блок страницы, «сайдбар»).

В целом, тема доступности сайтов довольно обширна. Со всеми нюансами предлагаю ознакомиться в этой статье и еще советую пройтись по всей серии “HTML шорты”. Еще могу посоветовать ресурс Веб стандарты, некоторые статьи писали авторы спецификации HTML5 (переводы на русский). И для понимания, можно ознакомиться с контентной моделью HTML.

Микроразметка Schema.org

Чаще всего инструкции по включению микроразметки в HTML-код вы будете получать от SEO-специалистов. Но для понимания немного осветим эту тему.

Schema.org — стандарт семантической разметки данных, который помогает поисковикам лучше понимать данные, представленные на сайте. Например, с помощью разметки можно явно указать поисковым роботам, что на странице site.ru/product_page1 находится товар, и передать основные параметры: название, цену, артикул, производителя и т.д. На основе этих данных поисковики формируют расширенные сниппеты в поисковой выдаче.

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

Подробно о микроразметке написано в вики Яндекса. Документация Schema.org. Так же стоит обратить внимание и на гайд от Google.

Как проверить свой HTML

Так как один из критериев к SEO — это валидная верстка, необходимо прогонять написанный код через ранее упомянутый валидатор. К слову, помимо него есть валидатор от Google — в нем необходимо следить за выбранным роботом (Компьютер/Смартфон) и инструмент от Яндекса. Эти инструменты помогут Вам в задачах связанных с микроразметкой. Следует сравнивать новый и старый код, удостовериться, что ошибок нет и все существующие ранее сущности правильно считываются.

В целом, работа с ними сводится к тому, чтобы скопировать HTML код из браузера и вставить его в соответствующее текстовое поле валидатора. Можно копировать куски кода сразу из вашего IDE, но это должен быть чистый HTML с готовыми данными. После прохождения проверки вы будете получать уведомления о различных ошибках в коде. Warning можно опустить. Но от всех Error необходимо избавиться, чтобы верстка удовлетворяла принципам валидной HTML-страницы. В процессе работы могут возникнуть нерешаемые проблемы. Такое стоит гуглить и принимать во внимание, что валидаторы могут не поспевать за всеми нововведениями.

Перейдем к нескольким конкретным примерам (не)валидной верстки и их проверке с validator.w3.org.

Списки

К спискам относятся теги ul и ol (маркированные и нумерованные соответственно).
Выглядит это так:

<ul>
	<li>item 1</li>
</ul>
<!-- или -->
<ol>
	<li>item 1</li>
</ol>

Внутри открывающего и закрывающего тегов ul могут стоять только элементы li, а уже внутри самих этих элементов (пунктов) можно вставлять любой контент (текст, картинки, заголовки, абзацы, ссылки и даже другие списки). То есть, <ul><div></div></ul> является не валидной версией, и https://validator.w3.org/nu/ явно об этом напишет в выводе ошибок (Рис 1).

Рис 1. Ошибка списка

Ссылки

В использовании тега <a> тоже есть нюанс, в href недопустимы пробелы. То есть, <a href="tel:+7 (967) 321-22-33">phone</a> не является валидным вариантом (Рис. 2), однако <a href="tel:+7(967)321-22-33">phone</a> соответствует всем критериям.

Рис 2. Ошибка ссылки

Атрибуты

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

Таблицы

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

<table border="1" cellpadding="0" cellspacing="0"></table>

На данный код мы получим сразу 4 ошибки об устаревших атрибутах (Рис. 3).

Рис 3. Устаревшие атрибуты таблицы

Это можно спокойно переписать с использованием стилей и классов.

• border — http://htmlbook.ru/html/table/border

• cellpadding — http://htmlbook. ru/html/table/cellpadding

• cellspacing — http://htmlbook.ru/html/table/cellspacing

• width — http://htmlbook.ru/html/table/width

Резюмируя вышеописанное получим примерно такой код:

<style>
	.table {
  	border-collapse: collapse;
    width: 400px;
    border-spacing: 0;
   }
	.column {
    padding: 0;
    border: 1px solid #333;
  }
</style>
<table class=”table”>
  <tr>
  	<td class=”column”></td>
  </tr>
</table>

Подобное решение относится ко всем атрибутам, влияющим на стили элементов. Но есть такие, которые относятся к логике DOM-элементов. Чаще их реализация полностью падает на браузеры. Остальное можно реализовать с помощью JavaScript.

Атрибут id

Этот атрибут является неотъемлемой частью HTML. На нем часто завязаны стили и клиентский JavaScript. Данный подход уже давно не используется ввиду усложнения поддержки написанного кода. Используя id в браузере, часто можно наткнуться на проблему отсутствия уникальности значений этого свойства. Поэтому чаще всего чистый id заменяют на data-id или более специфичные названия. У нас часто используются data-атрибуты –  data-behavior и data-selector. Первый подходит для взаимодействия с пользователем, второй чаще используется для манипуляций с DOM. Однако, насколько я знаю, это необязательное правило. Помимо этого, в css можно писать код с обращением в любые из свойств элементов, будь то data-* или любой другой атрибут.

Пример микроразметки

Помимо примеров валидной верстки хотелось бы привести небольшой кейс использования микроразметки Schema.org. Используя микроразметку, желательно размечать верстку, которая видна на странице и никоем образом не скрывается от пользователя при помощи opacity, visibility, display или top/left/right/bottom: -100500px. Поисковики не жалуют скрытый контент. Иногда бывают исключения, но их стоит уточнять у SEO специалистов.

Перед тем, как мы продолжим хотелось бы описать значение используемых атрибутов:

Itemscope — задает область действия словаря в структуре данных. Как правило, работает совместно с атрибутом itemtype и задаёт пределы, где itemtype будет активен. У этого атрибута нет значений.

Itemtype — указывает адрес словаря, который будет применяться для определения свойств элемента в структуре данных. Яндекс и Google поддерживают стандарт разметки Schema.org. Соответственно, в качестве значения itemtype указывается адрес словаря на этом сайте. К примеру, для разметки организаций используется значение https://schema.org/Organization.

Itemprop — используется для добавления свойств словаря микроданных к элементу. Имя свойства определяется значением itemprop, а значение свойства определяется содержимым HTML-элемента, к примеру, текстом который располагается внутри элемента.
Приведем пример микроразметки Article.

<div itemscope="" itemtype="https://schema. org/Article">
	<...>         
	<div>
     <div
       itemprop="author"
       itemscope=""
       itemtype="https://schema.org/Person"
     >
       <span
         itemprop="name"
        
       >
         ВсеИнструменты.ру
       </span>
     </div>
     <time
       itemprop="datePublished"
      
       datetime="{{ article.getUpdatedTimeObj().format('Y-m-d') }}"
     >
       {{ article.getUpdatedTimeObj().format('d.m.Y') }}
     </time>
   </div>
   <meta
      itemprop="description"
      content="{{ article.getShemaOrgDescription() }}"
   />
   <div
     itemscope
     itemprop="image"
     itemtype="http://schema.org/ImageObject"
   >
     <img
       itemprop="url"
       src="{{ article.getShemaOrgImageUrl() }}"
       alt=""
      
     >
   </div>
   <...>
</div>
 

В данном примере представлена микроразметка статьи. Действие микроразметки ограничено дивом с атрибутами itemscope, itemtype = Article. Внутри включает микроразметку автора статьи и дату публикации. Включает в себя также краткое описание статьи и изображение. В данном кейсе при помощи бэкенда на этапе публикации парсится весь список изображений и выдается фронтенду при помощи метода getShemaOrgImageUrl().

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

1. Микроразметка для сайта интернет-магазина: как настроить разметку Schema.org для товаров и категорий

2. Микроразметка товаров

Итог

Хотелось бы, чтобы этот материал был вам полезен. Я старался предоставить информацию для работы с SEO-версткой максимально сжато. Надеюсь, я смог достичь этой цели. Данной информации не хватит для формирования по-настоящему SEO-friendly сайта, поэтому я рекомендую использовать дополнительные материалы при разработке своих страниц. Эта тема сложна и обширна. Для плодотворного продвижения и удержания позиций сайта в поисковой выдаче необходимо работать в паре с SEO-специалистом и постоянно вести работы над улучшениями своих продуктов. Спасибо за уделенное время!

Как оптимизировать HTML для повышения производительности в Интернете

Зачем оптимизировать HTML?

HTML является основой Интернета. Это тип документа, который строит структуру веб-сайта. Без HTML JavaScript не смог бы работать, CSS не смог бы ничего стилизовать, а изображениям было бы некуда загружаться. Сила HTML заключается в его универсальности, главным образом потому, что он может загружать другие файлы, что и означает гипертекст, первая часть HTML.

Когда для загрузки, анализа и загрузки внешних файлов HTML требуется много времени, может пострадать пользовательский интерфейс. Время загрузки страницы (Page Onload) увеличивается, и чем дольше пользователи склонны отказываться от страницы, тем дольше им приходится ждать.

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

В 2014 году HTML5 стал рекомендованным стандартом W3C. С тех пор мы прошли два обновления версии. По состоянию на декабрь 2017 года HTML5.2 является текущим стандартом, а версия 5.3 находится в разработке.

Сегодня я не буду рассказывать об этих детальных оптимизациях. Вместо этого я хочу дать вам более глубокое понимание:

• Как обеспечить быструю доставку HTML независимо от типа браузера и
• Какие синтаксические элементы больше всего влияют на современный синтаксический анализ HTML .

Я также собираюсь объяснить, почему рекомендуются эти оптимизации, что станет немного техническим, поэтому я включил обзор в начале каждого раздела, а затем TL;DR в конце.

Начнем.

Рекомендации по быстрой доставке HTML

• Очистите HTML, чтобы он был кратким
• Сжатие HTML на стороне сервера
• Используйте нестандартные оптимизации по мере необходимости

HTML доставляется в Интернете так же, как и любой другой файл — по сети в пакетах данных, которые имеют ограниченное пространство для данных. Вот как выглядит этот процесс:

1. При новом соединении сервер может отправить до 10 TCP-пакетов в первом круговом обходе.
2. Сервер ожидает подтверждения данных клиентом (т. е. браузером).
3. Если сервер получает подтверждение от клиента о том, что он получил данные, сервер будет удваивать количество данных, которые он отправляет, для каждой последующей поездки.

10 пакетов TCP эквивалентны примерно 14,3 КБ. Таким образом, если размер HTML превышает 14,3 КБ, для доставки базового файла потребуется несколько циклов. В идеале вы могли бы включить несколько файлов в это первое соединение, например, CSS с отправкой на сервер, чтобы завершить критический путь рендеринга за более короткий промежуток времени.

Уменьшение размера HTML-файла помогает достичь этой цели двумя основными способами:

• Очистите лишний HTML-код, чтобы сократить длину файла.
• Сожмите файл HTML, чтобы получить файл меньшего размера.

Совет по доставке HTML № 1.

Очистите HTML, чтобы он был кратким

Следование спецификациям W3C для разметки делает HTML более удобным для сопровождения и удобочитаемым. Далее следуют те, которые уменьшают длину HTML-файла.

Не используйте встроенные стили.

Ссылка на таблицу стилей в  документа вместо использования встроенных стилей. Атрибут type не нужно объявлять, чтобы ссылка на внешнюю таблицу стилей выглядела примерно так:

Не используйте встроенные скрипты.

Вместо этого создайте прямую ссылку на файл JavaScript. Когда браузер видит тег

Уменьшите пустые строки и ненужные отступы.

Mozilla рекомендует делать отступы с помощью 2 пробелов, а не табуляции, что эквивалентно 4 пробелам, и разделять блоки кода пустой строкой только при наличии веской причины. Вы также можете использовать такой инструмент, как HTML Tidy, чтобы удалить пробелы и лишние пустые строки из действительного HTML.

Совет по доставке HTML № 2. Сжатие HTML на стороне сервера

Сжатие GZIP или аналогичная модель сжатия позволяет отправлять меньше данных в браузер конечного пользователя для создания той же страницы. Общий размер сжатой страницы примерно вдвое меньше, чем размер несжатой страницы в МБ.

Если вы не сжимаете HTML и другие файлы, ваш сайт, скорее всего, работает медленнее, чем у конкурентов.

Совет по доставке HTML № 3. При необходимости используйте нестандартные оптимизации

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

Минификация

Минификация удаляет все ненужные пробелы и все символы новой строки, что не является обычной практикой в ​​HTML. Хотя вы можете минимизировать HTML, если хотите, это может затруднить чтение документа, особенно если страница часто меняется.

Кэширование

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

При этом можно кэшировать HTML. Правила кеширования позволяют указать, откуда браузеры пользователей будут запрашивать документ — из кеша или с сервера. Будьте осторожны, потому что вы не хотите обслуживать старую версию веб-сайта. Статические HTML-страницы, такие как сообщения в блогах, обычно можно кэшировать без побочных эффектов.

Рекомендации по быстрому разбору HTML

• Получить важные файлы рендеринга раньше

• Загружать файлы в правильном порядке

• Асинхронно загружать скрипты, блокирующие рендеринг

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

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

Анализ HTML включен в критический путь отрисовки. Чем быстрее может происходить синтаксический анализ HTML, тем быстрее может происходить построение DOM и тем быстрее происходит рендеринг. Я, вероятно, расскажу об этом в отдельной статье в блоге в будущем, но сейчас я объясню критический путь рендеринга в сочетании с оптимизацией HTML-части этого пути.

Совет по синтаксическому анализу HTML № 1. Заблаговременно получите важные файлы рендеринга

Критический путь рендеринга не существует в вакууме — на него может повлиять порядок загрузки файлов, формирующих страницу. Это включает, как минимум, HTML и CSS, но часто включает и JavaScript. По этой причине вы хотите загрузить внешний CSS в документа и как можно раньше загрузите любой код JavaScript, который имеет решающее значение для стилизации или обновления содержимого в верхней части страницы.

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

Совет № 2 по синтаксическому анализу HTML. Загружайте файлы в правильном порядке

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

Однако по умолчанию браузер при обнаружении тега

Атрибут

defer — для отсрочки выполнения

Загрузка и разбор отложенного скрипта также является асинхронным, происходящим в отдельном потоке обработки. Однако сценарий с атрибутом defer будет выполняться только после завершения анализа HTML, после чего документ считается .готов .

Атрибут defer следует обозначать следующим образом:

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

Пустые элементы, для которых не требуется закрывающий тег в HTML, включают