Runs a series of tests to discover which approaches to prefetching resources work in a browser.
git clone https://github.com/gitgrimbo/resource-prefetch-tests.git
First, start the server.
node server
Second, point your browser at http://localhost:3002.
Third, click the Start button. The tests will run, and the results will be
displayed in the browser (as each individual test completes) and saved to disk
(when all the tests are complete, to the ./_sessions folder).
What do the results look like?
Or clone the repo and take a look at ./samples/results.html.
Also see ./samples/session.json.
By prefetching resources we hope to speed up subsequent user interactions with our site.
If we can prefetch required resources into the browser's cache before they are needed, then fetching those resources when they are needed should be much faster, as the browser has them in its cache.
The tests are built up from combining the following dimensions:
- prefetch approach
- resource type
- resource size
- same-domain resource/cross-domain resource
- CORS HTTP headers/no CORS HTTP headers
These are the implementations of prefetch that are tested.
<link rel="prefetch" href="url">- Mozilla Developer Network; Link prefetching.<link rel="prefetch" href="url" crossorigin="anonymous">- Mozilla Developer Network; <link crossorigin>.new Image().src = url;- techrepublic.com; Preloading and the JavaScript Image() object.<object data="url">- Mozilla Developer Network; object element.XMLHttpRequest- Mozilla Developer Network; XMLHttpRequest.XDomainRequest- Mozilla Developer Network; XDomainRequest (IE9 only feature).
These are the resource types that are tested. Some prefetch implementations work for some resources types but not others.
- JPG
- JS
- CSS
- WOFF
There are 'large', 'medium' and 'small' versions of JPG, CSS and JS.
The test server also deliberately throttles the bandwidth available to the test
resources. This is because some browsers reject (do not download and/or do
not cache) resources once they realise the resource is not the expected
content type. E.g. Firefox 49 and IE 11 will reject (not cache) non-image
resources prefetched using the new Image().src = url approach, but Chrome 53
caches these resources successfully.
Having large, medium and small resources, plus the bandwidth throttling, facilitates exposing this browser behaviour.
Each resource+approach combination is also tested with CORS and non-CORS requests.
A request with the useCors=true query parameter will instruct the test server
to add the CORS HTTP response headers.
IE11
<link rel="prefetch">. IE11 supports up to ten (10) prefetch requests. Additional requests are ignored. Prerender and prefetch support.
IE9
- XHR differences can be seen based on IE security zones. E.g. out-of-the-box IE9 may have "Access data sources across domains" disabled, but this setting may be enabled in Sauce Labs. This can be the difference between the XHR prefetch results passing or failing. See https://www.webdavsystem.com/ajax/programming/cross_origin_requests.
Edge
<link rel="prefetch">. Microsoft Edge supports up to ten (10) prefetch requests. Additional requests are ignored. Prerender and prefetch support:
Uses browserify and
Babel to build the dist.js file for the client,
exporting a single module named ResourcePrefetchTests. Running:
npm run build
will trigger:
browserify -r ./public/entry:ResourcePrefetchTests -d -o public/dist.js
Babel is used for ES2015/ES2016/ES2017 features, such as async/await.
Uses browserify-shim to keep
jQuery and Mustache out of dist.js:
"browserify-shim": {
"jquery": "global:$",
"mustache": "global:Mustache"
}Uses npm-watch to trigger a build when
the source (./public/**/*.js) changes. Running:
npm run watch
will use the following config:
"watch": {
"build": {
"patterns": [
"public"
],
"extensions": "js",
"ignore": "public/dist.js",
"quiet": true
}
}- HTTPS
MIT © Paul Grime