Couple of days back I was trying to figure out how to test and evaluate the impact of new performance optimizations without having to make server side changes. The optimization that came to mind was Addy Osmani's quicklink library. The question is how can one test this library on their page without having to go through a server side change to the base page HTML file.
Webpagetest to the rescue !
Webpagetest(WPT) scripts are extremely powerful to setup a user flow for testing and you have the ability to inject JavaScripts into the page. So below are the steps on how you can leverage the quicklink library to test how much of an improvement you can see for your website.
Setting up the prototype via wpt scripts
In order to use the quicklink library on your page, you will need to first download the file, then inject it into the page and then initialize it. Below is the script that does just that.
var script = document.createElement('script');
script.type = 'text/javascript';
script.onload = function () {
quicklink.listen(); quicklink.prefetch(['https://www.foo.com/product1']);
};
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/quicklink/2.0.0-alpha/quicklink.umd.js';
document.getElementsByTagName('body')[0].appendChild(script);
- The first thing you need to do is remove line breaks and include it as one single line.
var script = document.createElement('script'); script.type = 'text/javascript'; script.onload = function () {quicklink.listen(); quicklink.prefetch(['https://www.foo.com/product1']); }; script.src = 'https://cdnjs.cloudflare.com/ajax/libs/quicklink/2.0.0-alpha/quicklink.umd.js'; document.getElementsByTagName('body')[0].appendChild(script);
- The second thing you need to do is to verify if the script is doing what it needs to. In my case I needed this script to be injected right before the close of the
Top comments (0)