Creșterea Performanței Web pentru Site-ul tău

cresterea-performantei-web
cresterea-performantei-web

Viteza de încărcare a site-urilor va fi întotdeauna un lucru dificil de gestionat. Aceasta depinde de diferite metode: de la alegerea dispozitivului de către utilizator până la hardware-ul serverului pe care site-ul dvs. rulează.


Există multe bariere ale performanței web care pot fi eliminate pe măsură ce dezvoltați un site web. Eliminarea cât mai multor dintre aceste bariere este esențială dacă doriți ca site-ul dvs. să se încarce lin și rapid pentru majoritatea utilizatorilor. Iată câteva sugestii pentru a eficientiza tot ceea ce este sub controlul dvs. pentru a permite timpi de încărcare cât mai rapizi pentru utilizatori.

1. Active statice necomprimate pe server

Când un utilizator accesează site-ul dvs., un apel este efectuat către serverul dvs. pentru a livra fișierele solicitate. Cu cât sunt mai mari aceste fișiere, cu atât mai mare este timpul în care acestea vor ajunge la browserul dvs. și să apară pe ecran. Aceasta este una dintre cei mai mari bariere de performanță web.


Gzip este o aplicație care va mări viteza de transfer a fișierelor de pe serverul dvs. în browser prin comprimarea paginilor web și a foilor de stil înainte de a le trimite în browser. Compresia reduce drastic timpul de transfer, deoarece fișierele rezultate sunt mult mai mici (aceasta poate duce la reducerea dimensiunii fișierelor cu până la 70%).


În ceea ce privește raportul cost – beneficii, utilizarea compresiei Gzip ar trebui să fie aproape de partea de sus a optimizărilor vitezei paginii dvs. dacă nu o aveți deja configurată.

2. CSS și JavaScript neminimizate

Minimizarea va reduce dimensiunea unui fișier CSS sau JavaScript și va elimina toate caracterele inutile din cod, menținând funcționalitatea acestuia.


Minimizarea CSS și JavaScript:

    – Elimina spațiul alb, comentariile și codul neutilizat;
    – Optimizează expresiile condiționate;
    – Scurtează numele variabilelor și funcțiilor;
    – Obturează/ eclipsează codul de producție.


Minimizarea reduce, de asemenea, latența rețelei (timpul necesar pentru ca pachetele de date să ajungă dintr-un punct în altul), ceea ce duce la timpi de încărcare mai rapizi ai browserului.


Pentru a minimiza foile de stil, încercați CSSNano și csso. CSSNano poate fi integrat în fluxul de lucru ca un plugin pentru postcss.


Pentru a minimiza JavaScript, încercați UglifyJS3. Puteți utiliza, de asemenea, UglifyJS în fluxul de lucru prin pluginul Grunt sau plugin-uri Gulp precum și hărțile gulp-uglify sau gulp-source.

3. Imagini neoptimizate

Imaginile dintr-o pagină pot fi optimizate pentru a reduce dimensiunea fișierului lor fără a afecta calitatea.


Aproape toate site-urile din lume folosesc imagini, iar imaginile reprezintă de obicei majoritatea datelor descărcate pe o pagină. Optimizarea imaginilor este una dintre cele mai simple modalități de a crește performanța paginii. Această optimizare conține:


    – Compresie fără pierderi;
    – Conversia imaginilor în tipuri de fișiere adecvate web;
    – Eliminarea unei parți din datele imaginii fără a compromite calitatea;
    – Reducerea spațiului alb din jurul imaginilor;
    – Salvarea imaginilor în dimensiuni adecvate.

4. Neutilizarea cache-ului browserului

Memorarea în cache reduce timpul de încărcare a paginilor web pentru vizitatorii frecvenți, stocând fișiere pe browserul unui utilizator. Fișierele stocate nu trebuie să fie preluate sau încărcate din nou pentru o anumită perioadă. Când utilizatorii vizitează pentru prima dată un site, resursele sunt preluate prin rețea și pot necesita călătorii multiple între client și server. Memoria cache stochează fișierele utilizate în mod obișnuit și înlătură astfel nevoia de a obține din nou acel conținut în viitorul apropiat, făcând vizitele ulterioare pe site mai rapide.


Pentru a activa conectarea în cache a browserului, adăugați anteturile Cache-Control și ETag (etichetă de entitate) la anteturile de răspuns HTTP.

Cache-Control definește modul și perioada în care un răspuns poate fi pus în cache de browser și de alte cache-uri.


ETag oferă un jeton de validare care este utilizat pentru a comunica cu serverul pentru a verifica dacă o resursă trebuie actualizată.


Pentru site-urile WordPress, poți utiliza plugin-uri de cache precum W3 Total Cache sau WP Super Cache

5. Prea multe redirecționări

Redirecționările sunt adesea configurate dacă un site sau o pagină web specifică se mută, dacă pagina este redenumită sau URL-ul paginii este optimizat pentru SEO. Cu toate acestea, în timp, nevoia de redirecționări se poate acumula astfel încât un utilizator să poată fi redirecționat de câteva ori înainte de a ajunge la conținutul real.


O redirecționare necesită un ciclu suplimentar de cerere-răspuns HTTP și întârzie încărcarea paginii. Eliminați redirecționările inutile, mai ales dacă încetinesc accesul la o pagină de pornire sau de destinație.

6. HTML și CSS invalide

Scrierea HTML și CSS care respectă standardele W3C înseamnă că va fi interpretată consistent de browserele moderne.

HTML invalid poate încetini încărcarea paginii, deoarece browserul trebuie să proceseze instrucțiuni inutile sau invalide.
CSS nevalid poate încetini timpul de redare al unei pagini.


Executați HTML-ul prin validatorul W3C HTML și CSS prin validatorul W3C CSS. În mod alternativ, puteți încorpora validarea HTML în fluxul de lucru cu pachetul de validare Grunt HTML și Stylelint.

7. Tehnologie de modă veche

Evitați să utilizați tehnologii învechite precum Flash, Java și Silverlight în browser.


Majoritatea dispozitivelor mobile nu acceptă pluginuri precum Flash, ceea ce înseamnă că orice conținut pe care îl utilizați pentru a le reda poate fi inaccesibil utilizatorilor dvs. de telefonie mobilă. Mai mult, aceste pluginuri sunt principala cauză a crash-urilor și incidentelor de securitate în paginile care le utilizează.


Astfel de tehnologii nu mai sunt de actualitate. În loc să le folosești pentru a răspunde nevoilor tale, creează conținut folosind tehnologii web moderne pentru a asigura compatibilitatea cu toate dispozitivele și browserele și pentru a garanta siguranța utilizatorilor tăi.

8. Sincronizarea JavaScript care blochează încărcarea paginii

Adăugați etichete <script> chiar înainte de eticheta de închidere pentru a vă asigura că nu blochează descărcări paralele. Poziționarea scripturilor în pagină contează deoarece instrucțiunile sunt procesate într-un singur thread. Așadar, dacă majoritatea scripturilor dvs. sunt încărcate aproape de sfârșitul încărcării paginii și unul se blochează, va rezulta un timp de încărcare mai rapid pentru utilizator. Puteți utiliza, de asemenea, eticheta async pentru a evita aceste blocaje în încărcarea unei pagini.


Adăugați etichetă async la scripturi

În loc să aștepți ca un script să termine descărcarea înainte de redarea paginii (care poate fi unul dintre cele mai rele blocaje de performanță web), scripturile async se vor descărca în fundal. Aceasta înseamnă că browserul poate continua să redea HTML care vine după etichetele de script asincrone.


Pentru a face un script într-un document asincron, trebuie doar să adăugați async la eticheta de script:

<script src = “async-example.js” async> </script>


Eticheta de script de mai sus va împiedica scriptul să blocheze încărcarea următoarelor scripturi și a activelor paginii, ceea ce duce la un timp de încărcare mai rapid.

9. Servere lente

Un server lent este cel mai complex blocaj de performanță și, din păcate, nu există o soluție ușoară pentru asta! Tot ce puteți face este să identificați și să remediați erorile din codul dvs. din partea serverului – cu cât timpul de răspuns al serverului este mai rapid, cu atât va fi mai rapid site-ul sau aplicația dvs.


De asemenea, ar trebui să acordați atenție detaliilor pachetului dvs. de găzduire. Găzduirea partajată este mai probabil să aibă probleme de performanță rezultate din serverul web în sine. Dacă închiriați sau dețineți servere sau VPS, vă puteți asigura că serverul dvs. este actualizat și nu rulează procese care ar putea interfera cu performanțele serverului dvs. web. 


Puteți, de asemenea, să luați în considerare un pachet de găzduire de server cu mai multe resurse dacă îl diferențiați pe cel pe care îl aveți și vedeți probleme de performanță la încărcare ca un simptom.


Din fericire, cu acest aspect vă rezolvă B3 Hosting. Dacă aveți la noi orice pachet de găzduire, vei simți o diferență imediat ce site-ul tău a fost urcat pe serverele noastre. Folosim servere de ultimă generație și tehnologii moderne, pentru a-ți putea oferi resursele și performanța supremă. 

10. Prea multe solicitări HTTP

Dacă pagina dvs. web încarcă prea multe scripturi și resurse, aceasta poate crea o problemă de blocare a performanței. Fiecare activ trebuie să fie preluat cu o cerere HTTP separată, astfel încât dacă există zeci de foi de stil separate, fișiere JavaScript și multe altele care trebuie aduse la încărcarea paginii, poate încetini lucrurile.


O strategie aici este de a încărca în mod intenționat lucrurile mai târziu, punând scripturi în partea de jos a documentului sau folosind async așa cum este descris mai sus. Un alt mod de a trata această problemă este de a consolida scripturile și foile de stil, acolo unde este posibil. Mai multe fișiere JavaScript pot fi, în multe cazuri, combinate într-un singur fișier cu mai multe funcții separate. Același lucru se poate spune despre foile de stil care au fost separate un pic prea departe.


De asemenea, puteți elimina orice active inutile sau neutilizate, de asemenea, pentru a preveni apelurile HTTP pe care le cer.

11. Scripturi și pluginuri inutile și neutilizate

Pe măsură ce o aplicație crește, biți aleatori de CSS, JavaScript, plugin-uri WordPress, pachete Laravel, dependențe de noduri și multe altele se pot adăuga în stivă. Majoritatea nu sunt relevante sau utilizate vreodata. Ele sunt artefacte ale unei mai vechi iterații a proiectului, lăsate acolo pentru a aduna praf și, în unele cazuri, deșeuri de resurse.


Înlăturarea codului inutil și neutilizat poate ajuta foarte mult, mai ales atunci când codul este stocat în active care trebuie aduse separat la momentul încărcării de către pagina dvs. web. Atunci când trebuie să faceți o cerere HTTP separată pentru a prelua un fișier JavaScript, care nu va fi folosit în timpul sesiunii utilizatorului de pe pagina dvs., ineficiența cere să fie corectată.


Există multe instrumente pentru a ajuta acest proces de verificare a activelor neutilizate. Un exemplu în acest caz este Purify CSS. Dacă ai active care sunt cu adevărat neutilizate, scapă de ele.

12. Nefolosirea CDN, după caz

Ultima considerație este dacă utilizați o rețea de livrare de conținut (CDN) pentru conținutul paginii dvs. sau nu. Principiul de bază al unui CDN este acela că este o rețea de servere răspândite într-o regiune, sau chiar întreaga lume, la care puteți încărca conținut de pe site-ul dvs. (sau întregul site). Când un utilizator începe să descarce site-ul dvs. prin browserul său, va face acest lucru folosind serverul cel mai apropiat de acesta, care este cel mai capabil să răspundă rapid.


Acest lucru poate oferi un o viteză mai mare, prin faptul că există mult mai puține probleme de latență cauzate de distanța fizică dintre serverele pe care le are un utilizator. Un CDN oferă, de asemenea, multe alte beneficii, inclusiv reducerea șanselor unui singur punct de eșec (dacă un nod CDN nu funcționează, utilizatorii vor accesa altul) și o securitate sporită în unele situații.


Performanța web este gestionată cu valorile corecte

Există multe sfaturi pentru a face față cu blocajele de performanță web. Unele sunt legate, ceea ce face posibilă implementarea modificărilor pentru a preveni mai multe probleme în același timp. Unele dintre ele s-ar putea să nu se aplice în orice situație. De exemplu, dacă site-ul dvs. are deja un singur fișier CSS, încărcarea a mai puține fișiere CSS nu va fi o problemă pentru dvs.


Cu toate acestea, majoritatea site-urilor vor fi reprezentate cel puțin puțin în această listă de probleme. Rezolvarea acestora poate îmbunătăți cu siguranță performanța site-ului dvs. web și viteza de încărcare a utilizatorilor. Dacă nu sunteți sigur de unde să începeți, încercați un instrument real de monitorizare a utilizatorilor. Acesta vă ajuta să descoperiți, să măsurați și să îmbunătățiți performanța web.


Dacă nu te descurci singur și ai nevoie de o agenție web profesionistă care să îți aducă site-ul acolo unde merită, îți sugerăm să apelezi la prietenii noștri de la B3 Digital, care cu siguranță te pot ajuta în acest aspect. Garantăm noi pentru ei 🙂 

Distribuiți Acest Articol