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

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

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

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

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

HTMLбыстродействиефронтендвеб-разработка
Статья опубликована в 2014 году

Тематические статьи

Язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript

Графические интерфейсы современных сайтов и веб‑приложений разрабатываются с использованием всего трёх языков — HTML, CSS, JavaScript. Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML, CSS и JS в современной фронтенд-разработке никаких других языков не используется.

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

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

Статья опубликована в 2014 году
Чек-лист проверки фронтенда

По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.

Статья обновлена в 2024 году
БЭМ и независимые блоки

Вёрстка независимыми блоками — это методология, которая была сформулирована Виталием Харисовым из компании Яндекс. Впоследствии эта методология была расширена и получила название БЭМ (Блок-Элемент-Модификатор). Собственно БЭМ нужен для упрощения командной разработки, для унификации интерфейсов и для более активного повторного использования программного кода.

Статья опубликована в 2014 году
Валидность и семантичность HTML

Валидность и семантичность HTML кода определяет качество сайта с точки зрения поисковых систем.

Статья опубликована в 2014 году
Увеличиваем скорость работы сайта при помощи оптимизации JavaScript

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

Статья опубликована в 2014 году
Адаптивный и отзывчивый дизайн

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

Статья опубликована в 2019 году
HTML5 — новая версия стандарта

HTML — это язык для структурирования и представления содержимого, HTML5 (HyperText Markup Language, version 5) — это пятая версия стандарта, которая ещё находится в разработке, но уже является вполне рабочей. Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий при сохранении удобочитаемости кода для человека и простоты анализа для парсеров (в частности, поисковых систем).

Статья опубликована в 2014 году