Sfaturi pentru crearea de pagini HTML cu încărcare rapidă - Aflați despre dezvoltarea web MDN
Salt la secțiune
Aceste sfaturi se bazează pe cunoștințe comune și experimentare.
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.