Timpul de încărcare al site-ului dvs. este principalul factor care afectează gradul de utilizare și comportamentul vizitatorilor. Utilizatorii de Internet nu urasc să aștepte descărcarea paginilor lente, în timp ce paginile "instant" provoacă o mai mare satisfacție și dau mai multă plăcere vizitatorului. Astăzi, viteza conexiunilor la Internet crește, iar mulți dezvoltatori web nu se gândesc la optimizarea paginilor pentru a-și mări viteza, ceea ce reprezintă un factor foarte important. În acest articol, veți primi sfaturi fundamentale pentru accelerarea paginilor web și îmbunătățirea utilizabilității aplicațiilor dvs. web.
1. Reduceți numărul de fișiere
Reducerea numărului de fișiere din pagină reduce conexiunile HTTP necesare pentru a le încărca, ducând astfel la accelerarea acestui proces. Dar cum se poate face acest lucru? Puteți utiliza următoarele tehnici:
Utilizați Sprite CSS
În loc să folosești imagini separate pentru fundalul diverselor elemente, le poți combina într-una și folosești tehnica CSS sprite pentru acest fișier. Acest lucru va reduce considerabil numărul de fișiere descărcate și va grăbi încărcarea paginii.
Combinați fișierele CSS / JS într-una
Dacă utilizați o mulțime de fișiere CSS / JS pe pagina dvs., atunci îmbinarea acestora poate reduce semnificativ numărul de solicitări.
2. Reduceți dimensiunea fișierului
Fișierele mari, evident, durează mult timp să se încarce, deoarece prin anumite tehnici puteți reduce dimensiunea fișierelor.
Reduceți fișierul HTML
Utilizați mini-HTML, de exemplu HTML Tidy. va elimina spațiile inutile și pauzele de linie.
Reduceți fișierele CSS / JS
Optimizați imaginile pentru Web
3. Optimizarea pe partea de server
Cache pagini dinamice
Când se utilizează cache-ul paginilor dinamice, serverul oferă fișierelor statice ale browserului, ceea ce necesită mult mai puțin timp decât generarea de pagini. Serverele web, cum ar fi Apache, sunt optimizate pentru o întreținere foarte eficientă a conținutului static. Dacă utilizați WordPress, atunci pentru cache-ul paginilor veți avea nevoie de WP-Super Cache plug-in.
Activați GZip
Cele mai multe browsere moderne au capacitatea de a lucra cu GZip, a cărui utilizare pe partea de server permite reducerea dimensiunii fișierelor HTML, CSS / JS înainte de a le trimite la browser, reducând astfel cantitatea de trafic transmisă.
Utilizați antete Expirare pentru conținut static
Pentru conținutul care se modifică rar, de exemplu imaginile, fișierele CSS, JS, adăugarea unui antet Expires va permite utilizarea memoriei cache a browserului. Setarea Expiră la o dată în viitor vă permite să forțați browserul să nu solicite din nou resurse, ci să le scoată din memoria cache.
Folosind următorul cod, puteți seta antetele Expires în Apache utilizând fișierul .htaccess:
Folosirea anteturilor Expires pentru conținut static va îmbunătăți considerabil experiența utilizatorilor care revin pe site-ul dvs., deoarece tot conținutul static va fi difuzat de memoria cache a browserului local.
Utilizați tăieturile în adrese URL
Scapa de erori de 404
Eroarea 404 (Pagina nu a fost găsită) duce la cheltuieli generale atât pe partea de server, cât și în browser. Verificați jurnalele de server sau găsiți linkurile rupte și remediați-le.
Utilizați întotdeauna favicon.ico
Majoritatea browserelor încearcă să găsească favicon.ico pentru un domeniu pentru a adăuga o mică pictogramă a site-ului, indiferent dacă este specificată în html. Dacă nu doriți să utilizați favicon.ico, plasați pur și simplu o pictogramă transparentă în rădăcina site-ului dvs. și browserul nu va primi o eroare de 404 când încercați să o deschideți.
4. Optimizarea HTML
O altă modalitate bună de a îmbunătăți viteza site-ului dvs. este de a optimiza html-ul paginii dvs. astfel încât acesta să apară pe ecran cât mai repede posibil, îmbunătățind percepția vizitatorului site-ului dvs. Apoi, vom analiza câteva sfaturi despre cum să optimizați redarea HTML.
Descărcați foi de stil în partea de sus a paginii
Plasați întotdeauna foile de stil în partea de sus a paginii, în etichetă
. aceasta va face încărcarea paginii mai graduală. Pe măsură ce browserul primește conținut HTML, acesta va afișa semnalul prin aplicarea acestuia în stilurile CSS.Evitați utilizarea @importului
Dacă utilizați @import pentru foi de stil externe, opriți acest lucru, deoarece @importul poate duce la încărcarea secvențială a foilor de stil, în loc de paralel, și cu un număr mare de conexiuni de masă, ordinea încărcării lor poate, de asemenea, să se schimbe. Utilizați întotdeauna pentru a conecta foile de stil.
Puteți afla mai multe despre @import din articolul Nu utilizați @import
Evitați expresiile CSS
Expresiile CSS pot fi uneori utile, dar sunt executate extrem de ineficient în browsere. Browserele calculează expresiile CSS atunci când pagina se încarcă, când derulează și, în general, cu fiecare mișcare a mouse-ului. O expresie CSS pe pagină va fi calculată de mii de ori în browser. Puteți testa acest lucru folosind un contor în interiorul expresiei.
Specificați înălțimea și lățimea imaginilor
Specificați întotdeauna înălțimea și lățimea etichetei img. astfel că browserul poate afla despre dimensiunea imaginii înainte de a fi descărcat de pe server. În caz contrar, browserul învață despre dimensiunea imaginii numai după ce este descărcat complet.
Evitați scalarea imaginilor în browser
Dacă utilizați proprietățile de lățime și înălțime ale etichetei img pentru a afișa o imagine mare ca fiind mică, forțați browserul să efectueze lucrări suplimentare pentru a afișa pagina. Este mai bine să utilizați o imagine miniatură cu un link.
Evident, ultimele două consilii nu se aplică în cazul utilizării adaptabilității.
Evidențiați codul JS / CSS în fișiere externe.
Încercați să alocați tot codul JS / CSS fișierelor externe, în loc să le plasați direct în HTML. Browserele pot cache fișiere JS / CSS, care vor fi utile atunci când se întoarce un vizitator.
5. Alte optimizări
În plus față de tehnicile descrise mai sus, există și alte modalități de a accelera încărcarea paginii.
Reduceți interogările DNS
Utilizați mai multe domenii pentru conținut static
După cum știți, browserele au o limită a numărului de fișiere recepționate simultan dintr-un singur domeniu, astfel că utilizarea subdomeniilor va ajuta la paralelizarea încărcării paginii dvs. De exemplu, dacă site-ul dvs. se numește mysite.rf. atunci conținutul static poate fi dat, de exemplu, din domeniile stat.1.mysite.rf și stat2.moysayt.rf. Acest lucru nu va duce la o creștere a numărului de interogări DNS, deoarece interogarea pentru mysite.rf a fost deja finalizată.
Utilizați domenii fără cookie-uri pentru conținut static
Dacă site-ul dvs. utilizează cookie-uri, așa cum fac majoritatea site-urilor de astăzi, atunci trebuie să știți că pentru fiecare solicitare adresată serverului sunt trimise cookie-uri împreună cu cererea. Este doar o cheltuială pentru conținut static, cum ar fi JS / CSS / imagini. Distribuiți conținut static din domenii fără cookie-uri pentru a evita acest lucru. Multe site-uri mari utilizează această tehnică, de exemplu, Yahoo utilizează yimg.com pentru a servi conținut static. YouTube folosește ytimg.com pentru statică.
Utilizați rețelele de livrare a conținutului
Utilizarea CDN îmbunătățește semnificativ experiența vizitatorului paginii dvs., deoarece conținutul este descărcat de pe cel mai apropiat server. Acest lucru reduce latența rețelei dacă serverul este departe și distribuie sarcina pe mai multe servere. CDN are o eficiență ridicată și același preț ridicat, ceea ce le face disponibile doar pentru site-uri foarte mari.
Utilizați instrumentele de optimizare
Articole similare
iar la sfârșitul articolului link-urile sunt doar acolo :)
de unde asemenea cifre? testele mele arată 5-6 secunde pe site-ul dvs.
ciudat, nu observa că îmi cer scuze)
pe pingdom doar verificat - a emis din nou 2.47 s, acesta este timpul total în măsura în care înțeleg, începând de la răspunsul serverului și terminând cu încărcarea paginii. Am un răspuns de server de timp care necesită mai mult decât încărcare)
pe Google 68 (din 100) rang emise ..
după ce a pornit pe gzip, serviciul de pingdom a emis 2.18 s, în principiu descărcarea a fost ușor accelerată)
Articole similare
Trimiteți-le prietenilor: