Hariom Balhara
BlogCodeTILSnippetsWeb Experiments
BlogCodeTILSnippetsWeb Experiments

Setting up SiteSpeed.io on GCP Compute

WebPageTestperformance

These are step by step instructions to set up sitespeed.io on Google Cloud Platform so that you can set up continuous synthetic monitoring.

  • Create a VM instance e2-small (2 vCPUs, 2 GB memory). See costing.

  • Use the default Debian image

  • SSH to the VM

  • Install Docker - For upto date steps refer to Docker website

    sudo su -
sudo apt-get update
sudo apt-get install apt-transport-https ca-certificates curl gnupg lsb-release
curl -fsSL https://download.docker.com/linux/debian/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo   "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/debian \
$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

  • Install docker-compose

    sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

  • Setup Grafana(port 3000) and Graphite for awesome visualization of all the stats. You would need to interact with Grafana directly.

    sudo su -
cd ~/
mkdir sitespeed.io
cd sitespeed.io
# Pull docker-compose.yml in root folder
curl -O https://raw.githubusercontent.com/sitespeedio/sitespeed.io/main/docker/docker-compose.yml
docker-compose up -d

  • Run test on Chrome Desktop using sitespeed.io. Read about more configuration options here. Read about how to change browser here

    docker run \
  # Allow communication from sitespeed.io to Graphite through host
    --add-host=host.docker.internal:host-gateway \
  # Run the sitespeed container and remove it once the test is complete
  # It would also generate Lighthouse and PSI(Page Speed Insights) Report
    --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:17.8.1-plus1 \
  # Tell sitespeed.io where graphite can be connected
  --graphite.host=host.docker.internal \
  # Your Test Page
  https://google.com \
  # Required to visualize in Grafana. All tests would exist in this folder.
  --slug YOUR_TEST_FOLDER \
  --graphite.addSlugToKey true \
  # The location from where Page Screenshots and videos would be accessible over http
  --resultBaseUrl http://PUBLIC_IP_OF_VM \
  # Latest Test Page Video and Screenshot are copied in the base so that they an be viewed in Grafana report.
  --copyLatestFilesToBase true \
  # Number of times to run the test.
  -n 1

  • You should be able to access the report athttp://PUBLIC_IP_OF_VM/sitespeed.io/sitespeed-result/

    Setting%20up%20SiteSpeed%20io%20on%20GCP%20Compute%20eedd804d81db400083f8d4c623df6428/Screenshot_2021-06-16_at_4.23.05_PM.png

  • You should be able to access Grafana at http://PUBLIC_IP_OF_VM:3000. You won't see screenshots and video yet.

  • Login to Grafana with credentials available here. Look for GF_USER and GF_PASSWORD in the file.

  • Let's fix it for the Page Metrics* *Desktop dashboard first. You can find it by searching for it at http://PUBLIC_IP_OF_VM:3000/?orgId=1&search=open. You would have to do the same for all dashboards.

    • Go to Dashboard settings(Gear icon on the top right near date range)

    • Go to Variables Section in it and set screenshottype to png and ****resulturl ****to http://PUBLIC_IP_OF_VM:3000/sitespeed.io/sitespeed-result. This is how your Variables section should look. Don't forget to Save Dashboard, changes aren't saved automatically.

      Setting%20up%20SiteSpeed%20io%20on%20GCP%20Compute%20eedd804d81db400083f8d4c623df6428/Screenshot_2021-06-16_at_4.09.45_PM.png

  • You are all set and you should see an awesome dashboard now.

    Setting%20up%20SiteSpeed%20io%20on%20GCP%20Compute%20eedd804d81db400083f8d4c623df6428/Screenshot_2021-06-16_at_3.59.02_PM.png

GCP Cost Saving Ideas

Even though this setup shouldn't cost you much but you can still optimize for cost more.

  • Setup an Instance Schedule to run the VM for say 5 minutes daily and run the test during that time frame. The schedule would automatically start and stop the VM.
  • You can opt for Ephemeral IP instead of Static IP. See costing difference. It would be a few clicks to get the current IP of the VM to access Grafana and the report. To view the latest screenshot and video within the Grafana, you might need some script to automatically modify the resulturl variable
  • You can go for Preemptible Instances if you plan to run thousands of tests daily.

Useful Information

... Loading comments