Швидкодія починається з деталей.
Потрібне зображення. Правильний пріоритет. Ресурси, готові до повторного використання. Продуманий шлях вашого сайту до екрана.
Дослідити механізми ↓Створено на Wulver. Виміряно Google.
katyushyn.com створений на базі Wulver. Ось результати перевірки його публічної головної сторінки в Google PageSpeed Insights — із реальними звітами за кожною цифрою.
Мобільний
Оцінка продуктивності
- First Contentful Paint
- 1,5 с
- Largest Contentful Paint
- 1,6 с
- Speed Index
- 1,9 с
- Total Blocking Time
- 0 мс
- Cumulative Layout Shift
- 0
Емуляція Moto G Power · повільний 4G
Відкрити мобільний звіт ↗Комп’ютер
Оцінка продуктивності
- First Contentful Paint
- 0,3 с
- Largest Contentful Paint
- 0,4 с
- Speed Index
- 0,8 с
- Total Blocking Time
- 0 мс
- Cumulative Layout Shift
- 0
Емуляція комп’ютера · спеціальне обмеження мережі
Відкрити звіт для комп’ютера ↗Усі три додаткові категорії отримали 100 балів на обох пристроях. Це лабораторні результати першого завантаження https://katyushyn.com/ на зазначену дату. Оцінки можуть змінюватися між запусками. Дані реальних користувачів у цьому звіті PageSpeed відсутні.
Хороший досвід поважає час читача.
Сторінка починає справляти враження ще під час завантаження. З’являється перше зображення, текст займає своє місце, інтерфейс стає доступним для роботи. Кожне зайве завантаження та несподіване зміщення ускладнюють це знайомство. Швидкодія — частина дизайну цього моменту.
Wulver працює з цим досвідом через конкретні механізми: адаптивні варіанти зображень, явні пріоритети завантаження та політики кешування ресурсів. Вони взаємодіють із шаблонами й конфігурацією розгортання. Їхній результат залежить від реального контенту, пристрою, мережі та хостингу.
Мета практична: дати браузеру корисний вибір, уникати повторення вже виконаної роботи та допомогти важливому контенту з’явитися без рівної конкуренції з усіма іншими елементами сторінки.
Кожен байт має виправдовувати свою подорож. Кожне перше враження — з’являтися вчасно.
Одне джерело. Розмір під конкретний момент.
Невеликий аватар і широка обкладинка статті потребують різного обсягу зображення. Wulver створює адаптивні AVIF-версії через наявний механізм мініатюр. Для зображень статей передбачені ширини 400, 700, 1000 і 1400 пікселів, обмежені шириною джерела, щоб не збільшувати менші оригінали.
Варіанти створюються під час першого використання й надалі використовуються повторно. Шаблон отримує набір зображень та інформацію про очікуваний розмір відображення. Аватари, портрети й слайдери мають власні набори розмірів, тож один принцип працює для різних частин інтерфейсу.
Механізм зображень зберігає вихідні файли та створює похідні окремо. Інформація про версію джерела входить до ключів варіантів, тому змінені зображення отримують нові адреси похідних. Попередня підготовка варіантів також дозволяє не виконувати перше кодування під час запиту відвідувача.
Конкретний приклад легшої передачі.
Звіт про оптимізацію Wulver містить обмежену вибірку з чотирьох аватарів і трьох зображень статей. Порівняння нижче підсумовує одне завантаження кожного зображення та використовує аватари 96 px і зображення статей 700 px.
Джерело: внутрішній звіт Wulver про оптимізацію зображень від 25 жовтня 2026 року. Це розрахунок обсягу передачі для цієї вибірки, а не вимірювання швидкості сторінки чи гарантована економія. Фактичний вибір залежить від екрана та щільності пікселів.
Перший екран заслуговує на пріоритет.
Порядок завантаження важливий поряд із розміром файлів. Інструменти адаптивних зображень розрізняють пріоритетні й відкладені зображення. У шаблонах Story перший слайд головної та головне зображення статті отримують eager-завантаження й високий fetchpriority; наступні або нижні зображення можуть завантажуватися відкладено.
Пріоритет важливому
Головне зображення позначається явно, щоб браузер отримав підказку пріоритету. Це свідоме рішення в шаблоні, пов’язане з композицією сторінки.
Відкласти те, що зачекає
Відкладене завантаження задає іншу стратегію для зображень нижче на сторінці. Для першого екрана не потрібно, щоб усі ілюстрації довгої статті починали завантажуватися однаково рано.
Зарезервувати місце
Власні width і height описують пропорції зображення ще до отримання файлу. Разом із версткою вони допомагають браузеру виділити місце для ілюстрації.
Нехай виконана робота залишається виконаною.
Статичні ресурси з пам’яттю
Wulver використовує WhiteNoise і django-compressor у роботі з ресурсами. Версіоновані статичні файли й розпізнані пакети compressor можуть отримувати тривалі immutable-заголовки кешування. Стабільна версіонована адреса дає браузеру ресурс, який можна повторно використовувати за цією політикою.
Новій версії потрібна зрозуміла адреса
Тривале кешування потребує відповідної стратегії оновлень. Змінені статичні ресурси слід подавати через версіоновані URL та перевіряти заголовки на фактичному рівні хостингу. Медіафайли мають окрему політику, адже завантажений контент може мати інший життєвий цикл.
Коли файли безпосередньо віддає проксі, вебсервер або об’єктне сховище, саме цей рівень керує заголовками відповіді. Налаштування застосунку й розгортання мають узгоджуватися. Остаточна перевірка стосується реальних URL CSS, JavaScript, шрифтів і зображень.
Вимірюйте сторінку, яку справді отримує користувач.
Менші зображення — одна складова швидкодії. Відповідь сервера, стилі, скрипти, шрифти й композиція сторінки також впливають на досвід. Wulver надає механізми роботи з ресурсами; змістовна оцінка потребує розгорнутої сторінки та умов, близьких до реального перегляду.
- Перевірте, який варіант зображення завантажує браузер.
- Порівняйте перше й повторне відкриття з увімкненим кешем.
- Перегляньте перший екран, пріоритети зображень і зміщення верстки.
- Повторіть вимірювання після змін контенту, шаблонів або розгортання.
Створюйте досвід, до якого приємно дістатися.
Швидкодія складається з послідовності продуманих рішень: зберегти джерело, передати відповідний варіант, надати пріоритет першому враженню та повторно використати те, що вже готове. Wulver пов’язує ці рішення з процесом створення й підтримки сайту. Наступний крок — перевірити їх на власному контенті.