Using K6 to test page speed between two URLs

Question

I am trying to get a script working that will test the page speed between two URls and give me some useful data. I'm using the K6 performance testing suite to do this with, I'm writing the scripts in javascript using their framework.

I am curious how I would structure a test that would compare 2 URLs speed.

Example:

Page 1 would be `www.oldsite.com/test` -- 20ms to load
Page 2 would be `www.newsite.com/test` -- 17ms to load

I'm doing this because we are doing a refresh of our website and want some baseline tests for speed and performance during the development phase.

Below is some of the code I have to test with.

let response;
var sendingRecievingTrend = new Trend("sending_recieving_time");

    function requestPage(url) {
        let response = http.get(url, {
            headers: {
                "Upgrade-Insecure-Requests": "1",
                Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9"
            }
        });
        
        sendingRecievingTrend.add(response.timings.sending + response.timings.receiving);

        check(response, { "Response return 200 HTTP Status Code": r => r.status === 200 });

        return response;
    }

    group(`Old Mobile Products Page - ${config.oldMobileUri}/products/`, function () {
        response = requestPage(`${config.oldMobileUri}/products/`);
    });

    group(`New Mobile Products Page - ${config.newMobileUri}/products/`, function () {
        response = requestPage(`${config.newMobileUri}/products/`);
    });

However, if I do this, then I believe i'll just an average of the total time all these group tests took. I am looking for individual statistics for each URL I test.

knittl · Answer 1 · 2021-10-28T18:38:39.337

You can use custom tags or filter on the url of the request. Tagging the string template with http.url simplifies filtering your sub metrics.

Example:

function requestPage(url, pageVersion) {
  let response = http.get(url, {
    headers: {
      "Upgrade-Insecure-Requests": "1",
      Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9"
    },
    { pageVersion }
  });
  // ...
}

group(`Old Mobile Products Page - ${config.oldMobileUri}/products/`, function () {
    response = requestPage(`${config.oldMobileUri}/products/`, 'old');
});

With the following thresholds defined in the exported options object:

export const options = {
  thresholds: {
    'http_req_duration{pageVersion:old}': ['avg>0'], // arbitrary threshold
    'http_req_duration{pageVersion:new}': ['avg>0'],
  },
};

http_req_duration already tracks request duration, so you could also get rid of your custom Trend metric.

It is also possible to filter based on the "group path", so your code would already work as-is—you just need to filter the metric based on the group (although the group names are a bit clunky to use here):

export const options = {
  thresholds: {
    `sending_recieving_time{group:::Old Mobile Products Page - ${config.oldMobileUri}/products/}`: ['avg>0'], // arbitrary threshold
    `sending_recieving_time{group:::New Mobile Products Page - ${config.newMobileUri}/products/}`: ['avg>0'],
  },
};

This is similar in nature to the question K6 - breakup of results for each api request

Using K6 to test page speed between two URLs

1 Answers1