Facem site-uri client mai rapid

Principiul 80/20

Dacă te uiți la activitatea de rețea a site-ului, veți observa că descărcarea paginii HTML în sine are o pondere foarte mică din timpul total de încărcare.

putem spune în termeni generali, că ≤20% pagina de încărcare datorită documentului HTML, iar ≥80% este cheltuit pe descărcarea de imagini, stiluri, script-uri și așa mai departe. Regula 80/20 prevede că, dacă sunteți în căutarea pentru o modalitate de a îmbunătăți performanțele site-ului, este mai bine să se uite la ceea ce este de 80%, decât să încerce să schimbe ceva în 20%. Cu alte cuvinte, nu există nici o îndoială că serverul de baze de date și de optimizare este foarte importantă, dar cel mai simplu mod de a accelera site-ul dvs., dacă vă acorde o atenție la imagini, script-uri, și așa mai departe.

Bazat pe principiul 80/20, YSlow analizează factorii care afectează până la 80%, și returnează o estimare a cât de bună sau rea performanța site-ului.

De ce ar trebui să se ocupe de această problemă?

Google a anunțat recent că începe să utilizeze viteza de descărcare în calculele lor pagina de rang. În plus, îmbunătățirea scorurilor YSlow poate ajuta la reducerea costurilor de lățime de bandă (în special pentru site-urile cu trafic mare), utilizatorii îmbunătăți raportul dintre resurse și afectează coeficient de conversie CR.

Valoarea medie YSlow evaluare

Site-uri cu caracteristici de performanță scăzute obținute D sau mai rău. Iată câteva exemple:

Din această poziție, se recomandă să instalați Firebug / YSlow. si uita-te la site-ul tau. După cum a evaluat?

Dar cum putem îmbunătăți estimarea YSlow site-ul nostru? Și mai importantă întrebare este, ce putem face ca dezvoltatori și designeri pentru a se asigura că site-urile clienților au performanțe excelente?

3 concepte principale

YSlow conține 14 reguli, și Google Page Speed ​​conține 26. Toate aceste reguli și tehnologii sunt importante, dar pentru simplitate ne vom concentra pe trei concepte de bază:

1. Asigurați-vă mai puține solicitări de fișiere
2. Încărcați fișierele în același timp,
3. Păstrați lucrurile în cache-ul, atâta timp cât posibil

Asigurați-vă mai puține solicitări de fișiere

Sumar: dacă efectuați solicitări mai puține fișiere, este nevoie de mai puțin timp pentru a încărca site-ul.

Să vedem cum este posibil să se reducă numărul de stiluri, script-uri și imagini care urmează să fie încărcate:

minimizare

Avantajul principal al folosirii PHP Comprimați care reduce numărul de descărcări de fișiere (ceea ce duce la o creștere de evaluare YSlow). Dar există un alt factor pozitiv: PHP Comprimați nu se schimba fișierele originale, creează un fișier nou, combinat pe zbor. Astfel, dezvoltatorul este capabil de a face modificări în site-ul clientului prin editarea fișierelor individuale și PHP Comprimați crea automat o nouă imagine compozită.

Acesta este un aspect foarte important al conceptului: studio de design trebuie să fie sigur că site-ul transmis de către client poate fi menținut la absența ei completă. Ori de câte ori scrierea de cod, ar trebui să fie ușor accesibile pentru client, sau dezvoltatorii viitoare pentru a citi și edita.

Când utilizați PHP Comprimați toate fișierele originale rămân în funcțiune și pot fi editate pootdelnosti. Această abordare ne permite să mențină un nivel ridicat de sprijin,

sprite CSS

Sprites - o tehnologie care vă permite să combinați mai multe imagini de fundal într-una singură. Apoi, imaginea combinată este folosit de mai multe reguli CSS pentru a afișa numai partea dorită a imaginii.

Utilizați acest instrument cu înțelepciune. Utilizarea sprite poate complica schimbări de imagine pentru procesul de client.

descărcarea fișierelor simultane

Rezumat: Sarcina în același timp, cât mai multe fișiere ca tine poate.

browsere implicite pot încărca mai multe fișiere în paralel (

2 în browsere mai vechi,

6 nou). Cu toate acestea, în timp ce browser-ul încarcă script-ul, acesta nu va descărca orice alte fișiere.

Notă: acest lucru este deosebit de important în ceea ce privește script-urile de la terțe părți, cum ar fi Google Analytics, widget-uri, sau de etichete de anunț, deoarece întârzierea în livrare poate duce la încălcări semnificative ale randarea.

jQuery de la Google

Utilizarea bibliotecii jQuery este recomandat să se facă referire la CDN Google (livrare de rețea de conținut - Rețeaua de distribuție de conținut). Dacă un utilizator a vizitat un site Web care se face referire la biblioteca jQuery în CDN Google, acesta este deja încărcat în cache-ul de utilizator. În acest caz, vom salva dimensiunea paginii 24KB. În cazul în care biblioteca nu este deja în cache, CDN este utilizat Avantaj: încărcare rapidă de la un server, care este punct de vedere geografic de încărcare aproape și paralel de-a doua gazdă.

Păstrăm lucrurile în cache-ul, atâta timp cât posibil

Sumar: Dacă descărcați nimic și nu se schimbă, nu este nevoie pentru a descărca această bază.

Câteva linii adăugate la fișierul .htaccess spune browser-ului pentru a cache fișierele pentru o lungă perioadă de timp, astfel încât nu este nevoie să re-încărcare la vizitele utilizatorilor repetate.

Exemplul stabilește perioada de stocare pentru imagini, scripturi și stiluri de 30 de zile de la data curentă. De asemenea, oferă instrucțiuni pentru Apache eliminați ETag, identificatorul, ceea ce complică adesea procesul de cache. Aceste setări pot fi efectuate în fișierele de configurare Apache, dar care modifică fișierul .htaccess este de obicei mai ușor.

Aceste modificări, de asemenea, ajuta la reducerea traficului către site-uri cu trafic mare.

I a lua dacă decid să se schimbe, cum ar fi ceea ce unii kartirnku. sau stilul (întotdeauna ceva pentru mine) va actualiza numai într-o lună?

Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!

Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!

Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.

Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!