Esettanulmány: így építettük a lorz.hu-t, automatikus SEO- és akadálymentességi ellenőrzéssel

Egy szoftvercégnek a saját weboldala a legközvetlenebb munkapéldája. Ezért a lorz.hu-t nem sablonból raktuk össze, hanem úgy építettük, ahogy egy ügyfélnek is építenénk egy üzleti webes rendszert: adatokból dolgozó sablonokkal, automatikus tesztekkel, és mérhető célokkal. Ez az írás a valódi felépítést, a számokat és a hibáinkat is bemutatja.

A kiinduló feladat

• Két üzletág, technológia és létesítménygazdálkodás, sok különálló szolgáltatással.
• Magyar és angol nyelv, nyelvenként saját, keresőbarát címekkel.
• Olyan tartalom, amely a döntést segíti: kalkulátorok, ellenőrzők, útmutatók, integrációs leírások.
• Gyors betöltés és akadálymentesség, mert ezt adjuk el másoknak is.

Technológia

Az oldal Next.js-re és React-re épül, TypeScriptben. A kétnyelvűséget a next-intl kezeli: a magyar oldalak előtag nélkül élnek, az angolok a /en alatt, saját, lokalizált címekkel. A betűtípusokat saját tárhelyről szolgáljuk ki, hogy a build ne függjön külső szolgáltatástól. A mérőkódok a Google Tag Manageren keresztül, hozzájárulás-kezeléssel futnak, így a kódban nincs szétszórt követőkód.

A tartalom adatként él

A szolgáltatásoldalak szövege nyelvenként egy-egy adatfájlban van, a magazincikkek blokkokból állnak, a kalkulátorok pedig egy közös definícióból és egy közös számítómotorból dolgoznak. Egy új szolgáltatásoldal vagy kalkulátor így nem új programozási feladat, hanem új adat. Ma közel harminc ingyenes eszköz, több mint hatvan magazincikk és tizenegy integrációs leírás él így. A build közben ellenőrző szabályok futnak: például a meta-leírások hossza, a cikkenkénti belső linkek száma és minden belső hivatkozás célja.

Minden módosítást automatikus ellenőrzés véd

Ugyanezt a szemléletet adjuk az ügyfeleinknek is: a szoftverfejlesztésnél a tesztek a szállítás részei, nem utólagos extrák.

Mérhető eredmények

A Lighthouse laborméréseben a keresőoptimalizálás, az akadálymentesség és a bevált gyakorlatok pontszáma 100 volt, a teljesítményé 67. A labormérés lassú mobilhálózatot szimulál; valós betöltésnél a kezdőlap első tartalma a mérésünkben 0,2–0,6 másodperc alatt jelent meg. A teljesítménypontszámon még dolgozunk. A kattintásszám a megjelenéssel nem nőtt arányosan: a sok új oldal még a második találati oldalon áll, ezen a következő hetek munkája dolgozik.

Amit elrontottunk, és amit tanultunk belőle

• Akadálymentesség: az első teljes gépi vizsgálat a világos témában több száz kontrasztban elbukó elemet talált, főleg a túl világos kiemelőszín és a halvány másodlagos szövegek miatt. A javítás után a sitemap mind a 165 oldala hibátlan volt a gépi ellenőrzésen, mindkét témában. A kapcsolatűrlap hiányzó, látható mezőfeliratait viszont csak a kézi próba mutatta meg. A részleteket az akadálymentességi nyilatkozatunk írja le.
• Spamszűrés: egy rejtett spamszűrő mezőt a böngészők automatikus kitöltése kétszer is kitöltött, és valódi megkeresések kerültek gyanús besorolásba. Azóta a szerver ilyenkor sem dob el semmit, csak megjelöli, és naplózza az esetet.
• Generált fájlok: egyszer egy build közben átírt stílusfájlt rutinból visszaállítottunk, és az automatikus ellenőrzés jogosan elbukott. Azóta a tényleges különbséget nézzük, nem a fájl dátumát.

Mit jelent ez egy megrendelőnek?

Egy céges weboldal vagy webes rendszer értéke nem az átadás napján dől el, hanem az első év módosításai után. Ha minden változtatás automatikus ellenőrzésen megy át, a rendszer nem romlik el csendben. Ugyanígy dolgozunk a weboldal-készítésnél, az egyedi rendszereknél és az akadálymentesítésnél. Egy másik saját termékünkről, az esti meséket kínáló Meseholdról ebben a cikkben írtunk.