Îmbunătățirea timpului de încărcare a paginii pe site-urile WordPress

Dacă ați petrecut ceva timp dezvoltând pe WordPress, probabil că ați întâlnit o temă lentă care încarcă tone de fișiere fără un motiv aparent, producând un site web lent și o mare durere de cap. Poate fi infinit de frustrant să construiești un site web minunat, care să ruleze lent. Această încetinire are un efect asupra tuturor și tuturor celor implicați - despre tine, afacerea și reputația ta.

La Go Fish Digital, suntem adesea chemați pentru a rezolva problemele legate de timpul de încărcare a paginii și facem acest lucru în mai multe moduri. Deci, cum puteți reduce timpul de încărcare a temei sau a site-ului dvs. WordPress? Am subliniat mai jos câteva sfaturi care vor ajuta la rezolvarea acestei probleme:

Detectați problema

Primul lucru de făcut este să determinați ce face ca site-ul dvs. WordPress să se încarce lent. Sunt imagini mari, multe solicitări HTTP, fișiere Javascript sau toate cele de mai sus? Este treaba ta să afli.

Cel mai simplu mod de a găsi aceste informații este să utilizați instrumentele interne ale browserului dvs. Dacă utilizați Chrome, navigați la pagina cu probleme și apăsați Command + Alt/Option + J pentru Mac, Ctrl + Shift + C sau F12 pentru Windows sau faceți clic dreapta pe pagină și selectați „Inspectați” . Acest lucru vă va aduce „inspectorul”. Veți vedea ceva de genul următor:

Al tău s-ar putea să vină mai mic – asta e normal. Trebuie doar să întindeți fereastra pentru a încadra mai multe informații. Puteți chiar andoca inspectorul în diferite părți ale ferestrei sau îl puteți deschide ca fereastră proprie, dacă doriți. Acum, trebuie să navigați la fila „Rețea” din zona din mijloc de sus. Ar trebui să vedeți ceva de genul următor:

În acest moment, este posibil să nu vedeți nimic în această secțiune. Dacă se întâmplă acest lucru, pur și simplu reîmprospătați pagina . Pe măsură ce datele paginii se încarcă, veți începe să vedeți că această fereastră se completează cu diferite intrări. Acestea vor fi diverse fișiere și apeluri legate de rețea care pot fi reglate fin pentru a vă accelera timpul de încărcare.

După ce sortați intrările după care fișierele/apelurile durează cel mai mult timp pentru a se încărca, veți începe să vedeți elemente precum imagini, fișiere Javascript și CSS. Acest lucru este normal și pe asta te vei concentra inițial.

Notă: uneori, strângerea de active de pe diferite site-uri web reprezintă problema (cum ar fi widget-uri Facebook/Twitter, reclame etc.). În aceste cazuri, va trebui să vă consultați cu terța parte pe care o utilizați pentru a găsi o modalitate unică de a reduce timpul de încărcare.

Minimizează toate lucrurile

Minificarea este procesul de eliminare a datelor redundante sau inutile fără a afecta modul în care totul este procesat de browser. Aș începe aici cu majoritatea problemelor cu un site. Adesea, când te uiți prin fila Rețea, vei vedea o mulțime de fișiere CSS. De fiecare dată când browserul trebuie să meargă la server pentru a prelua ceva, cum ar fi un fișier CSS sau un Javascript, determină mai mult timp de încărcare. Chiar dacă un singur fișier este mai mare decât mai multe fișiere separat, un singur fișier se va încărca mai repede, deoarece există mai puține solicitări de server. Iată o mică listă de plugin-uri care vă vor ajuta să comprimați acele fișiere CSS și Javascript într-o singură descărcare ușor de gestionat pentru vizitatorii dvs.:

• Optimizați automat
• Îmbinare + Minimizare + Reîmprospătare
• Minimizare rapidă a vitezei
• Minqueue (este oarecum învechit, dar încă funcționează destul de bine!)

Autoptimize este un bun exemplu de plugin cu adevărat simplu și util care va reduce timpul de încărcare a paginii. Echipa noastră de dezvoltare web l-a folosit pe mai multe site-uri web și am văzut rezultate excelente.

Un lucru de reținut este că comprimarea întregului JavaScript de pe site-ul dvs. poate duce la unele dificultăți cu alte plugin-uri, cum ar fi WooCommerce, așa că rămâneți vigilenți!

Compresia imaginii și Lazy Loaders

O altă problemă comună care creează site-uri web lente este încărcările mari de imagini atât pe desktop, cât și pe mobil. Dacă te-ai uitat la fila Rețea de mai înainte și ai văzut că ai încărcat masiv imagini, atunci această parte este pentru tine. Din fericire, există câteva plugin-uri care ne ajută să comprimăm o imagine. Recomand urmatoarele:

• Smushit
• TinyPNG
• ShortPixel Image Optimizer

Totuși, pentru a comprima manual imaginile din tema dvs., aș merge doar la TinyPNG. Acest instrument produce un fișier zip cu toate imaginile proaspăt comprimate. Apoi puteți încărca acele fișiere în tema dvs. pentru a suprascrie imaginile existente.

Ați auzit despre Lazy Loaders? Încărcarea leneră este o tehnică Javascript care încarcă o imagine pe pagina dvs. numai atunci când utilizatorii dvs. o văd efectiv. Este o caracteristică destul de utilă și există câteva plugin-uri care o pot realiza:

• BJ Lazy Load
• Lazy Load de WP Rocket

După ce ați terminat de instalat pluginul, reîmprospătați pagina și asigurați-vă că vedeți fila Rețea pentru modificări.

Notă: este o idee bună să reoptimizați și să reîmprospătați periodic toate imaginile de pe site-ul dvs. Există un mic plugin grozav pentru asta chiar aici.

Cache plugin-uri

Memorarea în cache a paginilor este o parte foarte importantă a dezvoltării web și a optimizării web. Memorarea în cache stochează, practic, diverse răspunsuri, fișiere și alte informații pentru reutilizare rapidă ulterioară. Puteți citi puțin mai multe despre el aici. Pe scurt, există diferite niveluri de stocare în cache în aplicația/site-ul dvs. web care afectează totul, de la server până la paginile web reale care sunt accesate.

WordPress, cu ajutorul pluginurilor de mai jos, poate reda date și le poate stoca pentru o utilizare ulterioară atunci când un alt vizitator accesează site-ul dvs. Acest lucru vă va ajuta să vă accelerați enorm site-ul. Vă recomand următoarele pluginuri cache (asigurați-vă că discutați cu soluția dvs. de găzduire despre care preferă):

• Cache total W3
• WP Super Cache
• Sucuri Security și alte servicii Sucuri
• Cache încorporat de la furnizorul de găzduire (WP Engine este un bun exemplu în acest sens)

Rețele de livrare de conținut (CDN)

Imaginează-ți că încerci să primești o scrisoare către vecinul tău. Cel mai probabil ai ieși din casă și ai înfige scrisoarea în cutia poștală a celeilalte persoane, ceea ce nu necesită deloc mult timp sau efort din partea ta. Acum, imaginați-vă dacă scrisoarea dvs. trebuie să ajungă la cineva din altă țară. Va trebui să treceți printr-un proces mult mai lung și anevoios, cum ar fi să mergeți la oficiul poștal, să cumpărați poștă și apoi să așteptați zile pentru a vă asigura că destinatarul a primit-o. În esență, asta se întâmplă atunci când solicitați site-ul cuiva.

Rețelele de livrare a conținutului (CDN) acționează ca și cum cineva dintr-o altă țară ar accesa site-ul dvs. de lângă tine. Există o mulțime de computere configurate în întreaga lume cu activele site-ului dvs. pe ele, care le livrează persoanelor mai apropiate de ei decât sunteți dvs. Acest lucru scade dramatic timpul de încărcare a paginii și permite o mai bună optimizare a serverului dvs. Există și alte beneficii ale CDN-urilor despre care puteți citi în acest articol. Există mai multe servicii excelente pentru CDN-uri, inclusiv, dar fără a se limita la:

• CloudFlare
• Cloudfront de la AWS
• CDN77
• StackPath
• etc.

Așadar, să presupunem că sunteți dezvoltator și ați încercat toate aceste opțiuni diferite - este disponibil și mai mult reglaj fin? Aș dori să trimit o metodă pe care am folosit-o pe mai multe site-uri web.

Controlează toate ieșirile cu cod

Notă: Următoarea parte a articolului poate cauza probleme cu front-end-ul site-ului dvs., dacă sunteți nou în dezvoltare. Cel mai bine este să nu faci asta pe serverele de producție până când nu te simți încrezător în procesul și teoria din spatele acestei idei. Faceți asta doar dacă știți exact ce doriți pe front-end în ceea ce privește Javascript și CSS.

Înainte de a începe să comprimați și să optimizați codul și mai mult, ar trebui să știți exact ce fișiere CSS și fișiere Javascript doriți să încărcați în pagină. Deocamdată, am ÖAD propriul fișier și CSS fișier JavaScript comprimat în antet și subsol și a dezactiva toate fișierele JavaScript și CSS că ieșirile WordPress. Puteți face asta în următoarele două cârlige:

Fragmentul de cod de mai sus se află de obicei în fișierul header.php în dosarul tema lui, și toate ieșirile codul de antet în cazul în care ați putea include JavaScript, CSS, și multe altele. Puteți citi mai multe despre asta în Codexul WordPress aici. Un alt loc în care WordPress injectează cod este în subsol. Puteți vedea acest lucru în fișierul footer.php al temei dvs. Puteți citi despre asta și în codex. Cârligul va fi următorul fragment de cod:

Apoi, trebuie să preia controlul asupra întregului Javascript și a tuturor CSS din tema ta. Pentru a face acest lucru, trebuie să îi spuneți lui WordPress să nu permită afișarea fișierelor Javascript și CSS. O temă înregistrează de obicei aceste fișiere în fișierul functions.php respectiv , dar trebuie să îi spuneți WordPress să nu permită niciunuia dintre ele din antet sau subsol să se înregistreze în fișierul funcs.php. Fiecare temă ar trebui să aibă acel fișier functions.php, așa că găsiți-l pe al dvs. (sau faceți-l în rădăcina temei dvs.) și adăugați următorul cod în fișierul functions.php:

Dacă reîmprospătați pagina, ar trebui să vedeți că, în cea mai mare parte, nu au fost încărcate fișiere javascript.

Sfat: Toate JavaScript ar trebui să fie încărcate în subsol, în timp ce CSS este încărcat în antetul site-ului. Acest lucru permite browserului să redea structura site-ului web înainte de a începe cu Javascript. De obicei, acest lucru are ca rezultat cea mai bună experiență pentru utilizatori.

Dacă reîmprospătați pagina acum, veți vedea un site cu adevărat încurcat, deoarece nu sunt afișate fișiere CSS. Asta e ceea ce vrei. Acum, vei controla totul prin plasarea fișierelor în locul tuturor acelor fișiere Javascript și CSS.

Deci, să presupunem că știți ce foaie de stil doriți să încărcați. Poate fi rezultatul dvs. comprimat de la Gulp sau Grunt situat într-un folder precum (theme)/assets/build/CSS/main.css sau ceva similar. Poate fi chiar fișierul style.css din rădăcina folderului cu tema. Oricum, doriți să scoateți foaia de stil principală. Iată codul (editați-l pentru a se potrivi cu locația și numele fișierului dvs.):

Deci, acum să presupunem că ați comprimat un fișier Javascript în același mod în care ați comprimat CSS. Acum puteți încărca JavaScript în subsolul site-ului dvs. astfel:

Reîncărcați pagina și acum ar trebui să puteți localiza fiecare fișier în codul sursă. Acest lucru asigură că codul PHP pe care îl aveți în fișierul functions.php funcționează. Acum puteți verifica fila Rețea și puteți vedea dacă v-ați îmbunătățit în ceea ce privește dimensiunile și timpul general de încărcare.

Concluzie

Cel mai important lucru de reținut este că este absolut posibil să remediați problemele de încărcare a paginii, dar este nevoie de rezolvare creativă a problemelor și de puțină cercetare. Nu uitați să aruncați o privire atentă la instrumentele care sunt native pentru browserul dvs. pentru a vă ajuta să găsiți problema. Apoi, uitați-vă la pluginurile menționate mai sus și la strategiile pentru a produce site-uri web îngrijite și bine formate pentru consumul public. O poți face!

Spuneți-mi dacă sfaturile mele v-au ajutat să îmbunătățiți timpii de încărcare pe site-ul dvs. în comentariile de mai jos.