Kā paātrināt e-komercijas veikalu (reālas metodes)

Katra aizkaves sekunde jums maksā naudu. Sakarība starp ielādes ātrumu un konversijas rādītāju ir labi dokumentēta, kaut gan precīzi skaitļi atšķiras pēc nozares un auditorijas. Klientu auditos konsekventi redzam, ka veikali ar ielādes laiku zem divām sekundēm pārspēj lēnākos konkurentus ar jūtamu rezervi. Veikalam ar 50 000 EUR mēneša apgrozījumu viena līdz pusotra sekundes ietaupījums parasti atnes mērāmu konversijas kāpumu 5-12% apmērā. Lūk, kā to sasniegt.

Attēlu optimizācija

Attēli parasti ir lielākie resursi jebkurā e-komercijas lapā, bieži veidojot 60-80% no kopējā lapas svara. Šeit vienmēr sākam. Ieguvumi parasti ir ievērojami un neprasa arhitektoniskas izmaiņas.

Pārveidojiet produktu attēlus WebP formātā. WebP faili ir par 25-35% mazāki nekā līdzvērtīgi JPEG faili bez redzama kvalitātes zuduma, un visas mūsdienu pārlūkprogrammas WebP atbalsta kopš 2020. gada. Ieviesiet lazy loading, lai lapas apakšā esošie attēli ielādētos ritinot, nevis visi uzreiz lapas atvēršanas brīdī. Izmantojiet <picture> elementu vai srcset atribūtu, lai pasniegtu dažādus attēlu izmērus atkarībā no ekrāna platuma. Un saspiežiet agresīvi: produktu attēlus parasti var samazināt līdz 80% kvalitātei bez jebkādas pamanāmas starpības. Automatizētiem pipelainiem der Sharp (Node.js), ImageMagick vai Cloudinary.

WooCommerce gadījumā Imagify spraudnis (2.x versija) apstrādā WebP konvertēšanu un lazy loading kopā, taču veikaliem ar lieliem katalogiem, kas bieži mainās, esam atraduši Cloudinary integrāciju uzticamāku.

Kešošanas stratēģijas

Kešošana saglabā dārgu operāciju rezultātus un pasniedz tos tieši atkārtotiem pieprasījumiem. Labi iestatīta kešošana ir vienīgais lielākais veiktspējas multiplikators, kas jums pieejams.

Pārlūkprogrammas kešošana

Iestatiet atbilstošas Cache-Control galvenes statiskajiem resursiem. CSS, JavaScript un attēliem jāpiešķir gari kešošanas termiņi (viens gads) ar versionētiem failu nosaukumiem, lai atjauninājumi stātos spēkā nekavējoties. Nginx gadījumā tipisks statiskā resursa kešošanas ieraksts izskatās šādi: add_header Cache-Control "public, max-age=31536000, immutable";

Servera puses kešošana

Ieviesiet pilnlapas kešošanu ar Nginx FastCGI cache vai Varnish produktu un kategoriju lapām. Dinamiskām lapām, piemēram, grozam un apmaksai, izmantojiet fragmentu kešošanu, lai kešotu tikai tās daļas, kas nemainās atkarībā no lietotāja. Pievienojiet Redis vai Memcached objektu kešošanai, lai samazinātu datu bāzes pieprasījumu skaitu. Vidējas slodzes e-komercijas veikalam tipiskā PHP-FPM konfigurācija uz 4 GB RAM VPS ir pm = dynamic ar pm.max_children = 20, pm.start_servers = 5 un pm.max_spare_servers = 15. Šie skaitļi mainās atkarībā no tā, cik RAM katrs PHP process patiesībā patērē jūsu konkrētajā slodzē.

Content Delivery Network (CDN)

CDN izplata statiskos resursus pa serveriem visā pasaulē, lai apmeklētāji lejupielādētu failus no ģeogrāfiski tuvākās atrašanās vietas. Eiropas e-komercijas veikaliem tas nozīmē, ka klients Rīgā saņem resursus no Baltijas vai Ziemeļvalstu edge servera, nevis gaida atbildi no datu centra Frankfurtē. Baltijas klientiem konkrēti: Bunny.net ir ar labu reģionālo pārklājumu un skaidru cenu modeli. Cloudflare bezmaksas līmenis der vairumam veikalu. Iestatīšana parasti aizņem mazāk par stundu un var samazināt ielādes laikus par 40-60% apmeklētājiem, kas atrodas tālu no jūsu servera.

Datu bāzes optimizācija

Katalogam un pasūtījumu vēsturei augot, datu bāzes vaicājumi kļūst par sastrēgumu. Tieši šeit WooCommerce veikali mēdz visvairāk degradēties apjomā.

Pievienojiet pareizus indeksus katrai kolonnai, kas izmantota WHERE klauzulās, JOIN un ORDER BY izteikumos. Palaidiet EXPLAIN ANALYZE uz lēnākajiem vaicājumiem, lai redzētu, ko vaicājumu plānotājs faktiski dara. Izvairieties no N+1 vaicājumu problēmām, iepriekš ielādējot relācijas. Arhivējiet pabeigtus pasūtījumus, kas vecāki par diviem gadiem, atsevišķās tabulās, lai aktīvās tabulas paliktu kompaktas. Izmantojiet PgBouncer (PostgreSQL) vai ProxySQL (MySQL), lai samazinātu jaunu datu bāzes savienojumu izveides izmaksas slodzes apstākļos.

WooCommerce veikalā, ko optimizējām pagājušajā gadā, produktu kategoriju vaicājums veica pilnu wp_postmeta skenēšanu bez indeksa uz meta_key. Pievienojot kompozīto indeksu uz (meta_key, meta_value), šis konkrētais vaicājums samazinājās no 2,3 sekundēm līdz 40ms. Šī viena izmaiņa vien samazināja vidējo lapas ielādes laiku no 3,8 s uz 1,6 s.

Koda minifikācija un apvienošana

Samaziniet CSS un JavaScript failu apjomu, noņemot atstarpes, komentārus un saīsinot mainīgo nosaukumus. Apvienojiet vairākus failus mazākā skaitā pieprasījumu. Mūsdienu rīki kā Vite vai esbuild to apstrādā kā daļu no build procesa. WordPress/WooCommerce gadījumā Autoptimize spraudnis veic saprātīgu darbu, ja neizmantojat pielāgotu build pipeline, taču tas prasa rūpīgu konfigurāciju, lai neizjauktu norēķinu lapas.

Mērīšana ar Core Web Vitals

Google Core Web Vitals ir standarta rādītāji reālās pasaules lapas veiktspējas novērtēšanai. Mērķis Largest Contentful Paint (LCP) zem 2,5 sekundēm, optimizējot galveno attēlu un servera atbildes laiku. Interaction to Next Paint (INP) jābūt zem 200ms, kas nozīmē JavaScript izpildes minimizēšanu un galvenā pavediena atbrīvošanu lapas ielādes laikā. Cumulative Layout Shift (CLS) mērķis ir zem 0,1. Vienmēr norādiet attēlu izmērus HTML kodā, lai novērstu izkārtojuma nobīdes attēlu ielādes laikā.

Ko redzējām Lietuvas mazumtirgotāja projektā

Lietuvas mājas preču mazumtirgotājam bija PrestaShop 1.7 veikals ar Lighthouse veiktspējas punktu 31 uz mobilajām ierīcēm. Galvenās problēmas bija neoptimizēti attēli (vidējais produkta attēls svēra 340 KB), neviena kešošanas kārta un trīs render-blocking JavaScript faili, kas ielādējās galvenē. Ieviesām WebP konvertēšanu ar pielāgotu PrestaShop moduli, konfigurējām Nginx FastCGI kešošanu kategoriju un produktu lapām, pārcēlām JavaScript uz deferred ielādi un uzstādījām Bunny.net CDN. Sešas nedēļas vēlāk Lighthouse mobilais punkts bija 78. Kas svarīgāk: klients ziņoja par 14% mobilo konversiju kāpumu nākamo 30 dienu laikā.

Ātruma optimizācija nav vienreizējs projekts, bet pastāvīga disciplīna. Sāciet ar lielākās ietekmes izmaiņām (attēli un kešošana), mēriet progresu ar Google PageSpeed Insights un reālu lietotāju uzraudzību caur GA4, tad risiniet pārējo pēc prioritātes. Mūsu IT konsultāciju pakalpojums ietver veiktspējas auditus, kas nosaka tieši, kuras optimizācijas jūsu konkrētajam iestatījumam dos vislielāko efektu. Vērts arī pārliecināties, ka hostings spēj atbalstīt uzlabojumus: skatiet mūsu hostinga izvēles ceļvedi, kurā izskaidrots, kas servera konfigurācijā tiešām nozīmē. Un ja izmantojat GA4, lai izsekotu ātruma uzlabojumu ietekmi uz konversijām, mūsu GA4 iestatīšanas ceļvedis aptver e-komercijas izsekošanas konfigurāciju, kas jums būs vajadzīga.