Salt la secțiune

Aceste sfaturi se bazează pe cunoștințe comune și experimentare.

pagini

O pagină web optimizată nu numai că oferă un site mai receptiv vizitatorilor dvs., dar reduce și încărcarea de pe serverele dvs. web și conexiunea la internet. Acest lucru poate fi crucial pentru site-urile cu volum mare sau site-urile care au o creștere a traficului din cauza unor circumstanțe neobișnuite, cum ar fi știrile de ultimă oră.

Optimizarea performanței de încărcare a paginii nu este doar pentru conținutul care va fi vizualizat de vizitatorii de tip dial-up în bandă îngustă sau de dispozitivele mobile. Este la fel de important pentru conținutul în bandă largă și poate duce la îmbunătățiri dramatice chiar și pentru vizitatorii dvs. cu cele mai rapide conexiuni.

Reduceți greutatea paginii

Greutatea paginii este de departe cel mai important factor în performanța de încărcare a paginii.

Reducerea greutății paginii prin eliminarea spațiului alb și a comentariilor inutile, cunoscute în mod obișnuit sub denumirea de minimizare, și prin mutarea scriptului în linie și a CSS în fișiere externe, poate îmbunătăți performanța descărcării cu o nevoie minimă de alte modificări în structura paginii.

Instrumente precum HTML Tidy pot elimina automat spațiul alb principal și liniile goale suplimentare din sursa HTML validă. Alte instrumente pot „comprima” JavaScript prin reformatarea sursei sau prin ascunderea sursei și înlocuirea identificatorilor lungi cu versiuni mai scurte.

Minimizați numărul de fișiere

Reducerea numărului de fișiere la care se face referire într-o pagină web reduce numărul de conexiuni HTTP necesare pentru descărcarea unei pagini, reducând astfel timpul pentru trimiterea acestor solicitări și primirea răspunsurilor acestora.

În funcție de setările cache ale unui browser, acesta poate trimite o cerere cu antetul If-Modified-Since pentru fiecare fișier la care se face referire, întrebându-se dacă fișierul a fost modificat de la ultima descărcare. Prea mult timp petrecut interogând ultima dată modificată a fișierelor la care se face referire poate întârzia afișarea inițială a paginii web, deoarece browserul trebuie să verifice timpul de modificare pentru fiecare dintre aceste fișiere, înainte de a reda pagina.

Dacă utilizați multe imagini de fundal în CSS, puteți reduce numărul de căutări HTTP necesare combinând imaginile într-una singură, cunoscută sub numele de sprite de imagine. Apoi, pur și simplu aplicați aceeași imagine de fiecare dată când aveți nevoie de ea pentru un fundal și ajustați coordonatele x/y în mod corespunzător. Această tehnică funcționează cel mai bine cu elemente care vor avea dimensiuni limitate și nu vor funcționa pentru fiecare utilizare a unei imagini de fundal. Cu toate acestea, mai puține solicitări HTTP și stocarea în cache a unei singure imagini pot ajuta la reducerea timpului de încărcare a paginii.

Utilizați o rețea de livrare de conținut (CDN)

În sensul acestui articol, un CDN este un mijloc de a reduce distanța fizică între serverul dvs. și vizitatorul dvs. Pe măsură ce distanța dintre originea serverului dvs. și vizitator crește, timpul de încărcare va crește. Să presupunem că serverul site-ului dvs. web se află în Statele Unite și are un vizitator din India; timpul de încărcare a paginii va fi mult mai mare pentru vizitatorul indian comparativ cu un vizitator din SUA.

Un CDN este o rețea distribuită geografic de servere care funcționează împreună pentru a scurta distanța dintre utilizator și site-ul dvs. web. CDN-urile stochează versiunile cache ale site-ului dvs. web și le servesc vizitatorilor prin nodul de rețea cel mai apropiat de utilizator, reducând astfel latența.

Reduceți căutările de domeniu

Deoarece fiecare domeniu separat costă timp într-o căutare DNS, timpul de încărcare a paginii va crește împreună cu numărul de domenii separate care apar în link-uri CSS și JavaScript și imagine src (s).

Poate că acest lucru nu este întotdeauna practic; cu toate acestea, ar trebui să aveți întotdeauna grijă să utilizați doar numărul minim necesar de domenii diferite în paginile dvs.

Conținutul reutilizat în cache

Asigurați-vă că orice conținut care poate fi memorat în cache, este stocat în cache și cu timpi de expirare corespunzători.

În special, acordați atenție antetului Ultima modificare. Permite cache-ul eficient al paginilor; prin intermediul acestui antet, informațiile sunt transmise agentului utilizator despre fișierul pe care dorește să îl încarce, cum ar fi data ultimei modificări. Majoritatea serverelor web adaugă automat antetul Last-Modified la paginile statice (de exemplu .html, .css), pe baza ultimei date modificate stocate în sistemul de fișiere. Cu pagini dinamice (de exemplu .php, .aspx), acest lucru, desigur, nu se poate face, iar antetul nu este trimis.

Deci, în special, pentru paginile care sunt generate dinamic, o mică cercetare pe acest subiect este benefică. Poate fi oarecum implicat, dar va economisi mult în cererile de pagini pe pagini care în mod normal nu ar putea fi cache.

Ordonați în mod optim componentele paginii

Descărcați mai întâi conținutul paginii, împreună cu orice CSS sau JavaScript care pot fi necesare pentru afișarea inițială, astfel încât utilizatorul să primească cel mai rapid răspuns aparent în timpul încărcării paginii. Acest conținut este de obicei text și, prin urmare, poate beneficia de comprimarea textului în tranzit, oferind astfel un răspuns și mai rapid utilizatorului.

Orice caracteristici dinamice care necesită încărcarea paginii înainte de a fi utilizate, ar trebui să fie inițial dezactivate și apoi activate numai după încărcarea paginii. Acest lucru va face ca JavaScript să fie încărcat după conținutul paginii, ceea ce va îmbunătăți aspectul general al încărcării paginii.

Reduceți numărul de scripturi în linie

Scripturile inline pot fi costisitoare pentru încărcarea paginilor, deoarece analizorul trebuie să presupună că un script inline ar putea modifica structura paginii în timp ce analiza este în curs. Reducerea utilizării scripturilor inline în general și reducerea utilizării document.write () pentru a genera conținut în special, poate îmbunătăți încărcarea generală a paginii. Folosiți metode AJAX moderne pentru a manipula conținutul paginii pentru browserele moderne, mai degrabă decât abordările mai vechi bazate pe document.write () .

Utilizați CSS modern și un markup valid

Utilizarea CSS modernă reduce cantitatea de markup, poate reduce nevoia de imagini (distanțier), în ceea ce privește aspectul, și poate înlocui foarte des imaginile cu text stilizat - care „costă” mult mai mult decât textul și CSS echivalent.

Utilizarea unui markup valid are alte avantaje. În primul rând, browserele nu vor avea nevoie să corecteze erorile atunci când analizează codul HTML (acest lucru este în afară de problema filosofică a faptului dacă trebuie să permită variația formatului în introducerea utilizatorului și apoi să o „corecteze” sau să o normalizeze programatic sau dacă, în schimb, să o impună un format de intrare strict, fără toleranță).

Mai mult decât atât, marcarea validă permite utilizarea gratuită a altor instrumente care pot pre-procesa paginile dvs. web. De exemplu, HTML Tidy poate elimina spațiul alb și etichetele de finalizare opționale; cu toate acestea, va refuza să ruleze pe o pagină cu erori grave de marcare.

Bucățați-vă conținutul

Tabelele pentru machete sunt o metodă veche care nu ar mai trebui folosită. Ar trebui folosite în schimb machete care utilizează flotante, poziționare, flexbox sau grile.

Tabelele sunt încă considerate marcaje valide, dar ar trebui utilizate pentru afișarea datelor tabulare. Pentru a ajuta browserul să vă facă pagina mai rapidă, ar trebui să evitați cuibarea tabelelor.

Mai degrabă decât cuiburi adânci ca în:

utilizați tabele sau divs ne-imbricate ca în

Reduceți și comprimați activele SVG

SVG produs de majoritatea aplicațiilor de desen conține adesea metadate inutile care pot fi eliminate. Configurați-vă serverele, aplicați compresia gzip pentru activele SVG.

Reduceți și comprimați imaginile

Imaginile mari determină încărcarea paginii mai mult timp. Luați în considerare comprimarea imaginilor înainte de a le adăuga la pagina dvs., folosind funcții de compresie încorporate în instrumente de manipulare a imaginilor, cum ar fi Photoshop, sau utilizarea unui instrument specializat, cum ar fi Compress Jpeg sau Tiny PNG.,.

Specificați dimensiunile pentru imagini și tabele

Dacă browserul poate determina imediat înălțimea și/sau lățimea imaginilor și tabelelor dvs., acesta va putea afișa o pagină web fără a fi nevoie să retransmite conținutul. Acest lucru nu numai că accelerează afișarea paginii, ci previne modificările enervante ale aspectului unei pagini atunci când pagina finalizează încărcarea. Din acest motiv, înălțimea și lățimea trebuie specificate pentru imagini, ori de câte ori este posibil.

Tabelele trebuie să utilizeze selectorul CSS: combinație de proprietăți:

și ar trebui să specifice lățimile coloanelor folosind elementele și.

Utilizați încărcarea leneșă pentru imagini

În mod implicit, imaginile sunt încărcate cu nerăbdare; adică imaginea este preluată și redată de îndată ce este procesată în HTML. Toate imaginile încărcate cu nerăbdare sunt redate înainte de trimiterea evenimentului de încărcare a documentului. Trecerea la încărcarea leneșă a imaginilor îi spune browserului să oprească încărcarea imaginilor până când acestea vor fi necesare pentru a desena vizualizarea vizuală.

Pentru a marca o imagine pentru încărcarea leneșă, specificați atributul de încărcare al acesteia cu o valoare de leneș. Cu acest set, imaginea va fi încărcată numai atunci când este nevoie.

Rețineți că este posibil ca imaginile încărcate leneș să nu fie disponibile atunci când evenimentul de încărcare este declanșat. Puteți determina dacă o anumită imagine este încărcată verificând dacă valoarea proprietății sale complete Boolean este adevărată .

Alegeți cu înțelepciune cerințele dvs. de utilizator-agent

Pentru a obține cele mai bune îmbunătățiri în proiectarea paginilor, asigurați-vă că sunt specificate cerințe rezonabile de utilizator-agent pentru proiecte. Nu solicitați conținutului dvs. să apară perfect în pixeli în toate browserele, mai ales în browserele cu versiuni inferioare.

În mod ideal, cerințele minime de bază ar trebui să se bazeze pe considerarea browserelor moderne care acceptă standardele relevante. Aceasta poate include versiuni recente de Firefox, Internet Explorer, Google Chrome, Opera și Safari.

Rețineți, însă, că multe dintre sfaturile enumerate în acest articol sunt tehnici de bun simț care se aplică oricărui agent utilizator și pot fi aplicate oricărei pagini web, indiferent de cerințele de asistență pentru browser.

Utilizați asincronizarea și amânarea, dacă este posibil

Faceți scripturile JavaScript astfel încât să fie compatibile atât cu atributele asincronizate, cât și cu cele de amânare și utilizați asincronizarea ori de câte ori este posibil, mai ales dacă aveți mai multe etichete script.

Cu aceasta, pagina poate opri redarea în timp ce JavaScript încă se încarcă. În caz contrar, browserul nu va reda nimic care este după etichetele de script care nu au aceste atribute.

Notă: Chiar dacă aceste atribute ajută foarte mult la prima încărcare a unei pagini, ar trebui să le utilizați, dar să nu presupuneți că vor funcționa în toate browserele. Dacă urmați deja toate cele mai bune practici JavaScript, nu este necesar să vă schimbați codul.