// Studija slučaja

Zlaja 2015 — sajt vodoinstalatera i električara koji se poziva, a ne pretražuje

Sajt sa kog se ne kupuje nego zove. Posetilac obično stoji u kupatilu sa vodom na podu i traži broj telefona, ne katalog. Sve na ovom sajtu podređeno je toj jednoj sekundi u kojoj on odluči da li će zvati ili se vratiti na Google.

Klijent
Zlaja 2015
Delatnost
Vodoinstalater i električar, hitne intervencije 0-24
Područje
Beograd i okolina
Tip
Višestrani sajt sa panelom za radne naloge
Tehnologije
PHP 8.3 · nginx FastCGI keš · MySQL · PWA
Status
Živ sajt, u aktivnom održavanju
Naslovna strana sajta Zlaja 2015 sa naslovom Vodoinstalater i Električar Beograd 24/7
Naslovna — broj telefona i hitne intervencije odmah na vrhu

Čime se Zlaja 2015 bavi

Zlaja 2015 je vodoinstalaterska i elektro radnja sa Palilule koja radi po celom Beogradu i okolini. Dve struke, jedan broj telefona, i dostupnost koju firma na sajtu navodi kao 0-24, sedam dana u nedelji, sa preko trideset godina iskustva.

Vodoinstalaterski deo posla je ono zbog čega ljudi zovu noću: mašinsko odgušenje kanalizacije Rotenberg sajlom, čišćenje visokim pritiskom WOMA sistemom, pražnjenje septičkih jama, ugradnja i servis bojlera, montaža sanitarija i detekcija curenja. Elektro deo pokriva kompletne instalacije, zamenu utičnica, prekidača, osigurača i razvodnih tabli, ugradnju osvetljenja i detekciju kvarova — sve to je opisano na posebnoj strani sa elektro uslugama.

Kombinacija je praktičnija nego što izgleda. Kada pukne cev u zidu i pokvasi instalaciju, dolazi jedan čovek umesto dva, i ne prebacuju odgovornost jedan na drugog. To je stvarna prednost radnje i sajt je od početka pisan tako da se ta prednost vidi, a ne da se krije iza generičkog naslova „usluge".

Šta je trebalo rešiti

Ovo nije prodavnica. Ovde nema razgledanja, poređenja i vraćanja sutradan. Posetilac ima problem koji curi, obično u najgorem trenutku, i traži jednu stvar — broj koji radi sada. Sve što stoji između njega i tog broja je gubitak posla.

Iz te jedne rečenice ispali su svi zahtevi:

  • Broj telefona vidljiv na svakom ekranu, bez skrolovanja, kao dodirljiv link koji odmah otvara pozivnik — ne kao tekst koji čovek prepisuje.
  • Sajt koji se otvara na lošoj mobilnoj vezi, jer se ne otvara za stolom nego u kupatilu, u podrumu, na stepeništu.
  • Zasebna adresa za svaku uslugu, jer se u pretrazi ne kuca „vodoinstalater" nego „odgušenje kanalizacije Beograd" ili „zamena bojlera cena".
  • Dokaz da oprema postoji — WOMA mašina, kamion za septičke jame i termalna kamera nisu nešto što svaki majstor ima, pa to treba pokazati slikom, a ne tvrdnjom.
  • Mesto za evidenciju poslova koje nije sveska u kombiju.

Poslednja stavka je ono što je ovaj projekat razlikovalo od običnog sajta za uslužnu delatnost. Sajt donosi pozive, ali pozivi bez evidencije završe kao izgubljena naplata, pa je uz sajt išla i aplikacija za radne naloge.

Struktura sajta — usluge, opštine, hitne

Sitemap nosi dvadeset adresa i one nisu nasumične. Naslovna, sedam servisnih strana, jedna strana o pokrivenim opštinama, galerija, kontakt, strana za hitne intervencije i pravni tekstovi.

Servisne strane su podeljene po tome kako ljudi zaista traže: pregled vodoinstalaterskih usluga, pa odvojeno odgušenje kanalizacije, WOMA čišćenje visokim pritiskom, ugradnja i servis bojlera, pražnjenje septičkih jama i elektro usluge. Svaka ima isti skelet — šta je usluga, kako se radi, česta pitanja, poziv na kraju — ali ne i isti tekst. WOMA strana poredi visoki pritisak sa čišćenjem sajlom i objašnjava kada je koje bolje. Strana o bojlerima nabraja tipove i najčešće kvarove. Strana o septičkim jamama govori o tome kada se pražnjenje ne sme odlagati.

Opštine su rešene suprotno od onoga što se obično radi. Umesto sedam skoro istih strana sa zamenjenim imenom opštine — što je najbrži način da Google ceo taj deo sajta oceni kao tanak sadržaj — postoji jedna prava strana o pokrivenim opštinama, a adrese tipa /vodoinstalater-zemun i /vodoinstalater-palilula vode na nju i kanonskom oznakom pokazuju ka njoj. Rezultat je da se lokalne adrese mogu deliti i koristiti u oglašavanju, a snaga se ne rasipa na sedam praznih kopija. Sve pokrivene opštine, zajedno sa naseljima kao što su Kotež, Borča, Krnjača i Mirijevo, popisane su na strani o lokacijama po Beogradu.

Poziv kao jedina prava radnja

Na sajtu postoji tačno jedna stvar koju posetilac treba da uradi, i ona se ne krije. Hero ima dva dugmeta — broj telefona i formu za upit — a broj je prvi i veći. Ispod je traka sa tri obećanja koja radnja daje: garancija, dolazak u roku od trideset minuta i besplatna procena. To su tvrdnje firme i tako su i napisane, u prvom licu.

Preko cele strane ide plutajuće dugme za poziv koje ostaje na ekranu dok se skroluje. Na dnu svake strane, bez izuzetka, stoji ista traka sa pitanjem da li je potrebna hitna intervencija i brojem odmah ispod. Čovek koji je stigao do kraja strane o septičkim jamama ne mora da se vraća na vrh.

Kontakt forma postoji kao druga opcija, za one koji ne zovu odmah nego traže procenu. Ona ne ide kroz PHP funkciju mail() — poruke se šalju kroz autentifikovan SMTP nalog sa DKIM potpisom, pa upiti stižu u sanduče, a ne u nepoželjnu poštu. Detalj koji je jednom oduzeo previše vremena: u tekstu poruke reč „BEOGRAD" imala je ćirilično slovo O umesto latiničnog, tri puta. Izgleda identično, a nije isto slovo, i takva sitnica ume da pogura poruku ka filteru.

Galerija radova i oprema

Za majstora je galerija ozbiljnija stavka nego za većinu delatnosti. Kada neko bira koga će pustiti u stan u dva ujutru, slika obavljenog posla vredi više od svakog opisa. Zato galerija radova nije ukras nego argument.

Podeljena je na dva dela — obavljeni radovi i oprema. U prvom su slike sa terena: krpljenje cevi, montaža WC šolje, saniranje curenja. U drugom je ono što se ne iznajmljuje na dan — Rotenberg mašina, kamion za pražnjenje septičkih jama, termalna kamera za detekciju curenja i vozila radnje. Svaka slika postoji u dve verzije, WebP za savremene brauzere i JPEG kao rezerva, uz zasebno pripremljene umanjene prikaze za mrežu.

Iz galerije je ispao i jedan nalaz koji se lako previdi. Lightbox je početno imao prazan <img src=""> element koji se popunjava tek pri kliku. Prazan izvor slike brauzer tumači kao zahtev za trenutnu stranu, pa se cela strana učitava po drugi put samo da bi bila odbačena. Zamenjen je prozirnim placeholderom veličine jednog piksela i nepotreban zahtev je nestao.

Srpski i engleski bez druge kopije sajta

Sajt ima prekidač jezika u zaglavlju. Uobičajena rešenja za to su dva seta fajlova, baza prevoda ili gotov dodatak — sva tri znače da se svaka izmena teksta radi na dva mesta, a u praksi se drugo mesto zaboravi.

Ovde je izvedeno drugačije. Tekst se u HTML-u piše kao par, srpska pa engleska verzija razdvojene jednim znakom, na elementu koji nosi data-translate. Pred slanje strane, izlazni bafer PHP-a prolazi kroz dokument i ostavlja samo onu polovinu para koja odgovara kolačiću sa izabranim jezikom. Prevod se nalazi tačno tamo gde i tekst koji prevodi, pa ne može da se raziđe sa njim.

Zamka je bila u kešu. Sajt stoji iza nginx FastCGI keša, što znači da se gotova strana pamti i služi bez pokretanja PHP-a — a to je upravo korak koji bira jezik. Bez ispravke, prvi posetilac bi odredio jezik za sve ostale narednih deset minuta. Rešeno je tako što ključ keša uključuje i kolačić sa jezikom, pa srpska i engleska verzija iste adrese imaju odvojene unose. To je vrsta greške koja u testiranju ne postoji, jer test uvek pravi jedan čovek sa jednim jezikom, a na živom sajtu se pojavi odmah.

Tehnička izvedba

Sajt je pisan u PHP-u 8.3 iza nginxa, bez WordPressa i bez ijednog dodatka koji bi trebalo pratiti i ažurirati. Strane stoje u svojim direktorijumima, zajednički delovi — zaglavlje, podnožje i završna traka sa pozivom — u zajedničkom uključivanju, a stilovi su podeljeni na kritični deo koji ide ugrađen u stranu i ostatak koji se učitava naknadno.

Ispred svega je FastCGI keš sa sopstvenom zonom i rokom od deset minuta. Keš se namerno preskače za slanje forme, za adrese sa upitnim parametrima i za putanje koje obrađuju poruke — jer keširan odgovor na poslatu formu znači da drugi posetilac vidi tuđu potvrdu.

Tri stvari iz konfiguracije servera vredi izdvojiti, jer se ponavljaju svuda i skupo koštaju:

  • Preusmerenje sa www adrese gubilo je putanju. Pravilo je vraćalo goli domen umesto domena sa putanjom, pa je svaki link na www verziju podstrane završavao na naslovnoj. Jedan izostavljen argument u jednoj liniji, a znači da svaka podeljena adresa i svaki backlink na podstranu ne stižu tamo gde treba.
  • Pravilo koje brani pristup skrivenim fajlovima blokiralo je i /.well-known/, pa sa njim i security.txt. Rešenje je izuzetak postavljen pre zabrane, ne umesto nje.
  • Sajt je za deo posetilaca bio na pogrešnom mestu. Zona je imala IPv6 zapis, a vhost je slušao samo na IPv4. Posetioci sa mreža koje idu prvo na IPv6 — a to su kod nas i mobilni operateri — nisu pogađali pravi vhost. Ispravka je jedna linija po bloku, ali se do nje ne dolazi gledanjem sajta u brauzeru, jer na većini veza sve izgleda ispravno.

Uz to, naslovna strana nosi zaključan atribut na nivou fajl sistema kao zaštitu od neovlašćene izmene. Praktična posledica je da svaki deploy mora prvo da skine zaključavanje pa da ga vrati — što je namerno nezgodno, jer je to i poenta.

Brzina i ono što je stvarno pomoglo

Merenja su rađena pre i posle, u dva prolaza, i najveći dobitak nije došao odatle odakle se očekuje.

Na mobilnom uređaju ocena performansi je sa 83 otišla na 97 u prvom prolazu i na 98 u drugom. Vreme u kome je glavna nit blokirana palo je sa 610 milisekundi na 170, pa na 140. LCP na mobilnom je sa 2,3 sekunde spušten na 2,1. Pristupačnost je 99, SEO 100, a najbolje prakse su sa 96 podignute na 100.

Presudan potez nije bio kompresija slika nego trenutak učitavanja Google Tag Managera. Umesto da se pokrene odmah, odložen je do prve interakcije posetioca — skrola, dodira ili klika — ili do četiri sekunde posle učitavanja, šta pre dođe. Analitika i dalje meri sve što treba, ali ne otima procesor dok se strana crta. Iz tog jednog pomeranja došlo je više od dve trećine ukupnog dobitka.

Najlepši nalaz bio je sa fontovima. Podskup slova sa kvačicama nije bio unapred učitan, a font je bio podešen tako da se ne čeka ako nije spreman. Posledica: pri prvoj poseti, sa praznim kešom, slova č, š, ž, ć i đ padala su na sistemski font — u naslovu „Električar" jedno slovo je bilo iz drugog pisma, vidljivo krupnije i tamnije. Pri svakoj sledećoj poseti sve je izgledalo ispravno, pa je greška preživela mesecima. Rešena je dodavanjem unapred učitanog podskupa u svih dvadeset i dve strane.

Ono što nije rešeno vredi reći isto tako jasno. Pomeranje sadržaja pri učitavanju na desktopu ostalo je na 0,194, iznad preporučene granice. Pokušaj sa rezervisanjem visine unapred pogoršao je stvar na 0,265, pa je vraćeno na staro. Za pravu ispravku treba prepraviti raspored hero sekcije, a ne dodati još jedno svojstvo. Na mobilnom, gde je saobraćaj ovog sajta, ta vrednost je ispod 0,01.

SEO, schema i lokalna vidljivost

Svaka strana ima svoj naslov, opis i kanonsku adresu, Open Graph i Twitter kartice, i strukturirane podatke koji odgovaraju onome što je na njoj. Naslovna i servisne strane nose tip Plumber sa adresom, telefonom, radnim vremenom od 00:00 do 23:59 svih sedam dana i područjem rada. Strana o opštinama nabraja dvadeset upravnih oblasti kao područja koja se opslužuju. Pitanja koja klijentu stvarno stižu — koliko košta odgušenje, kakva je garancija, šta je WOMA sistem — zapisana su kao FAQPage, pa mogu da se pojave direktno u rezultatima pretrage.

Prošla su i dva prolaza kroz W3C validator. Prvi je pokazao četiri do šest grešaka po strani na svih petnaest proverenih; posle drugog ih je nula na svima. Greške nisu bile kozmetičke koliko su bile zarazne — jedan višak zatvarajuće oznake stajao je u zajedničkom uključivanju završne trake, pa se ponavljao na svakoj strani sajta. Uz to: blok stilova koji je stajao direktno u podnožju umesto u CSS fajlu, oznaka za unapred učitavanje fonta sa pogrešnom vrednošću koju standard ne dopušta, i preskočeni nivoi naslova gde je iza H2 dolazio H4.

Na strani infrastrukture podignuta je DMARC politika sa posmatranja na karantin za sve poruke, dodati su CAA zapisi koji određuju ko sme da izda sertifikat za domen, i objavljen je security.txt sa kontaktom za prijavu ranjivosti. Sitemap je očišćen posle prolaza kroz Search Console — adrese koje se preusmeravaju nemaju šta da traže u sitemapu, jer ih Google odatle povuče, vidi preusmerenje i prijavi kao neindeksirane.

Panel za radne naloge

Uz sajt je na posebnom poddomenu izrađena aplikacija za vođenje posla. Ona nije javna i nije deo sajta — pretraživači je ne indeksiraju, a osetljivi direktorijumi su zatvoreni na nivou servera.

Radi se o jednostraničnoj aplikaciji koja se instalira na telefon kao prava aplikacija i radi i bez mreže, što u ovom poslu nije luksuz — pola intervencija je u podrumu ili kotlarnici bez signala. Sadržaj panela je onaj koji majstoru zaista treba:

  • Radni nalozi sa statusom — na čekanju, u toku, završen, neplaćen, otkazano — i prioritetom od niskog do hitnog. Uz svaki nalog idu slike sa terena i veza sa klijentom.
  • Klijenti odvojeno kao fizička lica i firme, sa više kontakata i PIB-om za pravna lica, i statistikom po klijentu: koliko je naloga bilo, koliko je plaćeno, koliko duguje.
  • Troškovi po kategorijama — materijal, gorivo, plate, alat, vozilo, kancelarija — koji se vezuju za konkretan nalog, pa se vidi šta je koji posao stvarno koštao.
  • Izveštaji: mesečni sa prihodom, troškom i razlikom, godišnji po mesecima i pregled učinka po majstorima.
  • Uloge: administrator vidi sve, radnik vidi samo svoje nezavršene naloge. Ko je na terenu ne treba da gleda tuđu naplatu.

Status „neplaćen" kao ravnopravna stavka pored „završen" je sitnica koja govori za koga je aplikacija pisana. Posao koji je gotov i posao koji je naplaćen nisu isto, i za majstora je ta razlika najskuplja stavka u godini.

Šta klijent na kraju ima

Sajt koji je njegov. Nema mesečne pretplate platformi, nema dodataka koji se raspadnu pri sledećem ažuriranju, nema licence koja ističe. Kod i baza stoje na serveru i mogu se prekopirati.

Praktično, izgleda ovako: čovek u pretrazi kuca uslugu i deo grada, otvara stranu koja govori tačno o toj usluzi, i broj mu je pod prstom pre nego što išta skroluje. Poziv stiže na jedan broj. Posao se upiše u panel na telefonu, sa slikom i cenom, i na kraju meseca postoji izveštaj umesto pretpostavke.

Sajt je u aktivnom održavanju. Poslednji pun prolaz obuhvatio je devetnaest strana na dva formata ekrana i panel: bez grešaka u konzoli, bez horizontalnog prelivanja, bez pokvarenih slika, svi sitemap URL-ovi dostupni, forma proverena do isporuke poruke. Ono što se menja, menja se na živom sajtu, uz rezervnu kopiju pre svake izmene.

// Sajt uživo

Zlaja 2015

Vodoinstalater i električar za Beograd i okolinu, dostupan 0-24 na jednom broju.

vodoinstalaterzlaja2015.rs

Često postavljana pitanja

Zašto majstoru uopšte treba sajt kada ga zovu preko preporuke?
Preporuka dovodi ljude koji već znaju ime. Sajt dovodi one koji ne znaju nikoga i u dva ujutru kucaju „odgušenje kanalizacije Beograd". To su dve odvojene grupe kupaca i druga se bez sajta ne dobija. Uz to, i onaj ko dobije broj preko preporuke obično proveri sajt pre nego što pozove.
Zašto svaka usluga ima svoju stranu, a ne sve na jednoj?
Zato što se u pretragu ne kuca ime zanata nego konkretan problem. Ko traži zamenu bojlera i ko traži pražnjenje septičke jame su različiti ljudi sa različitim pitanjima. Zasebna strana može da odgovori tačno na to pitanje, a zbirna strana ne može ni na jedno kako treba.
Da li se sajt otvara brzo na slaboj mobilnoj vezi?
To je bio uslov, a ne želja, jer se ovakav sajt otvara u podrumu i kupatilu. Kritični deo stilova ide ugrađen u samu stranu, slike su u savremenim formatima sa rezervom za starije brauzere, a analitika se pokreće tek posle prve interakcije da ne bi usporavala prvi prikaz.
Šta je panel i da li mi treba uz sajt?
Panel je zasebna aplikacija za vođenje naloga, klijenata, troškova i izveštaja, koja se instalira na telefon i radi i bez mreže. Nije obavezan uz sajt. Ima smisla kada broj poslova pređe granicu na kojoj sveska počne da laže, i naročito kada u ekipi radi više ljudi.
Može li se sajt kasnije proširiti novim uslugama ili opštinama?
Može, i to je predviđeno strukturom. Nova usluga je nova strana po istom obrascu sa svojim naslovom, opisom i strukturiranim podacima. Nove lokacije se dodaju u postojeću stranu o području rada, bez pravljenja praznih kopija koje pretraživač ionako obezvredi.
Kako se zna da je nešto stvarno popravljeno, a ne samo prijavljeno?
Merenjem pre i posle, na živom sajtu. Ocene brzine, broj grešaka u validatoru, vreme do prvog prikaza i ponašanje forme do isporuke poruke — sve se proverava dvaput. Ono što nije uspelo se takođe zapisuje: pomeranje sadržaja na desktopu je i dalje iznad granice i traži prepravku rasporeda, ne još jedno svojstvo u CSS-u.

Treba vam ovakav sajt?

Recite mi čime se bavite i šta sajt treba da uradi za vas — dobijate fiksnu ponudu i rok, u pisanoj formi.

Pozovi