Lower your carbon footprint by improving your website performance
*Written by Genet Schneider, Mark Geller and Raj Parekh
Have you ever been stuck waiting for a site to load, spam-clicking at the same time and hoping it would make the site load faster? I can admit to doing that more times than I would like, but that can often be the reality of navigating the web.
“Is it possible that the users on our website can experience the same? Is our site performing badly and using up more resources than it should?” These were the questions we were wondering about as a team a year ago and the answers didn’t make us happy.
After replacing our entire website tech stack in the pursuit of delivering the most customizable content creation experience (a new business requirement), we realized that we had partly disregarded website performance — including the implementation of proper monitoring. We were unaware of how good or poor the user experience of our website was and that was a scary thought.
When we began properly instrumenting our website stack in Q3 2022, we discovered that our services could have been in better shape when it comes to performance and serving pipedrive.com’s ever-increasing public traffic. Our server-side monitoring showed us that during peak traffic times (or higher concurrent traffic), our services would completely choke and the server latency would skyrocket.
In terms of Page Experience, the news wasn’t good either: We were struggling to even maintain a “Needs Improvement” Core Web Vitals classification on most of our URLs. For the most part, we were in deep red and had to accept the “Poor” rating Google gave us on most of our URLs.
So, the server latency wasn’t great and Core Web Vitals scores weren’t something to cheer about either. We understood where we were — the numbers weren’t looking good but we had made a lot of progress in terms of being more attentive to these issues. And most importantly, we knew where to go!
Go go go
Highly motivated by our website’s poor performance metrics, we started our journey to turn things around. Our team was hyper-focused on making the website more performant, resilient and available for all of our prospects and customers. We prepared the scene: Identify the main metrics we want to track to measure success, record them as team engineering goals and get to work!
The main goals we targeted were to increase the number of “Good” URLs that Google Search Console reported and decrease the p98 server latency based on Cloudflare traffic logs.
Team first!
In order to have faith in our success metrics, we needed to grow our confidence in the data and improve observability. We found the Google Search Console reporting to be lacking due to it not reflecting real-time data and needing more control over the URL grouping. We decided to ask for the help of our amazing analysts and build our own Core Web Vitals dashboard that reports on the field data we feed into it using the web-vitals npm library. We agreed our own dashboard wouldn’t render Google Search Console useless; instead, our version would allow us to view the data on a more granular level and understand how our web vitals change on a daily basis.
For the server latency, we relied on both service-level Prometheus data and Cloudflare traffic logs. The latter provided us with a high-level overview of the traffic latency we could compare against the latency our back-end services reported. In retrospect, this was a good move as the latency reported by these two sources differed, allowing us to generate more ideas on what to improve!
After gaining confidence that we were tracking the right KPIs and had the appropriate data to measure our success, we created an OKR for the entire team that would hold key results to track improvements on both fronts: Core Web Vitals and server latency. In order to stay focused and on the right track, the team set out to check in to the OKR every single week.
Forging solutions
The team responsible for the performance of the website is a popular and therefore busy team. We receive new requests (big and small) on a weekly basis for new software to build, be it on the website or another service we own. As a result, we needed to be well organized to continue to march closer to our goal of performance excellence on the website, while fulfilling other tasks and meeting high expectations at the same time.
When it came to what to improve, the team identified both quick and easy wins as well as bigger and more challenging pieces. We were able to deploy some of the improvements during maintenance work, while other, bigger pieces needed planning and proper preparation to tackle as bigger mission items.
Core Web Vitals
In order to improve Core Web Vitals, we carried out the following critical tasks:
- Leverage Cloudflare’s image resizing feature to optimize and resize all the images deployed on the site
- Programmatically pre-load and eagerly load the largest LCP element on the page
Despite our complex page structure on the website, the team deployed sustainable and smart solutions to these problems that benefit our site to this day. All of these changes resulted in significant improvements in Core Web Vitals.
Server Latency
Improving the server performance and resilience proved to be easier than improving page experience metrics. Based on the team’s feedback, this is due to having more control over the server latency KPIs and the fact that it’s easier to measure our servers’ performance as it’s arguably in a more controlled environment.
During many brainstorming sessions in front of the whiteboard and in team chat, we identified several key improvements that we deployed across all regions of Pipedrive that would increase our website’s throughput:
- Stop choking our server
- Statically generate the most common page of all: the 404 page — our server spent a significant amount of resources building and rendering the 404 page on the fly due to our rendering architecture. We deemed that unnecessary. However, the majority of our other pages have dynamic content that needs to stay fresh at all times
- Index CouchDB databases — a quick fix yet a significant improvement in server load and throughput
- From in-memory to distributed cache — our multi-instance website back-end service stored all the cache internally inside the memory. As we wanted to be resilient to higher-traffic load, we needed to scale and ensure our servers can share the cache.
Our team was keen on delivering our targets and deliver we did!
Our website’s server latency P98 (measured on service level) reduced from 1000ms+ to ~450ms and Cloudflare’s traffic logs yielded us a -31.84% (median), -34.27% (p95) and -33.92% (p98) page view response time decrease!
Becoming greener
What if measuring the p98 server latency or the Largest Contentful Paint is not cool enough? Well, one way to lay out our performance improvements is to measure the CO2 output and hope to decrease it as we’re making our web perform faster and use fewer resources. As it turns out, thanks to all of our improvement efforts, we’re now producing 62.8% less CO2 with each website visit. That means we’re now producing significantly less energy with each page visit, contributing to the creation of a more sustainable web.
Conclusion
These challenges were not something dictated to our team as a problem but rather were noticed and surfaced within the team. All of us take pride in the performance and resilience of our services and aim to deliver the best user experience for our customers — as well as providing a very customizable page creation experience. What made it possible was teamwork and having eyes on the problems. It was also necessary that everybody could chip in ideas on what to improve. Making sure every team member was a part of the discussions and we all were checking into the OKR made it possible to share knowledge and celebrate success as a team.
Additionally, having a high level of confidence in the data and the proper tools to monitor it is crucial in maintaining the motivation to deliver the results.
We are using the knowledge we gained to seek out more improvements and make sure the website performance doesn’t regress. We’ve already set up new team OKRs to track in the form of SLOs, which remind us that in order to make a difference, we need to have the support of the entire team.
Speed matters and our team knows it first hand.
