Optimizați timpul de încărcare a paginii
În momentul de față, printre dezvoltatorii web există o concepție greșită răspândită că viteza de download a site-ului în browser-ul client este complet determinat de generarea de pagini HTML pe server. Cu raportul meu, vreau să încerc să clarific această problemă și să vă spun câteva lucruri despre cum puteți accelera de multe ori încărcarea paginilor de pe site-urile dvs.
După cum puteți vedea din tabel, timpul de descărcare a html-ului, practic, reprezintă doar o mică parte din timpul total de încărcare / inițializare a paginii pentru utilizatorul final. Să aruncăm o privire mai atent la ce este vorba de data asta. Această latență de rețea (de așteptare pentru un răspuns de la DNS, timp pentru a stabili o conexiune la server), acest lucru este timpul necesar pentru a descărca resurse (imagini, animații) și fișierele de încărcare CSS și script-uri (CSS și pentru JavaScript).
Cum puteți reduce fiecare dintre aceste componente? Toate metodele de optimizare a site-uri web sunt împărțite în mai multe grupe majore, primare ca obiectivul lor este de a reduce timpul de cererea de transport, timpul de răspuns de transmisie și numărul de cereri pentru client mediu (este evident că o creștere a lățimii canalului, pe care se află serverul este puțin probabil să rezolve în mod fundamental problema ). Apoi, vom analiza metodele de comprimare a datelor și sistemele distribuite care reduc timpul de răspuns și metodele de cache și de îmbinare care reduc numărul de solicitări.
Singura metodă eficientă de a reduce dimensiunea solicitării (datele trimise de client) este de a reduce dimensiunea antetului Cookie. Așa cum se poate observa din tabel, ea poate ocupa o parte esențială a întregii interogări. Câteva reguli simple va ajuta pentru a optimiza o parte din informațiile de client, cum ar fi un cookie pentru a elimina inutile, nu le face mai mult decât dimensiunea necesară, afișa numai paginile necesare și urmați data de expirare.
Cum pot reduce dimensiunea răspunsului? Aici domeniul de acțiune este mult mai mare. Cea mai cunoscută metodă este minify (cu excepția tuturor codurilor inutile din cod, pentru detalii vezi raportul "Optimizarea HTML, CSS, JS pe paginile Yandex afișate frecvent"). Dacă este posibil, ar trebui să utilizați, de asemenea, solicitări AJAX în locul celor standard și în ele JSON în loc de XML.
O altă metodă foarte cunoscută este compresia gzip / deflate pe partea de server (poate că merită cache rezultatele, astfel încât să nu supraîncărcați procesorul cu calcule inutile). În acest caz, principalul lucru este acela de a oferi suport pentru browserele "vechi" (astfel încât clienții fără sprijinul gzip pot merge în mod normal pe site-ul dvs.). După cum puteți vedea din tabel, utilizarea compresiei gzip vă permite să reduceți semnificativ dimensiunea răspunsului de la server.
Să analizăm în detaliu compresia fișierelor CSS. Utilizarea algoritmilor speciali care comprimă codul sursă (CSS Tidy), împreună cu arhivarea rezultatului, pot reduce semnificativ dimensiunea fișierului. De asemenea, ca metode posibile pentru optimizarea dimensiunii fișierului, puteți sugera reducerea căii spre imaginile de fundal și reducerea lungimii claselor și a identificatorilor utilizați. Fișierul CSS pregătit poate fi comprimat o dată și apoi dat utilizatorului aceeași versiune comprimată.
Pentru a minimiza solicitările repetate din mașina client, se folosesc diferite metode și metode de cache pe server. Cea mai simplă, poate, va fi utilizarea imaginilor de fundal (CSS-property-image-background) în loc de cea obișnuită (etichetă ). Acest lucru vă permite să spuneți browser-ului că majoritatea elementelor de pe pagină sunt utilizate în scopuri de decorare și că trebuie doar să le descărcați o singură dată (depinde, bineînțeles, de setările browserului). Apoi, merită menționat faptul că setul de anteturi Expires / Cache-Control, care sunt concepute pentru a gestiona cache-ul clientului pe partea de server. În acest caz, ar trebui să stocați în memoria cache toate resursele rar schimbate (chiar dacă acestea nu sunt solicitate atât de des). O altă metodă de a controla punerea în cache pe partea de server este includerea în antetul de răspuns ETag care spune clientului un identificator unic de fișier, care permite serverului să răspundă la un 304 (Nemodificat, nu sa schimbat), la o a doua solicitare client și fișierul nu este re-face. În cele din urmă, pe fundalul tuturor tehnicilor descrise, problema de versiune devine: atunci când trebuie să oferiți forțat clientului o versiune mai nouă a fișierului cache. Și este rezolvată în mod standard prin adăugarea șirului de interogare unic (fișierul "V.3.11.45") la sfârșitul numelui fișierului în punctul de acces la acesta.
Ca o concluzie, putem cita criteriul bine cunoscut al bunei disponibilități a site-ului atunci când este descărcat pe deplin în 10 secunde pe modem (dimensiunea totală a tuturor fișierelor nu trebuie să depășească 36 KB). De asemenea, puteți oferi date oficiale pe pagina principală a yahoo.com, care a fost optimizată în conformitate cu regulile descrise mai sus. Ca urmare, timpul de încărcare a scăzut de la 2,4 secunde la 0,9 secunde (de 2,7 ori). Statistici similare sunt disponibile pentru alte resurse (dezvoltarea internă a proiectelor cu sarcini mari).
Vă mulțumesc pentru atenție. Voi răspunde la întrebările dvs. o dată.
Articole similare
Trimiteți-le prietenilor: