Browser Performance Test
(sitespeed.io)
Abdullah Fathi
What is Sitespeed?
-
The ultimate tool (open source) for monitoring, analyzing, and optimize website speed and performance
-
3 Key capabilities of Sitespeed.io:
- Test web sites using real browsers, simulating real user connectivity and collect important user centric metrics like Speed Index and First Visual Render.
- Analyze how page is built and give feedback how to make it faster for the end user
- Collects and keep data on how pages are built making it easy to track changes
Sitespeed Architecture
-
Coach: Find performance problems on your web page
-
Browsertime: Heart of sitespeed.io that handles everything with the browser. Collect metrics using JavaScript/video/HAR from browser.
-
PageXray: Converts a HAR file to a JSON format that is easier to read and easier to use
-
Throttle: Simulate different network speeds
-
Compare: Make it easier to find regressions by comparing the HAR files
-
Chrome HAR
(Http Archive Format): Get the log from the Chrome Debugging Protocol and use Chrome-HAR to parse it to a HAR -
Many more...
How to Run a Sitespeed?
Docker
# Run By URL Address
docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:33.4.0 https://laravel-demo.fotia.com.my/
# Run by Execute JS file that consist of user scenario/journey
docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:33.4.0 --multi test1.js test2.js
npm
# Install sitespeed.io globally
npm install -g sitespeed.io
# Make sure you have the browser you want to use for testing installed (Firefox/Chrome/Edge/Safari) and then run
sitespeed.io https://www.sitespeed.io/ -b chrome
Run Sitespeed in
Gitlab Pipeline
Template
Run Sitespeed in
Gitlab Pipeline
Docker
browser_performance:
stage: performance
variables:
PREPOST: 'sitespeed/laravel-login.js'
URLS: 'sitespeed/urls.txt'
script:
- mkdir sitespeed-results
# - docker run --shm-size=1g --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:33.4.0 --cpu --outputFolder sitespeed-results --preScript $PREPOST $URLS
- docker run --shm-size=1g --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:33.4.0 --cpu --outputFolder sitespeed-results --preScript $PREPOST $URLS
tags:
- fotia-devops
- html-demo
- shell
- ssdnodes
only:
- main
artifacts:
paths:
- sitespeed-results/
Configuration
Sitespeed.io is highly configurable
The Basics
Run By Multiple URLs
# Run By URL Address
docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:33.4.0 https://laravel-demo.fotia.com.my/
# Test multiple URLs
docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:33.4.0 https://laravel-demo.fotia.com.my/ https://laravel-demo.fotia.com.my/login
Run Multiple URLs from file urls.txt
# content of urls.txt
http://www.yoursite.com/ Start_page
http://www.yoursite.com/my/really/important/page/ Important_Page
http://www.yoursite.com/where/we/are/ We_are
# Test multiple URLs by execute file
docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:33.4.0 urls.txt
The Basics
Analyse By Crawling
# If you want to find pages that are not so performant
# it’s a good idea to crawl.
# Sitespeed.io will start with the URL and
# fetch all links on that page and continue
# to dig deeper into the site structure.
# You can choose how deep to crawl
# (1=only one page, 2=include links from first page, etc.):
docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:32.2.0 https://laravel-demo.fotia.com.my -d 2
How many runs per URL?
# When collecting timing metrics,
# it’s good to test the URL more than
# one time (default is three times).
# You can configure how many runs like this (five runs):
docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:32.2.0 https://laravel-demo.fotia.com.my -n 5
The Basics
Choose Browser
# Choose which browser to use (default is Chrome):
docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:32.2.0 https://laravel-demo.fotia.com.my -b firefox
Pre/post scripts and login the user
module.exports = async function(context, commands) {
await commands.navigate(
'https://en.wikipedia.org/w/index.php?title=Special:UserLogin&returnto=Main+Page'
);
// Add text into an input field y finding the field by id
await commands.addText.byId('login', 'wpName1');
await commands.addText.byId('password', 'wpPassword1');
// find the sumbit button and click it
await commands.click.byIdAndWait('wpLoginAttempt');
// we wait for something on the page that verifies that we are logged in
return commands.wait.byId('pt-userpage',3000);
};
docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:32.2.0 --preScript /sitespeed.io/login.js https://laravel-demo.fotia.com.my/home
The Basics
Viewport & User Agent
# Add --mobile as a parameter. If you use Chrome it will use the preset Moto G4 device
docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:33.4.0 https://www.sitespeed.io --mobile
#Set a specific viewport and user agent
docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:33.4.0 https://www.sitespeed.io --browsertime.viewPort 400x400 --browsertime.userAgent "UCWEB/2.0 (MIDP-2.0; U; Adr 4.4.4; en-US; XT1022) U2/1.0.0 UCBrowser/10.6.0.706 U2/1.0.0 Mobile"
Change/Set Network Connectivity
Setup Docker Network using tc (traffic control)
#!/bin/bash
echo 'Starting Docker networks'
docker network create --driver bridge --subnet=192.168.33.0/24 --gateway=192.168.33.10 --opt "com.docker.network.bridge.name"="docker1" 3g
tc qdisc add dev docker1 root handle 1: htb default 12
tc class add dev docker1 parent 1:1 classid 1:12 htb rate 1.6mbit ceil 1.6mbit
tc qdisc add dev docker1 parent 1:12 netem delay 150ms
docker network create --driver bridge --subnet=192.168.34.0/24 --gateway=192.168.34.10 --opt "com.docker.network.bridge.name"="docker2" cable
tc qdisc add dev docker2 root handle 1: htb default 12
tc class add dev docker2 parent 1:1 classid 1:12 htb rate 5mbit ceil 5mbit
tc qdisc add dev docker2 parent 1:12 netem delay 14ms
docker network create --driver bridge --subnet=192.168.35.0/24 --gateway=192.168.35.10 --opt "com.docker.network.bridge.name"="docker3" 3gfast
tc qdisc add dev docker3 root handle 1: htb default 12
tc class add dev docker3 parent 1:1 classid 1:12 htb rate 1.6mbit ceil 1.6mbit
tc qdisc add dev docker3 parent 1:12 netem delay 75ms
docker network create --driver bridge --subnet=192.168.36.0/24 --gateway=192.168.36.10 --opt "com.docker.network.bridge.name"="docker4" 3gslow
tc qdisc add dev docker4 root handle 1: htb default 12
tc class add dev docker4 parent 1:1 classid 1:12 htb rate 0.4mbit ceil 0.4mbit
tc qdisc add dev docker4 parent 1:12 netem delay 200ms
# Run using cable network
docker run --shm-size=1g --network=cable --rm sitespeedio/sitespeed.io:29.3.0 -c cable https://www.sitespeed.io/
# Run using 3g network
docker run --shm-size=1g --network=3g --rm sitespeedio/sitespeed.io:29.3.0 -c 3g https://www.sitespeed.io/
#!/bin/bash
echo 'Stopping Docker networks'
docker network rm 3g
docker network rm 3gfast
docker network rm 3gslow
docker network rm cable
Custom Test Script
Base Script
// simplest version of a script looks like below:
export default async function (context, commands) {
// add your own code here
}
context
options - All the options sent from the CLI to Browsertime.
log - an instance to the log system so you can log from your navigation script.
index - the index of the runs, so you can keep track of which run you are currently on.
storageManager - The Browsertime storage manager that can help you read/store files to disk.
selenium.webdriver - The Selenium WebDriver public API object.
selenium.driver - The instantiated version of the WebDriver driving the current version of the browser.
command
navigate(URL) - Use this if you want to use the exact way as Browsertime navigates to a new URL (same settings with pageCompleteCheck etc). Note: the URL will not be measured automatically.
measure.start(URL) - Start measuring and navigate to a new page in one go.
measure.start(URL,alias) - Start measuring and navigate to a new page in one go, while register an alias for that URL.
measure.start() - Use this when you want to start to measure a page. This will start the video and prepare everything to collect metrics. Note: it will not navigate to the URL.
measure.start(alias) - Use this when you want to start to measure a page. This will start the video and prepare everything to collect metrics. Note: it will not navigate to the URL and the next URL that will be accessed will get the alias.
measure.stop() - Collect metrics for a page.
timer.start() Start a timer and measure the time.
*timer.stopAndAdd() * Stop the timer and add the result to the last tested URL.
Dashboard Output
(Summary)
Dashboard Output
(Detailed Summary)
Sitespeed Lighthouse Plugin
Docker
docker run --shm-size=1g --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:33.1.0-plus1 https://www.sitespeed.io/
Compare HAR Files
URL
https://compare.sitespeed.io/
Find regressions by comparing your HAR files
More Features to
Explore
Your feedback matters
There are no secrets to success. It is the result of preparation, hard work, and learning from failure. - Colin Powell
THANK YOU
Browser Performance Test (sitespeed.io)
By Abdullah Fathi
Browser Performance Test (sitespeed.io)
- 223