Today, sites tend to have more and more features and all of those features make it hard for the sites to achieve high levels of performance. Taking into account the large variety of devices and network conditions that the website needs to serve, it's only natural that so many have a hard time achieving high level of performance.

As a developer, we have the tools and equipment that ensure we get the best performance out of any project and checking the actual numbers is a keystroke away. However, when it comes to the actual traffic that a given website gets, it becomes hard to determine how the website reacts to all the different environments that it runs on.

What it does

Tectry offers a very simple and straightforward solution that allows a website owner to take metrics based on different marks from the browser. The resulting data is passed on to Data Studio that uses it to plot different relevant charts that can help developers see where exactly the website is having a hard time. This way, bad performance can be tracked and treated before becoming a major issue.

DEMO link

Tectry sample report

How we built it

We made use of the Performance API and Beacon API in JavaScript in order to collect all the relevant data, format it and pass it to a Google Cloud Function. This function parses the data and publishes it on a Google Cloud Pub/Sub topic. Dataflow is subscribed to the same topic, receives the data and saves it in Big Query. The saved data is retrieved in a DataStudio report and used to plot multiple charts.

Challenges we ran into

  • Connecting the JS Beacon to the Cloud Function
  • Publishing data in the queue
  • Filtering data in order to only store relevant information

Accomplishments that we're proud of

  • Using the script in a real environment, plotting data gathered from REAL traffic
  • Serverless computing, no component of the software solution needs maintenance
  • All services configured using point and click operations and only 430 lines of code were written. There is no need forl a local development environment, only access to internet and to Google Cloud Console is needed to modify/extend the solution.

What we learned

  • Performance/Beacon API

What's next for Tectry

  • Without much effort, by editing the web server, server timings can be enabled, allowing our component to offer a complete image of the entire platform, both client side and server side by being able to measure how much time a SQL query needed vs how much time it took for the DOM to render the server response.
  • Extending it so that it can gather stats from more than one websites and plot them individually.

Built With

Share this project: