Ускоряем работу сайта: оптимизация HTML
Сайт может загружаться и отображаться быстрее, если выполнить следующие рекомендации по оптимизации HTML‑разметки, без которых скорость загрузки и отрисовки будет ниже.
Минимизируйте размер HTML‑документов. Вырезайте избыточные пробелы и переносы строк, удаляйте повторяющиеся inline‑стили CSS и inline‑скрипты JS (вместо этого используйте соответствующие CSS‑классы и внешние файлы скриптов), удаляйте комментарии, избыточную разметку и скрытые блоки.
Используйте GZIP для сжатия данных. Современные браузеры поддерживают получение и обработку сжатых в формате GZIP данных. Оптимальный способ — предварительное сжатие статических страниц на максимальном уровне компрессии и отдача веб‑сервером заранее сжатых файлов. Сжатие «на лету» отлично подходит для динамических страниц, но требует ресурсов сервера, поэтому его на нагруженных проектах стоит использовать осторожнее — подберите уровень сжатия исходя из нагрузки на CPU.
Кешируйте статические страницы на стороне клиента — не заставляйте пользователей многократно скачивать один и тот же документ: используйте соответствующие заголовки в ответе веб‑сервера (Expires или Cache-Control max-age, Last-Modified или ETag).
Тематические статьи
Графические интерфейсы современных сайтов и веб‑приложений разрабатываются всего на трёх языках — HTML, CSS, JavaScript. Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML и CSS, во фронтенд-разработке используют языки, которые браузер не исполняет напрямую: TypeScript, Dart и Kotlin компилируются в JavaScript или WebAssembly.
Семантическая микроразметка — это использование в HTML‑верстке дополнительных тегов, классов и иных атрибутов, которые либо дают поисковым системам дополнительную информацию о содержании страницы, либо упрощают классификацию содержания и формируют метаданные о содержании. Широко известными являются форматы Schema.org, Open Graph и микроформаты.
По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.
Вёрстка независимыми блоками — это методология, которая была сформулирована разработчиками Яндекса. Впоследствии эта методология была расширена и получила название БЭМ (Блок-Элемент-Модификатор). Собственно БЭМ нужен для упрощения командной разработки, для унификации интерфейсов и для более активного повторного использования программного кода.
Валидность и семантичность HTML кода определяют качество сайта с точки зрения поисковых систем.
Сайт может работать быстрее, если выполнены следующие рекомендации по оптимизации JS‑кода. Если же этого не сделать, то сайт будет недостаточно быстро отображаться на стороне клиента.
Время загрузки и отрисовки сайта в браузере можно заметно снизить, если воспользоваться следующими советами.
Для обеспечения хорошего отображения сайтов на мобильных устройствах (планшетах и смартфонах) обычно создаётся отзывчивый или адаптивный дизайн. Суть подхода заключается в изменении размера и расположения блоков, коррекции размера шрифтов, а также в отключении не самых важных блоков в случае, если пользователь заходит на сайт с устройства с небольшим экраном.
HTML — это язык для структурирования и представления содержимого. HTML5 (HyperText Markup Language, version 5) — это пятая версия стандарта, утверждённая W3C и развивающаяся как живой стандарт. Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий при сохранении удобочитаемости кода для человека и простоты анализа для парсеров (в частности, поисковых систем).