Как стать автором
Обновить
2679.92
RUVDS.com
VDS/VPS-хостинг. Скидка 15% по коду HABR15

14 КБ это слишком много. Делаем сайты меньше 1 КБ

Время на прочтение 6 мин
Количество просмотров 31K

Минимализм хорош во всех отношениях. Во-первых, это красиво. Во-вторых, эффективно. Разница в скорости загрузки сайтов особенно заметна на фоне монструозных корпоративных приложений с мегабайтами скриптов, тормозящих практически на любом устройстве. Поразительно, что за годы компьютеры ускорились в десятки раз, а сайты грузятся медленнее, чем раньше (график на КДПВ за 2011–2019 гг, статистика по скорости от Httparchive.org). Только подумайте, на сколько же сайтам нужно жиреть каждый год, чтобы сохранить эти тормоза!

Известно, что для минимизации задержки важным рубежом является 14 КБ. Если ужать веб-страницу или её первую часть в меньший объём, загрузка сильно ускоряется из-за спецификации TCP, которая определяет максимальный размер пакета в 1500 байт (из них 1460 полезных) и алгоритма медленного старта TCP, ограниченного десятью пакетами.

Но 14 КБ — не предел оптимизации. Далеко не предел.
Пусть мы приближаемся к экстремальному минимализму, но можно уложить веб-страничку в бюджет даже 1 (одного) килобайта.

▍ 1024 байта


Недавно созданный Клуб 1 КБ принимает к себе сайты, которые целиком поместились в 1024 байта. Очевидно, что это одностраничные сайты.

Новый клуб создан по образцу Мегабайтного клуба, который в сравнении с 1 КБ кажется каким-то праздником неумеренности и изобилия.

Сайты меньше килобайта напоминают старую демосцену 90-х, где умельцы ассемблера умудрялись впихнуть в 1 килобайт кода бесконечный генератор природных ландшафтов удивительной красоты. Из более современных примеров — конкурс килобайтных JS-демок js1k (примеры).

На этом уровне идёт борьба за каждый лишний байт. Например, зачем закрывать все теги, если браузер может самостоятельно «закрывать» некоторые из них (например, <tr> и <td>).

Сейчас в «клубе экстремистов» всего 16 членов:

▍ Некоторые оптимизации


Если посмотреть на HTML-код представителей «клуба», то можно заметить некоторые хитрости.

  1. Отсутствие пробелов, абзацев и некоторых метатегов, которые технически необязательны, а требуются только по бюрократическим стандартам валидного HTML (например, он требует <title>). А некоторые теги вообще не требуются, всё нормально валидируется и рендерится без них (<html>, <head>, <body>).

  2. Незакрытые теги вроде <p>, <td> и <tr>:
    <p>первый пункт
    <p>второй
    <table><td>...
    <td>...

    Кстати, аналогичный приём с незакрытыми тегами можно заметить на личном сайте Фабриса Беллара (автор ffmpeg, qemu и ещё десятка выдающихся программ). То есть это известная практика.

  3. Пустой фавикон:

    <link rel="icon" href="data:,">

    … это загружает пустую картинку, блокируя стандартный запрос фавикона со стороны браузера. Если тег пропустить, то размер странички уменьшится, но браузер отправит запрос на получение favicon.ico, что означает лишние 400 байт трафика и дополнительную задержку.

    В принципе, в этой строке можно сэкономить на кавычках, без них тоже всё нормально работает:

    <link rel=icon href="data:,">

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

    <!doctypehtml>

    … минус один байт.

  4. Иногда используются кастомные URL (которые резолвятся через собственный _redirects) — тут экономия на записи адресов, но лишняя задержка на редирект.

▍ Всё относительно


Мы упомянули выше два клуба: 1 МБ и 1 КБ, а также лимит 14 КБ.

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

  • 1 МБ — консервативный лимит;
  • 14 КБ — экстремальный лимит;
  • 1 КБ — демосцена.

Но по факту эти лимиты не фиксированные. У каждого разработчика своё понимание «минимализма». И оно зависит в том числе от объективных факторов. Например, сколько графики должно быть на сайте. Какую функциональность тот обязан отрабатывать по требованию заказчика.

Так что минимализм — понятие относительное.

Например, лимит медленного старта TCP в 14 КБ мы можем с пользой использовать в любом сайте или приложении, включив в этот бюджет что-то полезное, самое важное, что в первую очередь передаётся клиенту и практически мгновенно отображается у него на экране.

В современном вебе правило 14 КБ не всегда работает и нет особого смысла фиксироваться на этом «магическом числе». Например, в TLS 1.2 процедура рукопожатия уже включает минимум 20 пакетов (2-RTT).



С другой стороны, TLS 1.3 предусматривает 1-RTT или даже 0-RTT в некоторых сценариях. На количество пакетов влияют и другие факторы, как схема кэширования и другие настройки на сервера. Так что какого-то «магического числа» не существует. Пример с 14 КБ просто иллюстрирует, насколько сложно технически устроены сети передачи данных и жирный стек протоколов, наложенный поверх них, что повышает сложность, создаёт проблемы с большими задержками, тормозами, низкой производительностью. Минимализм и простота — лекарство для этих болезней.

Всё относительно. Сегодня вполне оптимальной можно считать страничку с графикой общим размером в 500–700 КБ с 5–6 запросами к серверу. Когда графика занимает львиную долю общего объёма, нет особого смысла заморачиваться с удалением лишних пробелов и закрывающих тегов, если это ухудшает читаемость кода. Здесь уже актуальны другие методы. Например:

  • перекодирование всей графики в webp/avif;
  • минификация CSS, вплоть до 58 байт, которые выглядят отлично почти на любом сайте:

    main {
      max-width: 38rem;
      padding: 2rem;
      margin: auto;
    }

    Более изысканный вариант оформления в 100 байт:

    html {
      max-width: 70ch;
      padding: 3em 1em;
      margin: auto;
      line-height: 1.75;
      font-size: 1.25em;
    }

    И ещё опциональные 100 байт, если хочется красивых заголовков:

    h1,h2,h3,h4,h5,h6 {
      margin: 3em 0 1em;
    }
    
    p,ul,ol {
      margin-bottom: 2em;
      color: #1d1d1d;
      font-family: sans-serif;
    }

  • минификация JS, например, до 383 байт (библиотека trlk);
  • удаление неиспользуемых классов фреймворков;
  • удаление неиспользуемых глифов (иконок) из файлов со шрифтами;
  • минимизация количества запросов к CSS и JS;
  • оптимизация кнопок Share для соцсетей;
  • компрессия gzip или brotli
  • и др.

Для оптимизации всегда есть место.

▍ В чём смысл


На первый взгляд, упражнение в экстремальном минимализме не имеет особого практического смысла. Но оно всё равно полезно, потому что помогает изучить тонкости HTML и особенности рендеринга в браузерах. И уменьшая код, вы реально помогаете людям. Потому что человек среднего возраста уже потратил месяц своей жизни на ожидание загрузки сайтов. Тупо «зависнуть» перед пустой страницей — трудно представить более бесполезную трату времени и жизни.



В такой ситуации сами пользователи используют блокировщики рекламы и скриптов (uBlock Origin, NoScript), чтобы со своей стороны срезать с веб-страниц лишний груз. Можно использовать расширения к браузеру вроде Reader View.

Но не все наши пользователи такие грамотные. Поэтому более эффективно производить оптимизацию со стороны сервера. Даже простой пререндеринг HTML в несколько раз ускоряет загрузку большинства традиционных сайтов типа Twitter, AirBnB, Apple, Spotify, Reddit, CNN и проч. Например, Twitter в этом гипотетическом эксперименте загружается за 3,4 с вместо 12,1 с:


Начиная оптимизировать код (или текст), удаляя лишние теги (слова), иногда создаётся впечатление, что это можно делать до бесконечности, а идеальная страница (текст) по своему объёму стремится к нулю… То есть в идеале это пустота, чистый лист, отсутствие текста. Всё остальное не так совершенно.

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

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



P. S. Печальный график на КДПВ показывает скорость загрузки мобильных страниц за 2011–2019 гг. На десктопах ситуация не такая печальная, но здесь тоже до сегодняшнего дня (2022 г) ситуация не особо изменилась:



Хотя компьютеры стали гораздо мощнее, а скорость доступа в интернет выросла, среднее время загрузки страницы никак не уменьшается.
RUVDS | Community в telegram и уютный чат
Теги:
Хабы:
+70
Комментарии 73
Комментарии Комментарии 73

Публикации

Информация

Сайт
ruvds.com
Дата регистрации
Дата основания
Численность
11–30 человек
Местоположение
Россия
Представитель
ruvds