Сабдомен зі значком замка

Що ти зробиш сьогодні

Теорія

1. Як браузер знаходить сервер: IP, домен, сабдомен, DNS

Досі ти відкривав свій сайт за адресою 91.219.61.4. Сьогодні в нього з’являється друга адреса — словами. Щоб зрозуміти, що між ними спільного, потрібні чотири поняття.

IP-адреса

Числова адреса машини в мережі. У нашого сервера вона 91.219.61.4 — чотири групи цифр через крапку. Саме з такими числами працює мережа: у кожному запиті, який надсилає браузер, стоїть IP-адреса, а не назва.

Домен

Ім’я, яке набирають люди замість числа. Чотири групи цифр важко запам’ятати й майже неможливо продиктувати телефоном без помилки, а ім’я з двох слів — можна.

Сабдомен

Частина імені перед основним доменом, відділена крапкою. В адресі bohdan.g9.klub.example сабдомен — це bohdan.g9. Одному доменові можна зробити скільки завгодно сабдоменів, і всі вони можуть вести на той самий сервер. Так зроблено і в нас: у кожного в групі своє ім’я, машина за ними одна.

DNS

Система серверів, яка на запитання «яка IP-адреса в цього імені» повертає число. Браузер сам туди звертається — ти цього не бачиш, бо все відбувається за частки секунди перед першим запитом.

DNS зберігає пари «ім’я — IP-адреса». Список цих пар спільний на весь світ і лежить на окремих серверах; на твоєму комп’ютері його немає, тому по відповідь щоразу звертаються туди.

Порядок такий. Ти набираєш ім’я. Браузер питає в системи: «яка тут IP-адреса». Система, якщо не пам’ятає відповіді з попереднього разу, питає в DNS-сервера — зазвичай це сервер провайдера або шкільного роутера. У відповідь приходить 91.219.61.4. І лише після цього браузер надсилає запит на цю IP-адресу.

Відповідь DNS зберігається на якийсь час — від кількох хвилин до кількох годин. Тому, коли адміністратор змінює запис, зміна доходить до всіх не миттєво: у когось ще лежить попередня відповідь.

Далі запит приходить на сервер, і там його приймає nginx — програма, яка слухає порти 80 і 443 та вирішує, кому передати запит. Порт — номер, за яким операційна система розрізняє, якій програмі віддати запит; докладніше про це в наступному розділі. Усі імена вашої групи ведуть на одну машину, і розрізняє їх nginx за іменем, яке браузер написав у запиті. Тому за адресою bohdan.g9.… відкривається тека /home/bohdan.g9/www, а не чиясь чужа.

2. Що означає значок замка

Замок в адресному рядку з’являється, коли сторінка відкрита по HTTPS. Щоб зрозуміти, що він дає, спершу треба побачити, що відбувається без нього.

HTTP

Правила, за якими браузер просить сторінку, а сервер її віддає. Усе, що передається, — звичайний текст: адреса сторінки, службові рядки на початку запиту й вміст форми, яку ти надіслав.

Заголовок

Один такий службовий рядок на початку запиту або відповіді, перед вмістом сторінки. У заголовках браузер повідомляє, яке ім’я сервера він питає і які формати розуміє, а сервер — якого типу вміст віддає й скільки часу цей вміст можна зберігати. Заголовків в одному запиті буває кілька десятків, і людина їх зазвичай не бачить.

Кука

Короткий рядок, який сервер просить браузер зберегти й надсилати назад із кожним наступним запитом — теж у заголовку. Саме так сервер упізнає тебе після того, як ти один раз увів пароль: у куці лежить позначка про твій вхід. Хто прочитає чужу куку, той зайде в сервіс замість її власника.

HTTPS

Той самий HTTP, тільки вміст запиту й відповіді зашифровані. Літера S у кінці — від слова secure.

Шифрування

Перетворення тексту на набір байтів, з якого без ключа прочитати нічого не вдасться. Ключі браузер і сервер узгоджують між собою на початку з’єднання, і в кожного з’єднання вони свої.

Служба

Програма, яка постійно працює на сервері й чекає на запити. Її ніхто не запускає руками щоразу: вона запускається разом із сервером і працює, поки її не зупинять. Твоя програма club-api — саме така служба.

Порт

Номер, який каже, до якої саме програми на машині йде запит. Для HTTP це 80, для HTTPS — 443. В адресному рядку їх не пишуть, бо браузер підставляє потрібний сам. Служба club-api теж має свій порт, і nginx передає запити на нього.

Тепер про шкільний Wi-Fi. Між твоїм ноутбуком і сервером стоять точка доступу, шкільний роутер і обладнання провайдера. Коли сторінка відкрита по HTTP, кожна з цих машин бачить повний текст запиту. На занятті 07 ти зробив вхід із паролем — по HTTP цей пароль передається відкритим текстом, і його видно всім, хто має доступ до мережевого обладнання або просто підключив ноутбук до тієї самої відкритої мережі.

Коли сторінка відкрита по HTTPS, збоку видно тільки дві речі: ім’я сервера, з яким ти з’єднався (без нього сервер не зрозуміє, який сертифікат віддавати), і приблизний обсяг переданих даних. Адреса сторінки, заголовки, куки, вміст форми і пароль зашифровані.

Важливо не плутати два різні паролі. Пароль на Wi-Fi закриває доступ до самої мережі й нічого не робить із твоїм трафіком усередині неї. HTTPS шифрує вміст незалежно від того, чи є пароль на мережі й хто ще до неї підключений.

3. Сертифікат і ланцюжок сертифікатів

Шифрування саме по собі не доводить, з ким ти розмовляєш. Якщо хтось у мережі відповість замість справжнього сервера, з’єднання теж буде зашифроване — тільки з ним. Тому потрібна друга частина: перевірка імені.

Сертифікат

Файл, у якому написано, для якого імені він виданий, лежить відкритий ключ сервера, стоять дати «діє з» і «діє до» та підпис організації, яка його видала. Сервер надсилає цей файл браузеру на початку кожного з’єднання.

Центр сертифікації

Організація, яка перевіряє, що той, хто просить сертифікат, справді керує цим доменом, і ставить свій підпис. Наш сертифікат виданий центром Let’s Encrypt — він безкоштовний, і ним користуються мільйони сайтів.

Ланцюжок сертифікатів

Сертифікат сервера підписаний проміжним сертифікатом центру, а проміжний — кореневим. Кореневі сертифікати вже лежать усередині браузера й операційної системи: їх туди поклали виробники. Браузер перевіряє підписи один за одним і, якщо доходить до кореневого зі свого списку, показує замок.

Браузер перевіряє три речі одночасно: ім’я в сертифікаті збігається з тим, що в адресному рядку; сьогоднішня дата всередині строку дії; ланцюжок підписів доходить до кореневого сертифіката зі списку. Якщо не сходиться хоч одне — замка не буде, а замість сторінки з’явиться попередження на весь екран.

Сертифікати Let’s Encrypt діють 90 днів і оновлюються автоматично. Прострочений сертифікат — одна з найчастіших причин, чому в цілком робочого сайту раптом зникає замок.

У нашому випадку сертифікат один на всю групу: він виданий на ім’я із зірочкою — *.g9.klub.example для дев’ятої групи, *.g13.klub.example для тринадцятої. Зірочка замінює рівно одну частину імені — ту, що стоїть на її місці, тобто твоє ім’я перед номером групи. Тому для bohdan.g9.klub.example і marta.g9.klub.example підходить один і той самий файл. Двох частин одразу зірочка не замінює: під *.klub.example ім’я bohdan.g9.klub.example уже не підпадає, бо перед доменом у ньому стоять дві частини, а зірочка покриває тільки одну. Коли на практиці ти надрукуєш поле subject свого сертифіката й побачиш там зірочку з номером своєї групи — це саме той сертифікат.

4. Чому http сам перекидає на https

Люди набирають адресу без https:// — просто ім’я. Багато браузерів у такому разі звертаються спершу на порт 80, тобто по HTTP. Якщо сервер віддасть там сторінку, її вміст передається відкритим текстом, і замок не з’явиться, хоч сертифікат і є.

Тому в налаштуваннях nginx на порт 80 стоїть інша відповідь — перенаправлення.

Код відповіді

Число на самому початку відповіді сервера, яке каже, чим закінчився запит. Код 200 OK означає «ось потрібна сторінка», і далі йде її вміст. Код 404 означає, що такого файлу на сервері немає.

Код 301

Відповідь, яка означає «ця адреса переїхала назавжди». Вміст сторінки в такій відповіді порожній.

Заголовок Location

У відповіді 301 обов’язково є заголовок Location із новою адресою — браузер читає його і одразу йде туди. Людина бачить тільки те, що в адресному рядку сама собою з’явилася адреса з https.

Є ще одна річ, яку легко зламати власноруч. Якщо сторінка відкрита по HTTPS, а всередині неї стоїть посилання на файл по http://, браузер такий файл не завантажить і напише Mixed Content у консолі — це вікно, куди браузер друкує повідомлення про помилки на сторінці; відкривається воно клавішею F12, вкладка Console. Картинки не буде, а замок стане з попередженням або зникне. Найчастіша причина — повна адреса з цифрами, залишена в коді сторінки з перших занять: <img src="http://91.219.61.4/u/bohdan.g9/foto.jpg">.

Виправляється це просто: посилання на власні файли пиши відносними — <img src="foto.jpg">. Тоді браузер сам підставить ту адресу й той протокол, з якого відкрита сторінка, і файл завантажиться по HTTPS.

5. Скільки важить сторінка і чому це важливо

Коли ти відкриваєш сайт, браузер завантажує не один файл. Спершу приходить HTML, у ньому знайдені посилання на стилі, скрипти, картинки й шрифти — і кожен із цих файлів завантажується окремим запитом. Розмір сторінки — це сума всього.

Статика

Файли, які сервер віддає такими, як вони лежать на диску: HTML, CSS, JavaScript, картинки, шрифти. Вони однакові для всіх відвідувачів, тому для них працюють стиснення й кеш.

Стиснення gzip

Сервер перед відправкою пакує текстові файли, браузер розпаковує їх у себе. HTML, CSS і JavaScript стискаються в 3–5 разів, бо в них багато повторів. Картинки вже стиснуті всередині свого формату, пакувати їх удруге сенсу немає — у налаштуваннях їх у списку й немає.

Кеш

Копія файлу, яку браузер зберіг у себе на диску, щоб не завантажувати його вдруге. Сервер заголовком Cache-Control каже, скільки цю копію можна тримати. У нас для картинок, стилів і скриптів стоїть сім днів.

Тепер числа. Мобільний інтернет у школі на перерві дає приблизно 2–5 Мбіт/с — це реальна швидкість, коли до тієї самої мережі одночасно підключені кілька десятків людей. Сторінка на 4 МБ за таких умов завантажується близько десяти секунд. Стільки ніхто не чекає: людина закриває вкладку раніше, ніж побачить, що ти зробив.

Майже вся вага — це картинки. Фото з телефона важить 3–6 МБ і має 4000 пікселів завширшки. На сторінці воно показується шириною 800 пікселів, тобто решта даних передається каналом і викидається браузером.

Звідси дві дії, які дають основний результат:

1. Зменшити картинку в пікселях до тієї ширини, у якій її реально видно. 1200 пікселів вистачає навіть для екрана ноутбука.
2. Зберегти у WebP — формат картинок, який розуміють усі браузери з 2020 року. Той самий знімок у ньому займає у 2–4 рази менше, ніж JPEG тієї самої якості.

З кешем пов’язана помилка, яка трапляється часто. Якщо ти заміниш файл на сервері, лишивши ту саму назву, людина, яка заходила вчора, ще сім днів бачитиме стару копію: браузер навіть не питатиме сервер, чи файл змінився. Тому, коли міняєш картинку, міняй і її ім’я — foto-2.webp замість foto.webp. Собі для перевірки достатньо натиснути Ctrl+Shift+R (на Mac Cmd+Shift+R): це оновлення сторінки з повторним завантаженням усіх файлів, повз кеш.

6. Як міряти чесно

Числа «до» і «після» щось означають лише тоді, коли обидва зміряні однаково. Тут потрібні три поняття.

Час відповіді

Скільки минає від моменту, коли запит пішов, до моменту, коли прийшла остання частина відповіді. Міряється в мілісекундах: 1000 мс — це одна секунда.

Медіана

Середнє за розташуванням значення у списку, впорядкованому за зростанням: половина вимірів менша за неї, половина більша. Для десяти вимірів беруть п’ятий і шостий і рахують їхнє середнє.

Викид

Один вимір, який різко відрізняється від решти. У мережі такі трапляються постійно: хтось у цій самій мережі почав завантажувати відео, і роутер на секунду перестав устигати за всіма запитами.

Один вимір не означає нічого. Перший запит завжди довший за наступні: у ньому браузер ще встановлює з’єднання й перевіряє сертифікат. Тому міряють десять разів і беруть медіану.

Різницю між медіаною і середнім арифметичним видно на оцінках. Десять оцінок: дев’ять по 9–10 і одна двійка за пропущену роботу. Середнє арифметичне через цю двійку стане помітно меншим, а медіана дорівнюватиме дев’яти — і саме це число правильно описує, як ти зазвичай пишеш.

Друга умова — звідки міряти. 127.0.0.1 — це адреса, за якою машина звертається сама до себе. Такий запит не виходить за межі сервера: він не проходить каналом до відвідувача, не йде через шкільний Wi-Fi і обладнання провайдера, а на порту 80 ще й не шифрується. Число вийде маленьке, але воно не покаже, скільки чекає людина з телефоном. Тому автоперевірка міряє з сервера, але через публічну адресу — так само, як це робить браузер відвідувача.

Практика

Кроки 1–4 і 6–11 робляться в SSH-сесії на сервері. Крок 5 — у браузері; у кроці 8 сторінку теж доведеться відкрити в браузері й перевірити картинки. Якщо картинок у теці зовсім немає, знадобиться ще й домашній комп’ютер: файл кладуть на сервер по FTP саме з нього.

Налаштування nginx, тобто стиснення й кеш, вмикає адміністратор: це дії від імені root — головного користувача сервера, якому дозволено змінювати системні налаштування. В учнівських облікових записів таких прав немає, і це нормально. Твоя частина — перевірити результат і зменшити те, що залежить від тебе.

ssh bohdan.g9@91.219.61.4
grep -A 2 '^server:' ~/app/project.yaml

server:
  subdomain: bohdan.g9
  url: "https://bohdan.g9.klub.example/"

MY=$(grep -A 5 '^server:' ~/app/project.yaml | grep -m 1 'url:' | grep -o 'https://[^"]*' | sed 's:/*$::')
echo "$MY"

getent hosts "${MY#https://}"

91.219.61.4     bohdan.g9.klub.example

curl -sI "http://${MY#https://}/" | head -n 5

HTTP/1.1 301 Moved Permanently
Server: nginx
Location: https://bohdan.g9.klub.example/

curl -sIL "http://${MY#https://}/" | grep -E '^HTTP|^[Ll]ocation'

openssl s_client -connect "${MY#https://}:443" -servername "${MY#https://}" </dev/null 2>/dev/null \
  | openssl x509 -noout -subject -issuer -dates

subject=CN = *.g9.klub.example
issuer=C = US, O = Let's Encrypt, CN = R11
notBefore=Aug 14 07:22:10 2026 GMT
notAfter=Nov 12 07:22:09 2026 GMT

openssl s_client -connect "${MY#https://}:443" -servername "${MY#https://}" </dev/null 2>/dev/null \
  | sed -n '/Certificate chain/,/^---/p'

mkdir -p ~/app/tools
nano ~/app/tools/page-weight.py

#!/usr/bin/env python3
"""Скільки важить сторінка: сам HTML плюс файли, які він тягне за собою."""
import re
import sys
import urllib.request
from urllib.parse import urljoin

if len(sys.argv) < 2:
    sys.exit("Вкажи адресу: page-weight.py https://bohdan.g9.klub.example/")

url = sys.argv[1]


def download(link):
    request = urllib.request.Request(link, headers={"User-Agent": "page-weight"})
    with urllib.request.urlopen(request, timeout=15) as answer:
        return answer.read()


page = download(url)
text = page.decode("utf-8", "replace")
total = len(page)
print(f"{len(page):>9} Б   сама сторінка")

files = re.findall(r'<(?:img|script|source)[^>]+src=["\']([^"\']+)', text, re.I)
files += re.findall(r'<link[^>]+href=["\']([^"\']+)', text, re.I)

seen = set()
for item in files:
    if item.startswith(("data:", "#", "javascript:")):
        continue
    full = urljoin(url, item)
    if full in seen:
        continue
    seen.add(full)
    try:
        size = len(download(full))
    except Exception as error:
        print(f"{'?':>9}     {item}  ({error})")
        continue
    total += size
    print(f"{size:>9} Б   {item}")

print("-" * 44)
print(f"{total:>9} Б   разом = {total / 1024:.0f} КБ")

/opt/club/venv/bin/python ~/app/tools/page-weight.py "$MY/"

curl -s -o /dev/null -w 'без стиснення: %{size_download} Б\n' "$MY/"
curl -s --compressed -o /dev/null -w 'зі стисненням: %{size_download} Б\n' "$MY/"

export LC_ALL=C
for i in $(seq 10); do curl -s -o /dev/null -w '%{time_total}\n' "$MY/api/ping"; done \
  | sort -n | awk 'NR==5 || NR==6 {s+=$1} END {printf "медіана: %.0f мс\n", s/2*1000}'

curl -s -o /dev/null "$MY/api/ping" \
  -w 'DNS %{time_namelookup}  з’єднання %{time_connect}  шифрування %{time_appconnect}  перший байт %{time_starttransfer}  разом %{time_total}\n'

ls -lhS ~/www
du -sh ~/www

/opt/club/venv/bin/python -c "import PIL; print('Pillow', PIL.__version__)"

nano ~/app/tools/optimize-images.py

#!/usr/bin/env python3
"""Зменшує картинки в ~/www і зберігає копію у форматі WebP.

Оригінали лишаються на місці: скрипт їх не чіпає.
"""
from pathlib import Path

from PIL import Image

MAX_WIDTH = 1200      # ширини понад цю на сторінці все одно не видно
QUALITY = 80          # 80 — межа, після якої різниці для ока майже немає
FOLDER = Path.home() / "www"

for source in sorted(FOLDER.rglob("*")):
    if source.suffix.lower() not in (".jpg", ".jpeg", ".png"):
        continue
    rel = str(source.relative_to(FOLDER))
    was = source.stat().st_size
    picture = Image.open(source)
    picture = picture.convert("RGBA" if picture.mode in ("P", "LA", "RGBA") else "RGB")
    if picture.width > MAX_WIDTH:
        height = round(picture.height * MAX_WIDTH / picture.width)
        picture = picture.resize((MAX_WIDTH, height), Image.LANCZOS)
    result = source.with_suffix(".webp")
    if result.exists():
        print(f"{rel:<26} пропущено: {result.name} уже є")
        continue
    picture.save(result, "WEBP", quality=QUALITY, method=6)
    became = result.stat().st_size
    if became >= was:
        result.unlink()
        print(f"{rel:<26} {was // 1024:>6} КБ  ->  WebP вийшов не меншим, лишаю оригінал")
        continue
    print(f"{rel:<26} {was // 1024:>6} КБ  ->  "
          f"{result.name:<26} {became // 1024:>6} КБ  "
          f"{picture.width}×{picture.height} пікселів")

/opt/club/venv/bin/python ~/app/tools/optimize-images.py

mkdir -p ~/backups
cp ~/www/index.html ~/backups/index-$(date +%F).html
nano ~/www/index.html

<img src="foto.webp" width="1200" height="800" alt="Головна сторінка мого сервісу">

img { max-width: 100%; height: auto; }

rm ~/www/foto.jpg

export LC_ALL=C
/opt/club/venv/bin/python ~/app/tools/page-weight.py "$MY/"
curl -s -o /dev/null -w 'без стиснення: %{size_download} Б\n' "$MY/"
curl -s --compressed -o /dev/null -w 'зі стисненням: %{size_download} Б\n' "$MY/"
for i in $(seq 10); do curl -s -o /dev/null -w '%{time_total}\n' "$MY/api/ping"; done \
  | sort -n | awk 'NR==5 || NR==6 {s+=$1} END {printf "медіана: %.0f мс\n", s/2*1000}'

curl -sI "$MY/foto.webp" | grep -i -E 'cache-control|expires|content-type'

nano ~/app/README.md

## Швидкість роботи

Виміряно 6 вересня 2026, заняття 10. Адреса: https://bohdan.g9.klub.example/

| Що міряв | До | Після |
|---|---|---|
| Сторінка з усіма файлами | 1840 КБ | 214 КБ |
| `/api/ping`, медіана з 10 запитів | 178 мс | 176 мс |

Головна сторінка без стиснення — 34 КБ, зі стисненням gzip — 9 КБ.

Що зробив: зменшив три фото до 1200 пікселів завширшки, зберіг у WebP і
замінив посилання в `index.html`. Стиснення gzip і кеш на статику ввімкнув
адміністратор у налаштуваннях nginx. Час відповіді `/api/ping` майже не
змінився: сьогоднішні правки стосувалися картинок, а не коду служби.

cp ~/www/index.html ~/app/www-index.html
cd ~/app
git add README.md www-index.html tools/
git status --short

git commit -m "Швидкість: WebP замість JPEG, числа до і після в README"
git push origin master

Що перевіряє автоматика

Чотири критерії заняття 10, усі чотири перевіряє програма. Перевірка запускається за розкладом, тому відмітка в кабінеті з’являється не в ту саму секунду, коли ти виконав команду. Публічну адресу програма бере з ~/app/project.yaml, розділ server, поле url — якщо там неправильна адреса, не зарахується нічого.

Домашнє завдання

# Що сказали люди

## 1. Сестра, телефон, мобільний інтернет
Пробувала: додати запис і подивитися список.
Зупинилася на: не зрозуміла, що робить кнопка «Зберегти» — думала, що вона надсилає щось мені.
Сказала дослівно: «а це кудись відправиться?»
Що з цим робити: перейменувати кнопку на «Додати до списку».

## 2. Дмитро з паралельного класу, ноутбук, шкільний Wi-Fi
Пробував: ...
Зупинився на: ...
Сказав дослівно: ...
Що з цим робити: ...

cd ~/app
git add FEEDBACK.md
git commit -m "FEEDBACK: зауваження трьох людей після показу сервісу"
git push origin master

cd ~/app
git add README.md
git commit -m "README: час завантаження з телефона на мобільному інтернеті"
git push origin master

Якщо щось не працює

Браузер пише «не вдалося знайти сервер» за іменем сабдомена

Спершу перевір, чи знає це ім’я DNS:

getent hosts bohdan.g9.klub.example

Порожня відповідь означає, що запис ще не з’явився або ще не дійшов до цієї мережі. Друга часта причина — одрук: зайва крапка, пропущена частина логіна, переплутані схожі літери в назві домену. Порівняй те, що набрав, із полем url у project.yaml посимвольно.

Якщо на сервері getent знаходить ім’я, а на телефоні сторінка не відкривається, річ у мережі телефона: шкільний Wi-Fi має свій DNS-сервер, і новий запис міг до нього ще не дійти. Перевір із мобільного інтернету — якщо там працює, лишається просто зачекати.

Замість сторінки — попередження про сертифікат

Прочитай, що саме написано в попередженні: причина завжди вказана дрібним текстом.

• ERR_CERT_COMMON_NAME_INVALID або «сертифікат не дійсний для цієї адреси» — ім’я в адресному рядку не збігається з іменем у сертифікаті. Найчастіше це спроба відкрити по https адресу з цифрами 91.219.61.4: за IP-адресою сертифіката немає, і так і має бути. Відкривай за іменем.
• ERR_CERT_DATE_INVALID — або сертифікат прострочений, або на твоєму комп’ютері збився годинник. Перевір спершу дату в себе: браузер порівнює строк дії саме з нею. Якщо дата правильна, скажи викладачеві.
• ERR_CERT_AUTHORITY_INVALID — браузер не довіряє тому, хто підписав сертифікат. У шкільних мережах таке буває, коли трафік проходить через обладнання, яке підміняє сертифікати. Перевір із мобільного інтернету: якщо там замок нормальний, річ у мережі, а не в твоєму сервері.

У будь-якому разі не тисни «продовжити попри попередження» — спершу розберись, чому воно з’явилося.

Замок є, а картинок немає

Відкрий F12, вкладку Console. Рядок зі словами Mixed Content означає, що сторінка відкрита по HTTPS, а файл у ній запитується по http://, і браузер його заблокував. Знайди винні рядки:

grep -n 'http://' ~/www/index.html

-n друкує номери рядків. Кожне посилання на власний файл заміни на відносне: src="foto.webp" без адреси на початку. Посилання на чужі сайти теж краще писати з https://, інакше буде те саме попередження.

Розмір сторінки після стиснення майже не змінився

Перевір по черзі три речі:

1. Чи справді стиснулися файли: ls -lhS ~/www. Якщо поруч із foto.jpg лежить foto.webp майже такого ж розміру, картинка, найімовірніше, вже була невеликою — тоді основна вага деінде, дивись увесь список.
2. Чи бере сторінка нові файли: grep -o 'src="[^"]*"' ~/www/index.html. Якщо там ще .jpg, сторінка тягне старі картинки, скільки їх не стискай.
3. Чи не рахуєш ти обидва файли одразу: поки foto.jpg лежить у ~/www і згадується в розмітці, вага сторінки включає і його, і новий .webp.

Якщо скрипт узагалі завершився помилкою ModuleNotFoundError: No module named 'PIL' — бібліотеки в спільне оточення /opt/club/venv ставить адміністратор. Скажи викладачеві, самому нічого встановлювати не треба.

Медіана більша за 300 мс

Спочатку з’ясуй, де саме зникає час. Порівняй два виміри — через публічну адресу і прямо до служби:

PORT=$(grep -o -- '--port [0-9]*' ~/.config/systemd/user/club-api.service | grep -o '[0-9]*')
curl -s -o /dev/null -w 'публічна адреса: %{time_total} с\n' "$MY/api/ping"
curl -s -o /dev/null -w 'прямо до служби: %{time_total} с\n' "http://127.0.0.1:$PORT/api/ping"

Перша команда дістає номер порту з файлу служби. Служби на сервері запускає й доглядає systemd — частина операційної системи, яка стежить, щоб потрібні програми працювали й запускалися знову після перезавантаження сервера. На кожну службу в неї є файл із налаштуваннями; у твоєї це ~/.config/systemd/user/club-api.service. У цьому файлі записано, якою саме командою запускати club-api, а в тій команді стоїть і номер порту — звідти grep його й дістає. Правити цей файл сьогодні не треба.

Якщо друге число теж велике, затримка в твоєму коді: подивись, чи не відкриває /api/ping базу на кожен запит, чи не робить він важкого запиту без потреби і чи не лишилося в ньому print, який друкує великий список у журнал. Якщо друге число маленьке, а перше велике, справа не в коді — покажи обидва числа викладачеві.

Окремо перевір, що служба не перезапускається постійно: systemctl --user status club-api. Рядок active (running) і час роботи в кілька годин — усе гаразд. Якщо служба запустилася секунду тому, подивись останні тридцять рядків її журналу: journalctl --user -u club-api -n 30. Там буде видно, через що вона зупинилася минулого разу. Перший запит після запуску завжди найповільніший.