Website Performance

The term “Website Performance” one of the top-notch topics in my IT Journey. So, what is that? In simple way, Website performance measures how quickly the pages of a website load and display in the web browser.?

Why Website Performance Matters??

As an internet user, you’ve experienced many a slow?website. While this might only feel like a minor annoyance, the effects of poor performance can reverberate through an entire business. From user satisfaction to the company’s bottom line, the consequences are far-reaching.??

User Experience:?

I feel this is heart of the Web Application.? It refers to?the feeling that the users experience while using your application. UX impacts every aspect of your website. Simply put if your website is slow, your visitors will have a bad time. And the fact is if your visitors have a bad time, then your online business will have a bad time too. Isn’t it? So UX matters the most. Elegancy is more important for the website. That’s the fact!!!?

So, coming to the point how to improve user experience with the help of ReactJS & Webpack5? How to make your site to load faster? As a UI developer I was able to identify few options. I hope this article will help those who are experiencing website performance issues.?

Basically, there are few ways to improve the Page Speed Performance. If you are using webpack then few manipulations, we can have it within webpack itself. And Code-Splitting, Tree Shaking, Cache busting, Service Workers, PWA there are lot of aspects. Let’s see one by one.?

First, increase in bundle size poses a common challenge for developers affecting application performance. This is where few tools are coming in. So, I have installed one of the tools which was helped me to identify the webpack bundle size. i.e., Webpack Bundle Analyzer?is a bundle composition analysis plugin. It gives you a visual representation of the components that have the most impact on your bundle size.?

Reference URL,? ? https://www.npmjs.com/package/webpack-bundle-analyzer?

npm install --save-dev progress-bar-webpack-plugin webpack-bundle-analyzer?

Create a new file?analyze_build_bundle.js?in the?scripts?folder.?

Add the below in scripts -> package.json file.????

"analyze-build-bundle": "node scripts/analyze_build_bundle.js"?

Once added the above run with the below command,? npm run analyze-build-bundle?

?

Code-Splitting:?

Code splitting?consists of separating the code into several packages or components that can be loaded on demand or in parallel. This means that they are not loaded until they are needed.?

The page still loads the same amount of code, but the difference is because the page may not execute all the code it loads.?

The benefits of code splitting are:?

• The speed at which a website loads and displays content becomes faster.?

• The interaction time improves.?
• The percentage of users who abandon the web page without interacting with it decreases.?

There are lot of options to achieve Code-Splitting. Below are some,?

1. React.lazy: Feature provided directly by React, allows lazy loading of imports. It is a component function, which takes as a parameter another one and finally returns a promise as a result that is expected to be resolved by a React component.??

We will perform lazy loading with React suspense and without it. Lazy Loading in React can be implemented with the help of the built-in function?“React. lazy()”. This is also known as?code splitting, in which?“React.lazy”?along with webpack bundler divides the code into separate chunks, when the component is requested, the chunk is loaded on demand.?

Coming to?React Suspense is designed to handle the loading of the components that make asynchronous API requests. React Suspense can be used by wrapping the?“<Suspense>”?component and specifying the fallback content displayed while the component or data is loading.??

1. Loadable Components (for server-side rendering): If you would like to do code splitting during server-side rendering (SSR). Then this is the best approach. So, we will build a component called?AsyncComponent?whose responsibility is to accept modules and use dynamic imports.? ?

It will have three states:? ?

isLoading?// as dynamic import returns a promise.?

Component?// actual module derived from code splitting.?

Error?// for logging in case import failed.?

? Reference URL, https://loadable-components.com/docs/getting-started/?

?

1. React-Habitat Code Splitting (for CMS MPA): React Habitat is designed for integrating React with your CMS using the DOM as the interface. It's based of some basic?container programming principles?and brings peace and order to multi-page apps.?

So how to implement Code Splitting here. Below is the example.?

containerBuilder.register(Hello).as("hello")?

So basically, this will create multiple chunks. So based on the components availability in the Page chunks will be getting loaded. It’s one of the best Approach for AEM React users.?

1. Webpack5 Code-Splitting Approach 1: Entry Point.?

You specify this in Webpack config.? Example:? I have specified two entry points in the following Webpack config.?

entry: {?

index: ‘./src/index.js’,?

components: ‘./src/components.js’,? }?

So now it will produce 2 files. Entry points is the easiest way to get started with code splitting.?

1. Webpack5 Code-Splitting Approach 2: SplitChunksPlugin.?

It helps to break down large codebases into smaller chunks, improving overall performance and speed.?

Reference URL: https://webpack.js.org/plugins/split-chunks-plugin/?

?

So, you have seen the major one (Code Splitting ??) for the website Performance. Below are the few which will drastically improve your site performance with minimal changes. Let’s see what those are,?

?

1. Moment JS:??

Use the below to drastically improve your moment JS bundle size,? ??

new webpack.IgnorePlugin({????????

resourceRegExp: /^\.\/locale$/,????????

contextRegExp: /moment$/,??????

})?

?

If you still want to see improvements, then go for date-fns. Really this bundle size is low compared to momentJS.?

?

1. Lodash:?

The?babel-plugin-lodash?module reduces the size of the Lodash export by only importing the functions used in the code. So, let’s see how to implement it.?

npm install --save-dev babel-plugin-lodash?

Add the following line to options in?webpack.config.js.??

plugins:? ["lodash"]?

?

1. MiniCSSExtractPlugin:?

This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.? ? Again this will improve the Performance Optimization.?

?

1. Babel:?

Babel also contains tools for reducing bundle sizes, especially when working with certain libraries. To use Babel, first install the core Babel libraries by running the following three commands:? ? npm install --save-dev @babel/core ? npm install --save-dev @babel/preset-env ? npm install --save-dev babel-loader? ? Then add Babel to your Webpack configuration by modifying?webpack.config.js? use: {?

loader: 'babel-loader',?

options: {? ???????????? presets: ['@babel/preset-env'],? }?

???????? }? ?

1. Browser Caching:?

I have come across with an interesting problem in which users were not able to see the latest version of application on their own due to browser caching and that moment the only solution was to clear cache to see the latest version. But clearing the cache is always not a good idea. So, I was searching for the Solution. And was able to identify Cache busting Option.?

Cache busting is a technique that helps ensure that users see the latest version of your website or web application, rather than a cached version that may be out of date. This is especially important if you're making frequent updates to your app or if you're X/Y testing different versions. So how to implement it??

Cache busting can be achieved through webpack as well. In webpack config, use output.filename as below?

"[name].bundle.[chunkhash].js"? ? ?

There are few placeholder strings when it comes with caching.?

• [hash]?– if at least one chunk changes, a new hash value for the whole build is generated.?
• [chunkhash]?– for every changing chunk, a new hash value is generated.?
• [contenthash]?– for every changed asset, a new hash based on the asset’s content is generated.?

I hope this might resolve your browser caching issue ???

?

1. Lodash-Webpack-Plugin:? ?

If you are using lodash in your project, you might want to check out lodash-webpack-plugin. It removes lodash features you don’t use. This will significantly reduce your bundle size.?

?

1. Preload Stylesheet:?Add preload stylesheet option to the <link> tag. Technically, you can specify?multiple values for?rel?attribute. Something like this should do the job, without writing 2 lines per stylesheet:? ? <link rel="preload stylesheet" href="/css/styles.css" as="style" type="text/css">? ? After added this check your PageSpeed it will improve the Performance.?

?

1. Defer attribute:?

The defer attribute ensures that the browser no longer blocks while loading the script and postpones the execution of the script until the html is executed. This means that the browser finishes executing the html earlier and can paint the page on the screen a lot faster.?

Deferred JavaScript is many times faster because the browser does not have to wait for JavaScript to load and execute while rendering the HTML of the page.?

?

1. Image Optimization:? ?

We can optimize images by using AVIF instead of WEBP, which in most cases should offer even better compression than WEBP with the same image quality. If you want to push this step further, there are AI compressors available online, that can shrink the size without losing quality even further (This you will either do manually each time you want to shrink image size, or in most instances pay for API).?

Another option is to serve images that are the minimum required size for the resolution you are using. This means either using?<picture>?or?srcset?attribute or making your own solution in JavaScript.?

?

1. Split the largest components in to the smaller one ?? ? When it comes to Lazy Loading, other pretty useful thing is Webpack Magic Comments, one that I find helpful is,? /* webpackPrefetch: true */?

?

Compression:?

So, you can compress your bundle size. This is also one of the factors which will improve the performance.?

Reference URL, https://www.npmjs.com/package/compress-create-react-app?

This can generate .br [or] .gz file.?

?

Tree Shaking:?

Tree shaking is a term used to describe the process of removing unused exports from a module. This is typically done during the bundling process, using a tool such as Webpack or Rollup. By removing unused code, the resulting bundle can be significantly smaller and more efficient, improving the performance and loading time of an application.?

For example, instead of importing a large module at the top level of an application, developers can use the dynamic import syntax provided by ECMAScript, which allows the module to be loaded asynchronously:?

const NewComponent = React.lazy(() => import('./NewComponent));?

This syntax allows the module to be loaded only when it is needed, improving the initial loading time of the application, and reducing its overall size.?

?

.babel.rc:?

Add modules: false to your babel config (usually in . babel.rc).? ? If you are using es2015 preset, it should look like this:?

presets: [ [“es2015”, {“modules”: false }] ]? ? If you are using babel-preset-env, then it should look like this:?

presets: [ [“env”, {“modules”: false }] ]?

?

TerserPlugin:?

It is used to uglify the JavaScript code to reduce its size and readability. It's reducing the build time. This Plugin?can minify and compress JavaScript code using the Terser minifier.? ? It is a very popular plugin and is used by many large companies to produce production-ready JavaScript code.?

Performance:??

Webpack notifies you of assets and entry points that exceed a specific file limit. For example, if you have an asset that is over 250kb, webpack will emit a warning notifying you of this.?? ? performance: {?

?? hints: false,?

?? maxEntrypointSize: 512000,?

?? maxAssetSize: 512000,?

}? ?

Source maps:?

Source maps are a crucial tool for debugging but generating them can be incredibly time-consuming. But I can say?cheap-source-map?struck a good balance between build performance and debuggability.?

Reference URL, https://webpack.js.org/configuration/devtool/?

?

PWA:?

Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability.?

PWA offers benefits such as:?

• Performance? ?
• Installable? ?
• PWAs can work on slow Internet or no Internet environment. ? ?
• App developers can choose how a PWA will behave when there’s no Internet connectivity, whereas traditional web apps or websites simply stop working without an active Internet connection.?

?

Page Speed Measurement tools:?

Below are the Page Speed measurement tools to identify the Key Indicators of Performance System KIPS.? ?

• Page Speed - https://pagespeed.web.dev/? ?
• Web Page Speed Test - webpagetest.org? ?
• Lighthouse - Chrome extension? ?
• GTMetrix - https://gtmetrix.com/? ? ?

FCP -> First Contentful Paint marks the time at which the first text or image is painted.?

LCP -> Largest Contentful Paint marks the time at which the largest text or image is painted.?

TBT -> Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds.?

CLS -> Cumulative Layout Shift measures the movement of visible elements within the viewport.?

Speed Index -> Speed Index shows how quickly the contents of a page are visibly populated.?

?

Okay So try out the above to improve the website Performance. So, these are the essential tips to help you build high-performance React applications that will leave your users in awe!!!!?

?

?

?

?