Extinderea PageWebTest cu valori personalizate

Extinderea PageWebTest cu valori personalizate


Există o mulțime de lucruri care îmi plac foarte mult la WebPageTest, iar valorile personalizate trebuie să fie chiar acolo sus, în partea de sus a listei.

Nu vorbesc despre API-ul User Timing (care este denumit frecvent valori personalizate), deși WebPageTest acceptă și toate acestea, ci valori personalizate pe care le expuneți în datele de testare, spunând WebPageTest să ruleze JavaScript arbitrare după încărcarea paginii .

De exemplu, când am vrut să testez noua versiune a metricii Cumulative Layout Shift înainte de a o implementa, valorile personalizate au oferit o modalitate relativ redusă de testare. Am reușit să colectez o nouă valoare (numită newCLS) și să-i spun lui WebPageTest ce JavaScript să ruleze pentru a returna valoarea.

Această valoare personalizată este introdusă în zona de text din fila Avansat> Personalizat dacă efectuați testări manuale sau adăugată la apelul API folosind parametrul personalizat.

După executarea testului, agentul de testare execută acel bit de JavaScript și preia valoarea returnată, stocând-o ca o nouă valoare CLS. Valoarea este apoi expusă în datele JSON, precum și în secțiunea Valori personalizate din pagina cu rezultatele testului din interfața de utilizare.

Valorile personalizate sunt o modalitate excelentă de a juca cu API-uri experimentale de genul acesta și acesta este un motiv destul de obișnuit pentru care ajung la ele. Dar sunt, de asemenea, foarte utile pentru extinderea în mod implicit a rapoartelor WebPageTest.

De exemplu, executăm câteva valori personalizate de fiecare dată când se execută un test pe WebPageTest pentru a expune lucruri precum adâncimea culorii, dpi, un obiect JSON al tuturor imaginilor de pe o pagină și rezoluția ecranului.

Arhiva HTTP folosește, de asemenea, o mulțime de valori personalizate pentru a colecta o varietate de informații interesante pentru rapoartele lor, precum și pentru Almanahul web anual. Ca și acesta, pentru a calcula dimensiunea octeților tuturor CSS-urilor în linie:

[inline-css]
returnează Array.from (document.querySelectorAll („stil”)). reduce (
(total, stil) => (total + = style.innerHTML.length), 0
);
Sau iată unul pe care l-ați putea rula care returnează un obiect JSON din toate imaginile care au încărcare = leneș aplicat, dar care se află în fereastra inițială (ceea ce le-ar putea determina să ajungă puțin mai târziu decât ideal).

Sau vă puteți ramifica în valori care se ocupă de alte aspecte ale calității site-ului, cum ar fi accesibilitatea. Iată o valoare personalizată care contorizează toate imaginile de pe o pagină care nu au aplicat un atribut alt:

return document.querySelectorAll (‘img: not ([alt])’). length
Nu numai că aveți acces la DOM-ul paginii, dar aveți, de asemenea, acces la toate detaliile de răspuns brute și chiar la corpurile de răspuns care utilizează substituirea șirului ($ WPT_REQUESTS pentru a accesa o serie de toate datele cererii, cu excepția corpurilor de răspuns și $ WPT_BODIES pentru a accesa aceeași matrice, dar cu toate corpurile de răspuns incluse, de asemenea).

Am mai scris despre asta pe propriul meu site, dar acest lucru este extraordinar, deoarece vă permite să mergeți și mai adânc cu valorile personalizate. De exemplu, iată unul care analizează corpurile de răspuns pentru toate resursele CSS pentru a vedea dacă vreuna dintre ele include foi de stil care utilizează @import, care poate fi un succes masiv în valorile inițiale de vopsire:

Am început să colectăm câteva rețete diferite de valori personalizate în documentația noastră pentru a vă ajuta să începeți. Îi vom adăuga în continuare, dar ne-ar plăcea să aflăm de la voi toți. Dacă aveți o utilizare interesantă pentru valorile personalizate, anunțați-ne, astfel încât să putem contribui la partajarea cu comunitatea și să ajutăm oamenii să profite la maximum de testele lor WebPageTest.

Tim Kadlec este un inginer de performanță la Catchpoint, consultant de performanță web și trainer axat pe construirea unui web pe care toată lumea îl poate folosi. El este autorul Imagini de înaltă performanță (O’Reilly, 2016) și Implementing Responsive Design: Building sites for an anywhere, anywhere web (New Riders, 2012).

Sursa: https://blog.webpagetest.org

Despre admin

Strateg de vânzări dinamic, bazat pe rezultate, cu un record de peste 15 ani de realizări și succes demonstrat, determinând o creștere a veniturilor de milioane de euro, oferind în același timp un leadership vizionar vizual pe piețe extrem de competitive.