Hetkel on Elementor v4 Apha staatuses, ehk siis mõeldud testimiseks ja katsetamiseks, kuid mitte veel live saitidel kasutamiseks. Vaatasime üle, mida v4 muudab ja kuidas see muudab Elementori kasutamist – kas asjad lähevad paremaks või halvemaks?
Etteruttavalt saame öelda, et asjad lähevad Elementor kasutajate jaoks paremaks. Elementor V4 on üks suurimaid uuendusi kogu plugina ajaloos. See ei ole lihtsalt järjekordne versioon – see on täielik ümbermõtestamine sellest, kuidas WordPressis visuaalselt veebilehti ehitatakse. Uus CSS‑first raamistik, Atomic Editor ja täiesti uus töövoog muudavad veebiehituse kiiremaks, ühtlasemaks ja professionaalsemaks. Allpool vaatame üle võtmetähtsusega muudatused, millega peaksid kindlasti kursis olema ja kasutusele võtma.
Muudatustega peaks Elementor muutuma:
- Kiiremaks laadimiselt
- Puhtamaks koodilt
- Paindlikumaks disainilt
Vähem DOM kirjeid – kiirem laadimine
Üks suurimaid tehnilisi muudatusi Elementor v4-s on DOM‑struktuuri märgatav puhastamine. Varasemates versioonides tekitas Elementor iga sektsiooni, veeru ja vidina ümber hulga lisakonteinereid, mis paisutasid HTML‑i ja aeglustasid lehe laadimist. V4 uue CSS‑first arhitektuuri ja Atomic Editori tõttu eemaldatakse suur osa nendest tarbetutest wrapper‑elementidest. Tulemus on oluliselt väiksem DOM, mis tähendab kiiremat renderdamist, paremaid Google Pagespeed tulemusi ja sujuvamat kasutajakogemust.
Toome välja näite, kuidas vanas versioonis kuhjatakse elemendi ümber palju klasse ja div wrappereid, kuid uues versioonis need kõik eemaldatakse. Kas märkad erinevust? Kui lehel on ainult üks element, siis poleks vahet, aga kui lehel on 100 elementi, siis koguneb üleliigne kood ja selle laadimine võtab oluliselt rohkem aega, kui puhas kood.
v3 versioonis:
<div class="elementor-widget-wrap">
<div class="elementor-widget-container">
<div class="elementor-heading-title">
<h2>Pealkiri</h2>
</div>
</div>
</div>v4 versioonis:
<h2 class="e-heading">Pealkiri</h2>Suuri ja pikki DOM kirjeid on Elementorile ette heidetud ammu juba, ning konkurendid (nagu Breakdance, Bricks Builder) on kasutamas ammu juba väiksemat DOM kirjeid.
Globaalsed klassid – vähem CSS-i
Elementor V4 uus klassipõhine stiilisüsteem lahendab ühe pikaajalise probleemi: iga elemendi individuaalsed inline‑stiilid tekitasid tohutult korduvat CSS‑i. V4-s saab kasutaja määrata ühe klassi, mis sisaldab kõik vajalikud stiilid, ja rakendada seda klassi ükskõik millisele elemendile. Selle tulemusel ei genereeri Elementor enam igale vidinale eraldi CSS‑blokki, vaid kasutab ühtset, korduvkasutatavat stiili. See vähendab nii CSS‑faili mahtu kui ka brauseri tööd, sest vähem stiile tähendab kiiremat renderdamist ja paremat jõudlust. Lisaks tagab klasside kasutamine, et kogu saidi disain püsib ühtlane – kui muudad klassi stiili, uuenevad kõik selle klassiga elemendid korraga.
See tegelikult pole veebiarenduses midagi uut, sest nii peakski üks korralik veebileht olema ehitatud – korduvkasutatavate klassidega. Aga tüüpiline Elementor kasutaja seda ei osa CSS-i kirjutada ja seega pidi Elementor võimaldama igat nuppu eraldi muuta ja pani stiili (ehk CSS kirjed) selle külge. Muidugi on olemas globaalsete seadete all samuti nuppude eraldi seadistamine, mis varasemalt juba aitas, aga uus klasside põhine kasutamine teeb asja mitte CSS teadliku inimese jaoks oluliselt lihtsamaks.
v3 versioonis tuli iga nupuga stiil kaasa, kui see erines globaalsest seadistusest:
<a class="elementor-button" style="padding:20px; background:#ffffff; font-size:24px;">
<a class="elementor-button" style="padding:20px; background:#ffffff; font-size:24px;">v4 versioonis lisatakse nupule ainult klass:
<a class="btn-primary">Nupp</a>
ja CSS defineeritakse üks kord stiilifailis:
.btn-primary { padding:50px; background:#ffffff; font-size:24px; }
Eraldi disan igale ekraani vaatele – vähem HTML elemente
Elementor V4 üks suur kasutusmugavuse võit on täiustatud responsiivne stiilisüsteem, mis lubab sama elementi kujundada arvuti, tahvli ja mobiili jaoks täiesti erinevalt – ilma et peaks looma eraldi koopiaid või peitma elemente seadmete kaupa. Tänu uuele CSS‑first arhitektuurile ja klassipõhisele lähenemisele saab iga seadme jaoks määrata oma stiilid (näiteks paigutus, suurused, värvid, joondus), mis rakenduvad ainult vastavale breakpoint’ile. See teeb disainimise kiiremaks, hoiab DOM‑i puhtamana ja vähendab CSS‑i mahtu, sest kõik seadmespetsiifilised stiilid on koondatud ühte elementi, mitte mitmesse duplikaati.
Lihtsamalt öeldis pidi vanas versioonis mobiilivaate jaoks tegema koopia nupust. Nüüd oli kaks nuppu, millest üks tuleb mobiilivaates ära peita ja teine arvuti ja tahvli vaates. Ja siis lisama nupule soovitud muudatused. See oli tülikas ja ebapraktiline.
Osavamad arendaja (kes vähegi CSSi oskavad) lisasid @media CSS kirjed ning muutsid sedasi nupu disaini vastavalt erkaani suurusele, aga tava Elementori kasutajale käis see üle jõu. Uus lahendus võimaldab aga suhteliselt mugavalt rakendada igale ekraanile samale elemendile soovitud disaini ja Elementor ise genereerib klassi vastavalt vaatele ning lisab selle nupule, mille tulemusena on igas ekraanimõõdus sama element erineva disainiga.
v3 versioonis tuli lisada iga ekraani jaoks eraldi nupp, kui oli soov disaini nupul teisiti kuvada:
<!-- Desktop & Tablet Button -->
<a class="elementor-button desktop-tablet-only">
Osta kohe
</a>
<!-- Mobile Button -->
<a class="elementor-button mobile-only">
Osta kohe
</a>
v4 versioonis jääb ainult üks HTML element, mida kuvatakse erinevalt igal ekraanil vastavalt lisatud disainile:
<a class="btn-primary">Osta kohe</a>
v3 vs v4 reaalne test – kas tulemused on nii nagu räägitakse?
Viisin läbi kiire testi, et saada aru, kuidas v4 tehnilised muudatused aitavad säästa lehe mahult ja parendada lehe laadimiskiirust. Kasutatud on tasuta Elementor versioonis leiduvaid elemente. NB! Meeles tuleb pidada, et see test on koostatud hetke seisu järgi ja tulemused võivad ajas muutuda.
Testkeskkond ja testimine
Testimiseks paigaldasin alamdomeenile puhta WordPressi, kuhu installisin Elementor plugina (versioon 3.35.7) ning teemaks panin “Hello Elementor” (versioon 3.4.7). Kõik seadeid jäid samaks. Ühel juhul aktiveerisin v4 versiooni, teisel juhul jäi vana versioon ehk v3. Ja seejärel lisasin mõned elemendid ja vaatasin, kuidas lehtede struktuurid välja näevad. Teste jooksutasin mitu korda ja märkisin kesmise tulemuse. Huvitav oli asjaolu, et Youtube video-le on peale pandud elemendist “Lazy load” ja see muutis lehe laadimise kiiruse oluliselt konstantselt paremaks. Seega väike vihje siin on kasutada videote puhul lazy loadingut.
Tehnilised näitajad:
- PHP 8.3
- WordPress 6.9.4 (puhas install)
- Elementor 3.35.7 (ainus aktiveeritud plugin)
- Hello Elementor 3.4.7 (teema)
Lehe truktuur oli suhteliselt lihte. Väike erinevus tuleneb mõningatest nüanssidest, aga välimus ei mõjuta DOM struktuuri (lehele olid lisatud täpselt samad elemendid. Ka kiirust need erinevused ei mõjuta, sest pole vahet, kas on helesinine või sinine, värvikood on lihtsalt teine.
Lehe struktuur oli mõlemal sama, ainult ühel juhul oli ehitatud v3 elementidega, teisel juhul v4 elementidega. Selgituseks, et v4 avab uued elemendid, mis on ka eraldi tähistatud elementide loendis.
Test lehtede struktuur oli sama mõlemal juhul ja koosnes järgnevatest HTML tägidest:
<section>
<h1></h1>
<p></p>
<a></a>
<img>
</section>
<section>
<h2></h2>
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</section>
<section>
<h2></h2>
<p></p>
<div>
<img>
<img>
</div>
</section>
<section>
<h2></h2>
<p></p>
<p></p>
<a></a>
</section>
v3 leht
v4 leht
Tulemused
Tulemused kiiruse osas olid üllatavad, ootasin paremat minekud v4-le.
v3 tulemused
- Lehe maht failina ainult HTML osa: 20,1KB
- Pagespeed kiirus mobiilis/arvutis: 88 / 99
v4 tulemused
- Lehe maht failina ainult HTML osa: 13,0KB
- Pagespeed kiirus mobiilis/arvutis: 89 / 96
Kokkuvõte – hetkel pole olulist vahet
Elementor v4 ei ole lihtsalt uuendus – see on täielik uuestisünd. Uus CSS‑first arhitektuur, Atomic Editor, puhtam DOM ja klassipõhine stiilisüsteem muudavad veebilehtede ehitamise märgatavalt kiiremaks, kergemaks ja professionaalsemaks. Seal, kus v3 vajas duplikaate, inline‑stiile ja keerulisi struktuure, saab v4 hakkama ühe elemendi ja korduvkasutatavate klassidega.
Tulemuseks on väiksem HTML, mida tõestas ka tehtud test kahe versiooni vahel. Lehe maht vähenes tänu puhtamale DOM elementidele 35% (20,1KB vs 13,0KB). Siiski ei avaldunud see lehe laadimiskiiruses Pagespeed testides. Meeles tuleks pidada, et meie test leht on üpris lihtne, reaalselt tehtaval lehel aga võib elemente rohkem olla ning seal toob klasside lisamine suuremat kasu. Loodetavasti siiksi suudab Elementori tiim lihvida v4 niivõrd paremaks, et Elementor lehe saab Pagespeed testis 70-90 punkti vahele ilma WP Rocket pluginata (hetke seisuga on see pigem 45-65 vahel).
Kes aga soovib, saab vaadata SIIT Elementori enda v4 tutvustavat videot.
