Trubači Stars Beograd — sajt trubačkog orkestra za svadbe i proslave
Klijent je imao dva sajta koja su se takmičila jedan sa drugim i tražio je treći. Umesto trećeg domena, izmerena su postojeća dva — pa je jedan od njih ispražnjen i sagrađen ispočetka kao sajt samo za Beograd, sa stranom za svaku opštinu.
- Klijent
- Trubači Stars — orkestar Stefana Tenora
- Delatnost
- Trubački orkestar za svadbe i proslave
- Područje
- Beograd, 15 opština
- Tip
- Višestrani sajt, 28 adresa
- Tehnologije
- PHP 8.3 · nginx · vanilla JS · JSON-LD
- Status
- Živ sajt, u aktivnom održavanju
U ovom tekstu
Ko su Trubači Stars
Trubači Stars su trubački orkestar Stefana Tenora. Baza je Leskovac, a svira se po celoj Srbiji — svadbe, slave, krštenja, rođendani i sve ostalo što se kod nas slavi uz trubu. Orkestar na sajtu navodi petnaest godina rada i preko pet stotina nastupa.
Sastav se bira prema prostoru i prilici, od četiri do osam muzičara: prva i druga truba, tenor horn, tuba, doboš i tapan. Postava se popunjava tim redom — četvorica pokrivaju kućnu proslavu i manju salu, šestorica pun svadbeni protokol, osmorica velike sale i celovečernje proslave. Svira se akustično, trubi ne treba struja, što je za dvorište, crkvu i baštu praktična, a ne romantična razlika. Ceo sastav i način rada stoje na strani o orkestru.
Beograd je grad u koji orkestar putuje najčešće. To je i razlog zbog kog ovaj sajt postoji — ne kao još jedna prezentacija, nego kao beogradski deo posla izdvojen na svoje mesto.
Zašto je Beograd dobio sopstveni sajt
Klijent je imao dva domena i tražio treći, sa obrazloženjem da će se tako bolje rangirati. Umesto da se treći sajt napravi, prvo su izmerena postojeća dva — kroz Search Console i kroz logove za četrnaest dana.
Merenje je pokazalo suprotno od očekivanog. Domen koji je bio namenjen svadbama imao je dvadesetak organskih klikova, a Google za njega nije imao nijedan terenski podatak o brzini — Googleova sopstvena potvrda da na sajt ne dolazi dovoljno ljudi da bi se uopšte merio. Za svadbene upite rangirao se drugi sajt, Trubači za slavlja, a ne domen napravljen baš za svadbe.
Razlog je bio vidljiv čim se uporedi. Šezdeset gradskih strana na oba domena imalo je doslovno isti H1, a na svadbenom su stajale i strane o slavama, krštenjima i ispraćajima — dakle isti sadržaj, ista namera, dva domena. Google je birao jedan i potiskivao drugi. Treći domen bi tu grešku samo ponovio.
Predlog je bio drugačiji: razdvojiti namere, ne umnožavati domene. Sestrinski sajt zadržava celu Srbiju i sve prilike, a ovaj se prazni i gradi ispočetka kao beogradski hub — jedan grad, petnaest opština, sve strane o Beogradu i ničemu drugom. Klijent je pristao, i to je bilo teže od same izrade: odustati od trećeg sajta znači priznati da problem nije bio nedostatak domena.
Kako je sajt raspoređen
Sajt ima dvadeset osam adresa. Naslovna je hub za Beograd, ispod nje idu strane za petnaest opština, zatim svadbeni protokol u Beogradu, cenovnik, dva vodiča kroz izbor i cenu, pa uobičajene strane — galerija, repertoar, o nama, kontakt, česta pitanja — i dve pravne.
Opštinske strane su bile najosetljiviji deo. Petnaest strana koje se razlikuju samo po imenu opštine za Google su jedna strana ponovljena petnaest puta. Zato svaka nosi svoja naselja — Blokovi, Bežanija i Ledine za Novi Beograd; Gardoš, Batajnica i Altina za Zemun; Kaluđerica, Leštane i Vinča za Grocku — tipične prilike za taj kraj i konkretan dogovor oko dolaska. Parking u bloku na Novom Beogradu nije isti problem kao sokak u Grockoj, i tako i piše.
Posle pisanja je izmerena stvarna sličnost teksta među tim stranama, po petorkama reči: prosečno oko devet odsto, najviše četrnaest između dve najsličnije. To je razlika koja se vidi i čitanjem, ne samo u tabeli.
Lazarevac i Obrenovac namerno nemaju strane ovde — te dve drži sestrinski sajt i tamo već rangiraju. Nema smisla praviti sebi konkurenciju na mestu gde nešto radi.
Cena koja piše pre poziva
Na cenovniku stoji zapažanje koje je i bilo povod za taj deo sajta: većina beogradskih orkestara ne objavljuje nijednu cifru. Odluka je bila da se objavi ono što se sa sigurnošću može reći — odakle cena kreće i šta je pomera — a da se konačan iznos kaže u toku poziva, kada se zna datum, mesto i satnica.
Prva verzija je imala tri paketa sa cenom po kartici, sa istaknutom srednjom. Vlasnik ih je posle nedelju dana povukao, i imao je pravo: paket obećava da je izbor sa spiska, a on cenu računa po satnici, sastavu i datumu. Paketi su obrisani sa cele strukture — sa naslovne, sa cenovnika, sa svih opštinskih strana i iz strukturiranih podataka — a ostala je samo donja granica i objašnjenje šta je pomera naviše.
Ono što je zauzelo mesto tabele je korisnije od nje. Cenovnik sada ima blok „Šta je uračunato u dogovoreni iznos" — dolazak trideset do šezdeset minuta ranije, dogovor repertoara i učenje pesme po narudžbi, sopstveni instrumenti, usaglašavanje satnice sa salom, kumovima i fotografom — i blok „Šta garantujemo". To su stavke koje se drugde naplate posebno ili se pojave tek na dan proslave.
Poziv umesto forme
Sajt nema kontakt formu. To nije previd nego odluka klijenta, doneta na osnovu podatka: forma na starom sajtu za četrnaest dana nije primila nijedan upit, a njen dnevnik je bio fajl od nula bajtova. Posao se dogovara telefonom, u jednom razgovoru, i sajt je poravnat sa tim umesto da se pravi da nije tako.
Zato je svaki poziv na akciju telefonski broj, sa Viberom i WhatsAppom na istom broju, a druga linija stoji u podnožju svake strane. Da bi se znalo koliko poziva sajt zaista donosi, klik na broj šalje kratku poruku serveru preko sendBeacon i upisuje se u dnevnik poziva. Bez kolačića i bez tuđeg alata za merenje — jedan red u fajlu koji rotira zajedno sa ostalim logovima sajta.
Umesto forme, na dnu svake strane stoji isti blok: recite datum i mesto, cenu znate odmah. Tu piše i da se za sezonu od maja do oktobra termini zauzimaju dva do tri meseca unapred — informacija koja sprečava razočaranje pre nego što nastane.
Tehnička izvedba
Sajt je pisan u PHP-u 8.3, bez ijednog okvira i bez sistema za upravljanje sadržajem. Zajednički delovi stoje u includes/ — glava, navigacija, podnožje, blok za rezervaciju i nekoliko pomoćnih funkcija — pa se izmena u navigaciji radi jednom.
To zvuči očigledno dok se ne uporedi sa onim što je zatečeno. Stari sajt na istom domenu imao je osamdeset tri samostalna PHP fajla, bez ijednog zajedničkog dela. Svaka izmena kroz ceo sajt bila je skripta nad osamdeset tri fajla, i svaki takav prolaz je bio prilika da nešto ostane u dva ili tri različita oblika. Kada se to desilo sa strukturiranim podacima, ispravka je bila poseban posao za sebe.
Kod je namerno mali: jedan CSS fajl od oko dvadeset šest kilobajta i jedan JavaScript fajl od oko sedam, čist vanilla, bez ijedne biblioteke. Ikonice nisu font nego jedan ugrađen SVG sprite iz kog se crta preko <use> — FontAwesome sa starog sajta nije prenet, a sa njim ni njegovi fajlovi od preko dvesta kilobajta. Fontovi Playfair Display i Poppins hostuju se sa istog servera, i to samo u težinama koje se stvarno koriste.
Tri pomoćne funkcije nose ceo sistem: jedna štiti izlaz, druga sklapa srcset iz postojećih verzija slike, a treća pravi FAQ schema iz istog niza pitanja iz kog se ispisuje i vidljivi tekst na strani. Poslednja je najvažnija — to je jedini pouzdan način da se strukturirani podaci nikad ne raziđu sa onim što posetilac čita.
Detalj koji je koštao vremena: ta funkcija se ne može pozvati iz same strane. Strane grade svoj FAQ pre nego što uključe zaglavlje u kom funkcija živi, pa je poziv iz strane fatalna greška. Rešeno tako što strana samo opisuje pitanja, a zaglavlje ih pretvara u schema — jedno mesto, dvadeset jedna strana.
Nit-linija i ulazne animacije
Kroz ceo sajt ide tanka zlatna linija uz levu ivicu, sa malim rombom na svakoj sekciji. Linija se iscrtava kako se skroluje, a rombovi se pale kada sekcija uđe u vidno polje. To je jedini ukras na sajtu i namerno je jedini.
Zanimljivo je čime je izveden: linija ne koristi nijednu liniju JavaScript-a. Crtanje ide CSS animacijom vezanom za skrol, unutar @supports upita — brauzeri koji to ne podržavaju dobiju istu liniju, samo statičnu. Isto važi za posetioce koji su u sistemu isključili animacije.
Ulazne animacije sekcija imale su skuplju grešku. Uobičajen obrazac je da se sve sakrije jednom klasom na <html> pa se otkriva redom — što znači da i element u prvom ekranu čeka odloženu skriptu da bi uopšte bio naslikan. Na cenovniku je to bilo osamsto trideset dve milisekunde čistog čekanja pre nego što se glavni naslov pojavi. Sada se skriva samo ono što je ispod pregiba: skripta pri startu izmeri gde je koji element i klasu dodeli samo onima van ekrana, a prvi ekran se animira čistim CSS-om iz kritičnog bloka.
Druga zamka iz istog kruga vredi da se zapiše. Prag okidanja bio je postavljen u procentima visine ekrana, pa je na velikom desktop prozoru poslednji red u podnožju — onaj sa autorstvom i pravnim linkovima — u celini upadao u isključeni pojas i nikada se nije prikazao. Na telefonu je radio uredno, jer ga lepljiva traka sa brojem telefona podigne uvis. Otud pravilo koje je ostalo: red sa autorstvom i pravnim linkovima nikada ne sme da zavisi od JavaScript-a.
Brzina
Naslovna je na Googleovom mobilnom testu prvog dana bila sedamdeset sedam, sa najvećim iscrtavanjem na 3,7 sekunde i pomeranjem sadržaja 0,24. Posle popravki: sto, iscrtavanje 1,8 sekunde, pomeranje nula, blokiranje glavne niti deset milisekundi. Cenovnik i proverena opštinska strana takođe sto.
Pomeranje sadržaja imalo je jedan uzrok i bio je poučan. Padajući meni sa petnaest linkova stilizovan je samo u glavnom CSS-u koji se učitava asinhrono, pa se do njegovog dolaska renderovao rasklopljen i gurao ceo sadržaj naniže. Pravilo koje iz toga sledi važi za svaki sajt: svaki padajući meni mora imati sklopljeno stanje u kritičnom CSS-u, bez izuzetka.
Ostatak dobitka došao je redom. Googleova skripta za merenje, sto sedamdeset kilobajta, prebačena je sa učitavanja u zaglavlju na učitavanje tek pošto se strana učita. Funkcija koja proverava koje su sekcije ušle u ekran razdvojena je na prvo sva merenja pa tek onda upis klasa — jer svaki upis obori sledeće merenje i raspored se računa iznova, za svaki element. Slušalac skrola se ne kači uopšte kada brauzer podržava IntersectionObserver.
Slike idu u AVIF i WebP, u nekoliko širina i sa punim srcset-om, sa upisanim dimenzijama da ne pomeraju sadržaj dok se učitavaju. Jedanaest snimaka u galeriji ne dovlači YouTube dok se ne klikne — do tada je tu samo sličica i dugme. Galerija sa jedanaest ugrađenih plejera bila bi ubedljivo najsporija strana na sajtu.
Strukturirani podaci i vidljivost
Sajt nosi MusicGroup za orkestar, WebSite i Service na naslovnoj, LocalBusiness na svakoj opštinskoj strani i FAQPage na dvadeset jednoj strani. Svaki opštinski zapis vezuje se na orkestar preko @id reference, umesto da ga ponavlja u celini — tako postoji jedan orkestar sa petnaest područja, a ne petnaest orkestara.
Najveći nasleđeni rizik nije bio tehnički. Na oba domena je u strukturiranim podacima stajala ocena pet od pet sa sto dvadeset sedam glasova — na sto pedeset osam strana, bez ijedne prikazane recenzije koja bi je pokrila i bez profila sa kog bi mogla da dođe. To je izmišljena ocena, Google je tretira kao spam u strukturiranim podacima, a ishod je ručna kazna nad domenom. Skinuta je sa svih strana, zajedno sa vidljivom tvrdnjom o oceni, a na njeno mesto je stavljen podatak koji se može proveriti: sastav od četiri do osam muzičara.
Slično je bilo i sa lokalnim podacima. Pet opštinskih strana nosilo je adresu u Leskovcu uz beogradske geografske koordinate, u istom bloku — protivrečnost u dve susedne linije. Orkestar u Beogradu nema adresu, pa je adresa uklonjena umesto izmišljena, a ostalo je područje delovanja.
Presek nad svih dvadeset osam strana posle svega: kanonske adrese se poklapaju sa sitemapom na svih dvadeset osam, nema dupliranih naslova, opisa ni H1, sve slike imaju alternativni tekst i dimenzije, a svako pitanje i odgovor iz FAQ schema postoji i u vidljivom tekstu strane. Sajt ima llms.txt sa tačnim podacima, a robots.txt izričito dozvoljava botove jezičkih modela — pretraga se sve češće dešava i tamo.
Preusmerenja — da se ne izgubi ono što već rangira
Prelazak je bio najosetljiviji deo posla, jer stari sajt na tom domenu nije bio prazan. Imao je preko šezdeset gradskih strana koje su, koliko-toliko, bile u Googleovom indeksu. Obrisati ih znači baciti sve što je taj domen do tada zaradio.
Rešenje je bila mapa trajnih preusmerenja u nginx-u. Trinaest svadbenih strana prethodno je prevedeno na šablon sestrinskog sajta i objavljeno tamo pod istim slugovima, pa preusmerenja idu na njih. Šezdeset dve gradske strane, strana o ceni i strana o orkestru takođe idu na sestrinski sajt, na isti slug. Stara adresa trubaci-beograd vodi na novu naslovnu, jer je sada ona ta strana.
Jedan detalj je mogao sve da obori. Na sestrinskom sajtu je od ranije stajalo pet preusmerenja u suprotnom smeru — sa njega ka ovom domenu. Da su ostala, dobila bi se petlja u kojoj se dva servera međusobno preusmeravaju dok brauzer ne odustane, i to na stranama koje su donosile najviše poseta. Uklonjena su pre nego što je nova mapa uopšte postavljena.
Ceo stari sajt je premešten u stranu, ne obrisan, i i dalje stoji na serveru zajedno sa rezervnom kopijom napravljenom pre svakog koraka. Ako se ispostavi da je nešto propušteno, ima odakle da se izvadi.
Šta klijent na kraju ima
Dva sajta koja se više ne takmiče. Sestrinski drži celu Srbiju i sve prilike, ovaj drži Beograd — podela koju razume i posetilac i pretraživač.
Prvi signal je stigao brzo: u Search Console-u je na ovom domenu upit „trubači Beograd" zabeležio rast prikaza od pet stotina osamnaest odsto. To je rani signal, a ne ishod — pun efekat ovakvog razdvajanja meri se nedeljama, i tako je i rečeno klijentu.
Praktično, klijent ima sajt koji se otvara odmah i na slaboj vezi, na kom piše odakle cena kreće, koji za svaku beogradsku opštinu ima svoju stranu sa naseljima i tipičnim prilikama, i na kom svaki poziv na akciju vodi na telefon — jedini kanal preko kog se posao zaista dogovara. Kod stoji na serveru i u repozitorijumu, bez pretplate, bez provizije i bez dodataka koji se raspadnu pri sledećem ažuriranju.
Ostalo je i ono što se ne rešava kodom, i to je rečeno otvoreno, bez ulepšavanja. Google Business Profile ne postoji, a to je najjača poluga za lokalne upite u Beogradu. Jedanaest snimaka sa nastupa stoji na tuđem kanalu umesto na kanalu orkestra, pa se video podaci ne mogu prijaviti Google-u dok se snimci ne prebace. Oboje je na klijentu i oboje čeka njegovu odluku, a ne novu izmenu na sajtu.
Sajt u slikama
Trubači Stars — Beograd
Trubački orkestar Stefana Tenora — svadbe, slave i proslave u svim beogradskim opštinama.
trubaci-trubacizasvadbe.rsČesto postavljana pitanja
Zašto dva sajta, a ne jedan veliki?
Zašto sajt nema kontakt formu?
Zašto uopšte objavljivati cenu ako se ionako dogovara telefonom?
Mogu li se opštinske strane dodati ili izmeniti kasnije?
Šta znači ocena pet od pet koja je uklonjena sa sajta?
Zašto bez WordPress-a?
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.