Având un site web rapid este un aspect foarte important dacă doriți să rămâneți în viață în epoca modernă de web design. Pentru a fi sincer, pentru site-urile lente, pur și simplu nu mai este mai mult spațiu.
Care este timpul de încărcare al site-ului?
Timpul necesar pentru a descărca un site web depinde în mod direct de cererea făcută de server pentru a descărca site-ul web. Cele mai multe cereri HTTP sunt făcute pe server, iar cu cât elementele iau mai mult timp, cu atât site-ul va funcționa mai lent.
Exemple de solicitări HTTP:
- încărcarea foilor de stil CSS;
- descărcarea de scripturi;
- încărcarea imaginilor;
- Descărcări HTML.
Un alt factor care joacă un rol în momentul încărcării site-ului web este dimensiunea fișierelor și a imaginilor individuale. Imaginile mari cu rezoluție înaltă pot dura 10 ori mai mult decât imaginile obișnuite, iar fișierele inutile mari pot încetini semnificativ redarea paginii.
Scopul creării unui site rapid este să-l eficientizeze. Putem face acest lucru prin efectuarea unor modificări ale codului, imaginilor și designului site-ului nostru.
Urmărirea vitezei paginii
Putem urmări estimările de viteză ale paginilor noastre prin intermediul funcției Speed Page din Google Insights sau YSlow de la Yahoo. De asemenea, Google are un plug-in Page Speed care funcționează excelent cu Firefox dacă aveți instalat Firebug.
Să luăm un site web aflat în construcție și să îl folosim ca exemplu pentru această lecție. Estimarea inițială a vitezei paginilor sale pe Google a fost de 48 din 100 de puncte. Se execută pe platforma OS Commerce.
Pasul 1: comprimarea imaginilor
Pasul unu este comprimarea tuturor imaginilor pentru cartografiere web. Putem face acest lucru cu un compresor de imagine, care este implicit integrat în plug-in-ul Page Speed Google. Salvați versiunea comprimată a imaginilor în directorul local de pe computer și reîncărcați imaginile în imaginile necomprimate.
Scor actualizat: 61 din 100
Pasul 2: Scalați imaginile
După comprimarea imaginilor, trebuie să modificăm imaginile, astfel încât acestea să fie scalate corespunzător pentru site. Această acțiune evită întârzierea pe care serverul o cere pentru redimensionarea imaginilor. Puteți să scalați imaginile din Photoshop, adaptându-le la aceeași dimensiune a pixelilor ca și codul dvs. HTML.
Scor actualizat: 72 din 100
Pasul 3: Utilizarea cache-ului pentru browser
Cache-ul stochează magazinele stocate în cache a resurselor statice. Acest lucru mărește considerabil viteza paginii și reduce decalajul serverului. Pentru a activa cache-ul, va trebui să adăugați următorul cod în fișierul .htaccess:
Scor actualizat: 78 din 100
Pasul 4: Combinați imaginile în Sprite CSS
Imaginile pot fi combinate în spații de tip CSS pentru a reduce numărul de imagini descărcate pe această pagină. Sprite-urile CSS sunt o imagine mare care constă într-o serie de mici imagini. Combinarea a 5 imagini într-un singur CSS sprite este o modalitate rapidă de a grăbi un site Web, permițând browserului să încarce o imagine în loc de 5.
Cea mai ușoară cale de a crea sprite de CSS este să utilizați programul SpriteMe
Asigurați-vă că ați realizat modificările corecte CSS după crearea imaginilor sprite. În plus, acordați atenție instrucțiunilor de instalare de pe site. Acest program este utilizat atunci când accesați marcajele prin intermediul browserului dvs.
Scor actualizat: 82 din 100
Clasament actualizat: 86 din 100
Scor actualizat: 90 din 100
De asemenea, puteți lua în considerare descărcarea resurselor statice de pe site-ul dvs. către CDN sau "Rețeaua de livrare a conținutului". CDN este un alt mod de a reduce drastic serverul de backlog-uri, păstrând resurse statice pe rețelele de server de încărcare rapidă. Utilizatorii cunoscuți de CDN sunt ESPN și NBA.com.
Dezvoltarea site-urilor mobile
Desigur, acestea nu sunt toate opțiunile posibile, dar sperăm că aceste sfaturi vă vor ajuta să optimizați viteza descărcării site-ului dvs.!
ATENȚIE! Utilizați un browser Internet Explorer învechit
Acest site este construit pe tehnologii avansate și moderne și nu suportă versiunile 6 și 7 ale Internet Explorer.
