Cum am atins un scor mobil Google PageSpeed ​​pe WooCommerce cu WP Rocket

Doriți să obțineți o idee perfectă pe Google PageSpeed ​​Insights pentru Mobile cu magazinul dvs. WooCommerce?

În acest articol, vă voi arăta exact cum l-am obținut cu femme-fratale.gr, un e-shop de frumusețe care a rulat inițial pe Magento. La acea vreme, încărcăturile de pagini mobile au durat între 5 și 15 secunde, iar site-ul sângera vânzări, în ciuda unui catalog de 35.000 de produse cu 500 de categorii de produse și 450 de atribute de produse.

Sunt Dimitris Vayenas, fondatorul Oxford Metadata. În ultimele trei decenii, am fost obsedat pentru fiecare milisecundă de performanță web. La începutul anului 2022, prietenul meu Nikos Orfanos mi -a cerut să ajut cu magazinul său online și am ajuns să lucrăm.

După ce am migrat spre WooCommerce și ne -am concentrat în întregime pe viteză - utilizarea rachetei WP ca armă secretă - am distrus scoruri de paginți mobile cu un scor constant între 99 și 100/100. Mai important, site -ul a trecut de la stagnant la mașina de venit.

Continuați să citiți și veți afla cum am reușit să obținem astfel de rezultate și modul în care WP Rocket ne -a ajutat să atingem un scor de 95+, plus modificarea finală care ne -a împins la un 100 perfect. Mai important, veți afla impactul afacerii care a urmat odată ce site -ul a început să se încarce în doar 300 de milisecunde.

De ce să vă concentrați pe performanță, în special pe mobil

La Femme - Fatale.gr, mai mult de 90% din achiziții se întâmplă pe mobil. Acest lucru a făcut ca performanța mobilă să fie prioritatea noastră principală din prima zi.

Dispozitivele mobile sunt testul de stres final pentru orice site web. CPU, memoria și conexiunile instabile pot face chiar și cele mai slabe pagini să se încarce de până la 10 ori mai lent decât pe desktop. De aceea, fiecare optimizare contează.

Viteza înseamnă eficiență. Codul mai curat, activele mai mici și un DOM mai slab se traduc într -o experiență mai lină pentru fiecare vizitator, în special pe mobil.

După cum îmi place să spun: „Dacă experiența dvs. mobilă nu este instantanee, pierdeți bani reali cu fiecare milisecundă în plus”.

Punctul de cotitură: migrarea de la Magento la WooCommerce

În decembrie 2021, Nikos a ieșit cu o provocare clară. "Magazinul meu a atins maximul în timpul blocării la 0,81 EUR pe sesiune. Apoi, vânzările au scăzut la 0,15 EUR pe sesiune. Putem reveni la maximele de blocare?"

Știam că primul pas a fost schimbarea platformelor.

În primul rând, am ales WooCommerce pentru stiva sa agilă, modernă. Acesta a oferit un ecosistem de pluginuri și creatori de teme care acoperă fiecare funcționalitate imaginabilă, împreună cu cea mai mare comunitate de ingineri web care se gândesc la performanță.

Am mers în direct în martie 2022 fără a schimba datele despre produs sau a crește cheltuielile de marketing. Singura diferență a fost viteza. Am tăiat încărcările de pagină de la 5 la 10 secunde în jos la doar 1 până la 2 secunde.

Acesta este captura de ecran GTMetrix care arată rezultatele timpului de încărcare înainte de migrarea din Magento: 5,8 secunde pentru pagina principală și 7,9 secunde pentru categorie, capturată în timp ce dezvoltam în continuare noul site web.

Pe de altă parte, aceasta este performanța curentă, cu toate vitalele web de bază în verde:

Care este adevărata valoare a vitezei pentru un wooCommerce?

Impactul afacerii asupra performanței a fost imposibil de ignorat, iar numerele l -au făcut clar.

Înainte de migrație, femme -fratale.gr fusese blocat într -o rutină de performanță. Pe Magento, cifra de afaceri lunară a variat de la 7.000 € la 10.000 € cu aproximativ 40.000 de sesiuni, în medie doar 0,15 EUR la 0,20 EUR pe sesiune. Chiar și în timpul vârfului de blocare din 2020, când traficul a crescut la 62.500 de sesiuni, cea mai bună performanță a depășit 0,81 EUR pe sesiune.

Până în februarie 2022, chiar înainte de a migra la WooCommerce, site -ul s -a îmbunătățit ușor la 0,29 EUR pe sesiune, dar era încă departe de potențialul său.

Impactul performanței mai rapide a fost imediat. În martie 2022, prima lună întreagă după migrație, veniturile pe sesiune s -au dublat la 0,58 EUR, în ciuda unei scufundări temporare în sesiuni, în timp ce roboții au încălzit memoria cache.

Câștigurile nu s -au oprit acolo. Până în decembrie 2023, am asortat vârful de blocare de 0,81 EUR pe sesiune. Astăzi, acest număr a urcat și mai mare: site -ul web câștigă acum 1,11 EUR pe sesiune cu 40.000 de vizite lunare.

Nikos, proprietarul Femme -Fatale.gr, a spus -o cel mai bine:

Prin potrivirea și depășind acum vârful nostru Covid, am dovedit că viteza este cea mai mare pârghie din afacerea noastră.

Fundația Performanței de care are nevoie fiecare site de wooCommerce

Înainte ca WP Rocket să -și prezinte potențialul de performanță completă, trebuie să existe o bază solidă. Aceste decizii timpurii au avut un impact major asupra rezultatelor noastre, iar acest lucru este și ceea ce recomand cu mare drag oricui rulează un magazin WooCommerce:

1. Alegeți o temă din prima performanță: am testat zeci de teme înainte de a ne stabili pe cele mai bune opțiuni. Botiga (bazată pe Gutenberg) de Athemes și Ray Theme (bazată pe element) amândoi au marcat 90+ în demo-urile furnizorilor. Ceva sub 70? Am evitat -o.

2. Alegeți o gazdă cu adevărat rapidă: folosim Cloudways , susținută de Linode, Vultr și Digitalocean în regiuni europene cheie precum Londra, Frankfurt, Amsterdam, Milano și Stockholm. Ne oferă un singur clic PHP și actualizări ale bazei de date, lacuri încorporate și Redis, plus detectarea dispozitivului mobil fără probleme. Acest lucru asigură că apelurile API necurate au atins întotdeauna conținut optimizat. Am avut zero timp de oprire în trei ani, iar echipa lor de sprijin este excepțională.
   
   În comerțul electronic, apropierea de clienții dvs. este neregotiabilă: fiecare interogare a produsului, actualizarea coșului și verificarea inventarului vă atinge originea. Cu cumpărătorii din Atena sau Insulele Grecești și Cloudways nu au un nod local, trebuie să implementăm FastPath . Încetează direct cu toți operatorii de telefonie mobilă greacă și Cloudflare, oferind sub -50 ms TTFBS și o experiență cu adevărat locală.

3. Partener cu furnizori de susținere: Am ales vânzătorii care oferă sprijin fiabil și rapid pentru a răspunde la întrebări și depanarea de lângă tine, de la atemuri și FIBOSEARCH pentru a -și face , pixel site -ul dvs. , Gravity Forms , Aioseo și WP Rocket în sine.

4. Optimizați-vă conținutul: am convertit toate imaginile în WebP și le-am organizat în foldere bazate pe date, asigurându-se că fiecare folder conține mai puțin de 10.000 de fișiere. Pentru fonturi, ne-am auto-găzduit fișiere WOFF2 și le-am subliniat pentru a include doar personajele pe care publicul nostru de care avea nevoie. Acest lucru a redus dimensiunile fișierelor de font cu 70 până la 80 la sută. Servirea lor la nivel local și preîncărcarea timpurie a contribuit la eliminarea căutărilor externe și a evitat schimbările de dispunere.

5. Utilizați încărcarea chirurgicală a plugin -urilor și mențineți igiena bazei de date: am folosit organizator de pluginuri și filtre manuale pentru a încărca doar pluginurile necesare pe pagină. De asemenea, am curățat tranzitorii săptămânal și dezactivat automat pentru intrări mari WP_OPȚIE.

Caracteristicile WP Rocket care ne -au dus la 99/100 pe Pagespeed

Odată ce fundația a fost în vigoare, WP Rocket ne -a ajutat să creștem viteza și să obținem rapid rezultate de performanță deosebite. Aceste caracteristici au jucat un rol cheie în a ne duce la un scor de 95+ pe Google PageSpeed ​​pe Mobile:

• Cache mobilă și preîncărcare de sitemap: WP Rocket detectează automat dispozitive mobile și construiește o memorie cache dedicată pentru ele. Asta înseamnă că utilizatorii de smartphone -uri obțin întotdeauna o instantanee HTML preîncărcată. De asemenea, preîncărcătorul bazat pe sitemap își târâie paginile imediat după orice purjare a cache-ului, care elimină întârzierea care se întâmplă adesea la primele vizite.
  
• Minificarea CSS și JS : WP Rocket scoate spațiul alb și comentarii pentru a micsora dimensiunile fișierelor. De asemenea, poate combina fișierele JavaScript într -unul, reducând numărul de solicitări HTTP. Acest lucru este deosebit de important pentru utilizatorii de telefonie mobilă din rețelele mai lente.  
  
• Scoateți CSS neutilizate (RUCSS): Spre deosebire de minifierea simplă, RUCSS analizează HTML -ul paginilor dvs. și elimină fiecare regulă CSS care nu este folosită niciodată pe partea frontală. Acest lucru declutters foile de stil taie adesea zeci de kilobite, astfel încât browserul redă mai rapid cu mai puțini octeți. Am văzut de prima dată că a activat RUCSS singur bărbierit 200 kb de la sarcina utilă a paginii de pornire, rezultând pagini de încărcare mai rapide.
  
• Întârzierea execuției JavaScript : Scripturi precum analize, instrumente de chat sau widget-uri terțe, de obicei, nu trebuie să ruleze imediat. WP Rocket le întârzie până când utilizatorul defilează, robinetele sau clicurile. Acest lucru face ca paginile să fie interactive mai rapid și îmbunătățește interacțiunea la reacția generală a vopselei și a paginii la interacțiunile utilizatorilor.

După ce am activat aceste caracteristici, am obținut un scor de performanță de 99 de pagespeed mobile:

Bonus: WP Rocket Add -Ons pentru cazuri speciale

Uneori, setările din afara casetei au nevoie de un pic de impuls. Pentru setări selectate, cum ar fi a noastră - cu programatori complexi, reguli de fonturi personalizate sau detectare neobișnuită a dispozitivului - am instalat cinci adăugări de rachete WP gratuite după consultarea inginerilor seniori WP Rocket:

• Schimbați parametrii RUCSS: am ajustat cât de des și cât de profund rulează racheta WP elimină CSS neutilizate. Acest lucru a fost esențial pentru compatibilitatea cu plugin -uri precum Automatewoo, care poate supraîncărca programul de sarcini.
• Dezactivați fragmente de coș de wooCommerce: Deoarece baza noastră de date a fost deja optimizată, am dezactivat cache-ul de fragment de coș de la WP Rocket pentru a accelera și mai departe apelurile de checkout.
• Dezactivați fonturile CSS utilizate: am folosit fonturi WOFF2 auto-găzduit auto-găzduit cu reguli de preîncărcare manuală. Acest supliment a asigurat că aceste reguli nu au fost anulate de preîncărcarea automată a fontului WP Rocket.
• Îndepărtați regulile expiră HTML: CDN și serverul nostru s -au ocupat deja de anteturile Cache, așa că am eliminat regulile implicite HTML de expirare a WP Rocket pentru a evita conflictele.
• Setați tablete ca mobil: am tratat tablete precum dispozitivele mobile pentru a ne asigura că beneficiază de memoria de cache mobilă și optimizări receptive. Acest lucru a fost important pentru funcționalitatea personalizată care se bazează pe verificarea WP_IS_MOBILE ().

În afară de pluginul tabletei, majoritatea acestor suplimente sunt necesare doar în magazinele de complexitate ridicată. Pentru setări tipice de comerț electronic, WP Rocket funcționează excelent chiar din cutie.

Secretul 100/100: perfecționarea leneșilor și a acelei imagini LCP

Ajungerea la 99 de ani pe Google Pagespeed Insights a fost o etapă importantă, dar nu am fost mulțumiți. Un punct stătea între noi și perfecțiune.

În primul rând, am abordat elementul Bloat, ceea ce înseamnă reducerea numărului de elemente HTML din pagină. Google penalizează paginile cu peste 810 elemente DOM, iar meniurile, glisoarele noastre și subsolul singur ne -a împins cu mult peste 1.000.

Iată ce am făcut:

• Conținut static încărcat leneș : Am amânat elemente non-critice, cum ar fi meniurile antetului, glisoarele de categorii de produse, caruselurile de marcă și subsolul până după vopseaua inițială.

• Înlăturat elemente inutile : Am tăiat nivelurile de meniu profunde și am dezactivat zonele widget inactive pe mobil. Acest lucru ne -a ajutat să obținem numărul total de DOM sub pragul de penalizare al Google.

Chiar și cu o pagină mai curată, încă nu am putut crăpa 100. Problema finală a fost imaginea eroului.

Inițial, a fost o imagine de 350 × 622 PX cu suprapuneri, umbre și text - prea complexe pentru a încărca rapid. L -am simplificat până la un webP 350 × 350 px și l -am preîncărcat cu prioritate ridicată folosind următorul cod:

 add_action('wp_head','ff_preload_mobile_image',1); function ff_preload_mobile_image(){ if(!is_front_page()||!wp_is_mobile()) return; echo '<link rel="preload" as="image" href="/uploads/lcp-simple.webp" importance="high">'; }

Și așa, prin simplificarea și preîncărcarea imaginii eroului, am obținut un scor perfect de 100/100 psi de la Mobile.

Impactul afacerii: viteza ca motor de creștere

După cum am explicat, Speed ​​nu a îmbunătățit doar scorul nostru de pagespeed. Ne -a sporit direct linia de jos.

După optimizarea performanței și a utilizat caracteristicile rachetelor WP, am văzut câștiguri măsurabile în rezultate:

• Ratele de conversie au sărit cu 33%.

• Veniturile pe sesiune au crescut de mai mult de cinci ori , de la 0,20 EUR la 1,11 €.

Aceste rezultate s -au tradus într -un venit suplimentar de 384.000 EUR în primele 18 luni de la migrare .

Acestea nu au fost îmbunătățiri minore. Aceștia s -au potrivit și, în cele din urmă, au depășit performanța noastră de blocare maximă, dovedind că viteza site -ului a fost maneta cheie pentru creștere .

După cum îmi place să spun: „Fiecare milisecundă bărbierit a adăugat euro adevărați la linia de jos.”

3 sfaturi practice pentru proprietarii de afaceri

Dacă executați un magazin de comerț electronic, aș dori să împărtășiți câteva sfaturi practice suplimentare vă pot ajuta să obțineți la maxim eforturile dvs. de performanță - indiferent dacă sunteți tehnici sau nu.

1. Urmăriți utilizatorii reali: utilizați monitorizarea reală a utilizatorilor (RUM) pentru a urmări datele de câmp. Scorurile de laborator sunt utile, dar ceea ce contează cu adevărat este modul în care site -ul dvs. funcționează pentru vizitatorii efectivi. Doar asigurați -vă că îl dezactivați atunci când efectuați teste PageSpeed ​​Insights pentru a evita rezultatele înclinate.
2. Geololocați originea dvs .: Găzduiește -ți site -ul aproape de clienții tăi. Când serverul dvs. de origine este aproape de publicul dvs., totul, de la căutările de produse până la checkout devine mai rapid și mai fiabil.
3. Acoperiți pe racheta WP: Începeți cu setările implicite. Aceștia gestionează automat cele mai multe probleme de performanță imediat. Odată ce linia de bază este solidă, puteți regla bine, permițând câteva caracteristici suplimentare, de exemplu, pentru a optimiza fișierele CSS și JS. Și dacă nu sunteți priceput în tehnologie, amintiți-vă: „Site-urile mai rapide înseamnă mai puțin frustrare, mai multe vânzări și clienți mai fericiți.”

Înfășurarea

Ne -am mutat de la Magento la WooCommerce, am ridicat scorul nostru de pagini mobile de la 55 la 100 perfecte și am crescut veniturile pe sesiune de la 0,20 € la 1,11 €. Călătoria a dovedit clar un lucru: viteza este mai mult decât o etapă tehnică. Este un adevărat factor al creșterii afacerilor.

Ne -am concentrat pe performanță, am construit o fundație tehnică puternică și am folosit racheta WP pentru a debloca rapid rezultatele. Dacă magazinul dvs. WooCommerce se simte lent sau sub performanță, acum este momentul să luați măsuri. Un site mai rapid înseamnă o experiență mai ușoară pentru vizitatorii dvs. și câștiguri reale pentru afacerea dvs.