Exista numeroase tool-uri pentru a testa care este page speed-ul. Totusi intelegi de ce este important si cum sa faci ca website-ul tau sa se incarce mai rapid?
Sa lamurim ce este page speed-ul
Adica timpul de incarcare al paginii web. Focusul asupra acestui aspect a crescut considerabil de vreme ce acesta este un factor ce contribuie la clasarea paginilor in motoarele de cautare. Acum sunt populare versiunile de mobil ale paginilor web, deci cu atat mai mult conteaza cat de repede se incarca.
Este adevarat deci ca page speed-ul imbunatatit are influenta asupra traficului organic al paginii, ceea ce inseamna mai multi vizitatori unici si de aici o gramada de alte beneficii.
Cat de repede trebuie sa se incarce o pagina
Nu exista un target anume. Una din recomandari este de nu mai mult de 3 secunde. Asta pentru ca un studiu arata ca peste 53% din utilizatori ce folosesc smartphone-ul pentru cautari in Google parasesc o pagina daca dureaza mai mult de 3 secunde sa se incarce.
Pe scurt, ar trebui sa se incarce cat mai repede posibil.
CSS files
Uitandu-te la fisierele CSS, acestea pot fi descarcate si procesate inainte ca pagina sa afiseze continut. Daca ai cache, acesta va fi reutilizat de fiecare data cand pagina aceea va fi accesata. Asta inseamna ca nu se va mai descarca din nou, deci urmatoarea vizita va fi mai rapida in a accesa pagina.
Telul tau va fi acela de a optimiza pentru vizitatorii la prima experienta pe pagina ta, cat si pentru ceilalti. Vei dori ca anumite coduri importante sa se incarce rapid, insa CSS-ul sa nu se blocheze. Adica va trebui sa pacalesto browser-ul prin modul in care acesta incarca. Exemplu:
<link rel=”stylesheet” href=”/my.css”> devine
<link rel=”stylesheet” href=”/my.css” media=”print” onload=”this.media=’all'”>
Inline
Inline ia codul necesar si il trimite cu raspunsul HTML in loc de fisier separat. Acesta va fi modul cel mai rapid de a scurta timpul necesar pentru a afisa pagina. Probabil nu vei dori sa incluzi tot continutul. Fii rezonabil si aplica asta la continut important. Poti aplica la CSS si JS, la fonturi si imagini, dar vei ajunge sa ai o descarcare uriasa de HTML unde o mare parte din cod nu este utilizata. Asta face de fapt site-ul sa mearga mai greu.
Alege ce fisiere sa se preincarce
De regula vorbim despre cele care contin CSS. Daca nu stii exact ce fisiere ar trebui alese poti folosi Chrome Dev Tools. Ce trebuie sa stii aici:
- Ai nevoie de fonturi originale ori acestea se vor incarca de doua ori mai greu.
- Ai nevoie de fisierele JS+CSS, deci nu le sterge.
- Poti preincarca un font chiar daca este intr-un alt fisier CSS.
- Atentie la cate fisiere preincarci, ai putea crea probleme daca sunt prea multe.
Server Push
Poate fi problematic. Permite unui server sa furnizeze un fisier fara sa fie cerut. Asadar, in loc de un lant de genul HTML-CSS-Font, acesta va permite unui site sa spuna am nevoie de acel font.
De regula nu este o recomandare din partea specialistilor, poate doar daca esti un bun programator si doresti sa incerci sa rezolvi.
Fisiere JavaScript
Si aici vorbim despre ceva complex, cu o gramada de optiuni de luat in considerare. Uneori sunt folosite pentru functionalitate, poate pentru continut primar sau pentru a face schimbari in CSS. Unele coduri pot avea nevoie de altele, pentru a functiona corect. Acestea sunt cunoscute ca dependente, iar a schimba modul in care Java se incarca poate duce la a strica cateva functionalitati ale paginii.
Daca fisirerele JavaScript joaca un rol crucial in continutul paginii sau la stil, daca e parte din core system, atunci multe dintre aceleasi reguli CSS se aplica si inlining si preincarcare. Ai si optiunea de Server Side Rendering – SSR.
Cel mai usor mod pentru a vedea daca ai nevoie de JavaScript pe o pagina este sa dai click la padlock in Chrome sau la pagina de setari. Exista o lista de permisiuni, unde la JavaScript poate fi fie permis sau blocat. Blocarea inseamna reincarcarea paginii si compararea site-ului cu si fara JavaScript afisand elemente care lipsesc din pagina. Daca uneori chiar lipsesc, permite din nou fisierelor Java sa functioneze.
La footer
La script-uri inline poti considera sa le muti in footer. Tine cont ca Java poate bloca HTML-ul sa fie citit. Aceasta mutare iti asigura ca multe dintre date pot fi procesate inainte de orice blocaj ar putea sa apara.
Cum poti testa viteza paginii? Cu Lab Data sau Field Data, cu tool-uri precum TestMySite, PageSpeed Insights, Boomerang, Batch Speed, GTmetrix, Pingdom, SpeedMonitor.io.
Trebuie sa te asiguri ca oferi utilizatorilor o viteza rapida privind incarcarea site-ului. Opteaza pentru a descoperi cat si cum poti imbunatati interactivitatea paginii. Exista si variante care nu merita efortul si timpul investit.