About this page

This page shows the relationship between script position and site speed. You can see and check the timing of DOM ready and various events and status of the objects such as stylesheets, javascripts and images on the Object Event Timeline.

You can give this page some queries to verify some different scenarios changing the position and the delay time for the 5 external resources as follows:

Resource sym pos wait [ms]
style.css style head, body 500
jquery.js jquery head, body 1000
script.js script head, body 500
html.png html body 1000
watch.png watch body 1000
Format of queries
?[pos=sym:wait[,option…][;…]][&…]
pos
head, body
sym
style, jquery, script, html, watch

By sorting a set of symbols, you can arbitrarily change the order of each resource (but the html and the watch are fixed in this order). The style is the actual stylesheet of this page, and the script is the actual javascript (independent from the jquery) to highlight the sample HTML.

wait
integer in milliseconds
option
async, defer (script only)