Viteza de incarcare a unui site

In legătură cu acest subiect sunt discuți foarte multe însă e clar ca fiecare website are particularitățile sale si fiecare particularitate poate îngreuna mai mult sau mai puțin încărcarea unui website.

De asemenea, au apărut mai multe instrumente si metode care va oferă un scor de încărcare al paginilor web insa din punctul meu de vedere cel mai bine este sa va rezumați la Google page speed tools, Pingdom Tools si GTMatrix.

De asemenea, este important sa puneți foarte mult accentul pe experiența utilizatorului si navigarea pe website sa fie o experiență plăcută pentru vizitator. In ceea ce privește platforma WordPress, eu o folosesc de foarte mult timp si am văzut care sunt cele mai comune probleme pe care le poate avea un website atunci când vine vorba de viteza de încărcare, chiar daca este vorba de o tema Premium sau Free.

Voi încerca sa explic fiecare mod de optimizare al fisierelor:

1: Minimizarea fișierelor CSS

Este probabil unul din cele mai grele procese de optimizare a unui fișier. De ce oare?

Chiar daca tehnic vorbind conceptul sau este unul foarte simplu, in realitate marea majoritate, mai ales in cazul persoanelor ne obișnuiți cu tehnicile IT renunță repede la aceasta analiza si prefera sa apeleze la cineva specializat.

Pentru cei care sunt familiarizați cu aceste tehnici e ceva mai simplu si descoperă o mulțime de instrumente care sa ii ajute la acest proces.

Ce este defapt Minimizarea ( in engleza minification ).

Pe anumite site-uri o sa il întâlniți mai simplu ca si optimizarea fisierelor CSS, JS si HTML. Alti il numesc minificare.

In general procesul de optimizare este alcătuit din 2 procese complementare:

• Minificarea
• Concatenarea

Minificarea înseamnă eliminarea parților inutile ale fișierelor CSS si JS ( Java Script )pentru a le face mai compacte.

Când un programator scrie un cod acesta include întreruperi de linie, spatii albe si comentarii care vor face codul mai ușor de citit insa navigatorul dumneavoastră web nu are nevoie sa proceseze codul. Deci, minificarea elimina aceste elemente inutile. Acest cod va fi mult mai ilizibil pentru vizitatori însă computerelor chiar nu le pasa de acest lucru pentru ca il pot procesa fără probleme. Aceste spatii, parți inutile pot adaugă câțiva octeți suplimentari la dimensiunea fișierului ceea ce le va face puțin mai mari decât e necesar.

Deci in concluzie ideea este sa reducem dimensiunea fișierelor astfel încât acestea să se descarce mai repede.

Înainte de reducere, un fișier CSS va arăta cam așa:

Dupa ar trebui sa apara asa :

Concatenare

Concatenarea înseamnă unirea codurilor. Daca de exemplu aveți 10 fișiere CSS pe site-ul dumneavoastră procesul de concatenare le va combina.

La ce va ajuta Minificarea

Voi încerca sa fac o analogie pentru a fi mai ușor de inteles. O analogie in care vorbim despre solicitările HTTP ( solicitări ale browserului ).

Imaginați-vă că sunteți cu niște prieteni. Mergi la bar pentru a comanda o rundă de băuturi, pentru tine și cei 7 prieteni ai tăi. În acest exemplu, sunteți ca browserul web (de exemplu, Chrome, Safari etc.), iar barmanul dvs. este serverul web. Barmanul tău are maximum 2 mâini, așa că poate să aducă doar câteva beri dintr-o singură dată. Asta înseamnă că trebuie să facă în total 4 călătorii la frigider pentru a vă aduce cele 8 beri. Asta consumă mult timp.

Dar, dacă comandați în schimb un ulcior de bere? În acest fel, toate cele 8 băuturi sunt într-un singur recipient, astfel încât într-o singură călătorie, barmanul vă poate aduce comanda. Este mult mai eficient.

La fel ca barmanul dvs., browserele pot gestiona doar un anumit număr de fișiere simultan. Deci, cu cât aveți mai multe fișiere pe site-ul dvs., cu atât mai multe călătorii către server sunt necesare. Și site-urile web moderne comandă adesea zeci de fișiere la un moment dat.

Concatenarea unește mai multe fișiere, astfel încât serverul dvs. să poată trimite mai puține fișiere către browser și va fi un proces mai rapid.

Sună destul de ușor, deci care este problema?

In unele cazuri minificarea și concatenarea corect facuta pot face minuni. Fiecare site se va comporta diferit în funcție de setul specific de teme și plugin-uri care rulează și de modul în care sunt codate. Mediile server pot face, de asemenea, o diferență.

Acest lucru poate fi o problema pentru daca incercati sa faceti testul cu Google PageSpeed deoarece google doreste altceva, doreste ca fisierele JS sa fie mutate in partea de jos a site-ului insa acest lucru poate aduce alte probleme site-ului. Da, stiu este greu sa gasesti un echilibru perfect intre toate instumentele de testare a vitezei.

Minificarea merită efortul?

Din punctul meu de vedere da, merita efortul chiar daca nu este cel mai mare câștig al site-ului. Aici am vorbit despre minificarea fișierelor CSS, deoarece minificarea JS este o adevărată provocare pentru cei care nu au experiență deoarece nu sunt chiar atât de intuitive si nu va puteți da seama care ar trebui eliminate.

Implementarea memorării în cache a paginilor și optimizarea imaginilor dvs. sunt ambele destul de ușor de implementat și în care veți vedea o îmbunătățire vizibilă a timpului de încărcare.

Despre Optimizarea unui website am mai scris acum ceva timp insa acest articol se refera strict la optimizarea fisierelor.

2: Optimizați livrarea CSS

Resursele de blocare a randării sunt fișiere statice, cum ar fi fonturi, fișiere HTML, CSS și JavaScript, care sunt vitale pentru procesul de redare a unei pagini web.

Când browserul întâlnește o resursă de blocare a redării, acesta încetează să descarce restul resurselor până când aceste fișiere critice sunt procesate. Între timp, întregul proces de redare este suspendat. Pe de altă parte, resursele care nu blochează randarea nu amână redarea paginii. Browserul le poate descărca în siguranță în fundal după redarea inițială a paginii.

Cu toate acestea, nu toate resursele pe care browserul le consideră că blochează sunt esențiale pentru prima afisare; totul depinde de caracteristicile individuale ale paginii.

Există cele mai bune practici pe care le puteți utiliza pentru a transforma aceste resurse de blocare a redării non-critice în resurse care nu blocează redarea. În plus, puteți reduce, de asemenea, numărul și / sau dimensiunea resurselor de blocare a redării, care sunt încă critice și nu pot fi eliminate. Astfel viteza de incarcare a unui site devine mult mai buna

De ce să eliminăm resursele de blocare a randării?

Opțiunea de la WP Roket de Optimizare livrare CSS abordează recomandarea PageSpeed Google:

Eliminate render-blocking resources sau in RO Eliminați resursele de blocare a redării

Ce face aceasta optiune?

• Generarea căii critice CSS necesare pentru a reda partea vizibilă a site-ului dvs. web
• Încărcarea tuturor celorlalte fișiere CSS în mod asincron, care este amânat, fără blocarea redării.

Ce se intampla defapt cand activati aceasta optiune ?

CSS va fi generat pentru site-ul dvs. în fundal și adăugat la următoarea încărcare a paginii. După aceea, CSS va fi încărcat asincron (adică fără blocarea redării) pe site-ul dvs.

Calea critică CSS va fi eliminată la încărcarea paginii. Acest lucru ar trebui să prevină problemele de aspect atunci când un site injectează JavaScript sau actualizează clasele CSS după ce calea critică CSS a fost aplicată.

CSS este stocat în următorul folder de pe serverul dvs.: / wp-content / cache / critical-css /

Se vor face unele modificări ale codului:

• Căile relative din imagini și fonturi vor fi schimbate automat în adrese URL absolute.
• CSS critice vor fi tăiate și minimizate cu grijă. Aceasta înseamnă că toate spațiile necesare (cum ar fi în interiorul operațiilor calc ()) sau backslashes (cum ar fi ‘\ f311’ pentru un glif într-un font de pictogramă) vor fi păstrate.
• Regulile privind fața fontului vor fi eliminate pentru a îmbunătăți metrica Vopsea cea mai mare conținut
• În paginile în care această opțiune este activă, fonturile nu vor fi preîncărcate, pentru a îmbunătăți Largest Contentful Paint.

3: Combina fisierele CSS

În timp ce concatenarea (adică combinarea CSS și JS în mai puține fișiere) este considerată o bună practică în HTTP / 1, nu este neapărat cazul HTTP / 2.

Există dezbateri în curs cu privire la faptul dacă unele concatenări, adică combinarea fișierelor în grupuri mici, sunt benefice. Răspunsul real este că poate varia de la un site la altul. Avem tendința să credem că, concatenarea nu va avea un beneficiu atât de mare pe HTTP / 2, dar ar trebui să testați timpul de încărcare al site-ului dvs. cu și fără aceste opțiuni, deoarece rezultatele pot varia.

Dacă serverul dvs. folosește HTTP / 1, merită să le încercați. Rețineți însă că aceste setări nu funcționează cu toate pluginurile sau temele!

Aceasta optiune se poate activa la WP Roket si daca aveti anumite fisiere exceptate acestea se pot adauga in lista de exceptii.

4: Minifica si combina fisierele Java Script

Combină fișierele JavaScript îmbină resursele interne ale site-ului, resursele terțe și JS-ul în-line, reducând cererile HTTP.

Aici se aplica aceiasi filozofie ca la minificarea fisierelor CSS, ceea ce am scris mai sus. Este urmarita aceiasi logica, daca site-ul dumneavoastra inglobeaza fisiere JS ale temei sau ale unui anumit modul acestea trebuie optimizate si concatenate deaseemnea.

Se pot specifica deasemenea anumite fisiere care sa fie excluse din lista de concatenare. sunt acele fisiere care pot cauza anumite probleme de functionare sau grafice pentru website.

Pentru a le identifica trebuie sa stiti mai bine structura site-ului web si a paginilor.

5: Încărcați JavaScript amânat

Si aceasta optiune abordează recomandarea PageSpeed Google:

Eliminate render-blocking resources sau in RO Eliminați resursele de blocare a redării

Pentru performanță, este de preferat ca fișierele JavaScript fie să fie încărcate în subsolul (footerul ) site-ului dvs., fie să fie amânate astfel încât să nu blocheze descărcarea altor materiale de pe site-ul dvs., încetinindu-l astfel.

Activând aceasta optiune,  Încărcați JavaScript amânat, toate fișierele JavaScript de pe pagina dvs., inclusiv cele minimizate de WP Rocket, vor fi încărcate cu atributul de amânare:

include scripturi încărcate cu un src chiar dacă nu au o extensie .js.

De asemenea, wp-roket cauta toate scripturile inline legate de jQuery și le amână . Aceasta oferă o compatibilitate mai bună, astfel încât jquery.js poate fi amânat în mai multe cazuri.

Acest lucru va îmbunătăți și mai mult scorul dvs. PageSpeed.

Rezolvarea problemelor

În funcție de site-ul dvs., poate fi necesar să excludeți mai multe fișiere de la amânare.

Rețineți că Google nu ia în considerare faptul că uneori nu este posibil să amânați toate JavaScript-urile – cel puțin nu fără să vă pice site-ul. Orice fișier pe care îl excludeți de la amânare va face ca indicatprul PageSpeed să va dea anumite recomandari, dar în unele cazuri poate fi necesar să păstrați funcționalitatea dorita pentru site.

GTmetrix – Amână analiza JavaScript

Când rulați un test GTmetrix, puteți constata că nu vă oferă un scor perfect pentru această recomandare, chiar și atunci când este activat Load JavaScript Amânat. Iată cele mai frecvente motive. Pentru a vedea dacă acest lucru se aplică site-ului dvs., asigurați-vă că faceți clic pe recomandare pentru a afișa lista de fișiere.

Fișiere excluse pentru compatibilitate

• Toate fișierele pe care a trebuit să le excludeți pentru compatibilitate vor fi semnalate de GTmetrix
• jquery.js        Dacă ați activat Modul sigur, jQuery.js este exclus pentru a preveni problemele de pe site-ul dvs. Puteți încerca să dezactivați modul sigur, dar asigurați-vă că vă verificați site-ul cu atenție în timp ce v-ați deconectat de la WordPress, pentru a vă asigura că totul funcționează conform așteptărilor pe site-ul dvs.
• Fișiere injectate de Cloudflare
• Fișiere încărcate indirect
• Fișiere fără o extensie .js
• Note tehnice

Acestea sunt cele mai comune tehnici pentru a îmbunătății viteza de încărcare a unui site realizat in WordPress si care foloseste modulul WP-Roket pentru optimizarea fisierelor dar si pentru toate cerintele de la PageSpeed Google.

Insa asa cum o sa vedeti GTMatrix ofera detalii de finete despre posibilitatea optimizatii unui website. Din punctul meu de vedere este un instrument mai util.

Acest articol a fost preluat in mare masura de pe site-ul celor de la wp-rocket in care explica fiecare eroare cum se poate imbunatatii. Este un modul pe care eu il folosesc la mai multe proiecte si va garantez ca isi face treaba excelent.

Tot ce am scris mai sus se poate îmbunătăți fără probleme cu ajutorul acestui modul.

Business vector created by pikisuperstar – www.freepik.com