Designed to delight: How we optimized our Freshworks website for a stellar UX
Like every leading SaaS company, our Freshworks website is the primary storefront for customers and employees. Our website serves as the landing page for users to experience our products and solutions. It also paves the way for personalized campaigns, offerings, and collaterals that build brand trust & commitment.
While all our teams work behind the scenes to add value to our customers with our range of easy-to-use workplace technology, the website operations team is committed to helping customers access our delight-made-easy philosophy with a revamped website experience.
About our website operations team
The website operations team comprises passionate techies focused on crafting and delivering value-added website experience to our users. We bring into action research from our marketing operations and digital analytics to create a delightful experience for our customers and end-users.
Website performance
The following picture displays various factors that contribute to Google’s performance measurement.
Driven by our work culture of being a true friend to our customers, we analyzed customer needs and requirements to drive our optimization initiatives toward generating a faster response. This includes:
- Core Web Vitals (CWV): Core web vitals are a set of factors that Google considers essential in a webpage’s overall user experience. These factors drive search engine optimization (SEO) and page ranking.
- Network Load: Network load is directly proportional to the users’ lobby time for information.
Our research areas
We are continuously researching the impact of the following four aspects on website performance and user experience. Let’s discuss these areas in more detail.
WebP image conversion
WebP is an image format similar to traditional formats, such as JPEG, PNG, SVG, etc. Developed by Google, WebP has been lately adopted by many browsers and websites. This format serves images with the same quality at a reduced size. Leveraging this in our website significantly reduced the network load. Based on the image request from the browser, we understood the image support and prioritized serving .wepb formats over others.
Tip: If a .webp image is unavailable off the shelf, you can convert it to .webp on the fly and serve or serve the existing format but queue the image for .webp format conversion for future use.
The difference in the cumulative reduction in the download size of all the images for a page resulted in considerable improvement to CWV metrics.
Custom plugins
A lot happens behind the scenes when a user lands on any of our pages. These plugins or scripts help improve the website’s performance, functionality, and lead generation. While these metrics are needed to know our customers better, it consumes resources, which we have to minimize. We managed the integration efficiently by deferring the scripts based on the use case, personalized campaigns, and requirements.
Tip: You can use Google’s Tag Manager service along with custom intelligence.
CSS and JS chunking
Chunking is used across all websites to reduce load time and latency. Our model groups CSS and JS by priorities and molecular structures.Whenever a page is loaded, the assets served are decided based on the priority and molecules used. This functionality can be drilled down to a specific CSS and JS file per page, but again it has a hit on browser caching for returning users and server performance. We are at an ideal balance in code splitting and working on creating a more seamless and sustainable model for the future.
Handling cookie policy enforcement
Cookie policy discrete the data that a user can take, use, store, or process. The user’s consent is needed to inject the scripts. We use reputed tools to handle this but engineer the scenarios in a custom fashion to make the website light. Since many features depend on the user’s consent, we must ensure that the after-consent experience is seamless. To handle cookie policy enforcement, we ensured that the JS scripts are classified under the standard categories. We also use the following asset types to load them faster:
| Script types |
|---|
| preconnect |
| dns-prefetch |
| preload |
Final thoughts
At Freshworks, we are committed to delivering a world-class experience to our customers and users while ensuring user privacy needs are always met. Finding the right balance between performance and total experience can be challenging. However, we believe in going over and above to continue building our suite of ridiculously easy software for businesses of all sizes.
