Use browser, connectivity and slug in compare name. (#4083)

If you don't give your compare an id, this will add
browser, connectivity and slug to the filename. This
is a breaking change if you use the compare plugin
without an id.

lib/plugins/compare/index.js

@@ -5,6 +5,7 @@ import { resolve, join } from 'node:path';
 import { SitespeedioPlugin } from '@sitespeed.io/plugin';
 import intel from 'intel';
 import merge from 'lodash.merge';
+import get from 'lodash.get';
 import dayjs from 'dayjs';
 
 import {
@@ -21,12 +22,18 @@ const __dirname = fileURLToPath(new URL('.', import.meta.url));
 const log = intel.getLogger('sitespeedio.plugin.compare');
 const defaultConfig = {};
 
-function urlToId(url) {
-  return url
+function urlToId(url, options) {
+  let id = url
     .replace(/^https?:\/\//, '')
     .replaceAll(/[^\d.A-Za-z]/g, '_')
     .replaceAll(/__+/g, '_')
     .replaceAll(/^_|_$/g, '');
+
+  const connectivityProfile = get(options, 'browsertime.connectivity.profile');
+
+  return `${options.slug ? options.slug + '-' : ''}${
+    connectivityProfile ? connectivityProfile + '-' : ''
+  }${id}${options.browser ? '-' + options.browser : ''}`;
 }
 
 const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
@@ -101,7 +108,7 @@ export default class ComparePlugin extends SitespeedioPlugin {
       case 'sitespeedio.summarize': {
         for (let url of Object.keys(this.browsertimes)) {
           this.page++;
-          const id = this.options.compare.id || urlToId(url);
+          const id = this.options.compare.id || urlToId(url, this.options);
           const baseline = await getBaseline(
             id + '-' + this.page,
             this.compareOptions