Sitespeed.io
What is site speed?
Sitespeed.io is a complete web performance tool that helps you measure the performance of your website. It’s an open source tool that helps you monitor, analyze and optimize your website speed and performance. 3 key capabilities of Sitespeed.io:
- It test web sites using real browsers, simulating real user connectivity and collect important user centric metrics like Speed Index and First Visual Render.
- It analyze how page is built and give feedback how to make it faster for the end user.
- It collects and keep data on how pages are built making it easy to track changes.
Sitespeed architecture
Sitespeed.io is built upon a couple of other Open Source tools in the sitespeed.io suite.
- Browsertime is the tool that drives the browser and collect metrics.
- The Coach knows how to build fast websites and analyze your page and give you feedback what you should change.
- Visual Metrics is metrics collected from a video recording of the browser screen.
- Everything in sitespeed.io is a plugin and they communicate by passing messages on a queue.
How Sitespeed works
When you as user choose to test a URL, this is what happens on a high level:
- Sitespeed.io starts and initialize all configured plugins.
- The URL is passed around the plugins through the queue.
- Browsertime gets the URL and opens the browser.
- It starts to record a video of the browser screen.
- The browser access the URL.
- When the page is finished, Browsertime takes a screenshot of the page.
- Then run some JavaScript to analyze the page (using Coach and Browsertime scripts).
- Stop the video and close the browser.
- Analyze the video to get Visual Metrics like First Visual Change and Speed Index.
- Browsertime passes all metrics and data on the queue so other plugins can use it.
- The HTML/Graphite/Influx DB plugin collects the metrics in queue.
- When all URLs are tested, Sitespeed sends a message telling plugins to summarize the metrics and then render it.
- Plugins pick up the render message and the HTML plugin writes the HTML to disk.
Implementation of Sitespeed in Shiksha
How it works
The entire system could have been divided into 4 major parts
- The environment setup of Docker containers
- Running the scripts on the Docker containers
- Fetching and storing the result as well as aggregate result in case of multiple execution in a day
- Display of the store data.
Installation and execution
Sitespeed.io can be implemented using Docker containers or using NodeJS. In Shiksha Sitespeed in implemented through Docker.
There are Docker images with sitespeed.io, Chrome, Firefox, Xvfb and all the software needed for recording a video of the browser screen and analyze it to get Visual Metrics.
Follow below steps for setting up Sitespeed on your system
- · Install Docker on system.
- · Run Docker desktop as admin
- · Git clone the sitespeed.io directory https://github.com/sitespeedio/sitespeed.io.git
- · Run git bash as admin from win home
- · Goto Sitespeed.io cloned directory
- · Run below command.
docker pull sitespeedio/sitespeed.io
docker run — rm -v ${pwd}:/sitespeed.io sitespeedio/sitespeed.io https://shiksha.com -b firefox
Note: It can be run from cmd also, command will be: docker run — rm -v :/sitespeed.io sitespeedio/sitespeed.io https://shiksha.com -b chrome
It runs in 3 iterations. The output will be like below:
Fetching Sitspeed data through Java
Java function runs the Docker container and store the results in a List that is further used for getting different performance metrics of Shiksha.
Output metrics:
Storing performance data
The table to store performance data in Shiksha is as below
- For storing pages/URLs on which we need to check the performance
- Result of all the executions a build result.
- Table similar to above that stores the aggregate result for execution day wise
- Threshold band with min and max value for each index for each page
- The outliers (results not lying in the threshold range)
Graphical representation
The entire set of matrices were now grouped into 4 smaller sets and their graphs against day were plotted as belows. (the graph were plotted using google graph apis.)
1. The score matrix plot which consists of parameters like Page Score, Performance Score and Accessibility Score.
2. The Size Matrix which includes the parameter like total page size, js Size, css size and Image size.
3. The Visual Matrix which includes the parameters related to the visual changes starting from first to the last visual change
4. And finally the Time matrix which included the parameters like First Paint, FE time, BE time and Page load time etc.
Each of the above matrices were integrated to a dashboard from where one can easily access the daily topography of the above pages, and was depicted in both numeric and graphic view.
Challenges faced
- Docker is a heavy container, hence require machines with high configurations and capability.
- On windows machine Sitespeed execution is time consuming.
- Some feature like scheduling cron or alert triggering are not available in sitespeed.
Advantage of Sitespeed
- Running in continuous integration to find web performance regressions early: on commits.
- Can be implemented on test environment without private network.
- Customization through JavaScript — For CTA’s, forms etc.
- Feedback — Analyze the page and give you feedback what should be changed.
- It’s time efficient when used on Linux system.
- Can be implemented on Desktop and mobile sites
Reference
