Analiza performanței cu WebPageTest

Un site web rapid este acum o necesitate absolută. Într-o era mobilă și, cu consumatorii internați, un site web lent ar putea fi diferența între afacerea dvs. prosperă sau eșuată. Deci, cum vă testați exact site-ul pentru viteza și cum puteți identifica orice probleme care l-ar putea încetini?

În acest articol, ne vom uita la un instrument popular numit WebPageTest. Acest instrument de măsurare oferă o serie de statistici și date detaliate care pot fi utilizate pentru a identifica zonele site-ului dvs. care ar putea fi îmbunătățite din perspectiva performanței. Volumul mare de informații furnizate poate fi însă puțin copleșitor. Nu vă faceți griji... vom detalia modul de utilizare a WebPageTest pas cu pas, astfel încât să devină clar cum să profitați la maximum de acest instrument gratuit.

Noțiuni introductive cu WebPageTest

În primul rând, mergeți la webpagetest.org pentru a începe. Aspectul este foarte clar și veți vedea imediat o casetă în care puteți introduce adresa URL a site-ului dvs.

Aveți de ales de la început... utilizați fila „Testare avansată” implicită sau mergeți la fila „Testare simplă”? Ei bine, funcția Testare simplă este excelentă pentru o privire de ansamblu rapidă a site-ului dvs., dar pentru acest articol ne vom uita la fila Testare avansată.

Setări avansate de testare

Derulați în jos în pagină și veți vedea un meniu drop-down Locație de testare. Acest lucru se explică de la sine. Locația pe care doriți să o alegeți este cea mai apropiată de locul în care se află publicul țintă. Dacă au sediul în Australia, atunci testarea din Londra, Marea Britanie nu are prea mult sens. Scopul acestui exercițiu este de a afla cum funcționează site-ul nostru pentru utilizatorii noștri.

Există o mulțime de locații, dar unele locații oferă mai multe opțiuni de testare decât altele sub forma browserului utilizat pentru testare. Din nou, doriți să încercați și să selectați unul care ar putea fi folosit de publicul țintă. Pentru a vedea unele statistici din ce browsere este vizitat site-ul dvs., puteți utiliza instrumente precum Google Analytics.

Alte setări foarte interesante pe care le puteți selecta sunt lucruri precum conexiunea. Deci, așa ar fi modul în care dispozitivul utilizatorului final este conectat la internet. Faceți clic pe meniul derulant de lângă „Conexiune” și veți vedea opțiuni care includ o conexiune 3G (lentă sau rapidă). Este foarte frumos, deoarece vă oferă o senzație reală a modului în care publicul dvs. va experimenta site-ul dvs.

O altă setare care este destul de utilă este opțiunea „Repeat View”. Această opțiune, atunci când este activată, înseamnă că site-ul va fi re-testat după prima încărcare, ceea ce vă ajută să arătați impactul oricărei memorări în cache pe care le-ați activat pe site-ul dvs.

Există o serie de opțiuni avansate pe care ați putea dori să le explorați. Pentru cei mai mulți dintre noi, cu excepția cazului în care vă aprofundați în testarea site-ului dvs., setările prezentate mai sus vor fi suficiente. Pentru cei care doresc să afle mai multe despre setările reale disponibile, consultați documentele WebPageTest.

Notați oricare dintre setările pe care le-ați schimbat. Este important ca în timpul fazei de testare și apoi de optimizare să continuați să retestați folosind aceleași setări, altfel veți denatura rezultatele pe care le obțineți. Odată ce sunteți gata, apăsați butonul „Start Test” și apoi stați pe spate și așteptați de la rezultate (în mod normal durează aproximativ un minut).

Primul ecran

În acest exemplu, am folosit site-ul web Apple (apple.com) și l-am testat printr-o conexiune 3G rapidă din Londra, Marea Britanie. Rezultatele inițiale sunt prezentate mai jos:

Aruncați o privire în dreapta sus și veți vedea 7 casete colorate care oferă o imagine de ansamblu inițială cu privire la modul în care a funcționat pagina. Să examinăm care sunt fiecare dintre acestea.

Caseta 1 – Scor de securitate

Aceasta este o caracteristică recentă oferită de WebPageTest, care este de fapt o integrare cu Snyk și oferă o perspectivă asupra securității unui site web. Dacă dați clic pe caseta colorată, veți fi direcționat către site-ul web synk.io care conține o analiză detaliată a site-ului în cauză din punct de vedere al securității. De remarcat în special sunt anteturile de securitate HTTP care sunt schimbate între un client și un server pentru a defini detaliile de securitate ale comunicării. Cele mai importante sunt Strict-Transport-Security, Content-Security-Policy, X-Frame-Options.

Găzduiește-ți site-ul web cu Pressidium

GARANTIE 60 DE ZILE BANI RAPIS

VEZI PLANUL NOSTRU

Dacă de pe site-ul dvs. lipsește vreun antet de securitate vital, veți fi informat despre acest lucru pe site-ul web Synk.

Caseta 2 – Ora primului octet

A doua casetă furnizează timpul primului octet (altfel cunoscut sub numele de Time to First Byte sau TTFB). Acesta este timpul necesar până când serverul răspunde cu primul octet de date înapoi la cererea clientului. În mod ideal, ați urmări o cifră sub 300 ms. Această valoare este mai mult legată de server și este irelevantă pentru timpul consumat pentru ca fișierele site-ului dvs. să fie redate. Poate fi afectat de un server DNS lent, de exemplu, sau de stocarea în cache insuficientă.

În acest moment, este important să rețineți că, dacă ați activat memoria cache, ar trebui să rulați din nou testul paginii web, astfel încât conținutul stocat în cache să fie măsurat. De fapt, se recomandă să rulați testul de cel puțin 3 ori pentru a vă asigura că rezultatele reflectă pe deplin conținutul stocat în cache de pe site-ul dvs.

Timpul primului octet este suma a trei valori: timpul necesar pentru ca cererea HTTP să fie trimisă, timpul de procesare de către server și timpul necesar serverului pentru a trimite primul octet înapoi către client. Puteți mai multe detalii despre aceasta făcând clic pe caseta:

După cum putem vedea, site-ul Apple nu s-a descurcat prea bine în această parte specială a testului.

Odată ce această conexiune a fost realizată, resursele pot începe să fie livrate. Cele mai comune motive pentru un TTFB lent sunt problemele de rețea, configurația serverului web, posibilele I/O pe disc de server și problemele RAM.

Caseta 3 – Păstrați-vă în viață

Caseta „Keep-alive Enabled” arată starea antetului HTTP Keep-alive. Când acest antet este activat, datele vor fi transferate folosind aceeași conexiune, altfel trebuie creată o nouă conexiune pentru fiecare fișier care trebuie transferat. Keep-alive este activat implicit în majoritatea cazurilor și, în general, este o setare pe partea serverului. dacă trebuie să îl activați singur, puteți edita fișierul .htaccess și puteți introduce codul de mai jos

 <ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

Caseta 4 – Transferul compresei

Valoarea Compress Transfer reprezintă starea compresiei Gzip. Aceasta este o tehnică folosită pentru a comprima și mai târziu a decomprima fișierele dvs. statice în timp real. În acest fel, timpul de transfer este redus deoarece dimensiunea fișierului este redusă. Dacă furnizorul dvs. de server nu aplică această tehnologie în mod implicit, o puteți face singur, specificând regula corespunzătoare pentru fiecare tip de fișier, astfel:

 AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html

Din nou, făcând clic pe caseta colorată corespunzătoare, veți ajunge la o secțiune de prezentare detaliată, astfel încât să puteți vedea ce se întâmplă exact pe site-ul dvs.

Caseta 5 – Comprimați imagini

Caseta Comprimați imagini este destul de explicită. Faceți clic pe el și vă va arăta ce imagini ar putea fi mai bine comprimate.

În acest caz, WebPageTest a identificat trei imagini despre care crede că ar putea fi comprimate cu succes, economisind în continuare 54 kb în date care nu trebuie transferate. S-ar putea să nu sune prea mult, dar pe un mobil fiecare kb pe care îl puteți salva face diferența.

Imaginile sunt aspectul care consumă cel mai mult spațiu al conținutului dvs. static. Comprimarea lor este o necesitate absolută. Analiza WebPageTest facilitează identificarea imaginilor care ar putea încetini site-ul dvs. și, prin urmare, necesită atenție.

Caseta 6 – Memorează conținut static

Dacă apăsați caseta „Memorie cache conținut static”, veți fi direcționat către o secțiune detaliată numită „Exploare stocarea în cache a activelor statice în browser”.

Memorarea în cache a browserului poate fi valorificată de dezvoltator sau administrator, indicând browserului web când să memoreze în cache o resursă, când nu și pentru cât timp, cu utilizarea antetelor HTTP corecte. Puteți găsi câteva informații mai detaliate despre memorarea în cache a browserului în articolul nostru „Cum funcționează memoria cache a browserului?”. De asemenea, puteți afla cum implementează Pressidium memorarea în cache a browserului aici.

Caseta 7 – Utilizarea eficientă a CDN

Un CDN (sau Content Delivery Network) merită folosit dacă aveți o bază de utilizatori distribuită geografic. Dacă, de exemplu, toți clienții tăi au sediul în Londra și serverul tău gazdă este, de asemenea, localizat în Londra, atunci probabil că nu are prea mult rost să folosești un CDN. Dacă totuși, utilizatorii dvs. sunt mai diverși din punct de vedere geografic, atunci un CDN poate face o diferență enormă în performanța site-ului dvs. pentru acești utilizatori, plasând o copie a site-ului dvs. pe un server situat mai aproape de ei.

Dacă utilizați un CDN, WebPageTest va analiza cât de eficient funcționează.

Rezultate de performanță

Să continuăm și să ne uităm la câteva date care încep cu Rezultatele de performanță, pe care le veți vedea în partea de sus a filei Rezumat.

În rezultatele de performanță putem vedea cele mai importante prezentări de ansamblu pentru lucruri precum First Byte Time, Speed ​​Index care este timpul mediu la care sunt afișate părțile vizibile ale paginii, Cumulative Layout Shift (CLS) pentru măsurarea stabilității vizuale, timpul consumat până când documentul s-a încărcat complet și mai mult.

Vedere Cascada

Chiar sub Rezultatele de performanță putem vedea vizualizarea cascadei pentru fiecare dintre cursele dvs. Dacă faceți clic pe oricare dintre ele, veți fi direcționat către pagina care conține detalii complete ale cursei în format cascadă.

Vi se vor furniza toate statisticile de performanță pentru fiecare activ individual al site-ului dvs. Acestea sunt colorate diferit, ceea ce face mai ușor să distingeți între ele. Dacă faceți clic pe oricare dintre acestea, se deschide o fereastră pop-up care oferă și mai multe detalii.

Vizualizarea cascadă este o reprezentare vizuală a paginii și a modului în care se încarcă componentele de acoperire. Acest lucru ne permite să identificăm cu ușurință orice componente care ar putea încetini lucrurile. Este foarte util să vedem unde sunt blocajele și înseamnă că putem rezolva problemele cu o precizie precisă, mai degrabă decât să trebuiască să ghicim.

Vizualizare conexiune

Placa Connection View este, de asemenea, o caracteristică foarte utilă, deoarece vă permite să identificați foarte ușor problemele de performanță web prin rezumarea vizuală a măsurilor pentru conexiunile dintre browser și server.

Puteți vedea starea conexiunii direct de la DNS, conexiunea inițială, negocierea SSL până la lucruri precum resursele video. Sub acesta, există și un grafic care ilustrează utilizarea CPU pe dispozitivul care încarcă site-ul web. Există, de asemenea, un indicator de lățime de bandă care arată nivelurile utilizate în timpul redării datelor.

Cereri Detalii

În cele din urmă, sub vizualizarea conexiune, vi se oferă încă două panouri de analiză – Detalii de solicitare și Antete de solicitare.

Tabloul Detalii cerere este foarte util și listează toate resursele solicitate împreună cu datele relevante pentru acea solicitare, cum ar fi tipul de conținut, ora de începere a solicitării, numărul de octeți descărcați și multe altele. Acest tabel este de fapt sortabil... doar faceți clic pe anteturile coloanei pentru a ordona după acea coloană.

Tabloul Antetelor cererii oferă (da, ați ghicit) lista resurselor de solicitare împreună cu informațiile din antet. Click pe fiecare pentru detalii complete.

Concluzie

Dacă aveți nevoie de o analiză aprofundată a activității site-ului dvs., WebPageTest este un instrument fantastic de utilizat. Chiar dacă nu vă aprofundați informațiile pe care le furnizează, vă puteți da o idee rapidă dacă site-ul dvs. funcționează bine sau nu și dacă este necesar să vă uitați mai atent la modul în care funcționează. Și cel mai bine, este gratuit!