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.
Comentarii la “Optimizare viteza site in 2021.”