Статичний сайт зберігає сторінки як готові файли. Для невеликої бібліотеки статей це дозволяє мати зрозумілий процес випуску: підготувати каталог, перевірити його, завантажити й повторити перевірку за публічною адресою. Сам формат не гарантує швидкість. Велике зображення, зайвий сторонній сценарій або неправильний кеш можуть зіпсувати навіть простий HTML.
Підготуйте каталог, який справді будете публікувати
Відокремте вихідні матеріали від готового сайту. У публічному каталозі мають бути лише HTML, потрібні стилі, зображення, шрифти й інші призначені читачеві ресурси. Робочі чернетки, резервні копії, налаштування та приватні файли зберігайте окремо. Це також зменшує ризик завантажити стару копію сторінки з іншої папки.
Для кожної адреси вирішіть, який файл її обслуговує. Наприклад, шлях /guides/utf-8/ може відповідати guides/utf-8/index.html. Остаточна поведінка залежить від сервера: не покладайтеся на те, що локальна програма відкриває файл так само, як публічний хостинг. Перевіряйте й звичайний перехід, і пряме відкриття вкладеної адреси.
Відкрийте сайт через локальний HTTP-сервер
Перегляд через file:// корисний для швидкого погляду на текст, але не відтворює звичайні HTTP-запити. Для готового каталогу можна використати коротку локальну перевірку. Команда нижче прив’язує сервер лише до вашого комп’ютера; це інструмент перегляду, а не схема виробничого розгортання.
python3 -m http.server 8000 --bind 127.0.0.1 --directory public
# Відкрийте http://127.0.0.1:8000/
# Зупиніть сервер комбінацією Ctrl+C.Пройдіть меню, відкрийте кілька статей і перевірте внутрішні якорі. Помилка в регістрі назви файлу може залишитися непоміченою локально й проявитися на іншій файловій системі. Тримайте домовленість про назви послідовною, а історичні адреси, на які вже посилаються інші сайти, перевіряйте окремим списком.
Скоротіть найбільші й найраніші завантаження
Почніть із розмірів зображень: не передавайте багатомегапіксельний оригінал там, де достатньо невеликої ілюстрації. Для адаптивного зображення можна запропонувати різні розміри через srcset і описати очікувану ширину через sizes. Вказані width і height допомагають браузеру зарезервувати пропорції до отримання файлу.
<img src="diagram-800.webp"
srcset="diagram-400.webp 400w, diagram-800.webp 800w"
sizes="(max-width: 42rem) 100vw, 42rem"
width="800" height="500"
loading="lazy"
alt="Схема: HTML і CSS утворюють готову сторінку">Такий приклад пасує ілюстрації нижче початкового екрана. Головне зображення, яке читач повинен побачити одразу, не варто механічно робити відкладеним. Перевіряйте обрану поведінку на реальній сторінці, особливо якщо перед картинкою стоїть короткий вступ. Спочатку приберіть непотрібне, а потім додавайте складніші оптимізації.
Розрізняйте кеш HTML і незмінних ресурсів
HTML має вказати читачеві на поточний набір файлів. Для нього зручним початковим варіантом є Cache-Control: no-cache: кеш може зберігати відповідь, але повинен перевірити її перед повторним використанням. Це відрізняється від no-store, яке забороняє зберігання. Назва директиви сама по собі легко вводить в оману.
Для стилів або зображень із версією чи хешем у назві можна встановити довгий строк свіжості та immutable. Умова важлива: після зміни вмісту має з’явитися нова адреса. Якщо перезаписати той самий style.css під тривалим кешем, частина читачів продовжить отримувати старе оформлення. Заголовки налаштовують на сервері або хостингу, а не текстом усередині статті.
Перевірте саме опублікований результат
- Головна й вкладені сторінки відкриваються без авторизації та мають очікувані коди відповіді.
- Невідома адреса повертає справжню сторінку помилки з кодом 404.
- Стилі, шрифти та ілюстрації завантажуються за публічними шляхами.
- На вузькому екрані немає випадкового горизонтального прокручування.
- Український текст читається, а внутрішні посилання ведуть до правильних розділів.
- Попередню перевірену версію можна повернути з окремо збереженої копії.
Запишіть дату випуску й кілька перевірених адрес. Наступного разу повторіть той самий короткий маршрут. Послідовна перевірка дає більше користі, ніж разова оцінка швидкості без розуміння того, яку саме сторінку та в яких умовах вимірювали.