Viteza de încărcare a unui website este esențială pentru o afacere online.
Lumea din ziua de astăzi devine tot mai grăbită, tot mai efervescentă. Nimeni nu mai are răbdare, în special când vine vorba de dispozitive electronice. Toți vrem ca PC-ul sau smartphone-ul nostru să fie ultimul răcnet (cică le zice așa pentru ca răcnești atunci când ți-l fură).
Acest lucru se și întâmplă. Legea lui Moore (nu Gary) spune că puterea de procesare dispozitivelor electronice se dublează odată la doi ani.
Cu toate acestea, website-urile încă se încarcă extrem de lent pe mobil, iar în jur de 50% din traficul de pe internet este realizat cu dispozitive mobile. De fapt, e posibil să citești acest articol de pe mobil chiar acum!
În ultimele două luni, aproape 50% din traficul de pe SEOproject a fost realizat de pe telefoane mobile (bucata verde):
Un studiu de la Google arată că durata medie de încărcare a unui website pe o conexiune 3G este de peste 15 secunde. Ce e mai interesant este faptul că peste jumătate din vizitatori abandonează website-ul dacă acesta se încarcă în mai mult de 3.
Acest lucru nu este valabil doar pe mobil. Pe un computer, oamenii se așteaptă ca un website să se încarce și mai repede.
Multe alte studii au dus la concluzia că pentru fiecare 0.1 secunde în plus la timpul de încărcare, rata de conversie unui site scade cu 7%.
Dacă nu vrei ca rata ta de conversie să scadă, iată ce poți face ca să îmbunătățești viteza site-ului tău.
Acesta găzduiește fișierele ce compun website-ul tău și le ‘servește’ utilizatorilor la orice oră din zi și din noapte.
Cu cât acest server este mai performant, cu atât va putea servi fișiere mai rapid.
Cele mai cunoscute tipuri de găzduire sunt găzduirea împărțită (shared hosting) și cea dedicată (dedicated hosting). Pe un pachet de găzduire împărțită, practic împarți serverul cu alți deținători de website-uri. Un server dedicat nu îl împarți decât cu tine.
Un pachet bun de găzduire îmbină mai multe elemente, de la spațiu de stocare la numărul de domenii.
Totuși, cele mai importante aspecte sunt viteza conexiunii și lățimea de bandă.
Dacă ești inginer, poți să compari acești doi termeni cu voltajul și amperajul. Dacă nu, atunci gândește-te la un furtun cu apă. Presiunea cu care vine apa este viteza, iar grosimea furtunului este lățimea de bandă. Apa este traficul către website. Dacă incerci să bagi mai multă apă decât încape prin grosimea furtunului, serverul va ceda.
Ca să verific viteza de răspuns a serverului, folosesc Bitcatcha. Dacă durata de răspuns a serverului tău este sub 200ms, atunci e un server bun. Gândește-te și la locație. E bine să verifici durata de răspuns din mai multe locații și, eventual, să faci o medie.
Un alt aspect care poate fi luat în calcul este și conexiunea utilizatorului la internet. Degeaba ai un server super rapid dacă utilizatorul tău e conectat la internet prin sârmă ghimpată. Acest aspect nu îl poți controla, dar cel dinainte da. Ia-ți un server bun!
HTML-ul este codul din spatele unei pagini web. Pentru ca un website să se încarce repede, acesta trebuie structurat într-un anumit fel.
Pentru a verifica aceste probleme putem folosi două instrumente: PageSpeed Insights și GT Metrix.
PageSpeed Insights este instrumentul oficial de la Google. Acesta oferă un scor de la 0 la 100 și are în vedere următoarele aspecte:
Am discutat deja despre acest aspect mai sus. Nu uita că poți folosi Bitcatcha ca să testezi viteza serverului. Caută să ai o medie sub 200ms.
Browserele (Google Chrome) citesc paginile web de sus în jos. Tocmai din acest motiv codul unui HTML trebuie să încarce resursele ce generează prima parte a website-ului primele.
De exemplu, dacă eu am o resursă JavaScript care îmi generează o animație la baza website-ului, nu e o idee bună să pun acea resursă spre susul paginii. Același lucru este valabil și pentru codul din resurse în sine. Ordinea claselor din fișierele CSS ar trebui să coincidă cu elementele HTML pe care le stilizează.
Codul HTML, CSS și Javascript poate fi minifiat prin reducerea spațiilor albe și eliminarea parametrilor duplicați.
Resursele pot fi de asemenea compresate, la fel cum facem și atunci când arhivăm ceva cu WinRar. Acest proces va reduce dimensiunea datelor ce trebuiesc descărcate pentru a vizualiza un website, facându-l astfel mai rapid.
Dacă folosești WordPress, instealză extensia Autoptimize. Aceasta va reduce dimensiunea fișierelor. E posibil ca această extensie să afecteze aspectul website-ului tău. Dacă ceva nu e în regulă, debifează din opțiuni sau renunță la ea complet.
Există o extensie similară și pentru Joomla. Pentru platforme de magazin online precum Magento, am găsit doar opțiuni plătite.
Dacă nu folosești o platformă OpenSource, va trebui să editezi fișierul .htaccess pentru activa compresia (pe server Apache).
Memoria cache stochează informații temporar pentru ca acestea să poată fi accesate mai rapid în viitor. Din acest motiv, e posibil ca prima dată când accesezi un website, acesta să se încarce mai greu.
Există mai multe tipuri de memorii cache. Procesoarele computerelor au astfel de memorii. Serverele au și ele. Cele mai importante pentru utilizatori sunt cele ale Browserelor Web. Odată ce a stocat fișierele, browserul nu mai trebuie să le descarce din nou la a doua accesare.
Toate fișierele din cache au o dată de expirare. Dacă aceasta nu este setată, fișierele se vor șterge după 24 de ore. O dată bună de expirare ar fi o lună, dar unele fișiere pot fi setate și la un an.
Dacă folosești WordPress, instalează extensia W3 Total Cache. Urmează aceste instrucțiuni pentru a face corect setările. O altă variantă populară este WP Super Cache, dar eu prefer W3. În combinație cu Autoptimize și un CDN, această extensie poate face minuni cu viteza website-ului.
Dacă nu folosești o platformă OpenSource, aceste date de expirare pot fi setate în fișierul .htaccess (pe server Apache).
Acest pas este incredibil de important. Fișierele text sunt în general de mici dimensiuni. Imaginile în schimb sunt extrem de mari. Acestea pot ocupa peste 90% din dimensiunea unei pagini web.
O imagine poate fi mare ca dimensiune (2500×2500) sau ca spațiu de stocare (4.5mb).
Referitor la dimensiune, nu este indicat să încărcăm imagini mari și să le afișăm la o dimensiune mai mică folosind CSS. Ideal ar fi ca imaginea să fie la dimensiunea la care trebuie afișată. De exemplu, dacă doresc să afișez o imagine la 250×250 pixeli, nu ar avea rost să o încarc la 300×300 pixeli.
Acest lucru este dificil pe website-urile responsive, dar nu este imposibil. Ne putem decide la 3 dimensiuni (mic, mediu, mare) și să le afișăm doar pe acestea folosind srcset, în funcție de rezoluția ecranului. Browser-ul va ști care variantă trebuie încărcată.
Legat de spațiu de stocare, o imagine poate fi comprimată. Claritatea acesteia sufera modificări insesizabile, dar dimensiunea în spațiu de stocare scade vizibil. Poți folosi http://tinypng.com pentru a compresa imaginile.
Dacă ai un site WordPress, îți poți ușura munca folosind extensia WP Smush. Aceasta va optimiza automat imaginile noi pe care le încarci. Cele vechi pot fi și ele optimizate, dar varianta gratuită are mici limite. Setează dimensiunea maximă 1000×1000 iar extensia nu te va lăsa să încarci imagini mai mari de atât.
Nu multe website-uri depașesc 80/100. Sincer, nici nu este necesar. Eu sunt abia la 87 pe Desktop și 73 pe mobil.
Motivele sunt următoarele:
Amuzant este că două dintre erori sunt cauzate de fișiere Javascript de la Google (Fonts și Analytics).
Nu urmări să ai un scor de 100/100 neapărat. Dacă un fișier JS este important pentru website-ul tău și pentru experiența utilizatorilor, păstrează-l.
GT Metrix ne arată criterii similare de clasificare. Un alt lucru la care ne putem uita sunt numărul de cereri HTTP (requests).
Cu cât numărul de cereri este mai mare, cu atât website-ul se va încărca mai greu. E mult mai rapid să descarci un singur fișier ceva mai mare decât să descarci 100 de fișiere mici. Tocmai din acest motiv e indicat să combini toate fișierele CSS sau JS într-unul singur.
Deși durata totală de încărcare a site-ului meu este de 3.7 secunde în acea imagine, locația din care a fost testat este Canada. Pentru a vedea și alte zone, poți folosi Pingdom Tools. Selectează serverul din Suedia. E cel mai apropiat de Romania.
Google a introdus de curând un nou limbaj, special pentru a face website-urile mobile mai rapide.
Google Accelerated Mobile Pages e un fel de HTML cu unele restricții. La început, acesta era foarte limitat. Acum însă, permite aproape la fel de multe lucruri ca HTML-ul normal, dar se încarcă mult mai repede.
Secretul constă în faptul că Google afișează aceste pagini AMP pe dispozitivele mobile doar dacă acestea sunt valide. Asta înseamnă că dacă ai o singură greșeală în cod, Google nu îți va afișa pagina AMP.
Paginile AMP au un mic avantaj în Google deoarece pot fi afișate în partea superioară a paginii, într-un carusel.
Aceste pagini vor fi stocate și afișate de pe serverele Google, iar utilizatorii nu vor putea vedea URL-ul website-ului tău direct. Acest lucru a dus la multe controverse.
O conexiune SSL nu te ajută la viteză, dar ajută la securitate.
Un CDN (content delivery network) reprezintă o serie de servere în care website-ul tău este stocat într-o variantă cache. Aceste servere sunt amplasate în mai multe puncte din lume, pentru ca utilizatorii să îl poate accesa mai rapid. Dacă serverul meu este găzduit în America, va fi destul de greu pentru cineva din China să îl acceseze. O rețea de distribuție a conținutului ar avea website-ul meu pregătit pe un server mult mai apropiat, să zicem în Coreea de Sud.
CloudFlare ar putea fi asul din mânecă. Acest serviciu filtrează traficul către website-ul tău. CloudFlare poate de asemenea să comprime și să minifieze automat resursele HTML, CSS și JS. Serviciul de bază este complet gratuit, deci oricine îl poate utiliza. Totuși, am senzația că folosind CloudFlare, durata de răspuns a server-ului meu a crescut. Urmează să testez.
Optimizarea vitezei de încărcare este un pas tehnic foarte important în SEO. Până când site-ul tău nu se încarcă, nimic nu mai contează. Acum că știi cum să îți faci website-ul mai rapid, ce-ar fi să treci la treabă? Nu uita să faci poze înainte/după cu scorurile din instrumente și să mi le trimiți pe Facebook.
Îți mulțumesc mult că ai citit acest articol până la final 🙂
Fă-mi o favoare și spune-mi în comentarii cum ți se pare că se încarcă SEOproject. E rapid? E încet?
În lumea digitală de astăzi, vizibilitatea online este cheia succesului pentru orice pagină web. Aici…
Acum ceva timp am avut o discuție cu Darius Mureșan, platform manager la WhitePress. Darius…
Disclaimer: Înainte de a începe, doresc să specific faptul că nu sunt un expert acreditat…
Optimizarea pentru motoarele de căutare se află în continuă schimbare. În fiecare an, noi actualizări…
Probabil ai auzit deja despre date structurate. Ai văzut poate că sunt un fel de…
Deși nu au fost multe actualizări de bază ale algoritmului, 2017 tot a fost un…