Cum Elementor prioritizează și îmbunătățește performanța site-urilor web

Publicat: 2021-04-26

Să vorbim despre Foaia de parcurs a produselor Elementor pentru 2021, în special optimizarea performanței. Deși continuăm să planificăm și să dezvoltăm noi funcții interesante solicitate de comunitatea noastră, anul acesta ne-am făcut misiunea de a îmbunătăți performanța site-urilor utilizatorilor noștri. În această postare, aș dori să vă împărtășesc câteva dintre acțiunile pe care le-am întreprins deja în vederea atingerii acestui obiectiv și să vorbesc puțin despre ceea ce va urma în anul următor.

Performanța site-urilor web a fost o problemă pentru creatorii de web încă din zorii internetului. Fiind eu însumi creator de web, aș pune întotdeauna întrebări precum:

  • „Site-ul meu este prea lent? Îmi determină utilizatorii să părăsească sau să-mi afecteze clasamentul Google? ”
  • „Ar trebui să renunț la o anumită funcționalitate pentru a îmbunătăți viteza site-ului?”
  • Și bineînțeles: „Ce naiba îmi provoacă încă probleme de performanță? Am crezut că am acoperit toate bazele aici! ”

Deci da, obținerea de performanțe stelare dintr-un site web a fost întotdeauna o provocare pentru creatorii de web, indiferent de platforma sau instrumentele pe care le-am folosit. Cu atât de mulți factori relevanți care afectează performanța, nu este întotdeauna ușor să izolăm problema reală, darămite să găsim o soluție pentru aceasta. Tocmai de aceea am creat acest curs video format din cinci părți despre performanță . În această serie, analizăm fiecare factor important care poate afecta performanța site-ului dvs., indiferent dacă este legat de Elementor sau nu, și vă vom prezenta cum să-l optimizați.

Pentru a face lucrurile cu adevărat interesante, Google a anunțat recent că performanța site-ului va juca acum un rol oficial în algoritmul său de clasare. Acest lucru pune problema performanței în centrul atenției, ridicând îngrijorări în rândul proprietarilor de site-uri web din întreaga lume. De aceea, în ultimele șase luni, echipele noastre de cercetare și dezvoltare și SEO au lucrat neobosit pentru a ne asigura că site-urile web Elementor trec prin această actualizare și trec cu brio.

Când vine vorba de misteriosul algoritm Google, știm că ar fi nevoie de mult mai mult decât cuvântul nostru pentru a vă face să vă simțiți în siguranță. Prin urmare, ca serviciu pentru utilizatorii noștri și pentru comunitatea creatorilor de web, vom găzdui un seminar web gratuit de performanță web cu experți SEO de top pentru a discuta despre viitoarea schimbare. Aceasta nu numai că va acoperi actualizarea în sine, dar va detalia și modul în care această modificare poate afecta site-ul dvs. web și ce puteți face pentru a vă pregăti. Seminarul web are loc pe 28 aprilie, deci asigurați-vă că vă salvați locul .

Cu toate acestea, lăsând deoparte toate cursurile și seminariile web, obiectivul nostru principal este să ne asigurăm că produsul nostru nu afectează negativ performanța site-ului dvs. Aceasta a fost și va continua să fie o prioritate absolută pentru noi. Deci, fără alte întrebări, să ne scufundăm în eforturile de optimizare a performanțelor Elementor, așa cum este stabilit în Foaia de parcurs pentru produsul 2021.

Rulați un test de viteză a site-ului web pentru a vă asigura că site-ul dvs. web funcționează bine

Cuprins

  • Planul nostru cu cinci piste pentru a îmbunătăți în continuare performanța
  • Piesa 1: „Încarcă doar ceea ce ai nevoie”
  • Pista 2: Reduceți utilizarea bibliotecilor JavaScript / CSS și utilizați suportul pentru browserul nativ
  • Pista 3: Îmbunătățiți și optimizați JavaScript intern și CSS existente
  • Piesa 4: Optimizați procesele de backend și de redare
  • Pista 5: ieșire de cod îmbunătățită, mai subțire și mai bună
  • Resurse elementor gratuite pentru performanță

Planul nostru cu cinci piste pentru a îmbunătăți în continuare performanța

elementor-performance-1

Dincolo de optimizarea ciclului nostru de dezvoltare a produselor, viziunea noastră pentru îmbunătățirea performanței Elementor constă într-o abordare pe cinci căi. Am făcut deja unele îmbunătățiri semnificative în unele dintre aceste domenii, în timp ce altele vor fi abordate în versiunile viitoare ale Elementor.

Suntem, de asemenea, mândri să spunem că performanța a devenit o parte integrantă a dezvoltării și lansării conductei noastre. Fiecare versiune a Elementor este acum validată în funcție de o varietate de indicatori de performanță pentru a se asigura că nicio caracteristică nouă, modificări sau corecții nu au niciun efect negativ asupra site-urilor web existente create cu Elementor.

Acum să examinăm piesele noastre unul câte unul:

Piesa 1: „Încarcă doar ceea ce ai nevoie”

Îmbunătățim modul în care Elementor încarcă active pentru a ne asigura că încarcă doar ceea ce are nevoie pe fiecare pagină. În cele mai recente versiuni ale Elementor și Elementor Pro, am introdus experimentul optimizat de încărcare a activelor pentru a îmbunătăți performanțele front-end-ului unui site web, accelerând fiecare pagină încărcând doar funcționalitățile necesare. Puteți afla mai multe despre asta aici.

De asemenea, am adăugat opțiuni de încărcare leneșe la anumite widget-uri și vom continua să facem acest lucru în viitor. De exemplu, widgetul Video include o opțiune de încărcare leneșă, oferindu-vă posibilitatea de a înlocui playerul video complet încorporat cu o miniatură de imagine statică. Imaginea va reveni la videoclipul complet odată ce un vizitator interacționează cu acesta.

Utilizând aceste tehnici de încărcare leneșă, puteți reduce foarte mult dimensiunea paginii și numărul de solicitări HTTP în timpul încărcării inițiale a paginii, ceea ce va duce la o experiență mult mai rapidă pentru vizitatorii dvs.

Pista 2: Reduceți utilizarea bibliotecilor JavaScript / CSS și utilizați suportul pentru browserul nativ

De când am lansat Elementor acum aproape cinci ani, browserele web au evoluat foarte mult. Acum, unele caracteristici care necesitau biblioteci externe acum cinci ani pot fi implementate folosind suportul browserului nativ. Acest lucru asigură o implementare mult mai eficientă și poate, în unele cazuri, reduce considerabil timpul de execuție JavaScript.

Un exemplu în acest sens este biblioteca Waypoints care, în anumite cazuri, a fost înlocuită cu API-ul nativ Intersection Observer.

Ne propunem să reducem utilizarea acestor tipuri de biblioteci CSS și JavaScript și să le înlocuim cu suportul browserului nativ ori de câte ori este posibil.

Pista 3: Îmbunătățiți și optimizați JavaScript intern și CSS existente

Plănuim să îmbunătățim și să optimizăm în continuare JavaScript și CSS interne existente ale Elementor.

Exemple de acest lucru includ posibilitatea de a configura metoda de încărcare a fonturilor Google și proprietatea de afișare a fontului adăugată la biblioteca Font Awesome. Aceste îmbunătățiri ar trebui să reducă procesele de blocare a redării pentru aceste fișiere și să ofere o optimizare suplimentară a fișierelor CSS și JS existente.

Piesa 4: Optimizați procesele de backend și de redare

În Elementor 3.0, am îmbunătățit mecanismul de redare și încărcare CSS dinamic. Elementor folosit pentru a scana pagini pentru elemente cu valori dinamice la fiecare încărcare a paginii. Începând cu Elementor 3.0, când o pagină este creată și vizitată pentru prima dată, Elementor creează o memorie cache cu toate elementele cu valori dinamice. Apoi, în loc să scaneze pagina pentru elemente dinamice de fiecare dată când o pagină este vizitată, lista este preluată din cache și redată imediat. Acest lucru îmbunătățește semnificativ timpii de redare pe partea de server și are ca rezultat îmbunătățiri vizibile. Ne propunem să implementăm îmbunătățiri suplimentare de analiză pentru Elementor în viitor. Puteți afla mai multe despre aceasta în această postare de blog.

Pista 5: ieșire de cod îmbunătățită, mai subțire și mai bună

În cele din urmă, intenționăm să continuăm să îmbunătățim și să reducem codul de ieșire generat de Elementor pentru a reduce dimensiunea DOM.

Am început deja să facem aceste îmbunătățiri în Elementor 3.0, unde am eliminat trei elemente de împachetare pentru a crea un DOM mai mic și pentru a simplifica ieșirea codului.

În Elementor 3.2, am eliminat încă două elemente pentru a realiza reduceri și mai mari ale dimensiunii DOM. Sunt planificate mai multe reduceri în viitorul apropiat.

După cum puteți vedea, noi funcții, îmbunătățiri și revizuiri pot fi așteptate în 2021 și ulterior. Toate acestea se fac într-un efort de a vă ajuta să continuați să construiți site-uri web uimitoare cu performanțe mai bune. Dacă nu ați făcut încă upgrade la cea mai recentă versiune, asigurați-vă că faceți acest lucru pentru a vă bucura de aceste îmbunătățiri și de alte.

Resurse elementor gratuite pentru performanță

elementor-performance-2

După cum probabil știți, există mulți factori care nu sunt legați de Elementor și care afectează performanța site-ului dvs. WordPress. Acestea includ optimizarea imaginilor, găzduirea web, furnizorii de server, CDN și multe altele. Întrucât ne propunem să împuternicim utilizatorii noștri să implementeze optimizarea completă WordPress, am creat o vastă bancă de resurse de tutoriale, seminarii web și articole gratuite pentru a vă ajuta să aflați mai multe despre performanță.

  • Am creat un curs video despre performanță - în această serie din cinci părți , trecem în revistă fiecare factor important care vă poate afecta performanța și modul în care o puteți optimiza.
  • Pe 28 aprilie, vom găzdui un webinar pe Core Web Vitals cu experți SEO de top pentru a discuta viitoarea modificare a algoritmului Google și impactul acesteia asupra site-urilor dvs. web. Salvați-vă locul aici.
  • Am publicat, de asemenea, o postare de blog detaliată despre cum să accelerați site-urile web WordPress, împreună cu alte articole axate pe performanță pe subiecte precum alegerea găzduirii web, cache-ul pluginurilor, rularea testelor de viteză, utilizarea WP Rocket și multe altele.

Vom continua să creăm seminarii web, postări de blog și videoclipuri gratuite pentru a aborda alte aspecte ale performanței WordPress, pentru a continua să susținem comunitatea creatorilor de web.