Combinarea fisierelor JavaScript si CSS

WebPagetest prezinta un numar de 77 de fisiere care compun pagina cu vremea de la BBC. Vizualizarea cascada prezinta cat timp ii ia browserului sa proceseze fiecare fisier. Pentru fiecare fisier exista un dreptunghi multicolor si un timp in milisecunde. Culorile prezinta timpul relativ necesar pentru executarea diferitelor operatiuni. Aceasta pagina foloseste fisiere stocate pe diferite servere: news.bbc.co.uk, static.bbc.co.uk, node1.bbcimg.co.uk, etc.

Cand primul fisier de pe oricare server nou este cerut, vor trece cateva milisecunde pentru a execunta operatiunea de cautare in serverul DNS, prezentata in culoarea gri, si vor mai trece ceva milisecunde pana la crearea conexiunii, prezentata in portocaliu(daca toate fisierele prezinta o secventa de inceput portocalie, cititi cu atentie seciuntea despre Keep-Alive). Apoi, toate fisierele include un anumit timp necesar pana soseste primul byte al fisierului, afisat cu verde, iar dupa aceea, timpul necesar sau descarcarea totala a fisierului, cu albastru(acesta din urma este uneori atat de mic incat abia este vizibil). Primul element al listei este URL-ul introdus: news.bbc.co.uk/weather. Randul este galben deoarece serverul a facut o redirectionare a browserului catre adresa news.bbc.co.uk/weather/, cu caracterul liniuta oblica la sfarsit. In timp ce descarca codul HTML al aceste pagini, browserul a intalnit o referinta la un fisier denumit maincss si a cerut imediat fisierul, inainte sa fi primit tot codul HTML(pentru a vedea ce se intampla, vezi sectiunea Viteza serverului si a pagini). Urmtoarele 20 de fisiere sunt in mare parte fisiere JavaScript si mai toate secventiale – ceea ce inseamna ca IE7 a trebuit sa astepte pana s-a incarcat unul dintre ele pentru a efectua cererea pentru urmatorul si a petrecut aproape 3 secunde facand acest lucru. Cel mai mult timp nu a fost petrecut descarcand fisiere, ci asteptand pentru ele. La o adunare aproximativa a secventelor cu verde – cam 60 milisecunde pentru fiecare dintre cele 15 fisiere JavaScript – se ajunge la aproape o secunda de asteptare! Asadar, unul dintre primele mele sfaturi de optimizare este combinarea tuturor fisierelor JavaScript intr-unul singur, la fel si pentru CSS. Astfel browserul va va avea de asteptat doar de doua ori.

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>