Меньше — лучше. Нетипичные приёмы верстки сайтов
На современных сайтах часто можно встретить красивую графику, сложную вёрстку и богатую анимацию. Но их создателям не стоит забывать, что очень многие пользователи находятся в местах с плохим интернетом. Мы рассмотрим один из неочевидных способов снизить вес страницы, чтобы она загружалась быстрее, а те, кто имеет опыт в вёрстке, смогут проверить свои навыки. Примеры собрал Виталий Харисов — один из руководителей разработки интерфейсов Яндекса.
Если интернет плохой, устройство не сможет скачать и отобразить на экране элементы сайта, которые весят много мегабайт. В итоге живописный интерфейс не загрузится. К примеру, количество мобильных пользователей, которые заходят на Яндекс. Поиск при плохом интернете, составляет от 5 до 15% от их общего числа — это десятки миллионов визитов в месяц. Яндекс понимает, если соединение медленное, и показывает упрощённую страницу результатов поиска. Она весит считанные килобайты, поэтому быстро загружается практически в любых условиях. Готовя подобные страницы, разработчики применяют множество специальных техник.
Мы посмотрим, какие элементы необязательно прописывать в HTML-коде страницы, чтобы результат отображался корректно. Яндекс. Браузер, Chrome, Edge, Safari и другие современные браузеры умеют верно интерпретировать не совсем полный код благодаря стандарту HTML5. Это поможет в нашей задаче — браузеру на устройстве пользователя потребуется загрузить меньше кода, на это уйдёт меньше времени, и интерфейс откроется быстрее. Тем самым можно подготовить лайт-версию страницы для медленных соединений — а ещё потратить чуть меньше сил на составление кода.
Примеры в статье будут даваться парами — сначала полный код, а затем неполный, но всё равно корректный. Если вам приходилось делать интерфейсы или просто верстать страницы, советуем в каждом случае сначала прикинуть, какие фрагменты вы бы убрали из примера, и только потом переходить к ответу.
Первый пример. Заготовка
Вот стандартная заготовка, с которой все начинают верстать веб-страницу:
Между двумя тегами html (открывающим и закрывающим) должно находиться всё содержимое страницы, между тегами head — служебная информация и заголовок (title) для вкладки браузера, между тегами body — главный контент.
Что из этого можно убрать?
Оказывается, можно пропустить все перечисленные теги, кроме title. Мы стёрли часть кода, результат будет весить на несколько байт меньше. Рабочие группы, которые занимаются развитием HTML, сделали эти теги необязательными именно для снижения размера — а также для увеличения читаемости кода. Согласитесь, второй вариант позволяет быстрее разглядеть среди кода контент («АБВ»). Если вы готовите несколько прототипов с разными значениями title, вам будет проще их отличать.
Второй пример. Атрибуты
В коде страницы часто приходится объявлять элементы на языке JavaScript, стили и поля для ввода текста. С помощью атрибута type и значения в кавычках указывается тип содержимого, которое вы хотите добавить.
Что здесь лишнее?
По стандарту HTML5 у тегов есть значения атрибутов по умолчанию. Эти значения используются, если не указать другие. У атрибута type значения по умолчанию как раз такие, как указано в полном варианте кода. Поэтому их можно специально не задавать.
Кстати, вы можете смело ставить в коде тире («—») вместо — и односимвольное многоточие («...») вместо …. Конструкции с амперсандом (&) часто встречаются в примерах в интернете и называются мнемониками — их придумали на замену символам, отсутствующим в библиотеке ASCII. Сейчас распространена гораздо более богатая кодировка Unicode UTF-8, и мнемоники в большинстве случаев не нужны.
Третий пример. Закрывающие теги
Для объявления строки в таблице используется тег tr, ячейка объявляется тегом td, а абзацы (и в таблице, и за её пределами) — тегом p. Но блок с таблицей в коде можно сделать гораздо более компактным и удобочитаемым. Какие фрагменты вы бы не стали прописывать?
Содержимое строк и ячеек в таблице, как и абзацев, можно не дополнять закрывающими тегами. А вот в случае с таблицей целиком (table) закрывающий тег нужен.
На самом деле закрытия не требуют многие теги. Вот их полный список:
Четвёртый пример. Значения атрибутов
Значения атрибутов тегов берутся в кавычки. Например, для изображения можно указать класс логотипа и отступ, в данном случае нулевой.
Что можно убрать из этого HTML-кода?
По стандарту HTML5 кавычки тоже необязательны — современный браузер правильно интерпретирует значения и без них.
Писать компактный код полезно не только для быстрой загрузки, читаемости и меньшего вложения сил. В 2016 году Microsoft и организаторы конференции An Event Apart провели конкурс 10k Apart, где надо было собрать сайт, каждая страница которого (вместе с HTML-, CSS- и JavaScript-кодом, всей графикой и т. д.) занимала бы 10 килобайт. Результаты впечатляют. Участники сделали конструктор аватарки, редактор презентаций, визуализацию результатов Олимпиады в Рио и множество других красочных веб-проектов — каждый уместился в 10 КБ. Так что интерес может быть ещё и спортивным.