Ускоряем работу сайта: оптимизация HTML

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

Минимизируйте размер HTML-документов. Вырезайте избыточные пробелы и переносы строк, удаляйте повторяющиеся inline-стили CSS и inline-скрипты JS (вместо этого используйте соответствующие css-классы и внешние файлы скриптов), удаляйте комментарии, избыточную разметку и скрытые блоки.

Используйте GZIP для сжатия данных. Современные браузеры поддерживают получение и обработку сжатых в формате GZIP данных. Оптимальный способ — предварительное сжатие статичных страниц на максимальном уровне компрессии и отдача веб-сервером предварительно сжатых файлов. Сжатие «на лету» отлично подходит для динамичных страниц, но оно нагружает сервер, поэтому его на нагруженных проектах стоит использовать осторожнее — подберите уровень сжатия исходя из нагрузки на CPU.

Кэшируйте статичные страницы на стороне клиента — не заставляйте пользователей многократно скачивать один и тот же документ: используйте соответствующие заголовки в ответе веб-сервера (Expires или Cache-Control max-age, Last-Modified или ETag).

Cтатьи по теме:

Все технологии фронтенд-разработки: язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript
Содержание и внешний вид каждой страницы сайта определяется HTML-кодом и содержанием таблицы стилей CSS, а поведение интерфейса — скриптами JavaScript.
Валидность и семантичность HTML
Валидность и семантичность HTML кода определяет качество сайта с точки зрения поисковых систем.
Адаптивный и отзывчивый дизайн
​Для обеспечения хорошего отображения сайтов на мобильных устройствах (планшетах и смартфонах) обычно создаётся отзывчивый или адаптивный дизайн. Суть подхода заключается в изменении размера и расположения блоков, коррекции размера шрифтов, а также в отключении не самых важных блоков в случае, если пользователь заходит на сайт с устройства с небольшим экраном.
HTML5 — новая версия стандарта
HTML — это язык для структурирования и представления содержимого, HTML5 (HyperText Markup Language, version 5) — это пятая версия стандарта, которая ещё находится в разработке, но уже является вполне рабочей. Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий при сохранении удобочитаемости кода для человека и простоты анализа для парсеров (в частности, поисковых систем).
Увеличиваем скорость работы сайта при помощи оптимизации JavaScript
Сайт может работать быстрее, если выполнены следующие рекомендации по оптимизации JS-кода. Если же этого не сделать, то сайт будет недостаточно быстро отображаться на стороне клиента.
Ускоряем работу сайта за счёт оптимизации CSS
Время загрузки и отрисовки сайта в браузере можно заметно снизить, если воспользоваться следующими советами.
Алгоритмы поисковых систем: семантическая микроразметка
Семантическая микроразметка — это использование в HTML-верстке дополнительных тегов, классов и иных атрибутов, которые либо дают поисковым системам дополнительную информацию о содержании страницы, либо упрощают классификацию содержания и формируют мета-данные для содержания. Наиболее популярными на сегодняшний день являются форматы Schema.org, Open Graph и микроформаты.

Тематические технологии:

Язык разметки HTML
CSS — каскадные таблицы стилей
Язык программирования JavaScript
Библиотека React
Библиотека MobX
Библиотека MobX State Tree
Система сборки WebPack
Платформа NodeJS