In recent years, static websites completely disappeared and with the rise of technology, companies provide their services more and more online. The former latent web pages were replaced with content-rich and dynamic websites. Frequent changes in content and website layout can have a high impact on end to end response times.
In this post, I will give you a simple approach how to implement an automated web page design analysis based on open source tools PhantomJS and Yslow.
Setup Details
The good thing is that all components required for this automated web page design analysis are open source and for free. You will need the following tools:
First of all, install PhantomJS on your environment. There is a detailed installation description on their website, which you can use right away.
Secondly, download Yslow for phantomJS and customize the yslow.js file. Open the yslow.js file in any editor, add the line var system = require(‘system’); to the top of this file and replace all phantomjs.args with system.args in this file.
Thirdly, install Atom editor and enable the run command. Atom is an extremely powerful editor with tons of plugins. I used it’s run command to execute command line scripts.
Finally, test the installation with the given command below. You can use Atom after you enabled the run command, open a new window, insert the command phantomjs yslow.js –help and click ctrl-r.
Run the Analysis
PhantomJS and Yslow are powerful tools and provide many features which you can use right away for your automated web page design analysis. Personally speaking, I recommend starting with the basic command and work your way through the more advanced features.
Basic
In this mode, you will get a high-level page design analysis which consists of the size of your page, the overall score, the number of requests and the page load time. Execute the command below on your machine configured before.
phantomjs yslow.js -info basic -format plain http://focusaps.com
The picture below contains the output of this command. It shows that the given website has an overall page design score of 76 out of 100, has a size of 1.5 MB and a load time of 3.2 seconds.
Detailed
The detailed mode provides more insights to the weak areas of your website. It supports also predefined thresholds and supports the TAP output format, which is supported by many tools such as Jenkins. Run the command below on your machine.
phantomjs yslow.js -info grade -format tap – threshold C http://focusaps.com
You will get the following output including relevant tuning hints which you can share with your developers.
I believe that you have now many integration ideas for the page design analysis. Automation is that easy. Add the automated checks to your build process, testing procedures and daily checks on your productive environments. You will see that this really helps to identify deviations in a proactively way.