Elementor 3.0: Cum am îmbunătățit performanța

Căutăm întotdeauna noi modalități de a îmbunătăți viteza și performanța site-urilor web Elementor. În cea mai nouă versiune a Elementor - Elementor 3.0, ne-am concentrat foarte mult pe îmbunătățirea performanței paginilor dvs.

Mulți factori afectează viteza de încărcare a unui site web. Factori precum furnizorul de găzduire, tema, numărul de pluginuri, cache, cod HTML și altele.

Deși nu putem controla factorii externi, putem (și putem) să lucrăm pentru a ne asigura că produsul nostru este optimizat cât mai bine posibil. Cu toate acestea, anumite modificări necesită momentul potrivit pentru a fi implementate.

Unele îmbunătățiri - cum ar fi redarea CSS, au un potențial scăzut de a provoca probleme, în timp ce alte modificări - cum ar fi eliminarea elementelor DOM, au un potențial ridicat de a sparge unele site-uri web și pot cauza probleme.

Introducerea modificărilor de rupere este ceva care se face în mod tradițional numai în versiunile majore, așa că am profitat de această ocazie pentru a introduce aceste modificări și îmbunătățiri și prin reducerea elementelor DOM și îmbunătățirea redării CSS, facem un pas mai aproape de performanțe mai bune.

Elementor are două moduri de redare a CSS-ului site-ului web:

1. Imprimarea acestuia într-o etichetă <style> din DOM.

2. Scrierea acestuia într-un fișier CSS care va fi încărcat cu pagina

CSS scris în fișiere, de exemplu, este complet static. Este tipărit o singură dată într-un fișier, iar acel fișier este actualizat numai atunci când se face o modificare a conținutului paginii. Dar ce zici de conținutul dinamic?

Unele conținuturi dinamice includ propriul CSS, cum ar fi culorile și imaginile (atunci când sunt utilizate ca valori ale imaginii de fundal). Conținutul dinamic, cum ar fi câmpurile personalizate, este deconectat de la conținutul paginii și poate fi schimbat în afara editării postării sau a paginii în Elementor Editor.

Deci, ce se întâmplă atunci când valorile dinamice includ CSS care trebuie tipărite la fiecare încărcare a unei pagini?

Până la Elementor 3.0, ori de câte ori a fost încărcată o pagină, modulul Elementor Dynamic Tags a scanat întreaga pagină pentru orice elemente care includ conținut dinamic.

Dacă s-a găsit conținut dinamic, modulul a preluat valorile dinamice ale acelui element, a scris CSS-ul relevant într-o etichetă <style> și l-a injectat în DOM.

Acest lucru, așa cum este descris în acest post, este un proces costisitor, care costă timp prețios de încărcare.

În Elementor 3.0, am schimbat modul în care gestionăm procesul de redare a CSS dinamic. La prima încărcare a unei pagini, când CSS-ul static al paginii este redat, creăm un cache care include o listă a elementelor paginii care au valori CSS dinamice.

Apoi, ori de câte ori pagina respectivă este vizitată, preluăm lista elementelor dinamice din cache și le redăm imediat. În loc să trebuiască să iterați toate elementele paginii de fiecare dată când pagina se încarcă - obținem aceste elemente din lista deja disponibilă a elementelor dinamice. Acest lucru economisește mult timp de rulare și face ca încărcarea paginii să fie considerabil mai rapidă.

Iată câteva rezultate din testele pe care le-am efectuat pe Blackfire pentru a examina diferența înainte și după optimizarea noastră: