Jul 16, 2023 21:00:00

I tried using the open source library ``Boomerang'' that can measure the loading time of the website that the user actually experiences

A survey (PDF) by Deloitte and Google found that the number of visits and dwell time on a website are greatly affected by page loading speed. It's tempting to start improving your site right away, but in order to know the effectiveness of your code changes, you need to measure how much it affects loading speeds for real users. ' Boomerang ' is an open source library that can measure and collect the loading speed of such users, so I actually used it and tried it.

OSS Boomerang Index
https://akamai.github.io/boomerang/oss/index.html

akamai/boomerang: End user oriented web performance testing and beaconing
https://github.com/akamai/boomerang

Node.js must be installed to use Boomerang. From the URL below, select the installation method that matches your environment.

Installing Node.js using a package manager | Node.js
https://nodejs.org/en/download/package-manager

In order to use Debian this time, I installed Node.js with the following code.
[code]curl -fsSL https://deb.nodesource.com/setup_lts.x | bash - &&\
apt-get install -y nodejs[/code]

Also, if Git is not installed, install it from the Git download page according to your environment. This time, I ran the following code to use Debian.
[code]apt-get install git -y[/code]

I will set up Boomerang at once. First, clone the repository with the code below.
[code]git clone https://github.com/akamai/boomerang.git
cd boomerang[/code]

Import the necessary libraries with the code below.
[code]npm install[/code]

Open 'zzz-last-plugin.js' in the 'plugins' directory and fill in the initialization code 'BOOMR.init' as shown below. The Boomerang documentation describes what you can set here. A particularly important setting is 'beacon_url', and data will be sent to the URL set here.

Grunt is used to build Boomerang, so install CLI with the following code.
[code]npm install -g grunt-cli[/code]

Then run the code below to build Beemerang.
[code]grunt clean build[/code]

When I tried to build on Windows or WSL, I got the following error and failed.

However, when I tried to build on Debian, it succeeded.

When the build is completed, a file is generated in the 'build' folder as shown below, so copy 'boomerang-[version number].min.js' and host it on your own server.

On the website side, insert the following code into the page OK. For the part that says 'Insert the URL to Boomerang's js file here', replace it with the URL of the js file you placed in the above procedure.
[code]

[/code]

Load the page, press 'Ctrl + Shift + i' to open the developer tools, and enter 'BOOMR' in the console to see various data being recorded.

These data will be sent to the URL you set at the beginning. A lot of parameters are being sent and various data can be retrieved. The 't_done' parameter in this represents the time it takes for the site to finish loading.

Since the data is sent in the form of Form Data, you can either prepare a script on the server to parse and save it properly, or save it as raw log data and parse it later. That's it. Details of the data sent can be found in the Boomerang documentation .

It is also possible to add data to be sent in plug-in format. Plugins that are provided as standard can be checked on the plugin page of the document , and plugins that import Google Analytics information and plugins that track all clicks on the page are available.