Monthly Archives April 2014

Rulati codul JavaScript la incarcarea paginii

Rezultatul obtinut de pagina BBC-ului pe WebPagetest da trei rezultate diferite: inceperea afisarii la 2.889 secunde, document complet/timp de incarcare la 5.391 secunde si incarcare complet la 6.667 secunde. Aceasta din urma este timpul in care pagina s-a incarcat si afisat si evenimentul JavaScript onload a fost declansat si este timpul pe care Google il foloseste pentru a masura viteza paginii.

Asadar, pe cat posibil, este de ajutor rularea codului JavaScript neesential dupa ce pagina s-a incarcat. De exemplu, daca pagina include o prezentare cu 10 imagini creata in JavaScript, nu este necesara descarcarea celor 10 imagini inca de la inceput. Trebuie descarcata doar prima, pentru ca utilizatorul sa aiba in fata o pagina completa...

Vezi articol

Sfat pentru viteza – Caching pentru continut dinamic

Si fisierele generate dinamic pot beneficia de caching. De exemplu, aveti o baza de date cu 5000 de produse, dintre care numai pentru unele din ele s-a modificat pretul sau descrierea. Desi paginile de vizualizare a acestor produse extrag in mod dinamic informatii din baza de date, la randul lor pot fi determinate sa foloseasca cache-ul broserului, prin utilizarea headerului Last-Modified. Functia PHP de mai jos va transmite browserului headerele adecvate, in baza datelor calendaristice folosite.

Practic, ea compara data If-Modified-Since transmisa de browser cu data modificarii. Daca produsul a fost modificat de la If-Modified-Since, intreaga pagina este returnata cu header Last-Modified. Daca nu, serverul retuneaza raspunsul 304, cu headerul Not Modified, ceea ce determina browserul sa f...

Vezi articol

Reducerea marimii fisierelor

Dupa reducerea numarului de fisiere care trebuie descarcate, va puteti concentra pe reducerea dimesiunilor fiecaruia dintre ele.

Pagini HTML: puteti reduce marimea codului HTML prin eliminarea comentariilor si a spatiilor goale redundante. Daca in HTML se gasesc si secvente de JavaScript sau CSS repetate pe mai multe pagini, ele ar trebui mutate intr-un fisier extern. In acest caz, vor fi descarcate o singura data si stocate in cache-ul broswerului. O cunoastere buna a limbajelor HTML si CSS va poate de asemenea fi de ajutor in procesul de subtiere a fisierelor. De exemplu, o astfel de secventa, poate fi transformata si declaratia CSS mutata intr-un fisier extern:

<div style=”padding5px”>stuff</div>

JavaScript si CSS: unul dintre avantajele Developer Tools din Chrome fata de WebPagetes...

Vezi articol

Sfat pentru viteza – Reduceti marimea imaginilor

Imaginile sunt o mare parte din marimea totala a fisierelor pentru multe site-uri. Reducerea impactului acestora poate lua timp, insa tehnic, este relativ usor de realizat.

Imaginile miniaturale

Multe site-uri afiseaza versiuni miniaturale ale imaginilor, pe care, dupa aceea, se poate face click pentru a le mari. Uneori,este disponibila doar versiunea mare a imaginii, astfel incat, imaginea mare este descarcata si browserul o redimensioneaza pentru o afisare la mici dimensiuni. Insa, este mult mai eficienta oferirea in prealabil a unei versiuni separate, miniaturale, redimensionate anterior.

Situatia apare deseori pe site-urile intretinute de proprietar, unde acesta incarca pe site fotografii de produse de 10 megapixeli direct pe de camera digitala sau din scanner si trebuie descarcate mul...

Vezi articol

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 se...

Vezi articol