Web performance metrics for requests with cookies
Why take care of performance?
The web is growing fast along years of new technologies, libraries and frameworks (a lot), everything helping apps to provide better and more features, components, new ways for users to interact. But, this engagement is compromised for one point: performance. With too many features, it's difficult for apps to keep a good (and acceptable) performance for the variety of network conditions and devices. JavaScript is also becoming more complicated and its cost is increasing. So, performance is the key point to retain users and we must take care about this.
Motivation
To provide an overview, at Jusbrasil, we have more than 1.3M users daily, from everywhere in Brazil and places without good network. Based on this, performance is something to look all the time. It'll allow us to provide a better platform. We were measuring performance metrics from pubic apps but what about our apps which requires authentication? How can we define performance budget in these cases and have a good monitoring?
Current technologies
Nowadays, we use the power of Garie integrated with Grafana to visualize performance data from our apps extracted by Lighthouse and PageSpeed Insights.
Besides data visualization, Grafana allows us to create alerts for the metrics stored in its data source, in our case, Prometheus. We could define thresholds for extracted metrics and alert them on our communication channels, it's awesome! But, it is working for public apps, the Garie stack doesn't allow this monitoring for authenticated apps, we only specify URL and label of product in Garie's config.
http://garie/lighthouse?key=KEY&url=URL&product=PRODUCT_NAMEOur solution
We need to modify the current Garie solution to provide a way to include cookies in requests. Garie 1.0 uses lighthousebot/builder to make the HTTP requests and return performance report. Based on this response, the Garie raises desired web performance metrics on Prometheus.
Making a mirror from lighthousebot/builder, we updated the solution to set cookies using Puppeteer and provide this more specific approach in jubrasil/driven-lighthouse image. Let's show the Puppeteer driving Lighthouse agent:
const browser = await puppeteer.launch({
headless: true,
defaultViewport: null,
args: ['--no-sandbox', '--disable-setuid-sandbox'],
});const page = await browser.newPage();
await page.setCookie(...cookies);
...const port = browser ? (new URL(browser.wsEndpoint())).port : 0;
// spawn lighthouse in defined port
With lighthouse builder sending HTTP requests with cookies, we only need to modify Garie to pass these cookies. We made some changes in Garie 1.0 (jusbrasil/garie) to provide sending cookies as query parameters. Now, we can get web performance metrics for pages which need cookies to render the expected content:
http://garie/lighthouse?key=KEY&url=URL&product=PRODUCT&cookieName=NAME&cookieValue=VALUE&cookieDomain=DOMAINConclusion
Private apps won't be alone. We must take care of its speed, accessibility, PWA and, now, we have a way to monitor its web performance. Garie + Driven Lighthouse come to help keep performance budget and our further improvements will support more deep analysis.
Check our improvements on Github: jusbrasil/driven-lighthouse and jusbrasil/garie. If you have some doubt or want to discuss about this solution, ping me on twitter @cristianossd1.
Do you also care about performance? Do you want to work more deep in web performance and a lot of other fun technologies? Join us, we are hiring at Jusbrasil 😉
