Cele 7 cele mai rapide teme WoooCommerce (2023)

Publicat: 2023-06-30
Se încarcă site-ul...

Căutați o temă rapidă WooCommerce WordPress? Am întocmit o listă de 7 teme pe care le poți folosi pentru următorul tău proiect de comerț electronic! Un magazin online înseamnă adesea o mulțime de imagini, texte, videoclipuri, recenzii și gateway-uri de plată care, din păcate, pot afecta performanța. Clienților tăi nu le va plăcea un site WordPress lent și pot fi reticente în a finaliza orice achiziție dacă pagina durează o veșnicie să se încarce. De fapt, Portent a efectuat câteva studii despre impactul vitezei site-ului asupra ratei de conversie și puteți vedea corelația în graficul de mai jos. Cu cât este nevoie de mai mult pentru ca pagina să se încarce, cu atât rata de conversie este mai mică.

Viteza paginii și rata de conversie - Sursa: Portent
Viteza paginii și rata de conversie – Sursa: Portent

În acest articol, vei găsi 7 teme WooCommerce pe care le poți folosi pentru următorul tău proiect. Ca bonus – pentru a preveni pierderea vânzărilor și a clienților pe drum – vă împărtășim câteva sfaturi despre optimizarea site-ului dvs. WooCommerce și crearea magazinului dvs. online mai rapid ca niciodată.

Să ne scufundăm.

Cele mai rapide 7 teme WordPress + Date de testare

Am selectat cele mai populare teme WooCommerce de pe piață și iată lista scurtă cu care am venit:

  1. Vitrina
  2. Astra (+ suplimentul Pro WooCommerce)
  3. Flatsome (+ Generatorul de teme UX)
  4. Avada (constructor Fusion WooCommerce)
  5. Divi (Divi WooCommerceBuilder)
  6. BeTheme (BeBuilder)
  7. Cele 7 (creator de pagini Elementor)

Am efectuat câteva teste de performanță corecte pentru fiecare temă, care ar trebui să vă ajute să alegeți.

Să trecem la date!

1. Vitrina

O temă gratuită foarte simplă dezvoltată chiar de WooCommerce. Tema este construită și întreținută de dezvoltatorii de bază WooCommerce, ceea ce evită problemele de compatibilitate. Opțiunile de personalizare sunt limitate, dar dacă doriți să lansați un magazin online simplu, își face treaba.

Tema vitrinei - Sursa: WooCommerce
Tema vitrinei – Sursa: WooCommerce

Rezultate de performanță pentru tema Storefront:

  • Scorul PageSpeed ​​mobil: 85/100
  • Prima vopsea satisfăcătoare: 2.1s
  • Cea mai mare vopsea plină de conținut: 1,7 s
  • Schimbarea cumulată a aspectului: 2,8 s
  • Index de viteza: 1,3s
  • Timp până la interactiv: 1,3 secunde
  • Timp total de blocare: 0 ms
  • Timp total de încărcare: 2.1s
  • Dimensiunea totală a paginii: 990 KB
  • Solicitări HTTP: 18

2. Astra

Astra este una dintre cele mai bune teme WordPress WooCommerce datorită codului său ușor, interfeței ușor de utilizat și a miilor de șabloane de pornire pentru următorul tău magazin. Suplimentele premium pentru WooCommerce vă permit să creați o pagină de plată personalizată, să adăugați o galerie avansată de produse, filtre și derulare nelimitată pentru a crea un site precum Pinterest.

Tema și șabloane Astra pentru WooCommerce - Sursa: Astra
Tema și șabloane Astra pentru WooCommerce – Sursa: Astra

Rezultate de performanță pentru tema Astra (și suplimentele WooCommerce):

  • Scorul PageSpeed ​​mobil: 83/100
  • Prima vopsea satisfăcătoare: 2,2 s
  • Cea mai mare vopsea plină de conținut: 1,7 s
  • Schimbarea cumulată a aspectului: 2,1 s
  • Index de viteza: 1,1 s
  • Timp până la interactiv: 1,3 secunde
  • Timp total de blocare: 0 ms
  • Timp total de încărcare: 2,5 s
  • Dimensiunea totală a paginii: 990 KB
  • Solicitări HTTP: 16

3. Flatsome

Tema WooCommerce numărul 1 în vânzări pe Themeforest este multifuncțională și receptivă pentru WooCommerce. Vine cu UX builder și câteva opțiuni interesante pentru magazinul dvs. online, cum ar fi căutarea live, adăugarea la lista de dorințe, opțiunile de bule de vânzare, modificarea numărului de produse pe rând sau opțiunile modului catalog dacă nu doriți să afișați orice preturi.

Șabloane Megashop pentru WooCommerce - Sursa: Flatsome
Șabloane Megashop pentru WooCommerce – Sursa: Flatsome

Rezultate de performanță pentru tema Flatsome:

  1. Scorul PageSpeed ​​mobil: 81/100
  2. Prima vopsea satisfăcătoare: 2,5 secunde
  3. Cea mai mare vopsea plină de conținut: 1,7 s
  4. Schimbare cumulativă a aspectului: 1,6 s
  5. Index de viteza: 1,3s
  6. Timp până la interactiv: 2,5 secunde
  7. Timp total de blocare: 0 ms
  8. Timp total de încărcare: 2.7s
  9. Dimensiunea totală a paginii: 997 KB
  10. Solicitări HTTP: 18

4. Avada (+ Fusion Woo Builder)

Este tema principală vândută pe Envato de ani de zile, cu multe mii de șabloane ușor de personalizat în bibliotecă. Avada vine cu Fusion Builder, permițându-vă să vă construiți site-ul de la antet la subsol. De asemenea, are widget-uri WooCommerce puternice care le permit utilizatorilor să construiască magazine online personalizate. De asemenea, puteți folosi generatorul lor pentru a crea pagini personalizate de produse și magazine.

Tema Avada și Woo Builder – Sursa: Themeforest

Rezultate de performanță pentru tema Avada:

  • Scorul PageSpeed ​​mobil: 78/100
  • Prima vopsea satisfăcătoare: 2,9 s
  • Cea mai mare vopsea plină de conținut: 1,8 s
  • Schimbare cumulativă a aspectului: 1,6 s
  • Index de viteza: 1,3s
  • Timp până la interactiv: 2,6 secunde
  • Timp total de blocare: 0 ms
  • Timp total de încărcare: 2.8s
  • Dimensiunea totală a paginii: 998 KB
  • Solicitări HTTP: 17

5. Divi (+ Divi WooCommerce Builder)

Divi este o temă WooCommerce puternică datorită constructorului său vizual WooCommerce. Elegant Themes a fost printre primele companii care au adus WYSIWYG pe WordPress. Promisiunea este că puteți construi totul vizual folosind cadrul Divi fără a atinge o singură linie de cod. Generatorul și modulele WooCommerce vă permit să vă creați rapid produsul personalizat și pagina de magazin.

Divi și WooCommerce Builder - Sursa: Elegantthemes.com
Divi și WooCommerce Builder - Sursa: Elegantthemes.com

Rezultate de performanță pentru tema Divi:

  • Scorul PageSpeed ​​mobil: 75/100
  • Prima vopsea satisfăcătoare: 4.1s
  • Cea mai mare vopsea plină de conținut: 1,5 s
  • Schimbarea cumulată a aspectului: 2,8 s
  • Index de viteza: 2,4 s
  • Timp până la interactiv: 1,2 secunde
  • Timp total de blocare: 0,1 ms
  • Timp total de încărcare: 3.1s
  • Dimensiunea totală a paginii: 1,2 MB
  • Solicitări HTTP: 19

6. BeTheme (+ BeBuilder)

BeTheme este un creator de site-uri multifuncționale și cea mai bine vândută temă WordPress, cu peste 650 de site-uri web pre-construite (cu un design modern). BeBuilder-ul lor este, de asemenea, compatibil cu WooCommerce și chiar au lansat un generator de interogări pentru a construi bucle și site-uri web dinamice. Promisiunea este că puteți construi site-ul WooCommerce pe care îl doriți și puteți proiecta magazine versatile și machete cu un singur produs care convertesc. Puteți fie să utilizați un șablon gata de utilizat, fie să vă creați al dvs.

BeTheme WooCommerce builder - Sursa: themuffingroup.com
BeTheme WooCommerce builder – Sursa: themuffingroup.com

Rezultate de performanță pentru tema BeTheme:

  • Scorul PageSpeed ​​mobil: 72/100
  • Prima vopsea satisfăcătoare: 4.1s
  • Cea mai mare vopsea plină de conținut: 3,9 s
  • Schimbarea cumulată a aspectului: 2,8 s
  • Index de viteza: 1,9 s
  • Timp până la interactiv: 1,7 secunde
  • Timp total de blocare: 0,5 ms
  • Timp total de încărcare: 3.6s
  • Dimensiunea totală a paginii: 1,3 MB
  • Solicitări HTTP: 21

7. The7

Este tema Elementor numărul 1 care oferă multă personalizare pentru WooCommerce. The7 are peste 60 de site-uri web simulate prefabricate cu șabloane exclusive care pot ajuta la lansarea cu ușurință a unui magazin online. Puteți crea șabloane atractive pentru vitrină, pagini și liste de produse, achiziție, coș și multe altele cu ajutorul WooCommerce Theme Builder avansat. Punctul culminant este că puteți modifica cu ușurință orice pagină WooCommerce și puteți adăuga filtre avansate pentru a îmbunătăți experiența utilizatorului.

The 7 - Sursa: the7.io
The 7 – Sursa: the7.io

Rezultate de performanță pentru tema The7:

  • Scorul PageSpeed ​​mobil: 70/100
  • Prima vopsea satisfăcătoare: 4,4 s
  • Cea mai mare vopsea plină de conținut: 4,3 s
  • Schimbare cumulativă a aspectului: 2,9 s
  • Index de viteza: 1,2 s
  • Timp până la interactiv: 1,5 secunde
  • Timp total de blocare: 0 ms
  • Timp total de încărcare: 4.1s
  • Dimensiunea totală a paginii: 1,5 MB
  • Solicitări HTTP: 25

Tabel rezumat al rezultatelor performanței

Mai jos am adunat rezumatul rezultatelor performanței pentru fiecare temă WooCommerce. Am folosit „Scorul mobil PageSpeed” global al Lighthouse pentru a le clasifica.

Scor mobil PageSpeed Timp total de încărcare Cea mai mare vopsea plină de conținut   Prima vopsea satisfăcătoare

Vitrina
85/100 2,1 s 1,7 s 2,1 s
Astra 83/100 2,5 s 1,7 s 2,2 s
Flatsome 81/100 2,7 s 1,7 s 2,5 s
Avada 78/100 2,8 s 1,8 s 2,9 s
Divi 75/100 3,1 s 1,5 s 4,1 s
BeTheme 72/100 3,6 s 3,9 s 4,1 s
Cele7 70/100 4,1 s 4,3 s 4,4 s

Recomandări cheie:

  • Niciuna dintre teme nu este în roșu pe mobil, toate se află între portocaliu și verde în ceea ce privește performanța globală.
  • Storefront, Astra și Flatsome par a fi primele 3 cele mai rapide.
  • The7 pare a fi „cel mai lent”, ceea ce are sens cu toate personalizările avansate disponibile. Performanța este totuși acceptabilă, iar în ultima secțiune, vom arăta cum să punem toți KPI-urile în verde!

Cum am testat temele

Selecția sa bazat pe popularitate, numărul mare de descărcări sau vânzări, șabloane de bibliotecă și recenzii de calitate. Testele de performanță au fost realizate folosind următoarele instrumente de performanță:

  • PageSpeed ​​Insights
  • GTmetrix

Ambele instrumente sunt alimentate de Lighthouse. Ei analizează performanța și experiența utilizatorului site-ului dvs. Iată cei 10 KPI pe care i-am folosit în testele noastre – măsurați pe mobil :

Din PageSpeed ​​Insights:

  • Scor mobil PageSpeed
  • Prima vopsea satisfăcătoare
  • Cea mai mare vopsea plină de conținut
  • Schimbare cumulativă a aspectului
  • Indicele de viteză
  • Timpul pentru interacțiune
  • Timp total de blocare

De la GTmetrix:

  • Timp total de încărcare
  • solicitări HTTP
  • Dimensiunea totală a paginii

Apoi, am ales 7 teme care se definesc drept WooCommerce friendly pentru că vin cu suplimente sau personalizări specifice legate de magazinele online: pagina de produs sau personalizarea procesului de checkout, galerii avansate, pagina de cont personal etc.

Locul de testare

Am construit un site WooCommerce realist pentru fiecare temă. În toate cazurile, pagina de pornire are un banner erou cu un buton, 1 îndemn, 4 pictograme cu texte, 3 recenzii ale clienților, 1 anunț și 12 produse. Desigur, am folosit aceeași imagine și produse pentru fiecare test, pur și simplu am schimbat temele între runda de teste.

Exemplu de site WooCommerce construit cu Astra - Sursa: WP Rocket
Exemplu de site WooCommerce construit cu Astra – Sursa: WP Rocket

Am făcut o nouă instalare pentru fiecare temă și am folosit același server pentru testarea vitezei fiecărei teme (serverele sunt în Londra).

️ Disclaimer : Aceste teste de performanță au fost efectuate pe un server cu sediul în Londra și am construit fiecare pagină de comerț electronic noi înșine. Rezultatele pe care le-am prezentat sunt din propria noastră experiență, iar rezultatele pot diferi în funcție de proiectul dumneavoastră.

Oferă un plus de performanță cu WP Rocket

WP Rocket este unul dintre cele mai bune pluginuri de cache pentru a optimiza orice temă WooCommerce, inclusiv pe cele de pe lista noastră. Performanța magazinului dvs. online și scorul Core Web Vitals se vor îmbunătăți drastic la activarea acestuia.

Pentru a înțelege impactul WP Rocket asupra vitezei, să-l vedem în acțiune cu the7, care a fost una dintre cele mai complete teme pe care le-am testat în ceea ce privește funcțiile și personalizările.

Mai jos sunt problemele de performanță semnalate de Lighthouse, enumerate în fila „Oportunități”:

Recomandarea Lighthouse pentru site-ul meu WooCommerce construit cu 7 - Sursa: PageSpeed ​​Insights
Recomandarea Lighthouse pentru site-ul meu WooCommerce construit cu 7 – Sursa: PageSpeed ​​Insights

Lighthouse sugerează utilizarea memoriei cache, activarea compresiei textului, reducerea CSS/JS neutilizate și amânarea imaginilor offscreen (optimizarea imaginii cu încărcare leneră).

După ce am folosit WP Rocket pe site-ul de testare, am observat că problemele noastre au fost mutate în secțiunea „audituri trecute”:

Site-ul de testare The7 - audit trecut cu WP Rocket - Sursa: PageSpeed ​​Insights
Site-ul de testare The7 – audit trecut cu WP Rocket – Sursa: PageSpeed ​​Insights

Dar mai urmează. Toți KPI-urile noastre de performanță s-au îmbunătățit datorită WP Rocket, inclusiv scorul pentru dispozitive mobile din PageSpeed ​​Insights. Scorul de performanță a primit 99/100.

Site-ul de testare 7 are scoruri 99/100 cu WP Rocket - Sursa: PageSpeed ​​Insights
Site-ul de testare 7 are scoruri 99/100 cu WP Rocket – Sursa: PageSpeed ​​Insights

WP Rocket a sporit, de asemenea, scorurile Core Web Vitals (toate în verde) și a redus timpul total de încărcare (de la 4,1 s la 1,9 s). De asemenea, a redus dimensiunea paginii și numărul de solicitări HTTP, așa cum puteți vedea în tabelul nostru de mai jos:

KPI-uri de performanță Scorul The7 (fără WP Rocket) Scorul The7 (cu WP Rocket)
Scor mobil PageSpeed 70/100 99/100
Prima vopsea satisfăcătoare 4,4s 1,7s
Cea mai mare vopsea plină de conținut* 4,3s 1,7s
Schimbare cumulativă a aspectului* 2,9 s 0s
Indicele de viteză 1,2 2s
Timpul pentru interacțiune 1,5s 1s
Timp total de blocare 0 ms 0 ms
Timp total de încărcare 4.1s 1,9 s
Dimensiunea totală a paginii 1,5 MB 680 KB
solicitări HTTP 25 8

* Core Web Vitals

Iată mai multe sfaturi despre testarea și îmbunătățirea scorului de performanță Lighthouse pe WordPress.

Pentru a aborda toate avertismentele PageSpeed ​​Insights și pentru a crește performanța, am folosit următoarele funcții WP Rocket:

  • Comprimarea textului și stocarea în cache – ambele funcții sunt activate automat imediat după activarea pluginului. Nu trebuie să faci nimic.
WP Rocket aplică automat stocarea în cache și compresia textului - Sursa: WP Rocket
WP Rocket aplică automat stocarea în cache și compresia textului – Sursa: WP Rocket

De asemenea, puteți seta propriile opțiuni din fila cache avansată din administratorul WordPress:

Cache și funcții avansate de optimizare - Sursa: WP Rocket
Cache și funcții avansate de optimizare – Sursa: WP Rocket
Doriți să aflați mai multe despre stocarea în cache a paginilor pe WooCommerce? Citiți cele 7 sfaturi ale noastre pentru a afla cum să implementați memorarea în cache pe un site WooCommerce
  • Optimizarea codului CSS – din fila de optimizare a fișierelor , am selectat butonul de optimizare livrare CSS (folosind opțiunea la îndemână de eliminare a CSS neutilizat ). De asemenea, am redus și combinat codul CSS pentru a ajuta browserul să descarce și să proceseze mai rapid aceste fișiere.
Optimizare CSS - Sursa: WP Rocket
Optimizare CSS – Sursa: WP Rocket
  • Optimizarea codului JavaScript – din fila de optimizare a fișierelor , există și câteva opțiuni pentru a optimiza JavaScript-ul site-ului dvs. WordPress. În cazul nostru, am redus fișierele JS, am încărcat JS amânat și am întârziat execuția JS:
Optimizare JS - Sursa: WP Rocket
Optimizare JS – Sursa: WP Rocket
  • Lazyload – pentru a amâna imaginile în afara ecranului (și prioritizează încărcarea imaginilor situate în fereastra):
Funcția LazyLoad pentru imagini, iframe și videoclipuri - Sursa: WP Rocket
Funcția LazyLoad pentru imagini, iframe și videoclipuri – Sursa: WP Rocket

Care sunt cele mai bune teme WooCommerce pentru tine?

Deși nu vă putem sfătui cu privire la o anumită temă, deoarece se bazează în mare măsură pe designul și specificațiile tehnice, iată câteva sfaturi:

  • Dacă aveți nevoie de un magazin online simplu cu aspectul WooCommerce în mod implicit, fără nici un design sau opțiuni avansate, atunci mergeți cu Storefront.
  • Dacă ești un freelancer care caută o temă cu multe demonstrații pe care să le arăți clienților tăi din diferite industrii, atunci Divi, BeTheme și the7 ar putea fi cele mai bune opțiuni.
  • Dacă sunteți un utilizator fervent al Elementor , atunci Astra și The7 ar putea fi cel mai bun pariu.
  • Dacă doriți să utilizați WPBakery Page Builder , tema 7 este calea de urmat.
  • Dacă intenționați să încărcați mii de produse, o temă ușoară precum Astra sau OceanWP poate fi mai înțeleaptă. Ambele vin cu funcții WooCommerce avansate, astfel încât să vă puteți crea propriul magazin în câteva minute.
  • Dacă trebuie să vă creați propriile machete de produs și pagini de magazin și să adăugați date dinamice pe site-ul dvs. , atunci luați o temă care funcționează bine cu orice alți constructori WooCommerce.
  • Dacă doriți să obțineți tema dvs. de la Themeforest, alegeți Avada, care este numărul 1 pe Themeforest de ani de zile.
  • Dacă ezitați între două teme , verificați demonstrațiile lor și amintiți-vă să le priviți pe mai multe dispozitive. Multe vânzări au avut loc pe mobil!

În cele din urmă, ultima noastră recomandare ar fi să alegem o temă care este sigură cu actualizări recente, asistență rapidă, documentație precisă și tutoriale aprofundate. De asemenea, puteți verifica câțiva YouTuber populari care revizuiesc toate aceste teme și își înregistrează ecranul în timp ce își construiesc un magazin online de la zero.

Încheierea

Acum, ar trebui să poți alege tema WooCommerce potrivită pentru următorul tău proiect!

În orice caz, indiferent de tema pe care o alegeți, WP Rocket este cea mai simplă modalitate de a îmbunătăți viteza site-ului dvs. WordPress, de a optimiza Core Web Vitals și de a remedia auditurile de performanță pe PageSpeed ​​Insights. În plus, nu vă asumați niciun risc cu garanția de rambursare a banilor de 30 de zile.