Astra sau OceanWP – Analiza Performanței: Care este mai rapidă? (2021)

Astra sau OceanWP ?

Ezitați între temele Astra sau OceanWP pentru următorul dvs. proiect? Am realizat un scurt ghid care arată cum se compară aceste două teme concurente în ceea ce privește viteza de încărcare.

Nu este o surpriză faptul că o persoană obișnuită petrece mai puțin de trei secunde pe o pagină web. Cine vrea să aștepte încărcarea unei pagini când un alt site este disponibil la doar un clic distanță?

Mulți factori diferiți contribuie la performanța unui site web. Unele site-uri oferă funcții avansate, în timp ce altele oferă conținut simplu. Adevărul este că, indiferent de aspectul site-ului dvs., doriți ca acesta să fie rapid, astfel încât vizitatorii să rămână pe pagina dvs. mai mult timp și să aibă o experiență cât mai plăcută.

După cum descrie Google, pentru a oferi o experiență de pagină excelentă, ar trebui să căutați o temă WordPress care să funcționeze bine în timp (chiar și atunci când există trafic intens). Vestea bună este că Astra sau OceanWP sunt teme destul de ușoare.

Dar de ce ar trebui să folosești o temă ușoară?

Temele ușoare sunt cel mai bun pariu dacă căutați un site web care se încarcă rapid și ușor pe server. Fișierele lor au dimensiuni mai mici decât o temă WordPress obișnuită, deoarece vine doar cu cele mai necesare funcții necesare unei teme. Și nu în ultimul rând, temele mai ușoare folosesc mai puține resurse de pe servere datorită calității codului mai simplu.

Tema dvs. WordPress este piatra de temelie a site-ului dvs. Stabilește un cadru pentru cât de repede se încarcă paginile și afectează ceea ce gândesc oamenii despre designul dvs. atunci când îl vizitează.

Să facem câteva teste de performanță folosind tehnologia Lighthouse pentru a vedea care dintre teme, Astra sau OceanWP este mai rapidă! Auditul nostru vă va ajuta să vă decideți ce temă va funcționa cel mai bine pentru nevoile dvs.

Metodologie pentru testarea performanțelor Astra sau OceanWP

Pentru a testa performanța Astra sau Ocean WP, vom efectua trei teste de viteză separate cu următoarele setări:

• Teme pe care le vom testa: Versiunea gratuită a Astra și OceanWP
• Instrumente de performanță: Google PageSpeed Insights and Pingdom (Servere: Europa, Londra)

Vom urma trei scenarii:

Scenariul nr. 1: Vom testa viteza la activarea fiecărei teme, fără conținut adăugat, fără WP Rocket.

Scenariul 2: Vom crea o pagină de pornire obișnuită folosind Editorul WordPress:

• Un logo
• Un antet cu o imagine (210 KB), un titlu și un subtitlu
• 4 casete de imagini (80 KB) cu conținut text
• Câteva puncte cu text
• 3 Testimoniale
• Un singur buton de îndemn

Apoi vom compara rezultatele de performanță, respectiv, în timp ce folosim Astra și OceanWP.

Scenariul nr. 3: Vom măsura performanța atunci când pluginul WP Rocket cache este activat. Acest lucru vă va oferi o idee despre îmbunătățirile de performanță pe care le puteți obține, datorită WP Rocket.

Iată KPI-urile pe care le vom măsura în auditul nostru de performanță:

1. Gradul general de performanță de la Lighthouse (X / 100)
2. Timpul de încărcare al paginii de pornire (Pingom spune că „un timp ideal de încărcare a site-ului web nu ar trebui să depășească 2 secunde.”)
3. Dimensiunea totală a paginii (în KB)
4. Solicitări HTTP
5. Speed Index, Time to Interactive, Total Blocking Time, First Contentful Paint
6. Scorurile Core Web Vitals (Largest Contentful Paint and Cumulative Layout Shift)

Astra sau OceanWP – Rezultatele testelor de viteză

Din când în când, aveți nevoie să luați câteva decizii strategice pentru afacerea dvs. Ce temă WordPress este mai bună pentru site-ul dvs. sau pentru clientul dvs.? Care vine cu cele mai multe opțiuni fără a compromite viteza? Am făcut câteva cercetări pentru a putea răspunde astăzi la aceste întrebări!

Să vedem datele furnizate împreună cu cele trei scenarii.

Scenariul nr. 1 – Activarea temelor (fără conținut)

Să începem cu scorul mobil pentru tema Astra instalată:

La activarea Temei Astra, scorul este pe verde (91/100), iar Core Web Vitals rămâne sănătos. Devine și mai bun pe desktop:

Să vedem acum cum funcționează Tema OceanWP.

Se poate observa câteva probleme pe mobil, cu un scor de 60/100:

Lighthouse semnalează mai multe probleme care trebuie abordate pentru a îmbunătăți viteza. Le puteți vedea mai jos:

Pe de altă parte, scorul de performanță de pe desktop este mai promițător:

Deci, este timpul să ne uităm la ceea ce avem până acum!

Concluzie despre primele date colectate:

• Astra are un impact mai mic asupra performanței decât OceanWP pe mobil.
• Scorul mobil al Temei Astra este verde (91/100), spre deosebire de Tema OceanWP, care am văzut scorul său mobil Lighthouse scăzând la 60/100.
• Dimensiunea paginii și solicitările HTTP sunt mai mari atunci când utilizați OceanWP.

Acum, să condimentăm lucrurile construind o pagină de pornire cu Editorul WordPress. Vom măsura rezultatele performanței folosind Tema Astra și apoi folosind Tema OceanWP.

Scenariul 2: Teme activate – Conținut pe pagina de pornire – Fără WP Rocket

Am creat o pagină de pornire folosind blocurile Editorului WordPress (casete de imagine, antet, mărturii, îndemn și text). Să vedem cum afectează performanța.

Rezultate de performanță Astra cu un anumit conținut

Calitatea generală de performanță și Core Web Vitals rămân încă verde pe desktop și mobil. Scorul nu s-a schimbat prea mult, cu un anumit conținut adăugat.

Scorul mobil este acum 91/100:

Nota de pe desktop nu a fost afectată deloc:

Site-ul nu a devenit mult mai lent pe mobil și desktop după adăugarea de conținut. Să vedem cum se comportă site-ul cu același conținut și Tema OceanWP activată.

Rezultate de performanță OceanWP cu un anumit conținut

Iată nota de performanță de pe mobil:

Iată ce avem pentru desktop:

Testând aceeași pagină de pornire, am pierdut aproape 10% din nota de viteză folosind OceanWP (de la 99 la 90).

La nivel global, site-ul a devenit ușor mai lent după crearea paginii de pornire, dar încă avem un scor verde pe desktop (91/100). De asemenea, observăm că indicele de viteză este acum în roșu, iar LCP-ul este portocaliu.

Ce este și mai important, scorul pe mobil a trecut de la 60 la 55/100: acest lucru trebuie neapărat optimizat.

În tabelul următor, puteți vizualiza cu ușurință diferențele dintre Tema Astra și Tema OceanWP:

Astra sau OceanWP – Rezultate de performanță cu același conținut

Out-of-the-box, Astra tinde să fie mai rapidă și mai ușoară decât OceanWP. Atunci când se utilizează Astra, există mai puține solicitări HTTP adresate serverului, Core Web Vitals sunt mai bune, la fel și performanța generală pe desktop și mobil.

Aceasta ne duce la ultimul nostru scenariu: există un impact pozitiv asupra OceanWP și Astra atunci când utilizați WP Rocket? Vom vedea îmbunătățiri ale performanței? Dar secțiunea de diagnostic de la Lighthouse?

Scenariul 3: Astra sau OceanWP cu WP Rocket

Înainte de a efectua auditul folosind WP Rocket, am aruncat o privire asupra secțiunilor Oportunități/Diagnostic și am putut vedea unde trebuie să îmbunătățim.

De exemplu, când folosim OceanWP, am obținut următoarele probleme semnalate de Lighthouse:

În general, Google vă recomandă să urmați tacticile de mai jos pentru a obține o evaluare cu verde a performanței:

• Utilizați o politică eficientă de stocare în cache: Veți face site-ul dvs. mai rapid pentru vizitatori prin cache de conținut. O durată lungă de viață a memoriei cache poate accelera vizitele repetate pe pagina dvs.
• Luați în considerare livrarea JS / CSS critică în linie și amânarea tuturor stilurilor JS / non-critice (pentru a elimina resursele de blocare a redării)
• Reduceți CSS neutilizate (de exemplu, reduceți regulile neutilizate și amânați CSS care nu sunt utilizate pentru conținutul de peste ori pentru a reduce octeții consumați de activitatea de rețea) și reduceți JS neutilizat.
• Serviți pe bază de text cu compresie (Gzip, de exemplu) pentru a minimiza numărul total de octeți de rețea.
• Preîncărcați solicitările cheii

OK, acum este timpul să activăm WP Rocket pentru a vedea cum să îmbunătățim scorul de performanță.

Să aruncăm o privire asupra rezultatelor:

Performanță Astra cu WP Rocket

Astra nu avea nevoie de atât de multă optimizare ca OceanWP. Scorul de performanță al site-ului nostru a fost pe verde pe mobil și desktop.

Pe mobil, nota a trecut de la 91 la 99 datorită WP Rocket:

Pe desktop, Astra păstrează aceeași notă: 99/100:

În general, site-ul este mai rapid cu WP Rocket. Toate KPI-urile s-au îmbunătățit semnificativ, iar calitatea pentru mobil este de aproape 100!

Performanță OceanWP cu WP Rocket

Mulțumită WP Rocket, nota pentru mobil a trecut de la 60/100 la 100/100, după cum puteți vedea mai jos:

Scorul pe desktop este, de asemenea, mai bun. A trecut de la 91 la 98!

WP Rocket a făcut o treabă atât de bună pe mobil și chiar a obținut un scor 100/100 pe Lighthouse! Toți indicatorii de performanță sunt într-o formă mai bună, iar gradul general de performanță pe mobil a fost ridicat la 100 (era 55/100).

În cele din urmă, toate problemele semnalate de Lighthouse sunt acum în lista de audit trecută:

Astra sau OceanWP: Care este mai bună pentru performanță?

Atât Astra, cât și OceanWP sunt teme destul de rapide, cu toate acestea, Astra este lider.

De asemenea, am aflat că WP Rocket ar putea face magie și ar putea accelera site-ul dvs. în câteva minute. Este un plugin obligatoriu dacă doriți să vă îmbunătățiți Core Web Vitals și scorul de performanță pe mobil.

Am rezumat datele din toate scenariile din tabelul de mai jos, astfel încât să puteți vedea impactul pozitiv al WP Rocket pe site-ul nostru demo:

Cum să accelerați Astra sau OceanWP folosind WP Rocket

Vrei să obții un scor mobil 100/100 pe Lighthouse cu Astra sau OceanWP ? Această secțiune vă va arăta cum am făcut-o folosind WP Rocket.

După activarea WP Rocket, am parcurs fiecare filă din tabloul de bord WordPress pentru a activa următoarele opțiuni:

• File Optimization Tab – Minimizați CSS, optimizați livrarea CSS și eliminați CSS neutilizate.

• File Optimization Tab – Minificați JS, combinați fișiere JS, încărcați JS amânat și întârziați JS (ceea ce mi-a permis, de asemenea, să elimin / JS neutilizat):

• Media Tab – Activați LazyLoad pe imagini

În concluzie, calitatea generală a performanței Astra este puțin mai bună decât OceanWP. Cu toate acestea, atâta timp cât folosești WP Rocket atunci, nu trebuie să-ți faci griji.

După cum ați văzut în analiza noastră de mai sus, WP Rocket poate face o îmbunătățire imensă și vă poate ajuta să obțineți un scor 100/100 Lighthouse pe mobil.

Încercați și începeți să îmbunătățiți performanța site-ului dvs. cu WP Rocket chiar acum! Dacă aveți întrebări despre testele de performanță sau caracteristicile WP Rocket, puteți întreba serviciul suport WP Rocket.