Web performance - The secret sauce to success

In this digital era where everything is turning virtual and natural calamities are confining people in their silos, digital platforms & devices have become our gateways to connect to the outside world. As developers, we are more responsible to make our websites and applications robust & sustainable in the market. In order to emerge as the winner in this cut-throat competition, performance of a website plays a key role to success.

High-performance websites lead to a better user experience & engagement, higher return visits, higher page ranks, higher revenue generation & reputation in the market.

I have tried to list down few important aspects of fine tuning your website performance.

To start with, Response time and Page Load Time are the key metrics to access how your website is performing.

What is Response Time?

Response time is the time to first byte (TTFB), the time it takes for the browser to receive the first byte of data being transferred from the server. It mainly consists of the following key elements:

• DNS lookup
• Connection time
• Redirect time
• First byte
• Last byte

What is Page Load Time?

Page load time is the time it takes to download and display an entire individual webpage. This includes all page elements, such as HTML, scripts, CSS, images, and third-party resources. It comprises of the following elements:

• Time to first paint
• Speed index
• Time to interactive

Now keeping in mind these metrics, here are few ways you can enhance the performance.

1. Take care of speed and size of client side files, 3rd party libraries

A lot of JavaScript frameworks are available in the market nowadays like Angular, React, Vue, Preact etc. One should make a conscious choice based on the requirement in hand which framework or library will be the best fit to cater the requirements. According to the survey, Vue and Preact are the best options among the lot in terms of speed and size. Preact is a fast alternative to React weighing only 3kB! It is recommended to use bundle analyzers like Webpack bundle analyzers to keep track of the dependencies.

2. Static, server side or client side rendering - what to choose?

Client side rendering renders content in the browser using JavaScript. So instead of getting all the content from the HTML document itself, a bare-bone HTML document with a JavaScript file is initially loaded, which in turn renders the rest of the site using the browser. You can consider using CSR when SEO optimization is not a priority and when the target is to build a rich interactive UI with extensive dynamic content.

Static rendering can be mainly used for building static sites where plain HTML is served directly to the browser. Loading a page involves only downloading the index.html file and no code is executed during this time. Static site is really hard to beat in terms of speed and performance. For a website that is mainly content driven and has very less user interaction, Gatsby.js (React-based open-source framework) is a good option.

Server side rendering is almost similar to static rendering except the fact that it supports the dynamic behavior of the webpage. For example, in some use cases, web page layout and content may vary according to user interaction and you can't afford the content to be static. SSR also serves an HTML file of your webpage that is ready to be rendered. However, for every new request for page content, it will trigger a new rendering process in order to fetch fresh data from API. Next.js is a lightweight React based framework, running on Nodejs, that supports SSR and provides very good performance. Though SSR time-to-first-byte and throughput are lesser than that of CSR, it has better SEO performance.

3. Use code splitting, lazy loading, treeshaking

Code splitting is the technique of splitting an entire app into smaller chunks of interconnected modules and is supported by bundlers like Webpack, Rollup and Browserify. This decreases the size of the main bundle downloaded on the first visit and the chunks are then lazily loaded at a more appropriate time when the user needs it. This technique helps to reduce loading time and enhances web performance. For example, in React you can use import(), React.lazy coupled with Suspense or React loadable for code splitting and lazy loading. You can also configure Webpack to achieve this. Treeshaking is a form of dead code elimination. It comes as built-in feature in Webpack and helps in reducing code size by eliminating unused dependencies.

4. Use Prefetch & Preload

Preload is used for early fetching resources needed for a page(example- scripts, Web Fonts, images) without blocking the document’s onload event. Whereas, Prefetch is used for the purpose of a future navigation by the user (example between views or pages) where fetched resources and requests need to persist across navigations. These techniques help to cache resources in HTTP or memory cache & optimize delivery of resources, reduce round trips and deliveryou content faster while a user is browsing a page. You can use common prefetching techniques like DNS-prefetching, Link Prefetching and prerendering.

<link rel="preload" href="sample.png">

<link rel="prefetch" href="sample.png">

5. Optimize image size

Try using .jpg/.jpeg over .png formats for images and .svg format for icons & logos in order to reduce the overhead during HTTP calls.

6. Minimize API calls

The fewer API calls made, the greater the speed of your app. For example, you may consider using GraphQL that can fetch all data in a single request, without over-fetching data as it may happen with REST API calls.

7. Speed up data search and retrieval at server-side

Try using popular engine engines like Elastic Search for faster retrieval of data from an SQL database, especially when the dataset is big and complicated. Use TRIE(tree based data structure) algorithms for efficient searching, for example - type ahead/auto complete search implementation.

8. Use CDN and caching mechanism

For consumer-facing websites, the speed at which the site loads directly impacts the user’s browsing experience and the success of your business. Here CDN comes to your rescue. CDN stores various resources of your website like HTML, images, stylesheets and JavaScript files across distributed web servers and serves contents to user from cached copies stored in edge caches, located nearer to the user location. This reduces latency and optimizes the load time of web pages. CDN is also used to setup cache mechanism by configuring minimum & maximum time-to-live, HTTP cache control headers, E-tags and improve cache hit ratio. For example - Amazon Cloudfront.

9. Implement bundling, minification & compression

You can use techniques like code bundling and minification by configuring tools like Webpack to serve production content. This helps to reduce size of client side files and hence results in faster loading time of the webapp. We can also use content hash mechanism while configuring Webpack for generating Javascript bundle file names in order to enable browser caching. Hashing file names helps in versioning the bundle files and the browser only downloads the new file if the version changes, else it uses the cached version. Gzip Compression is yet another effective way to reduce the size of files. It minimizes the HTTP requests and reduces the server response time by compressing the files before sending them to the browser. On the user side, a browser unzips the files and presents the contents.

10. Handle 404, 301 & 302

You can use external tools like Google Webmaster Tools for 404(Page not Found) error detection and assess the traffic that they generate. If these dead links no longer bring any visits and thus never consume your server resource, then you may leave them as they are. If these pages still have some traffic coming, consider setting redirects for external links and fixing the link addresses for the internal ones.

Website redirects like 301 & 302 create additional HTTP requests which negatively impact performance. You need to assess the impact and try to minimize the count or remove them entirely.

Hence to conclude with, there is no end to make your application optimized and as it grows in size, it becomes challenging to adhere to the all these standards, especially when your primary focus is to develop and deliver in Agile methodology. There are different handy tools available in market that you can leverage time to time to keep a check on your application. Lighthouse is one such open-source, automated tool for improving the quality of web pages. Retrace is another one.

References:

https://www.merixstudio.com/blog/improving-web-app-performance/

https://www.altexsoft.com/blog/engineering/12-techniques-of-website-speed-optimization-performance-testing-and-improvement-practices/

https://stackify.com/web-performance-optimization/

https://ideas.byteridge.com/webpack-minifying-your-production-bundle/

https://www.keycdn.com/blog/resource-hints