Vizuālie lapu būvētāji (Elementor, Divi, WPBakery) pēdējos gados ir kļuvuši par populārāko instrumentu ātrai vietņu izveidei. Dizaineram vai mārketinga speciālistam tie šķiet kā brīnums: nav jāmācās programmēšana, visu var salikt ar peles vilkšanu un nomest uz ekrāna. Taču tas, kas no ārpuses izskatās ērti, iekšpusē visbiežāk ir tehniska katastrofa. Šajā gadījuma pētījumā (Case Study) apskatīsim reālu Latvijas industriālo iekārtu pakalpojumu uzņēmumu, kura mājaslapa tika pilnībā pārveidota no smaga vizuālā būvētāja uz tīru WordPress kodu.
Sākotnējā situācija un diagnostika
Uzņēmums vērsās pie mums ar klasiskām sūdzībām: "Mēs ieguldām ievērojamus līdzekļus Google Ads reklāmā, taču pieteikumu skaits ir zems. Mobilajos telefonos lapa atveras lēni, un meklēšanas pozīcijās mēs pastāvīgi zaudējam konkurentiem, kuriem ir daudz mazāk satura."
Veicot sākotnējo tehnisko auditu, tika konstatēti šādi rādītāji:
- Kopējais lapas svars: 5.8 MB tikai sākumlapai.
- DOM elementu skaits: 2,840 elementi vienā lapā (Google ieteicamais limits ir zem 800). Katrs vienkāršs virsraksts vai poga bija ietverta 8 līdz 10 ligzdotos
<div>konteineros. - Tīkla pieprasījumu skaits: 114 atsevišķi faili (38 dažādi CSS faili un 29 JavaScript skripti, kas savstarpēji bloķēja renderēšanu).
- Mobilais ielādes laiks (LCP): 4.8 sekundes reālā mobilajā 4G tīklā.
- Google PageSpeed rādītājs mobilajā: 29 no 100 punktiem (dziļi sarkanajā zonā).
"Vizuālais būvētājs rada ilūziju, ka jūs būvējat māju, taču patiesībā jūs būvējat māju no iepakojuma kartona kastēm, kur katra nākamā kaste ir ievietota iepriekšējā. Pārlūkprogrammai mobilajā telefonā ir jāatver visas 2,000 kastes, lai beidzot atrastu vienu teikumu. Kad šo nevajadzīgo slāni noņem un uzbūvē tīru koka un betona konstrukciju, rezultāts ir satriecošs."
Pārbūves process: No 50 spraudņiem uz tīru arhitektūru
Tā vietā, lai mēģinātu "optimizēt" neoptimizējamo ar kešatmiņas spraudņiem, tika pieņemts lēmums vietni pārbūvēt no pamatiem, saglabājot esošo saturu un URL struktūru:
1. Posms: Koda attīrīšana. Vizuālais būvētājs tika pilnībā demontēts. Tā vietā tika izstrādāts pielāgots, viegls WordPress bērna motīvs, izmantojot natīvo Gutenberg bloku sistēmu bez jebkādiem ārējiem bloku spraudņiem.
2. Posms: Stilu un skriptu konsolidācija. Visi 38 atsevišķie CSS faili tika aizstāti ar vienu kompaktu, minificētu stila failu (izmērs tikai 32 KB). JavaScript koda apjoms tika samazināts par 90%, atstājot tikai pašu nepieciešamāko mobilajai izvēlnei un interaktīvajām formām.
3. Posms: Attēlu konvertācija uz WebP. Visi smagie JPEG un PNG attēli tika konvertēti uz modernajiem WebP formātiem ar precīziem izmēriem, novēršot pārlūka nepieciešamību mērogot lielus attēlus.
4. Posms: Servera FastCGI mikrokešatmiņa. Nginx serverī tika uzstādīta tiešā FastCGI kešatmiņa, kas statiskās lapas servē tieši no RAM atmiņas mazāk nekā 50 milisekundēs bez PHP procesora noslodzes.
Pirms un Pēc rādītāju salīdzinājums
| Tehniskā metrika | PIRMS (Vizuālais būvētājs) | PĒC (Tīrs WordPress kods) |
|---|---|---|
| Sākumlapas kopējais svars | 5.8 MB | 640 KB (-89%) |
| DOM elementu skaits | 2,840 elementi | 420 elementi (-85%) |
| Tīkla pieprasījumu skaits | 114 pieprasījumi | 18 pieprasījumi (-84%) |
| Mobilais ielādes laiks (LCP) | 4.8 sekundes | 0.8 sekundes |
| Google PageSpeed (Mobilais) | 29 / 100 (Sarkans) | 98 / 100 (Zaļš) |
Biznesa rezultāti pēc 90 dienām
Tehniskie skaitļi paši par sevi ir skaisti, taču uzņēmumam svarīgākais ir biznesa ieguvums. Trīs mēnešus pēc jaunā koda ieviešanas tika novēroti šādi rezultāti:
- Atteikumu rādītāja (Bounce Rate) kritums mobilajās ierīcēs: Lietotāji vairs nepameta vietni baltā ekrāna gaidīšanas laikā.
- Google Ads konversiju pieaugums: Tā kā nolaišanās lapa atvērās uzreiz, reklāmas kvalitātes rādītājs pieauga, samazinot maksu par klikšķi.
- Organisko pozīciju kāpums: Google meklētājs novērtēja izcilos Core Web Vitals rādītājus, kā rezultātā uzņēmuma atslēgvārdu pozīcijas pirmajā desmitniekā palielinājās bez papildu saišu pirkšanas.
Ja arī jūsu uzņēmuma mājaslapu nomoka lēna darbība un lieks koda slogs, piesakiet profesionālu mājaslapas ātruma auditu vai uzziniet vairāk par mūsu mājaslapu izstrādes pieeju. Detalizētus koda efektivitātes salīdzinājumus skatiet rakstā par tīra koda un lapu būvētāju atšķirībām.