Lista de verificare pentru optimizarea WordPress

Optimizarea WordPress este arta de a vă face site-ul să ruleze cât mai repede posibil, îmbunătățindu-vă experiența utilizatorului, reducând costurile serverului și are beneficii SEO.

Multe studii arată că vizitatorii nu doresc să aștepte să se încarce un site web și sunt înclinați să se îndepărteze de site-ul dvs. dacă încărcarea durează prea mult.

Un site web cu încărcare rapidă este deosebit de important pentru dvs. dacă aveți un magazin online și doriți să vă îmbunătățiți ratele de conversie.

Testele de la Amazon au dezvăluit rezultate similare: la fiecare creștere de 100 ms a timpului de încărcare al Amazon.com a scăzut vânzările cu 1% (Kohavi și Longbotham 2007)

Sursa: https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

Viteza de încărcare a site-ului dvs. este, de asemenea, extrem de importantă pentru clasarea dvs. pe Google, ceea ce face ca optimizarea site-ului să fie parte a strategiei dvs. SEO.

Dar, site-ul meu se încarcă foarte repede!

Sigur că da. Cel putin pentru tine. Dar ați încercat să vă vizitați site-ul web pentru prima dată după mult timp?

Când navigați pe site-ul dvs. web, cea mai mare parte va fi stocată în cache în browser. Dacă doriți să obțineți prima experiență, goliți memoria cache sau utilizați un browser complet diferit.

Există o mulțime de lucruri de făcut care pot îmbunătăți viteza site-ului dvs. WordPress, să începem.

Minimizarea scripturilor

Site-urile WordPress sunt o combinație de HTML, CSS, JavaScript și imagini. Codul HTML este încărcat mai întâi și apoi conține informații despre alte fișiere de foi de stil CSS, fișiere JavaScript și imagini.

Fiecare fișier este încărcat pe rând. Un browser are în mod normal o limită de 2-4 „țevi”, ceea ce înseamnă că browserul va încărca până la 2-4 fișiere în același timp de pe serverul pe care sunt găzduite fișierele.

Dacă vă uitați prin codul HTML al site-ului dvs. WordPress, veți observa multe fișiere .css și .js diferite. Fiecare dintre acestea provine de obicei din pluginuri diferite, fiecare adăugând fie fișiere .js, fie .css la mix.

În unele cazuri, pluginul va injecta chiar și stiluri JavaScript sau CSS direct în HTML Majoritatea dezvoltatorilor de pluginuri WordPress sau autorilor de teme sunt suficient de inteligenți pentru a nu face acest lucru.

Acesta este doar o mostră dintr-un site web WordPress normal. Codul HTML are legături către alte câteva fișiere. În acest exemplu simplu sunt încărcate 4 fișiere JavaScript, unul câte unul.

<script type="text/javascript” src="https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2″></script>

<script type="text/javascript” src="https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″></script>

<script type="text/javascript” src="https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″></script>

<script type="text/javascript” src="https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2″></script >

WordPress are funcții interne care permit autorilor de pluginuri și teme să încorporeze fișierele JavaScript și CSS necesare.

wp_enqueue_script() și wp_enqueue_style(). Numele funcțiilor oferă un indiciu solid despre ceea ce fac. Folosind oricare dintre acestea pentru a încorpora fișierele necesare, autorii de pluginuri și teme își pun în coadă fișierele împreună cu toate celelalte plugin-uri și chiar cu WordPress însuși.

De asemenea, este posibil să instruiți funcțiile oricăror dependențe ale altor biblioteci, de obicei, un fișier JavaScript include depinde de jQuery care urmează să fie încărcat mai întâi.

De obicei, găsesc și instalez un plugin de minificare, îl activez și apoi văd dacă se strica ceva pe site. De acolo mă duc să identific exact ce eșuează și dacă trebuie doar să schimb câteva setări pentru a o remedia.

Pluginurile de minimizare tind să aibă setări de excludere pentru anumite fișiere care nu se redau bine atunci când sunt încărcate cu altele sau pentru a schimba locul în care sunt încărcate fișierele, în antetul sau subsolul documentului.

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

Notă: În exemplul de cod, stochez adresa URL a temei într-o variabilă și apoi o analizez în funcția wp_enqueue_script. Acest lucru reduce numărul de apeluri PHP și/sau baze de date necesare, adăugând viteză crescută.

În căutarea unor viteze de încărcare extreme, aș putea alege să codific calea URL absolută, dar acest lucru ar limita tema la un singur domeniu și ar face mai dificilă reutilizarea codului pe alt site.

După instalarea unui plugin de minimizare, foile de stil JavaScript și CSS sunt acum unite în mai puține apeluri HTTP.

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

Aceasta combină cele 4 fișiere într-un singur „fișier”/solicitare pentru browserul dumneavoastră.

Am întâlnit site-uri web bazate pe WordPress care aveau încărcate 22 de fișiere .css, precum și 15 .js. Toate pe prima pagină. Schimbarea vitezei poate fi uimitoare dacă puteți reduce cantitatea de fișiere externe.

Deși scripturile de minimizare tind să aibă îmbunătățiri uriașe de viteză, este, de asemenea, una dintre tehnicile pe care le folosesc și care tind să aducă cele mai multe probleme la configurare.

Optimizați header.php

Header.php din tema dvs. este apelat pe fiecare pagină de pe site-ul dvs. WordPress. Acest fișier are de obicei o mulțime de elemente care pot fi optimizate.

Un exemplu clasic este bloginfo('template_directory') care este de obicei numit de mai multe ori în antet pentru a returna adresa URL a temei pentru includerea fișierelor externe.

O metodă mai eficientă este să faceți o singură cerere pentru adresa URL și apoi să o stocați ca variabilă.

$template_directory = get_bloginfo('template_directory'); 

Url-ul directorului temei este acum stocat în variabila $template_directory.

Mai multe exemple despre cum să îmbunătățiți eficiența header.php pot fi citite în postarea de blog WordPress header.php Sfaturi de optimizare

Reducerea numărului de pluginuri

O altă parte importantă în optimizarea WordPress este menținerea cât mai scăzută a numărului de pluginuri activate. Este tentant pentru mulți utilizatori să testeze și să experimenteze cu diferite plugin-uri, ceea ce este într-adevăr unul dintre beneficiile WordPress.

Cu toate acestea, având o mulțime de plugin-uri active poate reduce viteza site-ului dvs. WordPress. Multe plugin-uri au o singură funcție care ar putea fi la fel de ușor gestionată de o bucată de cod introdusă în functions.php.

În multe cazuri, este posibil să aveți nevoie doar de o singură funcție, dar pluginul pe care îl utilizați are câteva alte opțiuni pe care nu le utilizați niciodată.

Analizați fiecare plugin de pe site-ul dvs. și asigurați-vă că aveți nevoie de ele. Dacă nu aveți nevoie de ele sau funcționalitatea poate fi înlocuită cu codul functions.php, dezactivați și ștergeți pluginurile.

Nu folosi imagini – folosește CSS3

Designul site-urilor web folosește imagini pentru a ajuta la realizarea interfeței cu utilizatorul.

După introducerea CSS și în special CSS3, multe efecte care sunt utilizate pentru interfețele web pot fi imitate folosind codul CSS și HTML.

[caseta]Notă: cele mai multe dintre aceste efecte nu sunt compatibile cu toate browserele, în special cu Internet Explorer mai vechi (da, întotdeauna copilul problemă pentru orice dezvoltator web). Dacă doriți să optimizați viteza site-ului dvs., utilizarea efectelor CSS poate fi o soluție rapidă și rapidă, dar nu o alegere bună dacă publicul major al clientului folosește browsere învechite.[/box]

Dacă lucrați pentru un client care vizează B2C (business to consumer), ar trebui să verificați Google Analytics sau să-i întrebați despre ce fel de clienți au (sau doresc să vizeze). Acest lucru poate influența dacă puteți utiliza efectele CSS3 dacă publicul clienților utilizează în general browsere învechite.

Când Elegantthemes.com a lansat o nouă versiune a pluginului lor de coduri scurte, a avut un impact enorm asupra timpului de încărcare pentru clienții mei datorită efectelor CSS3 și a punerii mai multor imagini într-un singur sprite.

Dosarul shortcodes/images, care conținea 90 de imagini, are acum un singur sprite PNG, reducând dimensiunea totală de la 140 kb la 15 kb!
(Aceasta este o reducere de aproximativ 90% a dimensiunii.)

Imagini pentru sprite

Optimizarea cu sprite a unei teme existente poate consuma puțin timp, dar poate aduce și o îmbunătățire mare a vitezei site-ului dvs.

Un sprite este o singură imagine, de obicei în format .PNG, care are mai multe elemente ale designului/aspectului dvs. vizual. În loc să încărcați fiecare element grafic individual, toate imaginile sunt unite într-unul sau în cât mai puține sprite-uri.

Această tehnică ar trebui să fie folosită numai pentru imaginile folosite pentru amenajarea designului, și nu pentru imaginile prezentate, miniaturile etc.

În loc să încărcați fiecare imagine individuală (o cerere http diferită), toate imaginile sunt grupate într-un singur fișier, iar CSS-ul care afișează fiecare imagine este modificat pentru a deplasa pur și simplu fundalul în locul în care se află partea necesară în sprite.

SpriteMe.org este o resursă excelentă pentru crearea de sprite-uri. Cea mai bună metodă este să planificați din timp și să vă construiți mai întâi sprite-urile, dar dacă aveți nevoie să reparați un site web existent, site-ul spriteme.org are un bookmarklet care face procesul foarte ușor.

Exemplu de stiluri CSS în combinație cu un sprite:

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

Fiecare stil CSS face referire la același fișier, dar poziția de fundal este diferită, arătând diferitele părți ale imaginii.

Distribuie – Utilizați un CDN

Există două avantaje principale pentru utilizarea unui CDN (Content Distribution Network) pentru găzduirea fișierelor dvs. de temă și a elementelor WordPress.

Fișierele dvs. sunt încărcate mai rapid, deoarece se află pe un alt domeniu. Limita browserului de 2-4 descărcare simultană de fișiere este pentru fiecare domeniu .

Deci, dacă fișierele dvs. sunt găzduite pe un alt domeniu, un browser va încărca aceste fișiere singur, făcând de fapt site-ul dvs. web să se încarce mai rapid, precum și reducerea stresului de încărcare asupra domeniului și gazdei dvs.

Un alt beneficiu este că, dacă utilizați un CDN major, acestea vor avea servere distribuite în întreaga lume, care detectează apoi de unde este vizitatorul dvs. și apoi le vor servi fișierele de pe cel mai apropiat server din rețeaua lor.

Serverul potrivit pentru site-ul dvs

Serverul care găzduiește site-ul web trebuie să fie situat aproape de publicul țintă. Deci, dacă un site web este orientat către piața germană, cel mai bine este să găsești un server cu o companie de găzduire în Germania, sau cel puțin în Europa Centrală.

Acest lucru are un impact mare pentru vizitatorii dvs. care se încarcă de pe un server mult mai aproape de locul în care se află, făcând navigarea pe site-ul dvs. mult mai rapidă.

Acest lucru are și o influență SEO, nu numai pentru că site-ul se încarcă mai repede, ci și pentru că adaugă la importanța site-ului pentru publicul german și, prin urmare, ar trebui să aibă și un clasament mai ridicat.

Efectul real în ceea ce privește SEO este discutabil, dar dacă încercați să îmbunătățiți performanța site-urilor dvs., merită luat în considerare.

Acest lucru este binecunoscut pentru SEO, dar odată ce un site a fost configurat, este rar să îl vezi mutat pe un alt server din motive pur SEO. Totuși, merită să ții cont pentru următorul tău proiect.

Remediați erorile 404

Ar trebui să verificați în mod regulat site-ul dvs. web pentru a vă asigura că nu aveți pagini 404 – oricum nu au fost găsite. Reducerea linkurilor proaste pe site-ul dvs. poate reduce încărcarea serverului și va oferi o experiență mai bună pentru utilizator. Nu numai că link-urile și paginile pot lipsi, uneori o greșeală de tipar sau un alt tip de greșeală poate duce la conținut care nu este găsit pe site-ul dvs.

Sfat: Consultați această bucată de cod pentru a redirecționa automat 301 paginile negăsite.

[cutie]
Această pagină este departe de a fi finalizată și nu acoperă încă toate detaliile optimizării WordPress. Scopul este de a crea o resursă de sfaturi și trucuri pentru a profita la maximum de site-ul tău WordPress.

Unele sau majoritatea trucurilor vor fi dificil de implementat dacă nu sunteți dezvoltator, dar fiecare dintre ele va face site-ul dvs. WordPress să ruleze mai rapid.
[/cutie]

Lista de verificare

Aceasta este lista de verificare, vă rugăm să rețineți că fiecare site web și proiect este diferit. Nu toți pașii pot fi utilizați pe toate site-urile web.