Web Performance optimization practices at Halodoc
One of the prerequisites to building a scalable website is to ensure that the correct performance optimisation techniques are followed during the development process. We at Halodoc continuously strive to incur the best practices, to provide a great user experience.
According to Wikipedia, - “Web performance refers to the speed in which web pages are downloaded and displayed to the users' web browser." Hence, achieving a faster page load time is the bottleneck of the optimisation process.
Why is performance optimisation necessary?
With an exponential increase in the consumption of online services through websites and mobile applications, the loading speed of a page plays a key role for the users to choose among a multitude of options available. There have been several research and surveys to analyse the qualitative and quantitative impact of page load time on a user which in turn determines the revenue generated for a company.
According to research conducted by Portent in 2019, it was found that "Website conversion rates drop by an average of 2.11% with each additional second of load time (between seconds 0-9).”
Besides, most users prefer a website with faster loading speed with simple UI over a website with great UI but slower loading speed.
Benefits of Performance Optimisation:
Websites with good performance have the following advantages over their peers:
- Better-performing websites have a winning edge over their competitors. Users intuitively choose to visit these sites. There have been several psychological research and surveys to understand the behaviour of user. These help determine what might work in the favour or against a user.
- The user conversion rate of the website goes up. A conversion rate is defined as the percentage of visitors who complete a goal, as set by the site owner. It is observed that users tend to spend more time on sites that load faster and provide a good UX. Users are also more inclined to used the services provided by these companies, as a byproduct of the built rapport.
- It helps improve the SEO ranking of the website. Google has actually included the page speed in its search ranking algorithm. In their words, "Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we've seen in our internal studies that when a site responds slowly, visitors spend less time there." Although the exact implications of increased speed is ambiguous if the page relevance is under question.
In addition to these, website performance significantly impacts revenue generation for enterprises.
"The Halodoc way" of web performance optimisation
At Halodoc, we take extra care to achieve better performance of the websites and mobile applications. Today we are going to discuss some of the practices followed.
But, before that it is important to discuss about the performance metrics. As the name suggests, performance metrics are the deciding factors which needs to considered to determine whether or not everything is working as expected. Some of the performance metrics are discussed below:
- First Contentful paint (FCP) measures the time from when the page starts loading to when any part of the page content gets rendered on the screen.
- Largest Contentful paint (LCP) measures the time from when the page starts loading to when the largest text block or image element gets rendered on the screen.
- First Input Delay (FID) measures the time from when a user first interacts with the site (i.e., when they click a link, tap a button, or use a custom, JavaScript-powered control) to when the browser can respond to that interaction.
- Time To Interactive (TTI) measures the time from when the page starts loading to when it is first visually rendered, its initial scripts (if any) have loaded and, it is capable of reliably responding to user input quickly.
- Total Blocking time (TBT) measures the total time between FCP and TTI where the main thread was blocked for long enough to prevent input responsiveness.
- Cumulative Layout Shift (CLS) measures the cumulative score of all unexpected layout shifts that occurs between when the page starts loading and when its lifecycle state changes to hidden.
These factors play a crucial in web performance budgeting.
What is Performance Budgeting?
Performance budgeting is a quantitive record of the threshold values that need to be achieved by the developers. This helps to keep track of future goals to maintain a good score of the performance metrics.
Having analytical data of every aspect of the website helps in targeting the areas of improvement.
Opensource tools for achieving Performance Budgeting:
WebPageTest is a web performance tool providing deep diagnostic information about how a page performs under a variety of conditions.Each test can be run from different locations around the world, on real browsers, over any number of customisable network conditions.
WebPage as a tool was originally developed by Patrick Meenan while he was at AOL for use internally and was open-sourced in 2008 under a BSD license. For detailed understanding read this article from our blogs:
https://blogs.halodoc.io/performance-monitoring-webapps/
Lighthouse is an open-source, automated tool for improving the quality of web pages. It can be run against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.
It can be run in Chrome DevTools, from the command line, or as a Node module. It audits the page based on certain parameters, and then generates a report on how well the page did. The failing audits can be used as indicators on how to improve the page. To learn more about Lighthouse usage within Halodoc, read the article:
https://blogs.halodoc.io/web-performance-budget-tracking/
Image Optimisation
In order to build a visually appealing website, it is a common practice to use lot of images. There is nothing wrong in this, but it could cost in slower rendering speed of the page, if the images are not optimised well.
Selecting the correct image format-
Most of the images used on our website are in WebP format. WebP is an image file format that can provide lossy compression (just like jpeg) and lossless compression (just like png). Additionally, it generates better quality compressed images than either JPEG or PNG. Using WebP, developers can create smaller, richer images that make the web faster.
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at the equivalent SSIM quality index.
Sizing the images
Serving desktop-sized images to mobile devices can use 2–4 times more data than needed. Hence, it is a better practice to use images of varied sizes according to the device used. This can be easily achieved using the src, srcset, and sizes attribute of the img tag in Html. The same result can also be obtained using picture and source tags of Html.
Font Optimisation
Just like CSS and JS files, fonts are also the additional resources that may affect the page loading speed. At Halodoc, we keep a check on the following points for font optimisation:
- Audit and monitor the font use: Do not use too many fonts on the pages, and, for each font, minimize the number of used variants. This helps produce a more consistent and faster experience for your users.
- Subset the font resources: many fonts can be a subset or split into multiple unicode-ranges to deliver just the glyphs that a particular page requires. This reduces the file size and improves the download speed of the resource. However, when defining the subsets, be careful to optimise for font re-use. For example, don't download a different but overlapping set of characters on each page. A good practice is the subset based on script: for example, Latin, and Cyrillic.
- Deliver optimised font formats to each browser: provide each font in WOFF 2.0, WOFF, EOT, and TTF formats. Make sure to apply GZIP compression to the EOT and TTF formats, because they are not compressed by default.
- Give precedence to local() in your src list: listing local('Font Name') first in your src list ensures that HTTP requests aren't made for fonts that are already installed.
Network/delivery optimisation
Effective communication of the client side to the backend is the goal of any website. This is achieved by HTTP requests and responses, which acts as the life line of the process. It is essential to optimise this process at every step. Some of the measures undertaken by the Halodoc developers are explained below:
Brotli vs Gzip compression
To reduce payload size, HTTP supports response compression via the Accept-Encoding and Content-Encoding headers. Initially we were using gzip as a de-facto compression technique for both static and dynamic assets. But, with Brotli, we could achieve a compression ratio much higher compared to gzip. Brotli is based on the same foundations as gzip (LZ77 and Huffman encoding).
Read this blog for further details - https://blogs.halodoc.io/effective-compression-technique-for-web-applications-using-brotli/
Move to HTTP/2 -
HTTP/2 makes applications faster, simpler, and more robust by addressing the concerns of HTTP/1.1. The primary goals for HTTP/2 are to reduce latency by enabling full request and response multiplexing, minimise protocol overhead via efficient compression of HTTP header fields, and add support for request prioritization and server push. HTTP/2 does not modify the application semantics of HTTP in any way. All the core concepts, such as HTTP methods, status codes, URIs, and header fields, remain in place. The only observable differences are improved performance and availability of new capabilities like request prioritization, flow control, and server push.
At Halodoc, we use Amazon CloudFront as for CDN services. We have successfully adopted the HTTP/2 support for these CDNs. Below is a screenshot of our website, depicting the same.
DNS-prefetch
DNS-prefetch is an attempt to resolve domain names before resources get requested. This could be a file loaded later or link target a user tries to follow.
When a browser requests a resource from a (third party) server, that cross-origin’s, domain name must be resolved to an IP address before the browser can issue the request. This process is known as DNS resolution. While DNS caching can help to reduce this latency, DNS resolution can add significant latency to requests. For websites that open connections to many third parties, this latency can significantly reduce loading performance.
Dns-prefetch helps developers mask DNS resolution latency. The HTML link element offers this functionality by way of a rel attribute value of dns-prefetch. The cross-origin domain is then specified in the href attribute:
Code Optimisation
The code base is the foundation of any website. Any building is as strong as its foundation. Same is true for the websites. Hence, the selection of write frameworks, plugins and development processes are the key ingredients to a successful website.
At Halodoc, we use Angular for client-side development. Angular is a framework developed and maintained by Google. With competitors like React, Vue, and Svelte, the organisation decided to go ahead with Angular after a careful analysis.
These blogs can help gain insights to development process followed at Halodoc:
Shrikara Hathwar K S
Harish Kumar
Tharun S B
Conclusion
Performance optimisation is the life line and the journey of a website. It is thus a continuous effort of optimisation and development in different areas. For great results, it is important to periodically monitor the website using different tools like Lighthouse and WebPageTest. It is equally important to adapt the best techniques during the development and deployment of a website.
What we discussed in this blog is just the tip of the iceberg for now. We will keep scratching the surface and share other aspects of performance optimisation in our next blog.
Interested in exploring with us ?
We are always looking out for top engineering talent across all roles for our tech team. If challenging problems that drive big impact enthral you, do reach out to us at careers.india@halodoc.com
About Halodoc
Halodoc is the number 1 all around Healthcare application in Indonesia. Our mission is to simplify and bring quality healthcare across Indonesia, from Sabang to Merauke. We connect 20,000+ doctors with patients in need through our Tele-consultation service. We partner with 3500+ pharmacies in 100+ cities to bring medicine to your doorstep. We've also partnered with Indonesia's largest lab provider to provide lab home services, and to top it off we have recently launched a premium appointment service that partners with 500+ hospitals that allow patients to book a doctor appointment inside our application. We are extremely fortunate to be trusted by our investors, such as the Bill & Melinda Gates Foundation, Singtel, UOB Ventures, Allianz, GoJek, Astra, Temasek and many more. We recently closed our Series C round and In total have raised around USD$180 million for our mission. Our team works tirelessly to make sure that we create the best healthcare solution personalised for all of our patient's needs, and are continuously on a path to simplify healthcare for Indonesia.