Remediați un site WordPress lent: Ghid de optimizare pentru front-end!

Nimeni nu se bucură de un site web lent, deoarece nu numai că frustrează utilizatorii, dar duce și la pierderi semnificative. Nu este vorba doar despre pierderea vizitatorilor; se extinde la o scădere a clasamentului Google și o afectare tangibilă a veniturilor. Pentru a sublinia acest punct, luați în considerare concluziile unui studiu Akamai:

O întârziere de doar 100 de milisecunde în timpul de încărcare a site-ului web poate reduce ratele de conversie cu 7 procente.

Această statistică uimitoare subliniază legătura critică dintre viteza unui site și succesul său financiar. Asigurarea performanței rapide a site-ului nu înseamnă doar îmbunătățirea experienței utilizatorului, ci este și un factor crucial în menținerea și creșterea veniturilor.

Pentru a rezolva problema, iată un Ghid pentru începători pentru a ajuta la îmbunătățirea unui site lent, creat special pentru proprietarii de site-uri WordPress care doresc să se aprofundeze în domeniul optimizării frontend. Pentru a porni în această călătorie, este esențial să începeți cu o înțelegere fundamentală a ceea ce constituie o instalare WordPress normală.

Filosofia mea din spatele optimizării, atât în ​​munca mea profesională, cât și în viața personală, se învârte în jurul a două principii cheie: Reducere și Reutilizare . În contextul WordPress, „reduce” se referă la un set de strategii menite să minimizeze utilizarea resurselor. Aceasta implică optimizarea pentru dimensiuni mai mici de fișiere, reducerea numărului de solicitări de fișiere și asigurarea unei execuții mai eficiente a codului. Aceste acțiuni nu numai că îmbunătățesc performanța unui site WordPress, dar contribuie și la o experiență mai eficientă și mai ușor de utilizat.

Pe de altă parte, „reutilizarea” în acest context se referă la valorificarea stocării în cache la diferite niveluri ale configurației noastre. Aceasta înseamnă stocarea și reutilizarea inteligentă a datelor și resurselor în loc să le genereze sau să le solicite în mod repetat. Memorarea în cache poate apărea la diferite straturi, inclusiv memorarea în cache în browser, în cache pe server și prin rețelele de livrare a conținutului. Prin implementarea acestor strategii, putem îmbunătăți semnificativ timpii de încărcare și reducem încărcarea serverului, făcând site-ul web mai rezistent și mai receptiv.

Deci, să începem cu optimizarea site-ului, pentru acest articol mai degrabă decât pentru teorie, am creat și un site pe un VPS Single Core de la Linode cu 2 GB de RAM unde putem explora și tehnici avansate mai târziu. Este o instalare standard WordPress cu tema Shopay, astfel încât să aibă și câteva plugin-uri suplimentare care pot fi analizate și sunt, de asemenea, un site web WooCommerce ușor greu. De asemenea, am importat demo-ul și am instalat următoarele pluginuri frecvent întâlnite, iată cum arată după importarea demo-ului -

Vom folosi WP Rocket pentru optimizare, deoarece are cel mai bun echilibru între Opțiuni și funcționalitate.

Pasul 1: Creați o linie de bază

Înainte de a începe orice proiect de optimizare trebuie să stabilim unde ne aflăm și instrumentele pe care le vom folosi pentru a face acest lucru. Iată câteva site-uri web și instrumente comune pe care le recomandăm pentru a începe, care ne vor ajuta să ne analizăm modificările –

• GTMetrix : Este un instrument online care analizează performanța site-ului web. Oferă rapoarte despre timpul de încărcare a paginii, dimensiunea paginii și alte valori cheie de performanță, folosind Google Lighthouse și propriul sistem de notare. GTmetrix evaluează site-urile web pe baza vitezei și eficienței, oferind perspective și recomandări pentru optimizare pentru a îmbunătăți experiența utilizatorului și funcționalitatea site-ului.
• Monitor de interogare   — Este WordPress este un instrument puternic pentru dezvoltatori și administratorii de site-uri. Oferă o analiză detaliată a interogărilor de baze de date, erori PHP, apeluri HTTP API și multe altele, direct în tabloul de bord WordPress. Acest plugin este deosebit de util pentru diagnosticarea problemelor de performanță, deoarece permite utilizatorilor să vadă ce pluginuri, teme sau setări afectează performanța site-ului.

• PageSpeed ​​Insight — Este un instrument oferit de Google care analizează conținutul unei pagini web și apoi generează sugestii pentru a face pagina respectivă mai rapidă. Oferă atât versiunile mobile, cât și versiunile desktop ale performanței unei pagini cu un scor, care variază de la 0 la 100. Scorurile mai mari indică o performanță mai bună.

Puteți să creați o foaie Google și să comparați pagina pe care încercați să o optimizați folosind aceste instrumente și să puneți numerele în foaia Excel, o vom monitoriza după fiecare modificare.

Pentru site-ul de testare: nu este rău, dar poate fi îmbunătățit

Pasul 2: Verificați-vă găzduirea

În majoritatea cazurilor, site-urile utilizatorilor nu sunt vinovate, dar este găzduirea pe care o rulează. Există o mulțime de supravânzare și punerea prea multe site-uri pe același server în industria de găzduire partajată. Și, uneori, încărcarea site-ului dvs. ar putea duce la epuizarea resurselor alocate dacă pe un VPS / server dedicat. Nu toate aceste instrumente vor funcționa, dar vă vor ajuta să vedeți dacă trebuie să faceți upgrade la o gazdă mai bună.

• Benchmark : Pentru a face acest lucru, puteți utiliza un plugin WordPress numit wpbenchmark. Acest lucru va compara rapid diferite părți ale găzduirii dvs., inclusiv procesorul, discul și baza de date. Uneori vă poate ajuta rapid să aflați blocajele. Menținerea unui obiectiv de 8+ ar trebui să fie bine.

• Încărcarea serverului : Este posibil să aveți nevoie de o autentificare SSH pentru a accesa linia de comandă unde puteți rula o linie de comandă top sau htop . Vedeți câtă sarcină este raportarea serverului și ce procese folosesc serverul.

Dacă descoperiți că serverul dvs. este supraîncărcat sau nu are performanțe reduse, sau vedeți furturi semnificative dacă rulați de sus. Atunci ar trebui să contactați gazda și dacă nu reușesc să rezolve încărcarea, ați putea lua în considerare schimbarea acestora.

Pentru site-ul de testare: serverul are un scor de 8+, cu o încărcare minimă a serverului și 0,93 secunde pe Query Monitor.

Pasul 3: Reduceți solicitările

Reducerea numărului de solicitări HTTP este crucială pentru o încărcare mai rapidă a paginii web, deoarece fiecare solicitare implică timp. Mai puține solicitări înseamnă mai puține conexiuni și transferuri de date între client și server. Acest lucru duce la o utilizare mai eficientă a lățimii de bandă și a resurselor serverului.

Vom instala WP-Rocket în acest pas, deoarece are majoritatea caracteristicilor necesare pentru următorii câțiva pași.

• Minificare : Minificarea în optimizarea WordPress implică comprimarea fișierelor CSS și JavaScript prin eliminarea caracterelor inutile, reducând astfel dimensiunea acestora. Ca pas următor, combinați aceste fișiere. Acest proces scade semnificativ numărul de solicitări HTTP și îmbunătățește timpul de încărcare a paginii.

• Amână și întârzie execuția JS : „Amână” întârzie încărcarea JavaScript până după ce HTML s-a încărcat complet, împiedicând JS să blocheze redarea paginii. „Întârzierea execuției JS”, ​​pe de altă parte, încarcă JavaScript numai atunci când un utilizator interacționează cu pagina (cum ar fi făcând clic sau derulând), reducând timpul inițial de încărcare și îmbunătățind prima impresie a utilizatorului despre viteza site-ului. Aceste metode reduc, de asemenea, numărul de solicitări și încărcarea inițială a CPU.

• Încărcare leneră imagine : În loc să încarce toate imaginile dintr-o pagină web simultan, încărcarea leneră amână încărcarea imaginilor până când acestea sunt pe cale să intre în fereastra de vizualizare a utilizatorului. Aceasta înseamnă că imaginile sunt încărcate numai atunci când este necesar, deoarece un utilizator derulează prin pagină. Această abordare reduce semnificativ timpul inițial de încărcare, economisește lățime de bandă atât pentru utilizator, cât și pentru server,
• Iframes și Embeds : încărcarea înglobărilor terță parte poate adăuga, de asemenea, un număr semnificativ de solicitări, acestea pot fi, de asemenea, încărcate leneș sau încărcate atunci când cineva face clic pe ele.

De dragul articolului, am dezactivat stocarea în cache a paginii în acest moment -

Pasul 4: Reduceți dimensiunea fișierelor

Reducerea dimensiunilor fișierelor este o strategie cheie în optimizarea performanței web. Aceasta duce la timpi de încărcare a paginii mai rapid, deoarece fișierele mai mici necesită mai puțin timp pentru descărcare. Acest lucru nu numai că îmbunătățește experiența utilizatorului, oferind acces mai rapid la conținut, dar și economisește lățime de bandă, atât pentru utilizatori, cât și pentru servere.

• Optimizări ale imaginilor : tehnicile comune includ utilizarea imaginilor receptive, adoptarea formatului WebP și optimizarea dimensiunilor JPEG. Imaginile receptive asigură că dimensiunea corectă a imaginii este difuzată în funcție de dispozitivul utilizatorului, îmbunătățind timpii de încărcare și calitatea vizuală. Formatul WebP oferă caracteristici superioare de compresie și calitate în comparație cu formatele tradiționale precum JPEG și PNG. Optimizarea dimensiunii JPEG prin algoritmi de compresie reduce dimensiunea fișierului fără pierderi semnificative de calitate, asigurând timpi de încărcare mai rapidi și o experiență mai bună pentru utilizator.
• Comprimați JS și CSS : acest proces minimizează dimensiunea acestor fișiere, eliminând caracterele inutile precum spațiile albe, întreruperile de rând și comentariile. Drept urmare, browserul necesită mai puțin timp pentru a descărca și analiza aceste fișiere, ceea ce duce la o redare mai rapidă a paginii.

• Suport Gzip : implică comprimarea pe partea de server a fișierelor web precum HTML, CSS și JavaScript înainte ca acestea să fie trimise în browser. Această compresie reduce semnificativ dimensiunea fișierelor, ceea ce duce la viteze de transmisie mai rapide și la timpi de încărcare a paginilor mai rapid.

Pentru site-ul de testare: serverul nostru are gzip activat în mod implicit. Noile numere.

Pasul 5: Reduceți numărul de pluginuri

Minimizarea numărului de pluginuri în WordPress îmbunătățește viteza și performanța site-ului, deoarece mai puține pluginuri înseamnă mai puțin cod de încărcat. De asemenea, îmbunătățește securitatea prin reducerea potențialelor vulnerabilități. Raționalizarea pluginurilor duce la întreținerea mai ușoară a site-ului web și la mai puține probleme de compatibilitate.

• Reduceți numărul de pluginuri: mai întâi, identificați și eliminați pluginurile care nu sunt utilizate în mod regulat. Acestea consumă adesea resurse în mod inutil și vă pot încetini site-ul. Acolo unde este posibil, înlocuiți funcționalitatea pluginului cu cod personalizat; aceasta reduce dependența de codul terță parte și poate fi adesea mai eficient și mai eficient. În plus, luați în considerare utilizarea serviciilor terță parte pentru funcționalitățile gestionate anterior de pluginuri.
• Pluginuri pe pagină : Dacă reducerea numărului de pluginuri nu este posibilă, există o opțiune de a rula pagini pe anumite pagini/nivel de utilizator sau tip de conținut. Un plugin comun folosit pentru aceasta este pluginul Plugin Organizer.
• Creatori de teme vs devenirea nativă : creatorii de teme oferă o mai mare flexibilitate și ușurință de utilizare, ideale pentru utilizatorii fără experiență de dezvoltare, deoarece permit un design personalizat cu interfețe simple de tip drag-and-drop. Cu toate acestea, pentru site-urile web mai complexe, temele native sunt adesea superioare datorită codului lor optimizat, ceea ce poate duce la performanțe mai bune și timpi de încărcare mai rapidi.

Dacă vedeți site-urile de top care rulează WordPress, cum ar fi techcrunch.com, time.com, veți observa că majoritatea vor avea teme native și vor rula un număr minim de plugin-uri.

Pentru site-ul de testare: Avem pluginuri dezactivate de care nu avem nevoie.

Pasul 6: Solicitarea de reutilizare, numită Caching

Memorarea în cache în WordPress este o tehnică puternică care îmbunătățește semnificativ performanța și viteza site-ului. Aceasta implică stocarea de copii ale conținutului site-ului web, cum ar fi paginile generate sau rezultatul interogărilor, pentru a le oferi mai rapid vizitatorilor care revin. Acest proces reduce sarcina pe server, deoarece nu este nevoie să regenereze același conținut cu fiecare vizită.

• Memorarea în cache a paginii : Această tehnică ocolește necesitatea de a încărca și procesa scripturile PHP cu fiecare încărcare a paginii, accelerând semnificativ timpii de răspuns. Drept urmare, reduce încărcarea serverului și îmbunătățește performanța site-ului web, mai ales în condiții de trafic intens. Unele pluginuri comune sunt {menționează pluginurile}
• Object Caching : Această metodă stochează rezultatele interogării bazei de date, reducând nevoia de a interoga baza de date în mod repetat pentru solicitări frecvente. Prin memorarea în cache a acestor obiecte, cum ar fi datele utilizatorului sau informațiile postate, serverul poate prelua și servi rapid aceste date fără a reprocesa aceleași interogări.
• Cache browser : Aceasta implică stocarea locală a resurselor site-ului web, cum ar fi foi de stil, imagini și fișiere JavaScript, în browserul utilizatorului. Odată ce aceste resurse sunt descărcate la prima vizită, browserul nu trebuie să le reîncarce la vizitele ulterioare. Acest lucru reduce semnificativ timpul de încărcare și utilizarea lățimii de bandă pentru vizitatorii care revin.

Pentru site-ul de testare: am activat Page Cache cu WP-Rocket, Redis Object Cache, Browser Cache este, de asemenea, setat în anteturi ( ajută la vizualizarea repetată). Noile numere

Pasul 7: Memorarea în cache la nivel de aplicație

Memorarea în cache la nivel de aplicație, folosind instrumente precum Varnish, Nginx FastCGI sau LiteSpeed ​​Cache, funcționează în afara WordPress și poate stoca în cache pagini web întregi la nivel de server. Acest tip de stocare în cache este foarte eficient, deoarece servește direct conținutul stocat în cache, ocolind necesitatea de a încărca în întregime WordPress. Este, în general, mai rapid decât pluginurile de cache specifice WordPress, care încă implică unele procesări PHP și baze de date.

• Cache-ul aplicației : în majoritatea cazurilor, va fi nevoie de gazda dvs. pentru a sprijini aplicația care face memorarea în cache. Acestea vor fi întotdeauna mai rapide decât memoria cache mai simplă bazată pe pluginuri WordPress și pot fi scalate într-o anumită măsură.
• Edge Caching : Aceasta implică stocarea de copii ale conținutului web pe servere distribuite geografic, mai aproape de utilizatorii din întreaga lume. Acest lucru reduce semnificativ timpul până la primul octet (TTFB) pentru utilizatorii care sunt departe de serverul de origine, deoarece conținutul este servit de la cel mai apropiat centru de date. Acoperim acest lucru în secțiunea următoare.

Pentru site-ul de testare: Avem lac disponibil pe serverele noastre, iar pentru Edge Caching vom folosi Cloudflare APO (5$ / lună).

Pasul 7: Utilizați un CDN

Utilizarea unei rețele de livrare de conținut (CDN) îmbunătățește semnificativ performanța și viteza site-ului. Un CDN distribuie conținutul site-ului web pe mai multe servere globale, asigurând accesul utilizatorilor la date din cea mai apropiată locație și reducând timpul de încărcare. De asemenea, ajută la echilibrarea încărcărilor de trafic și la gestionarea volumelor mari de trafic, prevenind supraîncărcarea serverului

• Memorarea în cache a activelor statice: prin memorarea în cache a activelor statice, cum ar fi fișierele imagini, CSS și JavaScript pe serverele CDN globale, aceste elemente se încarcă mai repede, deoarece sunt livrate de pe cel mai apropiat server de utilizator. Acest lucru reduce drastic timpul de încărcare a acestor active, în special pentru utilizatorii îndepărtați geografic de serverul original.

Pentru site-ul de testare: am mutat DNS-ul în Cloudflare și am activat APO pentru edge cache. TTFB similar ar trebui să fie acum disponibil la nivel global .

Pasul 8: Firewall de bază și Bots

Firewall-urile atenuează în mod eficient încărcarea serverului prin blocarea roboților și crawlerelor irelevante, care consumă adesea resurse inutile. Această acțiune împiedică aceste scripturi automate să supraîncărce serverul, păstrând astfel lățimea de bandă și eficiența CPU. Ca rezultat, firewall-urile asigură că capacitatea serverului este dedicată traficului legitim, îmbunătățind performanța și stabilitatea site-ului. Acest lucru duce la o experiență generală îmbunătățită a utilizatorului, cu acces mai rapid și interacțiuni mai fiabile cu site-ul web.

• Nivelul WordPress : Un firewall la nivel de WordPress oferă o soluție de securitate simplă pentru multe setări, oferind un strat de protecție ușor de implementat împotriva amenințărilor comune. Deși blochează în mod eficient multe solicitări și atacuri dăunătoare, funcționează la nivel PHP, ceea ce înseamnă că agenții răi pot consuma în continuare resursele serverului prin declanșarea proceselor PHP. Ele oferă un echilibru între simplitate și securitate, făcându-le o alegere populară pentru nevoile de bază. Vă recomandăm Wordfence pentru aceasta.
• Bazat pe proxy invers : Filtrează traficul înainte ca acesta să ajungă pe server, blocând cererile rău intenționate la marginea rețelei. Această abordare împiedică agenții răi să consume resursele serverului, deoarece traficul nedorit nu atinge niciodată stratul PHP al site-ului dvs. WordPress. În plus, aceste servicii oferă beneficii suplimentare precum protecție DDoS și capabilități CDN, îmbunătățind atât securitatea, cât și viteza site-ului. Acest lucru le face o soluție mai cuprinzătoare și mai eficientă pentru protejarea și optimizarea site-urilor web. Vă recomandăm să utilizați Cloudflare pentru aceasta, deoarece planul gratuit permite și o protecție suficientă pentru majoritatea site-urilor.

Pasul 9: Optimizarea pentru Core Web Vitals

Acum, că elementele de bază sunt la locul lor, în sfârșit optimizăm pentru ca elementele vitale web de bază să înceapă, puteți obține pluginul Disable JS for clone și vă asigurați că site-ul dvs. arată la fel cu Javascript activat sau dezactivat. În continuare, trecem la optimizarea celor mai importanți 3 parametri Core Web Vitals

LCP, FID și CLS cu trei parametri ar trebui să fie verzi pentru a obține un scor bun, iată câteva sfaturi pentru optimizarea acestora

• Optimizarea pentru LCP : Largest Contentful Paint (LCP) este o măsură a performanței de încărcare. Dacă ați trecut prin îmbunătățirile de mai sus, cum ar fi optimizarea imaginii, utilizarea webp-ului și încărcarea leneșă, în versiunea desktop ar trebui să fie ușor să obțineți un scor peste 90. Optimizările necesare pentru aceasta sunt:
  — Îmbunătățiți dimensiunea imaginii și imaginea bazată pe WebP
  — Încărcare leneră a activelor precum imagini, cadre iframe etc
  — Reduceți solicitările și optimizați CSS și JS
• Optimizarea pentru FID : First Input Delay (FID), măsoară interactivitatea. Optimizările necesare pentru aceasta sunt cele care au fost acoperite anterior:
  — Amânați Javascript pentru a îmbunătăți cât de repede pagina devine interactivă
  — Evitați încărcarea scripturilor de la terți la început
• Optimizare pentru CLS : Cumulative Layout Shift (CLS), care măsoară stabilitatea vizuală. Acest lucru înseamnă în principal că aspectul nu se mișcă atunci când site-ul se încarcă, câteva metode rapide de a face acest lucru sunt să specificați dimensiunile imaginii și ale videoclipului și să vă asigurați că site-ul arată la fel cu JS dezactivat (în Chrome puteți utiliza). Câteva sfaturi rapide
  — Specificați dimensiuni pentru imagini și videoclipuri
  — Evitați conținutul dinamic deasupra pliului
  — Păstrați spațiu în care se vor încărca reclamele și alte asemenea conținuturi dinamice.

Sper că după ce ați urmat pașii ar fi trebuit să vă puteți face site-ul mai rapid. Dacă aveți alte idei și sugestii care pot aduce îmbunătățiri semnificative în partea de front-end a lucrurilor.

Puneet

Puneet Sharma este expert în optimizarea SMTP și WordPress. Cu peste 10 ani de experiență și un angajament, el creează configurații eficiente de e-mail pe diverse platforme care generează clienți potențiali și cresc conversiile.