• https://izelgurbuz-perfanalytics.herokuapp.com
• The script is added to https://mustafaculban.com. To see actual data examples on system you can search for this website and change the time interval

PerfAnalytics is an ecosystem which collects and criticizes web performance data. The ecosystem consists of 3 subsystem;

• PerfAnalytics.Js
• PerfAnalytics.API
• PerfAnalytics.Dashboard

1. Project Setup
2. Run
3. Usage 3.1. JS Script Usage 3.2. Dashboard Usage
4. API
5. Tests
6. CI/CD

Copy .env.example file to .env by

cp .env.example .env

and edit DB_CONNECTION variable.

• Note1: Currently MONGO_URI is exposed to public due to limitation on repo settings. You can manually change URI from src/connector.js:6

Secondly run for node dependencies.

npm install

• Note 2: You do not need to run npm install for dashboard manually. To run both server and dashboard please go to next section.

To run PerfAnalytics on development environment, you only need to run one tiny command

npm run dev

OR

You can use docker image as follows;

docker run -p 8080:8080 -e PORT=8080 -d izelgurbuz/perfanalytics

To collect request data from the web sites you;

1. You need to open dashboard and enter your url into "Add URL" input field then save it.

2. Search your Website URL via Search Bar to display a "Website ID".

3. Add below code snippet to your website's Header section.

<script>const perfAnalyticSiteId = 'WebsiteID';</script>
<script src="https://izelgurbuz-perfanalytics.herokuapp.com/perfAnalytics.js"></script>

4. You have done İnjecting script part to your website. Now let move to Dashboard Usage!

Dashboard has 2 modes for fetching data.

1. Live Mode Every 10 seconds, data is fetched via API to display live performance data on dashboard.

2. Offline Mode Displayed data is only fetched once page is loaded. You need to manually refresh the Dashboard to see the upcoming data.

To see website metrics, click on the arrow icon of the table row.

That will open Graphs and Resource Timings Tabs.

On the Graphs Tab, FCP, TTFB, domLoad and windowLoad graphs are located.

On the Resource Timings Tab, network timings of website resources are listed based on their waterfall time.

You can choose time interval for both of the contents of the tabs from date time filters.

By default, the graphs and list show the last half hour of data.

Backend is powerd by Node.Js and Express.js with the MongoDB.

• [GET] /perfAnalytics or [GET] / The dashboard app
• [GET] /dashboard/websites Get all the websites
• [GET] /dashboard/website/#websiteId -> Returns all the metrics for last half hour Optional Params

  startDate: Chosen start date endDate: Chosen end date

[POST] /analytics/collect Records analytic data Required Payload

{
    FCP: 0,
    TTFB: 14,
    domLoad: 1716,
    origin: "URL",
    resourceLoadTimes: [{name: "URL"}],
    siteID: "WEBSITE_ID",
    url: "URL",
    windowLoad: 3418,  
}

You can run backend and frontend tests seperately by;

npm run test && npm run test:fe:dashboard && test:be:coverage

Load Test result (proof of 200rps )

Github Actions is configured to deploy on every push to master branch. Both Docker and Heroku are dependent on the tests result and deployed upon tests successes.