optimizare pagini web
Trimis la: 2007-08-27 18:10:02 (categ.:internet)
Moduri de optimizare a unei pagini web utilizand compresia gzip!Cum optimizezi viteza de incarcare a unei pagini web utilizind modulul gzip?Compresia gzip este o metoda destul de simpla si la indemina oricui detine un site web iar principalele avantaje sint economia de banda si cresterea simtitoare a vitezei cu care browserul incarca pagina respectiva.
Personal am introdus metoda aceasta dupa ce am renuntat la functiile proprii ajax si am introdus parti din YUI Library necesare pentru ca editorul de text si apelurile ajax sa functioneze la fel si pentru msie si pentru opera si pentru firefox.Deoarece librariile javascript furnizate de yahoo sint foarte voluminoase,la aceasta adaugindu-se si faptul ca textul continut de site este substantial uneori,cu ocazia introducerii compresiei gzip am impuscat doi iepuri si am comprimat atit continutul propriu-zis al sitului (text+cod html) cit si librariile javascript oferite de yahoo.
Pasii sint urmatorii:
1. Daca ai scripturi javascript personale utilizeaza instrumentul de AICI pentru a minimiza marimea scriptului.Dupa minimizare testeaza-l pentru ca nu functioneaza intotdeauna cind folosesti metoda agresiva de minimizare.De aceea recomand metoda "conservativa" care da rezultate bune iar dupa minimizare scriptul va functiona intotdeauna.Librariile de functii yahoo sint deja minimizate.
2. Acum adauga urmatorul cod in fisierul .htacces:
<FilesMatch "^scripts$">
ForceType application/x-httpd-php
</FilesMatch>
Acum,fisierul cu numele "scripts",fara extensie, va fi prelucrat de server ca un cod php.
3. Foloseste un editor de text simplu(notepad) pentru a creea si salva un fisier cu numele "scripts" fara extensie.Codul continut de fisier il gasesti AICI si este modificat putin de mine pentru a stoca toate scripturile javascript intr-un singur fisier cache.Modificarea este prezentata mai jos(linia 22):
// $orgFileNames = explode(",",$fileList);
$orgFileNames=array ("connection/yahoo-min.js",
"connection/event-min.js",
"connection/connection-min.js",
"jswindow/dhtmlwindow.js",
"script.js",
"script2.js");
// $fileNames now is an array of the requested file names.
Calea catre scripturile javascript este relativa la fisierul "scripts" deci modificati in functie de configuratia directoarelor voastre! In acest moment,in cache vom avea un singur fisier comprimat care va cuprinde toate codurile javascript.Va functiona numai daca nu aveti variabile globale care se amesteca unele cu altele!De asemenea,in momentul cind modificati codurile javascript se vor modifica automat si fisierele din cache astfel incit sa reflecte imediat schimbarile iar serverul sa livreze versiunea actualizata a scripturilor.
4. Creati directorul cache,numit chiar asa, pe serverul web!Daca-i schimbati numele atunci modificati in consecinta codul din fisierul "scripts"! Asta a fost tot.Pentru a incepe sa folositi compresia gzip in cazul fisierelor javascript folositi inauntrul tagurilor <head> si </head> declaratia urmatoare:
<script src="http://yourdomain/scripts" type="text/javascript"></script>
In cazul sitului de fata,la momentul scrierii acestui articol marimea librariilor javascript yahoo plus a codului javascript personal era de 75,9 Kb.In urma folosirii metodei de mai sus traficul pe retea s-a redus la 19,8 Kb deci de 4 ori ceea ce ste enorm si benefic in special siturilor cu un cod javascript mare si foarte mare.
Pentru a comprima si textul+codul html transferat prin retea folosim o functie php in modul urmator:
<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
{ob_start("ob_gzhandler"); }else{ ob_start();}
Conditia "if" trebuie folosita imediat dupa declaratia "<?php" .Folosind aceasta metoda transferul pe retea scade ,in cazul sitului de fata la momentul scrierii articolului, de la 103 Kb la 35 Kb, deci o scadere de 3 ori!Testul,pentru orice pagina web, se poate face AICI iar rezultatul de mai sus se poate verifica in foto de mai jos!
foto aici
5. Punctele de mai sus se pot aplica si in cazul fisierelor .css ! De asemenea,se poate aplica urmatoarea metoda :se creaza cu un editor de text (notepad) fisierul stil.php (de exemplu) care cuprinde urmatoarele:
<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
{ob_start("ob_gzhandler"); }else{ ob_start();}
header('Content-type: text/css');
readfile("fisier1.css");
readfile("fisier2.css");
?>
unde "fisier1",'fisier2",etc sint foile de stil folosite iar calea spre ele este relativa la fisierul "stil.php". In continuare,din sectiunea <head> se elimina referintele la fisierele .css externe si se introduce o singura linie:
<link rel="stylesheet" type="text/css" href="stil.php" />
De acum inainte,toate fisierele .css folosite de pagina web vor fi comprimate si servite printr-o singura cerere http.
6.Utilizarea modulelor apache mod_headers si mod_expires pentru a insoti imaginile prezente in pagina web de headere care vor instrui browserul utilizatorului sa pastreze aceste imagini in cache astfel incit la o eventuala revizitare a paginii web imaginile sa nu mai fie descarcate din nou de pe server ci sa fie utilizate din memoria cache a browserului-adica de pe hard-diskul vizitatorului.Pentru aceasta,daca serverul apache are active cele doua module de mai sus se vor adauga in fisierul .htaccess liniile urmatoare:
ExpiresActive On
ExpiresByType image/gif A12592000
ExpiresByType image/jpeg A12592000
ExpiresByType image/png A12592000
Imaginile vor avea "termen de expirare a cache-ului" vreun an de zile in exemplul de mai sus!Perioada poate fi reglata modificand cifrele dupa "A".
Utilizand toate metodele de mai sus am reusit sa reduc cu mai mult de 50% timpul de incarcare a paginii principale a sitului propriu iar traficul pe retea s-a redus simtitor-procentul este undeva intre 20% si 40% reducere!
7.Ultima metoda de care voi aminti acum este folosita de siturile mari si foarte mari si consta in crearea unui subdomeniu (din cite am vazut,de cele mai multe ori este numit "static":de exemplu static.trilulilu.ro) si servirea imaginilor si a fisierelor statice din respectivul subdomeniu ceea ce duce la cresterea vitezei de incarcare a paginilor.De exemplu,cind accesati o pagina web obisnuita care pastreaza toate fisierele in acelasi domeniu ,browserele trimit secvential cereri catre domeniul respectiv pina cind sint servite toate fisierele,unul cite unul si pe rind.O noua cerere catre un nou fisier nu poate fi satisfacuta pina cind cererea anterioara nu a fost completata si inchisa.Daca fisierele statice sint servite de pe un domeniu diferit browserele pot trimite cereri in paralel folosind http-pipelining iar fisierele statice sint incarcate in acelasi timp cu cele dinamice.Avantajul este evident numai in cazul siturilor foarte mari ,cele mici si mijlocii neavind de cistigat nimic!Pentru aceste situri timpul cistigat prin folosirea http-pipelining este pierdut inapoi prin cererile dns suplimentare si prin stabilirea de noi conexiuni tcp.
photo slide from flickr!
Since 9D
castiga premii intr-un mod placut!
Personal am introdus metoda aceasta dupa ce am renuntat la functiile proprii ajax si am introdus parti din YUI Library necesare pentru ca editorul de text si apelurile ajax sa functioneze la fel si pentru msie si pentru opera si pentru firefox.Deoarece librariile javascript furnizate de yahoo sint foarte voluminoase,la aceasta adaugindu-se si faptul ca textul continut de site este substantial uneori,cu ocazia introducerii compresiei gzip am impuscat doi iepuri si am comprimat atit continutul propriu-zis al sitului (text+cod html) cit si librariile javascript oferite de yahoo.
Pasii sint urmatorii:
1. Daca ai scripturi javascript personale utilizeaza instrumentul de AICI pentru a minimiza marimea scriptului.Dupa minimizare testeaza-l pentru ca nu functioneaza intotdeauna cind folosesti metoda agresiva de minimizare.De aceea recomand metoda "conservativa" care da rezultate bune iar dupa minimizare scriptul va functiona intotdeauna.Librariile de functii yahoo sint deja minimizate.
2. Acum adauga urmatorul cod in fisierul .htacces:
<FilesMatch "^scripts$">
ForceType application/x-httpd-php
</FilesMatch>
Acum,fisierul cu numele "scripts",fara extensie, va fi prelucrat de server ca un cod php.
3. Foloseste un editor de text simplu(notepad) pentru a creea si salva un fisier cu numele "scripts" fara extensie.Codul continut de fisier il gasesti AICI si este modificat putin de mine pentru a stoca toate scripturile javascript intr-un singur fisier cache.Modificarea este prezentata mai jos(linia 22):
// $orgFileNames = explode(",",$fileList);
$orgFileNames=array ("connection/yahoo-min.js",
"connection/event-min.js",
"connection/connection-min.js",
"jswindow/dhtmlwindow.js",
"script.js",
"script2.js");
// $fileNames now is an array of the requested file names.
Calea catre scripturile javascript este relativa la fisierul "scripts" deci modificati in functie de configuratia directoarelor voastre! In acest moment,in cache vom avea un singur fisier comprimat care va cuprinde toate codurile javascript.Va functiona numai daca nu aveti variabile globale care se amesteca unele cu altele!De asemenea,in momentul cind modificati codurile javascript se vor modifica automat si fisierele din cache astfel incit sa reflecte imediat schimbarile iar serverul sa livreze versiunea actualizata a scripturilor.
4. Creati directorul cache,numit chiar asa, pe serverul web!Daca-i schimbati numele atunci modificati in consecinta codul din fisierul "scripts"! Asta a fost tot.Pentru a incepe sa folositi compresia gzip in cazul fisierelor javascript folositi inauntrul tagurilor <head> si </head> declaratia urmatoare:
<script src="http://yourdomain/scripts" type="text/javascript"></script>
In cazul sitului de fata,la momentul scrierii acestui articol marimea librariilor javascript yahoo plus a codului javascript personal era de 75,9 Kb.In urma folosirii metodei de mai sus traficul pe retea s-a redus la 19,8 Kb deci de 4 ori ceea ce ste enorm si benefic in special siturilor cu un cod javascript mare si foarte mare.
Pentru a comprima si textul+codul html transferat prin retea folosim o functie php in modul urmator:
<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
{ob_start("ob_gzhandler"); }else{ ob_start();}
Conditia "if" trebuie folosita imediat dupa declaratia "<?php" .Folosind aceasta metoda transferul pe retea scade ,in cazul sitului de fata la momentul scrierii articolului, de la 103 Kb la 35 Kb, deci o scadere de 3 ori!Testul,pentru orice pagina web, se poate face AICI iar rezultatul de mai sus se poate verifica in foto de mai jos!
foto aici
5. Punctele de mai sus se pot aplica si in cazul fisierelor .css ! De asemenea,se poate aplica urmatoarea metoda :se creaza cu un editor de text (notepad) fisierul stil.php (de exemplu) care cuprinde urmatoarele:
<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
{ob_start("ob_gzhandler"); }else{ ob_start();}
header('Content-type: text/css');
readfile("fisier1.css");
readfile("fisier2.css");
?>
unde "fisier1",'fisier2",etc sint foile de stil folosite iar calea spre ele este relativa la fisierul "stil.php". In continuare,din sectiunea <head> se elimina referintele la fisierele .css externe si se introduce o singura linie:
<link rel="stylesheet" type="text/css" href="stil.php" />
De acum inainte,toate fisierele .css folosite de pagina web vor fi comprimate si servite printr-o singura cerere http.
6.Utilizarea modulelor apache mod_headers si mod_expires pentru a insoti imaginile prezente in pagina web de headere care vor instrui browserul utilizatorului sa pastreze aceste imagini in cache astfel incit la o eventuala revizitare a paginii web imaginile sa nu mai fie descarcate din nou de pe server ci sa fie utilizate din memoria cache a browserului-adica de pe hard-diskul vizitatorului.Pentru aceasta,daca serverul apache are active cele doua module de mai sus se vor adauga in fisierul .htaccess liniile urmatoare:
ExpiresActive On
ExpiresByType image/gif A12592000
ExpiresByType image/jpeg A12592000
ExpiresByType image/png A12592000
Imaginile vor avea "termen de expirare a cache-ului" vreun an de zile in exemplul de mai sus!Perioada poate fi reglata modificand cifrele dupa "A".
Utilizand toate metodele de mai sus am reusit sa reduc cu mai mult de 50% timpul de incarcare a paginii principale a sitului propriu iar traficul pe retea s-a redus simtitor-procentul este undeva intre 20% si 40% reducere!
7.Ultima metoda de care voi aminti acum este folosita de siturile mari si foarte mari si consta in crearea unui subdomeniu (din cite am vazut,de cele mai multe ori este numit "static":de exemplu static.trilulilu.ro) si servirea imaginilor si a fisierelor statice din respectivul subdomeniu ceea ce duce la cresterea vitezei de incarcare a paginilor.De exemplu,cind accesati o pagina web obisnuita care pastreaza toate fisierele in acelasi domeniu ,browserele trimit secvential cereri catre domeniul respectiv pina cind sint servite toate fisierele,unul cite unul si pe rind.O noua cerere catre un nou fisier nu poate fi satisfacuta pina cind cererea anterioara nu a fost completata si inchisa.Daca fisierele statice sint servite de pe un domeniu diferit browserele pot trimite cereri in paralel folosind http-pipelining iar fisierele statice sint incarcate in acelasi timp cu cele dinamice.Avantajul este evident numai in cazul siturilor foarte mari ,cele mici si mijlocii neavind de cistigat nimic!Pentru aceste situri timpul cistigat prin folosirea http-pipelining este pierdut inapoi prin cererile dns suplimentare si prin stabilirea de noi conexiuni tcp.
photo slide from flickr!
Since 9D
castiga premii intr-un mod placut!
alte mesaje din aceasta categorie precum si din altele puteti citi AICI
WEB 2.0 M u s i c R e v o l u t i o n !
oamenii se impart in doua:cei care folosesc internet explorer si ceilalti!Ceilalti sint mai ...egali! Folosesti inca internet explorer?
asculta muzica ta! Digitally Imported Radio !
