Unul dintre cele mai importante aspecte ale site-ului dvs. - aceasta este viteza cizmei; utilizatorii doresc să obțineți imediat o imagine fără frâne, iar dacă nu sunt în măsură să-l dea la ei, ei nu au ezitat pentru o lungă perioadă de timp, va căuta informații în altă parte. In acest articol vom discuta despre 5 moduri în care vă va permite să accelereze timpul de încărcare a site-ului.
1. Utilizați YSlow, pentru a monitoriza pagina de timpul de încărcare
Cunoscând cantitatea de timp petrecut pe pagina de descărcare, va fi capabil de a identifica zonele cu probleme. De asemenea, vă va da un alt stimulent pentru a intra în funcționalitatea și să încerce să remedieze situația.
Înainte de a începe, trebuie să instalați YSlow, dacă nu ați făcut acest lucru cu siguranță. YSlow - această extensie ca Mozilla Firefox, veți găsi pe această pagină:
Acum să deschidă unele site-ul. Să presupunem că Șase Revizuiri, la datele pe care le avem despre același lucru (doar du-te la acest site într-o filă nouă a browser-ului).
În partea din dreapta jos a browser-ului, sunteți un panou special, cu o pictogramă (a se vedea figura 1). Un pic mai departe, panoul, după încărcarea paginii, aproape de „YSlow“ veți vedea un număr. Acest număr - aceasta este timpul de încărcare a paginii în secunde în browser. Avem nevoie de acest număr cât mai mic posibil.
Cel mai frecvent observate „tormozilami“ sunt următoarele facilități sau operații:
După câteva minute, ne vom concentra mai mult pe acest lucru.
YSlow folosi pe deplin
În plus față de YSlow calculează timpul de pagină este încărcată, extensia de asemenea, vă oferă mai multe informații despre ceea ce trebuie să se stabilească pentru a optimiza site-ul de descărcare, astfel încât va fi capabil să cârpi găurile.
faceți clic pe fila Performanță pentru a obține astfel de informații. După site-ul de scanare, YSlow vă va oferi o evaluare de ansamblu, ceea ce va caracteriza performanța paginilor dvs..
Accesul la informație poate fi accelerată cu ajutorul CDN (Content Delivery Network). CDN este mai bine să utilizați pentru site-uri mari. Acestea sunt utilizate pentru a face schimb de informații pe mai multe servere în diferite părți ale lumii. Astfel, informațiile vor fi descărcate de pe serverul respectiv (care este cel mai apropiat de utilizator), astfel încât să nu treacă prin routerele personale. YSlow urmărește, de asemenea, cereri de CDN.
Dar oamenii de obicei nu folosesc CDN (care este destul de scump).
Clasificarea tipurilor de erori
Fă cât mai puțin posibil de cereri HTTP: HTTP cerere are loc atunci când un browser trimite o cerere la server. Același lucru poate apărea la conectarea script-uri, fișiere CSS, imagini, precum și pentru cererile asincrone de la client și de server-side (Ajax și alte tehnologii similare). Cu toate acestea, atunci când vine vorba de performanța sistemului, ar trebui să se gândească la cât de multe dintre aceste solicitări apar pe pagina ta. Ca o soluție, puteți aplica cache pentru a ajuta la mașinile client mai repede pentru a încărca script-uri, CSS și imagini.
Adăugarea de antete Expira: 80% concentrat pe descărca fișiere pagina de descărcare script-uri, fotografii, și CSS. În cele mai multe cazuri, aceste lucruri nu se schimba pe mașinile utilizatorilor. Adăugarea unui pic de cod în fișierul .htaccess, puteți cache duplicat fișierele de pe computerul local al utilizatorului (cu privire la modul de a face acest lucru mai târziu).
Componentele gzip: Aplicație de compresie gzip sau fișiere JS, imagini, documente HTML, fișiere CSS etc. Acesta permite utilizatorilor să descarce informații într-o dimensiune redusă, ceea ce crește foarte mult viteza de încărcare de pagini. În plus, acesta va economisi spațiu pe server, dar decompresia de date poate duce la inhibarea răspunsului, și depinde de browserul utilizatorului.
Localizați CSS în partea de sus a paginii, în cazul în care aveți o conexiune la fișierul CSS din partea de sus a paginii, aceasta înseamnă că acestea vor fi încărcate în primul rând, ca imagini și script-uri mai târziu.
Plasarea JS în partea de jos a paginii acum că fișierele CSS sunt încărcate în partea de sus, este timpul pentru a plasa scripturile JS chiar înainte de eticheta de închidere. Acest lucru va permite paginii dvs. să afișeze, și apoi conectați script-urile corespunzătoare.
Evitați expresiile CSS: Eu personal nu folosesc expresii CSS (în continuare se face referire la proprietăți ca și dinamice). Aceste expresii sunt conceptul de auto-programare pentru IE (cum ar fi expresiile condiționale) în CSS. Tehnologia, care este folosit de IE8, iar în toate celelalte versiuni nu vor mai fi susținute, astfel încât, în orice caz, va trebui să lega cu expresiile de scriere CSS. PHP este mai potrivit pentru astfel de scopuri, de exemplu, pentru a încărca diferite stiluri CSS, în funcție de anumite condiții, cum ar fi un număr aleatoriu, ora din zi sau browser-ul utilizatorului.
Scrie JS și CSS în fișiere separate: dacă aveți scripturi dvs. în stiluri JS și CSS într-un fișier separat, browser-ul va putea cu ușurință să le cache, astfel, ulterior, activați de încărcare a paginii mai repede.
Evitați redirecționări: nu conteaza unde faci o redirecționare la JS, HTML sau PHP. În orice caz, browser-ul dvs. va primi un titlu cu o pagină goală, pentru descărcare, care va lua timp. Deci, doar să fie atent să nu folosească redirecționări în cazul în care acesta poate fi evitată.
Ei bine ... Cred că e de ajuns. Acum să trecem la următoarea filă YSlow, înainte de a te uita la alte tehnici care va crește viteza de încărcare a paginii.
Fila Componente vă permite să stabiliți ce trebuie să facă eforturi pentru a îmbunătăți viteza de download. Aici veți găsi informații cu privire la cât de mult în greutate fiecare fișier, precum și cât timp este nevoie pentru a descărca. De asemenea, puteți vedea ce fișiere utilizați gzip, pentru a afla timpul de răspuns, și dacă pentru fișierele cache de pe calculatorul utilizatorului, iar când termină cache. Aceste informații pot fi utile pentru a vă în evaluarea problemelor site-ul dvs., veți ști că nu aveți, și ce trebuie să optimizați.
În cele din urmă, trece la fila ultima filă Statistici. Aici veți găsi informații despre toate cererile HTTP ca fișiere regulate și pentru cache. Valoarea cache Golire indică faptul că fișierele de date trebuie să fie descărcate pentru a afișa pagina. La rândul său, grunduite Cache - sunt fișiere care au fost deja stocate în memoria cache de către utilizator de browser. Acest lucru înseamnă că nu trebuie să descărcați.
2. Sprites Utilizați CSS pentru a reduce solicitările HTTP
sprite CSS - acest lucru este, probabil, cel mai important lucru pentru a veni cu omenirea, după ce Tesla a inventat electricitate ... Chiar mi-a spus. Hopa, am vrut sa spun Edison.
Ei bine, poate nu exact cel mai tare, dar cu toate acestea.
sprite CSS poate ajuta să crească în mod semnificativ viteza de încărcare de pagini, reducând numărul de cereri HTTP, care sunt formate pentru a descărca imagini.
Puteți găsi o mulțime de lecții, care afirmă că sprite CSS sunt ușor de navigat - în general, pentru utilizare în interfața cu utilizatorul.
Acum, haideți să aruncăm o scurtă privire la modul în care YouTube utilizând sprite-uri CSS. Se pare ca un spiriduș, acestea sunt:
YouTube utilizează acest fișier este destul de original. Ei au încărcat ca o clasă de fundal de sprite. Atunci când apare necesitatea în selectarea unei celule, există o selecție a poziției inițiale cu ajutorul proprietăților CSS background-position, iar apoi utilizați înălțimea și lățimea.
Să ne și vom încerca ceva de genul asta. Vom experimenta pe aceeași imagine de pe site-ul YouTube.
În exemplu, care se află mai jos, obținem sigla YouTube de pe ecran. Folosind aceeași clasă sprite, și aceeași imagine de imagine, putem crea o imagine care se va schimba atunci când mutați mouse-ul.
Astfel, prin utilizarea de această imagine, putem face toate conexiunile la o singură solicitare HTTP. Ei bine, ca efect?
Un alt avantaj al sprite CSS este că aplicarea pseudo-clasa: hover, imaginea nu va dispărea pentru câteva secunde (care merg la încărcarea unei imagini noi), așa cum se întâmplă, fără utilizarea de sprite-uri CSS.
Ar trebui remarcat, de asemenea:
4. Utilizați subdomeniile pentru descărcare în paralel
descărcarea în paralel înseamnă mai multe descărcări paralele același fișier. Mersul pe jos pe mai multe site-uri, este posibil să observați că multe dintre aceste cereri sunt trimise la static.domain.com și c1.domain.com. Acest lucru poate fi văzut în partea de jos a browser-ului.
Aceasta este o modalitate foarte bună de a crește performanța site-ului. Dacă utilizați subdomeniile, de fapt, informațiile vor fi pe același server, dar ele vor fi diferite pentru browser.
- 3 Creați un subdomeniu pe serverul dvs.
- Plasați imaginile în dosare pe diferite subdomenii
- Schimbați modul în care fișierele
5. Se adaugă Expiră antete
Unele site-uri sunt încărcate chiar și după aplicarea metodelor descrise mai sus. Dar există o serie de metode.
Un utilizator poate ajunge la site-ul dvs. și să facă toate cererea HTTP necesare pentru a afișa pagini, imagini, scripturi, etc.
Când utilizați Expiră antet, puteți să cache toate aceste elemente pe mașina utilizatorului, prin urmare, nu numai creșterea vitezei de încărcare a paginilor, și mai mult, și reducerea traficului. Expiră anteturi pot fi aplicate la toate script-urile, CSS și imagini.
Acest efect poate fi realizat cu câteva linii pe care trebuie să le adăugați la fișierul .htaccess localizat în directorul rădăcină al site-ului.
Fii atent: dacă vă va face nici o schimbare în fișierele de date (în cazul în care nu au trecut încă perioada de timp), atunci va trebui să le redenumiți (sau adăugați numele versiunii), sau în cache, acestea nu sunt actualizate.
Astăzi, am trecut prin mai multe moduri. Sper că ați remarcat pentru mai multe metode care vor utiliza în mod activ în proiectele tale! Mult noroc!
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!