[JS] Laadtijd van een website meten inclusief images etc

[xilent_xage]

Hoi,

Ik wil binnenkort eens een CDN gaan gebruiken voor mijn website. Omdat dat niet gratis is, wil ik wel graag weten of een CDN meerwaarde heeft voor mijn bezoekers. Ook zou ik op termijn graag de prestaties van verschillende CDNs kunnen meten, zodat ik in zee kan gaan met de aanbieder die in mijn geval het beste werkt (veel bezoekers uit het Midden-Oosten, dus enigszins afwijkend van de gemiddelde bezoekers waardoor ik niet teveel op de bestaande reviews wil vertrouwen).

In eerste instantie heb ik mijn stylesheet-parser ingesteld dat ie de URLs van achtergrondplaatjes (veelal sprites) uit de CSS aanpast naar de CNAME van de CDN. Contentplaatjes blijf ik voorlopig nog even gewoon vanaf mn eigen server serveren, omdat die images worden geresized met GET-parameters die de meeste CDNs niet ondersteunen.

Nu wil ik dus gaan meten of mijn bezoekers iets aan deze wijziging hebben. Hiertoe wil ik dus de laadtijd van mn website meten, inclusief het laden van afbeeldingen (ook/juist uit de CSS!). Wat ik eigenlijk zoek is gewoon de totale laadtijd van de website inclusief alle elementen erop, exlcusief ajax-calls.

Omdat ik nu al gebruik maak van JS voor het doorgeven van stats zou het makkelijk en mooi zijn om daar deze meting aan toe te voegen. Ik hinkte eerst op de gedachte om bij wijze van steekproef de laatste img te pakken, iets als:

JavaScript:

var imgs = document.getElementsByTagName("IMG");
addEvent(imgs[imgs.length], "load", function(e){ stopStopwatch(); });

...maar daarmee pak je de content images, terwijl ik juist de images uit de css moet hebben. Daarnaast betwijfel ik of deze steekproef betrouwbaar/zinnig is.

Iemand een beter idee?

[Flowmo]

Nadeel van Javascript metingen is dat deze pas gaan meten zodra het stukje javascript in de broncode is geladen. De tijd van een request tot een response van de server kan je niet met JS meten.

Er is in javascript een event die je kan gebruiken voor metingen:
window.onload is het event dat wordt afgevuurd zodra de volledige pagina's met css en afbeeldingen is geladen.

Maak je gebruik van jQuery? Dan kan je ook $(document).ready() proberen, dat event wordt afgevuurd zodra puur alleen de html van de pagina (hence, het document) is geladen. $(document).ready() vuurt eerder af dan window.onload, je zou dus van alletwee gebruik kunnen maken om te meten wat het verschil in laadtijd is tussen .ready() en .onload.

[xilent_xage]

Flowmo schreef op zondag 18 september 2011 @ 10:18:
Nadeel van Javascript metingen is dat deze pas gaan meten zodra het stukje javascript in de broncode is geladen. De tijd van een request tot een response van de server kan je niet met JS meten.

Geen probleem. Dat meet ik al op de server, en is in dit geval ook niet interessant.

Er is in javascript een event die je kan gebruiken voor metingen:
window.onload is het event dat wordt afgevuurd zodra de volledige pagina's met css en afbeeldingen is geladen.

Dat dacht ik eerst ook. Maar volgens mij klopt dit niet. In mijn browser (FF6) wordt onload gefired voordat alle plaatjes geladen zijn.

Maak je gebruik van jQuery?

nee

[Joolee]

Is het niet makkelijker om gewoon firebug of webslow te gebruiken voor deze metingen?

[xilent_xage]

Joolee schreef op zondag 18 september 2011 @ 10:37:
Is het niet makkelijker om gewoon firebug of webslow te gebruiken voor deze metingen?

dat kan niet - tenzij je bedoelt dat ik aan de bezoekers van mijn websute vraag deze plugins te installeren en de resultaten door te mailen oid..

[Beatboxx]

Google Pagespeed
maar beter is:

pingdom

[xilent_xage]

Beatboxx schreef op zondag 18 september 2011 @ 10:54:
Google Pagespeed
maar beter is:

pingdom

ik snap niet wat ik daarmee moet?

nogmaals: het gaat me niet om de laadtijd van mijn website vanaf MIJN computer, of een computer ergens in een datacenter in de US. Het gaat me om de laadtijd van mijn website voor mijn bezoekers. Ik wil weten of het geografisch spreiden van de distributie van mijn images merkbaar is voor mijn bezoekers.

[Beatboxx]

Er zijn wel mogelijkheden om dit te testen. Je kan helemaal aan het begin van je code een timer starten, en als alles is geladen de timer stoppen en de tijd samen met ip(geografische locatie) in een database posten. Je moet echter veel resultaten per locatie hebben wil je er iets mee kunnen. Ik heb nu bijvoorbeeld bijna overal een ping van ±15 a 20 ms, maar er zijn ook mensen die met een wireless laptop op 40 m van de router 300ms pingen. Hoe wil je dat oplossen?

EDIT: Je kan natuurlijk wel vergelijken. Maar resultaten zullen nooit 100% accuraat zijn door bovenstaand verschijnsel.

[ Voor 11% gewijzigd door Beatboxx op 18-09-2011 11:03 ]

[xilent_xage]

Beatboxx schreef op zondag 18 september 2011 @ 11:03:
Er zijn wel mogelijkheden om dit te testen. Je kan helemaal aan het begin van je code een timer starten, en als alles is geladen de timer stoppen en de tijd samen met ip(geografische locatie) in een database posten. Je moet echter veel resultaten per locatie hebben wil je er iets mee kunnen. Ik heb nu bijvoorbeeld bijna overal een ping van ±15 a 20 ms, maar er zijn ook mensen die met een wireless laptop op 40 m van de router 300ms pingen. Hoe wil je dat oplossen?

EDIT: Je kan natuurlijk wel vergelijken. Maar resultaten zullen nooit 100% accuraat zijn door bovenstaand verschijnsel.

Precies, dat is waar ik naartoe wil. Maar nu is mijn vraag: Hoe kan ik i n javascript het moment bepalen waarop de hele pagina inclusief css-images etc is geladen? Ik heb de indruk dat document.onload al wordt gefired voordat al mijn background-images zijn geladen.

[MueR]

Volgens de documentatie zou een onload event echt pas gerund mogen worden als de hele DOM gebouwd is en de images geladen zijn. Heb je ergens goed kunnen zien dat het niet zo is, of is het een gevoel?

[Gomez12]

Gebruik je wel het originele onload event?
En niet een "snellere" vervanger vanuit een framework.

Die snellere vervangers die doen meestal onready (en dat is idd voor plaatjes)

[xilent_xage]

MueR schreef op zondag 18 september 2011 @ 11:35:
Volgens de documentatie zou een onload event echt pas gerund mogen worden als de hele DOM gebouwd is en de images geladen zijn. Heb je ergens goed kunnen zien dat het niet zo is, of is het een gevoel?

Ik heb het getest in mijn eigen browser (FF6). Echter nu ik al mijn plugins uitschakel gaat het wel goed - zal dus wel een of andere development-plugin dwars hebben gelegen. Dat betekent dat ik het tijdsverschil tussen het verzenden van de html (serverside) en de onload (waarna een ajaxcall met stats teruggaat naar de server) als indicator kan aanhouden.

De site heeft >2000 unieke bezoekers per dag, dus met een weekje data verzamelen moet er wel het een en ander te concluderen zijn.

Bedankt allen!