Daca ai intrat pe acest articol probabil stii deja de ce este important sa faci optimizare viteza site.

Defapt, e atat de important pentru afacerea ta incat ar trebuii sa prioritizezi optimizarea vitezei.

Uite de ce.

Intr-un studiu facut de cei de la Amazon s-a descoperit ca doar 100 de milisecunde in plus creste cifra ta de afaceri cu 1%.
Imagineaza-ti ce ai poate face pentru afacerea ta daca ai creste viteza site ului tau cu cateva secunde.

Dar cum ?

Ei bine asta iti voi arata in acest articol. Cum sa iti optimizezi viteza site ului in 2021?

Inainte sa incepem trebuie sa te asiguri ca servarul unde ai gazduit site ul este suficient de rapid/puternic. Acesta este primul pas.

Daca nu, fa un upgrade la server si revino la articol.

Ok sa incepem.

Structura paginii

Pentru a optimizare viteza site trebuie sa intelegi structura unei pagini web.
Sa trecem un pic prin cele mai populare elemente:

  • Codul Html care ofera structura si continut pe o pagina.
  • Fisierele statice care ajuta la proiectarea, functionalitatea si interactivitate. Aici intra CSS si JavaScript
  • Imagini
  • Text

Pentru a reda o pagina, browserul solicita fiecare element. Asadar, numarul de cereri HTTP joaca un rol crucial pentru optimizarea vitezei site ului.

Unde te situezi acum ?

Inainte de a optimiza efectiv site ul, trebuie evident sa aflii cum te clasezi. Cat de repede se incarca site-ul tau ?

Iti voi prezenta cateva instrumente pe care le poti folosii pentru a masura viteza site ului tau.
Eu iti recomand sa incepi cu Google Page Speed Inshights. Google iti ofera un scor de la 1 la 100 si pe langa asta iti da si recomandari pentru optimizarea vitezei.

Un alt instrument foarte bun este GTmetrix. De multe ori il folosim pentru a imbunatatii viteza site-ului.

Pasul nr 1: Optimizeaza fisierele statice

Optimizeaza fisierele statice, aici intra stylesheets (CSS) si scripturi JS.

Muta CSS la head si JS la bottom

Asigura-te ca CSS merge sa o incluzi in <head>.

Logica din spatele acestui lucru e foarte simpla. In general fisierele CSS sunt mai mici decat scripturile. Odata ce ele sunt incarcate inainte de structura, browserul va incarca corect layout-ul.

Deobicei functionalitatea scripturilor este necesara dupa ce structura site-ului s-a incarcat de aceea ele pot fi puse la finalul site-ului.

Tactica asta asigura ca vizitatorii nu vor astepta incarcarea completa ca sa vada continutul si scade bounce-ratul masiv.

Foloseste minificarea

Minificarea este procesul de eliminare a partilor unui fisier care nu sunt necesare pentru functionalitatea lor. De exemplu in scripturile pe care le folosesti nu ai nevoie de spatii albe, comentarii, functii lungi si denumiri de variabile.

Minificarea te va ajuta enorm sa reduci dimensiunile fisierelor statice.

Utilizeaza incarcarea asincronica

Un browser web solicita resurse secvential pe masura ce apar pe pagina web. Chestia asta e denumita incarcare sincrona.

Poti schimba aceasta functionalitate a browser ului daca folosesti atribute “async” pentru a incarca resurse de indata ce ele sunt disponibile.

Spre exemplu pentru a incarca un script asincron foloseste:

< script src=”script.JS ” async> < / script>

Foloseste compresia GZIP

Compresia GZIP este o tehnica de comprimare a resurselor ce foloseste cererile HTTP.

Cu GZIP, serverul trimite fisiere comprimate pe care browser ul le deschide in timp ce reda pagina web.

Cu tehnica asta nu numai ca incarci paginile mai repede, ci si economisesti costurile de server.

Pasul nr 2 : Optimizeaza imaginile

Poate cel mai important factor si cel mai usor de optimizat sunt imaginile.

Optimizarea imaginilor va duce la cele mai semnificate imbunatatiri de viteza ale site ului tau.

Stiu. Imaginile sunt esentiale pentru un site. De aceea “o imagine face cat 1000 de cuvinte”, cu toate acestea imaginile ne-optimizate si foarte mari nu ar trebuii sa apara niciunde.

Imaginile trebuie comprimate in asa fel incat sa ofere o experienta vizuala buna, sa se incarce rapid si in acelasi timp sa nu se compromita calitatea ei.

Cum putem face asta?

Incarca dimensiunea potrivita pentru imagine

Tema pe care o folosesti are o dimensiune maxima a imaginii pe care o poate afisa. Afla acea dimensiune si apoi inlocuieste toate imaginile cu marimea maxima afisata de tema.

Sfat: Poti inlocui imaginile cu x2 marimea maxima pentru a afisa versiunea pentru “retina-quality”.

Foloseste formatul corect pentru imaginine

Cele mai folosite tipuri de format pe internet sunt JPG si PNG.

JPG sunt destinate pentru fotografii ce au o multime de informatii de culoare in ele.

PNG sunt perfecte pentru grafice care au putine informatii color.

Sfat: Noi am inceput sa folosim SVG pentru toate graficile noastre. (acest lucru a imbunatatit masiv durata de incarcare pentru site-ul nostru. Am scris despre optimizare viteza site ului aici

Optimizeaza imaginile inainte de a le incarca pe site

Exista diferite site uri pe care le poti folosi pentru a comprima imaginile pe site ul tau.

Recomandarea noastra este TinyPNG.

Daca detii Photoshop le poti optimiza pentru web direct din soft.

Foloseste tehnica Lazy load

Lazy load sau “incarcarea lenesa” este o alta tehnica de a optimiza imaginile. Practic ce face este sa iti incarce acea imagine doar atunci cand ajungi la ea. Daca nu vei ajunge la ea, imaginea nu va fi descarcata de server.

Exista nenumarate plugin-uri care fac asta pentru tine.

Pasul 3: Optimizarea cererilor de tip HTTP

La inceputul articolului am spus ca incarcarea unei pagini web se face prin cereri individuale HTTP. O cerere aduce o resursa.

Asadar, o crestere a numarului de astfel de cereri inseamna cresterea incarcarii paginii.

Combina fisierele

Primul lucru pe care il poti face pentru a minimiza sarcina de cerereri HTTP este sa combini fisierele/resursele de acelasi tip.

Spre exemplu toate fisierele CSS si toate fisierele JavaScript pot fi combinate intr-un singur fisier. Chestia asta reduce numarul de cereri pe care un client trebuie a le faca pentru a incarca toate resursele.

Redu cautarile DNS

Cand o cerere HTTP este facuta intr-un domeniu ca www.uno.ro, o cautare DNS este facuta ca sa gaseasca adresa IP a servarului. Asta inseamna ca obiectivul tau ar trebuii sa fie sa minimizezi numarul de controale DNS.

Foloseste un CDN

CDN este o colectie de servere web in diferite locatii care ofera continut rapid clientilor.

Un client care solicita o resursa va fi servit de la cel mai apropiat server din punct de vedere geografic de locatia clientului. Acest lucru asigura ca vei primii continutul solicitat in cel mai scurt timp posibil.

Pasul 4: Cache

Caching se refera la stocarea unor resurse temporare pentru a livrao rapid atunci cand este necesar. Exista diferite forme de cache.

Pagina cache. O versiune statica HTML a unei pagini stocate pe server.

Baza de date cache: Rezultatele interogarilor comune

Browser caching: stocarea unor parti ale paginii in browser

Sunt o multitudine de pluginuri pe internet pe care le poti folosii pentru optimizare viteza site.

Pasul 5: Optimizare viteza site pentru telefon mobil

Ce ghid de optimizare viteza site ar fi acesta daca nu am vorbii despre optimizarea vitezei pentru telefonul mobil.

Stim deja ca in zilele de azi consumul de continut pe mobil este masiv. Optimizarea vitezei pe mobil se refera la practica de a asigura ca vizitatorii tai au aceeasi functionalitate si design atat pe mobil cat si pe desktop.

Ce poti face? Utilizeaza designul responsive pentru a te asigura ca site ul tau arata bine pe orice rezolutie.

Evita utilizarea popup-urilor deoarece dispozitivele mobile nu suporta.

Nu pozitiona elemente prea aproape unul de altul.

Foloseste AMP (Pagini mobile acelerate in traducere) este un proiect inceput de Google care are ca scop livrarea continutului rapid si consecvent pe mobil.

In loc de final

Sper ca ti-am dat cateva idei despre cum sa optimizezi viteza site ului.

Acum e randul tau, vreau sa stiu ce o sa implementezi prima oara pe site-ul tau. Te rog lasa acum un comentariu mai jos.

Si daca cumva nu te descurci, te putem ajuta sa iti imbunatatesti viteza site ului aici.

Hei, sunt Vladislav. Sunt hotarat sa iti cresc venitul afacerii prin digitalizarea ei. 

Dar, doar daca ma lasi sa te ajut ­čÖé

Trimite-mi un mesaj pe salut@uno.ro si iti scriu cat de repede pot.

 

Ma gasesti si pe:

Comentarii la ÔÇťOptimizare viteza site in 2021.ÔÇŁ

Las─â un r─âspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *