Képkockánként átnézett honlap

A vázlat, amiből indultunk

Az állatorvosi rendelő új honlapjára 2026 augusztusában érkezett az ajánlatkérés, egy diasoros szerkezeti vázlattal: benne volt, milyen lapok legyenek, és mi kerüljön rájuk. A látványt a megrendelő rám bízta. Később kilenc másik állatorvosi oldal érkezett mintának, néhol egy-egy kiemelt résszel.

A kilencből három dolgot vettem át: a csapat személyes bemutatkozását, egy áttekinthető lapszerkezetet és a szolgáltatások lenyíló menüjét. Egyedi az élő nyitvatartás lett: a lap azt mutatja, hogy a rendelő éppen nyitva van-e, és ilyen a kilenc közül egyiken sem volt.

A szövegek a megrendelő anyagából jöttek — a vázlatból, a régi oldalról és a később küldött, kijelölt részekből —, az angol változat ezek fordítása. Ahol még hiányzott valami, ott helyőrző áll, amíg a végleges meg nem érkezik: a csapatfotók helyén például avatárok, a megrendelő kérésére.

A régi oldal végig működött

Az állatorvosi rendelő új honlapja az első naptól egy próbacímen épült, a régitől elkülönítve; a régi a fő címen zavartalanul üzemelt — ezt a megrendelő az elején kérte. Minden visszajelzés-kör után oda került ki az új változat, így a rendelő minden körben a valódi, kattintható oldalt nézte.

2026. október 4-ig huszonegy ilyen változat ment ki. Minden kiadás előtt mentés készül a próbacímről, és a kiadás csak ép mentéssel megy tovább. Utána gépi ellenőrzés fut: a lapok és minden fájl, amire hivatkoznak, a biztonsági fejlécek, végül fájlonként az, hogy a szerveren pontosan az áll-e, ami a helyi gépen.

A kidolgozottság, mérve

A rendelő új honlapjánál a mércém az volt, hogy betöltéskor semmi ne villanjon be és semmi ne ugorjon el, és az oldal minden böngészőben ugyanúgy viselkedjen. Ezt nem szemre ellenőriztem: a lapot gép tölti be, és képkockánként feljegyzi, mi látszik belőle.

Egy példa: az egyik változatban a tartalom betöltéskor homályból élesedett ki, mégis bevillanásnak hatott. A képkockák megmutatták, miért: a szöveg 80 ezredmásodperc alatt 84 százalékig láthatóvá vált, és a homály csak utána oszlott. A 2026. október 4-i változatban előbb a lap áll össze — a fejléc, a sávok háttere, a nagy kép —, és a tartalmi elemek egy ütemmel később, lágyan jönnek elő.

A képkockánkénti mérés találta meg azt is, hogy lapváltáskor az ikonok 60–130 ezredmásodpercig üresen álltak, hogy első megnyitáskor a menüpontok a betűk megérkezésekor 7–15 képpontot ugrottak, és hogy a nyitókép a betöltés végén egy pillanatra kifakult. Szemre mindhárom csak egy pillanatnyi rándulás volt; hogy mi okozza, az a képkockákból derült ki.

Mit jelent ez, ha hasonló a helyzeted

Ha új honlapot szeretnél, a szerkezetet összeállíthatod magad is, akár egy diasorban, a látványt és a megvalósítást pedig rám bízhatod. A régi oldalad közben működik, és minden kört a valódi oldalon nézhetsz meg, a saját telefonodon is.

A kidolgozottságnál azt nézem, amit a látogató lát: hogy betöltéskor mi jelenik meg és mikor — képkockánként mérve —, és hogy egy régebbi telefonon is ugyanígy működik-e.

A megvalósítás mérete

$ find . -name "*.php" | wc -l             # a téma mappájában
      53
$ grep -c '^\s*fut "' teszt/mind.sh        # a projekt gyökerében
37
$ python3 teszt/ellenproba.py --horgonyok
Ellenpróba-horgonyok: mind a 118 egyértelmű.

Egy betöltés, képkockánként

Az oldalbetöltést ennél a projektnél saját mérőszkript vizsgálja. A lapot gép tölti be lassított hálózaton, üres gyorsítótárral, a Chrome és a Safari motorjában (Chromium és WebKit), asztali és telefonos méretben. Az első 3,5 másodpercben minden képkockán megnézi a képernyőn álló elemeket — képet, ikont, címet, bekezdést, gombot —, és feljegyzi, mennyire látszanak és hol állnak.

Hibának számít, ha valami egyetlen képkocka alatt jelenik meg áttűnés nélkül, ha egy már látszó elem három képpontnál többet ugrik, vagy ha a lap egy eleme az első festés után, készen bukkan fel. A mérés az első megnyitásra és a lapváltásra külön fut, mert a kettőnél más van a böngésző gyorsítótárában.

A mérő magát is ellenőrzi: ha a fejléc első megnyitáskori rejtését szándékosan kikapcsolja, a betűcsere ugrását jelentenie kell. Ha nem jelez, a mérés vak, és a futás elbukik.

1. 01 Lassú net, üres gyorsítótár két böngészőmotor, asztal és telefon
2. 02 Minden képkocka, minden elem átlátszóság, hely, kép, ikon
3. 03 Hiba: ha bevillan egy képkocka alatt, áttűnés nélkül
4. 04 Hiba: ha elugrik 3 képpontnál többet, már látszva
5. 05 Önellenőrzés védelem nélkül a mérőnek jeleznie kell

első megnyitás és lapváltás külön · öt lap · két motor

A teszt, amit szándékosan elrontok

Az ellenpróba-szkript ennél a projektnél minden védelmet egyenként, ideiglenesen kiszed a forrásból, lefuttatja a hozzá tartozó tesztet, és elvárja, hogy elbukjon. Ha a teszt ilyenkor is zöld, nem azt méri, amire szántam. A futás után a forrás bájtra pontosan visszaáll, és ezt a szkript ellenőrzi is.

2026 októberére 98 ilyen sor van, 118 cserével. 2026. október 3-án egy nap alatt háromszor fordult elő, hogy egy sor csendben elavult: a kód változott alatta, és a csere helye már nem volt meg. A teljes futás csak a hibás sornál állt meg, a tesztsor nem is látta. Azóta a tesztsor első lépése másodpercek alatt mind a 118 csere helyét ellenőrzi.

A fej beágyazott szkriptjénél ez több lépés: a böngésző csak akkor futtatja, ha a lenyomata (hash) szerepel a biztonsági szabályzatban, így egy visszafordításhoz a lenyomatot is cserélni kell. 2026. október 2-án a fej egy nap alatt ötször változott, és vele minden alkalommal öt, kézzel számolt lenyomat. Azóta az ellenpróba a lenyomatot futáskor számolja ki.

Egy iOS 15-ös iPhone mint célgép

Ennél a honlapnál az egyik célgép egy iOS 15-ös iPhone 6s volt. Ez a régebbi Safari a mai CSS több elemét nem ismeri — például a subgridet vagy az lh mértékegységet —, ezért ahol ilyet használtam, ott előtte tartalék áll, és a megjelenés ugyanaz marad.

A lapváltó áttűnés is emiatt saját szkript. A böngészők beépített megoldását (View Transitions) az iOS 15 és a Firefox nem ismeri, a mérce viszont az volt, hogy minden böngészőben ugyanúgy működjön. A régi lap tartalma 140 ezredmásodperc alatt elhalványul, a fejléc közben áll, az új lap tartalma pedig kiélesedik.

A biztonsági szabályzat, élesben mérve

Az állatorvosi honlap lapjai teljes tartalombiztonsági szabályzattal (Content Security Policy) futnak: idegen szkript nem futhat, a saját beágyazott szkriptek csak a lenyomatukkal. 2026. szeptember 24. óta minden kiadás után egy mérő mindkét böngészőmotorban végigjárja a próbacímet, és egy szándékosan beszúrt idegen szkripttel ellenőrzi, hogy a tiltás tényleg él.

Ami nem nyilvánvaló

A homály, ami nem védett a bevillanás ellen

A betöltéskori kiélesedés egyik változatában a szöveg homályból jött, mégis bevillanásnak hatott. Az ok a görbe volt: az átlátszóság 30 ezredmásodperc alatt 45, 80 alatt 84 százalékig nőtt, és a homály csak utána oszlott. A javított változatban az átlátszóság lágyan indul — 100 ezredmásodpercnél nagyjából 40 százalékon jár —, és vele együtt tisztul a homály.

A menü, amin nem hatott az animáció

Asztali nézetben a menü tárolója display: contents beállítású, vagyis nincs saját doboza. A rá tett belépő animáció ezért nem csinált semmit: a menü egy ütemben ugrott be, miközben a logó és a gombok kiélesedtek. A javítás óta a tároló gyermekei kapják az animációt, a mérő pedig az ilyen elem animációját nem számítja áttűnésnek.

A rejtett ikonkészlet, ami 150 képpontot foglalt

Az ikonok egyetlen, rejtett SVG-készletből jönnek. A hidden attribútum ezen az elemen nem rejtett el semmit: a böngésző erre vonatkozó szabálya a HTML-elemekre szól, az SVG-re nem. A készlet így 150 képpontnyi üres sávot hagyott minden lap alján. Azóta a display: none rejti el, és a mérés a lap alját is nézi.

A Safari, ami kiszámolta, de nem rajzolta újra

A gombok kitöltése eleinte egy regisztrált CSS-változó átmenetére épült (@property), és a háttér vagy a maszk ebből rajzolt. A Safari motorja a változó átmenetét lefuttatta, de a rá épülő festést nem frissítette, így a gombok, a csapatkártyák és a vélemények halványítása egy képkocka alatt ugrott a végére. A számított érték közben azt mutatta, hogy minden rendben. Azóta a kitöltések a böngésző saját, animálható tulajdonságain futnak — méret, kivágás, maszkméret —, és a mozgást WebKitben is képkockán nézem, nem a számított értéken.

A kép, ami betöltés után kifakult

A kezdőlap nyitóképe lassú hálózaton betöltés után áttűnt, majd egy pillanatra 0,99-ről 0,11-es átlátszóságra fakult, és újra előtűnt: a képváltó saját átlátszóság-átmenete a betöltéskor újraindult. A javítás óta a kép a betöltéséig nem átlátszó, hanem láthatatlan (visibility), így a képváltó átmenete el sem indul, és a kép egyszer, egyenletesen tűnik elő.

Kérdések erről a munkáról

Összefoglaló

Egy állatorvosi rendelő új honlapja épül 2026 augusztusa óta. A megrendelő diasoros szerkezeti vázlattal és kilenc mintaoldallal kért ajánlatot, a látványt rám bízta, és azt kérte, hogy a régi oldal közben működjön; az új ezért próbacímen épül, ahová 2026. október 4-ig huszonegy változat ment ki. Ami épül, az egyedi téma bővítmény nélkül: 53 PHP-fájl, 9 348 sor, a szöveg a kódtól külön, két nyelven. A mérce az volt, hogy betöltéskor semmi ne villanjon be és semmi ne ugorjon el, minden böngészőben ugyanúgy; ezt képkockánkénti mérés őrzi, az első megnyitásra és a lapváltásra külön, Chromium- és WebKit-motorban, és egy iOS 15-ös iPhone is célgép. 2026 októberére a tesztsor 37 tételes, és 98 ellenpróba ellenőrzi, hogy a tesztek tényleg mérnek: mindegyik egy védelmet fordít vissza, és elvárja, hogy a teszt elbukjon. A mérés találta meg a túl gyorsan felfutó kiélesedést, a lapváltáskor üresen álló ikonokat, a display: contents miatt egy ütemben beugró menüt és a betöltés után kifakuló nyitóképet.

← Minden esettanulmány