Машинний переклад з англійського оригіналу · Переглянути оригінал
Філософія сайту
Вступ
За останні десятиліття обчислювальна техніка просунулася дуже далеко, але одна річ мене вражає: наскільки неефективним усе врешті стало. Оскільки продуктивність така висока, а сховище таке дешеве, програмне забезпечення роздулося мертвим кодом, який ніколи не виконується, або, ще гірше, ресурсами, які просто марнуються. Найкращі приклади, як на мене, це коли сучасне ПЗ завантажується довше на залізі, у 100 разів потужнішому за те, що існувало років двадцять тому
Веб є одним із найбільших порушників, а винуватець тут javascript. Веб-сторінки іноді завантажують понад 10 мегабайтів вмісту лише для того, щоб поділитися з кимось простою статтею в блозі. Зображення нестиснуті, у фоні працює кілька важких трекерів, і завантажується безліч функцій, які ніколи не використовуються. Це псує враження користувача, спричиняє зайвий мережевий трафік, марнує енергію і загалом є поганою практикою. Брудна прихована правда за гладеньким дизайнерським інтерфейсом більшості веб-сторінок
Тож моя мета з цим сайтом: показати, як далеко можна зайти, коли технологію тримають простою.
Технології
Цей сайт побудовано на Hugo і він віддає статичні файли всюди, де це можливо
Таблиця стилів написана вручну і містить лише ті частини, які сайт справді використовує. Мініфікована і стиснута, вона важить близько 5 kb, а вся домашня сторінка, разом із розміткою, стилями та аналітикою, приходить менш ніж у 10 kb
Аналітика працює на самостійно розміщеному екземплярі Plausible, який додає браузеру лише 1 kb
Статичні файли надходять напряму з одного невеликого сервера, стиснуті brotli заздалегідь, тож нічого не стискається на кожен запит
Навіть дрібні прикраси зроблено так, щоб вони майже нічого не коштували. Колір, що змінюється з порою року і годиною, додає близько половини кілобайта до кешованої таблиці стилів. Місяць додає приблизно двісті байтів до кожної сторінки. Обидва намальовані градієнтами, а не зображеннями, тож вони заміняють завантаження, а не додають його
Акцентний колір тут не фіксований. Він змінюється з календарем і годинником: місяць задає базовий відтінок (весна тяжіє до пурпурового, літо до зеленого, осінь до помаранчевого, зима до фіолетового), а час доби його підфарбовує (теплий жовтий на світанку, нічого опівдні, індиго в сутінках, синій уночі). Кожна комбінація підлаштована так, щоб залишатися розбірливою, і це не коштує жодного додаткового запиту, лише кілька байтів, які тримають палітруЗміна кольору
Виберіть місяць і час доби, і вся сторінка перефарбується. Перезавантаження поверне її до теперішнього моменту
У темній темі в верхньому куті сидить ледь помітний місяць. Це не картинка: це два градієнти і маска, тож він не коштує жодного запиту. Його повнота повторює справжню фазу Місяця, обчислену з дати, бо місячний місяць становить сталі 29.53 дні, тож фаза це просто арифметика. Він дугою проходить над шапкою разом із годиною, низько заходить у сторінку і зникає на кілька годин близько полудня, так само як справжній МісяцьМісяць
Погляньте вгору ясної ночі, і воно має більш-менш збігтися. Фаза і положення разом займають близько двохсот байтів у тому ж скрипті в шапці, що задає колір
Потягніть, щоб керувати ним. У темній темі ледь помітний місяць у куті теж рухається слідом, а перезавантаження поверне його до теперішнього моменту
Оптимізація продуктивності
Тримати сторінку маленькою це лише половина справи. Сайт налаштовано на кожному рівні між файлом і екраном: як речі збираються і стискаються, як вони кешуються і як налаштовано саме з’єднання. Майже вся робота відбувається один раз, заздалегідь, тож відвідувач платить майже ні за що з неї
Кожен текстовий файл стискається один раз під час збірки сайту, на найсильніших налаштуваннях brotli і gzip, і надсилаються обидві копії. Сервер віддає готовий стиснутий файл, тож нічого не стискається повторно для кожного відвідувача. Файли менші за приблизно 256 байтів залишають без змін, бо стиснута копія чогось настільки малого вийшла б тільки більшою. Таблиці стилів і скрипти названі хешем власного вмісту і кешуються на рік, тож браузер завантажує кожен з них один раз, а ім’я змінюється лише тоді, коли змінюється файл. Навіть іконка сайту вписана просто у сторінку, а не завантажується окремим файломЗбірка і доставка
Файли надходять з одного невеликого сервера без CDN попереду, тож з’єднання налаштовано так, щоб зробити цей сервер швидким. Він говорить і HTTP/2, і HTTP/3 через QUIC. Відвідувач, який повертається, відновлює зашифровану сесію з квитка, замість повторювати повне рукостискання, і це найбільша економія з усіх. Сертифікат безпеки видано у двох формах, RSA і ECDSA, тож кожен браузер отримує швидший з тих, які може використати. Стиснення на проксі навмисно виставлено на середній рівень, а не на максимальний: максимум було виміряно приблизно у 44 мілісекунди на запит за кілька сотень байтів, поганий обмін без CDN, який би це поглинув, а зібрані заздалегідь файли вже несуть найсильніше налаштування. Одну оптимізацію, 0-RTT, навмисно залишено вимкненою, бо її ризик повтору не вартий малої економії. Посилання, які ви ймовірно відкриєте наступними, тихо завантажуються заздалегідь, тож наступна сторінка з’являється одразуЗ'єднання
css написано вручну і містить лише ті частини, які сайт справді використовує. Стилі для поля коментарів живуть в окремому файлі, який завантажується, тільки якщо хтось відкриває коментарі, тож він ніколи не стоїть на шляху першого рендеру. Власна таблиця стилів системи коментарів, близько 14 kb, раніше завантажувалася нестиснутою з її сервера щоразу, коли завантажувалися коментарі; тепер її вкладено в той самий кешований і стиснутий файл. Дрібні деталі на кшталт стрілки розгортання намальовані фігурами css, а не вбудованими зображеннямиТаблиця стилів
Його майже немає, а те мале, що є, тримається осторонь. Аналітика завантажується лише після того, як сторінка завершилася, тож вона ніколи не затримує нічого з того, що бачить відвідувач. Єдиний маленький вбудований скрипт навмисно розміщено перед таблицею стилів, щоб йому не доводилося чекати на прибуття css. Коментарі завантажуються, лише коли їх попросять, кліком, якщо ви вже не увійшли. Іконки намальовані один раз у прихованому спрайті і беруться звідти, а не повторюються при кожному використанніJavaScript
Кожне зображення підготовлене в кількох розмірах, і браузер обирає те, що підходить екрану. Усе, що нижче згину, чекає, доки до нього не догорнуть, і кожне зображення резервує свою ширину і висоту, щоб сторінка не стрибала під час завантаження. Галереї показують перше фото одразу, а решту завантажують у міру перегляду. Відео завантажують лише свої метадані, доки їх не запустятьЗображення
Кожна нова прикраса тримається того самого правила: вона може додавати байти, лише якщо додає щось справжнє, і там, де може, вона заміняє завантаження, а не додає його
Реальність
Хочу просто пояснити, що це не задумано як переконливий аргумент за те, щоб ми всі витрачали години на одержимість дрібними деталями. Бізнесу потрібно заробляти гроші; це не є ані необхідним, ані найбільшою проблемою, яку варто вирішувати. Сподіваюся, що одного дня все зможе бути таким же ефективним, як MenuetOS