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/

• 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 _GFUSER and _GFPASSWORD 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 PUBLIC_IP_OF_VM:3000/sitespeed.io/sitespeed... This is how your Variables section should look. Don't forget to Save Dashboard, changes aren't saved automatically.

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

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

• There are different dashboards for Desktop and Mobile Page Metrics
• Lighthouse and PSI data would be available in the Plus1 dashboard.
• You can also run tests on WebPageTest(WPT) using sitespeed.io itself and the data would be available in Grafana automatically.
• Why WPT and Sitespeed results differ ?
• You an also have a Chrome User Experience Report(CrUX) also within the Grafana