Cum de a măsura Performanța site-ului web

Vorbind despre procesul de optimizare este aproape inexistentă în rândul noilor designeri web de vârstă. Chiar și mulți designeri de web care au fost în afaceri de un deceniu sau mai mult nu înțeleg pe deplin importanța optimizării site-ului.

După o perioadă prelungită de timp, un site web va începe să se încurce. Fișierele frontend pot conține blocuri exagerate de cod sau biți ascunși, ascunși. Acest lucru se întâmplă cel mai frecvent în cadrul fișierelor JavaScript sau al imaginilor. Poate fi important să creați un site plăcut pentru experiența utilizatorului, dar fără un site web optimizat, proiectarea poate să nu aibă nici măcar șansa de a încărca pe deplin utilizatorii nerăbdători.

Sfaturile de mai jos sunt pentru dezvoltatorii web începători-intermediari interesați optimizarea paginilor la maxim. Există multe tehnici disponibile și fiecare se va comporta diferit în funcție de problemele pe care le suferă site-ul dvs. Web. Încercați să schimbați câteva zone și să vedeți dacă puteți aplica aceste tehnici în propriile dvs. mărci.

Solicitări HTTP

De fiecare dată când site-ul dvs. se încarcă, trimite o solicitare HTTP către un server de la distanță. Acest tip de transfer de date este numit a protocol de rețea utilizat în mod special pentru distribuirea și stocarea fișierelor plaintext. Acestea includ adesea codul dvs. frontal de bază, cum ar fi HTML, CSS și JavaScript.

Odată ce cererea este trimisă, browserul va analiza fiecare element de pagină. În funcție de motorul de analiză, fiecare site Web se va încărca diferit, iar elementele vor apărea în ordine variabilă, pe baza vitezei de transfer. De exemplu, Internet Explorer va face paginile web diferite decât Chrome sau Safari și toate acestea rulează motoare de parsing ușor diferite decât Firefox sau Opera.

Ceea ce trebuie luat în considerare este cât timp are durata solicitării pentru fiecare fișier și dacă această tendință se menține consecvent. Luați în considerare primirea a peste 100.000 de vizitatori într-o lună. Este sarcina browserului să pună împreună fiecare element de pagină și să încarce fișiere externe în memorie.

Adesea, factorii care dețin un site web de optimizare a vitezei de referință clunky JavaScript include sau fișiere de imagine mare. Odată cu popularizarea lui Verizon FiOS, este comună viteza Internetului să atingă 600kbps și să păstreze alpinismul! Din păcate, acest lucru nu este normal și chiar și în cazul conexiunilor de mare viteză este posibil să se întâmple defecțiuni de optimizare.

Remedii pentru performanța site-ului

Nu suntem singuri în domeniul dezvoltării web și al optimizării frontend. Pentru ca munca corectă să fie finalizată, există anumite unelte necesare pentru a face față sarcinii.

Google a lansat un proiect intitulat Speed ​​Page, care a fost creat pentru a ajuta dezvoltatorii să își optimizeze site-urile web și să verifice cele mai bune niveluri de performanță. Initial, proiectul a inceput ca un add-on open-source Firebug si este acum acceptat ca o referinta terta parte pentru testarea site-ului.

O altă opțiune pentru utilizatorii Firebug este add-on-ul YSlow al Yahoo !. Scriptul analizează fiecare cerere de pagină web și sugerează cele mai frecvente moduri de îmbunătățire a performanței. Aceste sugestii se bazează pe Yahoo! Resursele pentru dezvoltatori pentru cele mai bune practici de optimizare în designul web.

Programul poate fi puțin abraziv la început deoarece conține atât de multe informații. Doar lipiți de elementele de bază și urmând o documentație simplă procesul ar trebui să fie o bucată de prăjitură.

Dezvoltatorii sunt întotdeauna interesați să sară pe un proiect pentru a distruge codul, astfel încât acesta ar trebui să fie un brainer. Pentru un pic de ajutor, puteți verifica ghidul de ajutor YSlow.

Tehnici de viteză

Există câteva trucuri simple pe care le puteți aplica pe site-ul dvs. imediat pentru a accelera performanța. Primul și cel mai simplu mod este să vă separați fișierele CSS și JavaScript.

Codul CSS aparține antetului documentului dvs. Acest lucru este util deoarece proprietățile CSS trebuie să fie analizate în timp ce DOM se încarcă. Odată ce un browser web recunoaște stilurile dvs. CSS în titlu, va aștepta afișarea completă a paginii Web până când toate stilurile au fost încărcate. De asemenea, orice imagine utilizată pentru icoane sau desene de fundal va lua timp pentru încărcare și ar trebui să o facă mai întâi.

Pe de altă parte, mutarea tuturor fișierelor JavaScript în subsolul site-ului dvs. poate rezolva în mod drastic timpul de suspendare. Multe browsere blochează descărcări paralele, ceea ce înseamnă că înainte de redarea paginii browser-ul web al unui utilizator se poate opri timp de 4 secunde pentru a încărca complet JS inclus.

Acest lucru nu este întotdeauna posibil și nu este întotdeauna necesar pentru fiecare site web. Dacă paginile dvs. încarcă același lucru cu timpi de răspuns egali, indiferent de includerea destinațiilor de plasare a fișierelor, atunci nu vă deranjați să manevrați niciun joc.

Conținutul dinamic nu poate fi încărcat până când DOM-ul nu este completat, dar uneori acest lucru va duce la erori. Testarea CSS / JS include pentru a vedea dacă puteți reveni la orice beneficii de optimizare.

Comprimarea mărimii fișierului

Comprimarea fișierelor mari a devenit foarte populară. Acum poate fi utilizat chiar și în paginile web pentru a reduce timpul de încărcare și pentru a menține dimensiunile fișierelor foarte scăzute. O mare parte a muncii a fost deja făcută și cu unelte precum fișierele miniaturate YUI Compressor sunt un proces fără energie.

Există o mulțime de alte servicii gratuite pe web pentru a ajuta la această sarcină, de asemenea. Reduceți CSS are o întreagă interfață de comprimare CSS pentru a face procesul simplu. Același site web are, de asemenea, un compresor personalizat JavaScript care execută o mare parte din aceleași sarcini, dar păstrează scripting-ul organizat.

De asemenea, puteți lua în considerare comprimarea celor mai mari imagini din paginile dvs. Web. Acest lucru se poate face cu orice software de editare a fotografiilor, cum ar fi Adobe Photoshop sau GIMP, prin simpla readere a imaginii la o rezoluție mai mică. Imaginile PNG vor exporta în medie mai puține formate decât jpg sau TIFF. Există, de asemenea, o mulțime de instrumente online, cum ar fi Image Optimizer, pentru a ajuta la procesul de compresie.

Sursa de verificare și de valori

Aceasta este o rutină care nu se practică adesea de dezvoltatorii web care pot oferi rezultate uimitoare. Analizând toate elementele de pagină din site-ul dvs. puteți vedea care au fost cele mai lungi de încărcat și ordinea în care a fost încărcată fiecare piesă.

Cel mai popular instrument Mozilla Firebug este un plug-in pentru browserul Firefox. Această aplicație instalează o mică bara de instrumente în partea de jos a browserului dvs. pentru a verifica timpii de răspuns, informațiile antetului, elementele de pagină și scripturile pentru fiecare site web. Scriptul a fost, de asemenea, portat în Firebug Lite ca extensie pentru Google Chrome.

Apache cu mod_pagespeed

Nu toate setările vor executa un server web Apache, deci această opțiune nu este întotdeauna disponibilă. Acest modul este direct legat de Monitorul Google Speed ​​Page mentionat mai devreme. De fapt, codul pentru mod_pagespeed a fost inițial bazat pe multe biblioteci din bazele de date Google Code.

Apache permite administratorilor de servere să instaleze pachete mici numite module pentru a spori performanța serverelor lor. mod_pagespeed este unul dintre aceste module care efectuează automat tehnici de optimizare în timpul rulării. Există prea multe procese pentru a fi listate, deși unele dintre aplicațiile principale includ comprimarea HTML / CSS / JS pe copertă și cache-ul de imagine.

Proiectul este găzduit în prezent la Google și este deschis dezvoltatorilor. Google a colaborat cu GoDaddy pentru a implementa mod_pagespeed în toate conturile de găzduire care rulează serverul HTTP Apache.

Deși multe alte opțiuni sunt disponibile, munca de dezvoltare frontend este una dintre cele mai intense, în special în ceea ce privește optimizarea pentru paginile web importante. Optimizarea pentru anteturile site-urilor și imaginile mari poate fi o sarcină extrem de obositoare și totuși satisfăcătoare.

Luați în considerare unele dintre tehnicile introduse în acest articol și vedeți cum acestea ar putea fi aplicate în proiectele web. Deseori, dezvoltatorii nu au suficient timp pentru a-și aprecia munca și pentru a curăța biții vechi de cod. Dacă sunteți încă îndemânați pentru câteva sfaturi, ar trebui să citiți ghidul nostru optim de optimizare web pentru indicatorii privind întreținerea frontendului și îmbunătățirea performanțelor convenabile.