After taking steps to optimize React component rendering discussed in Improve React/Redux SPA Performance Part 1, let’s look at other aspect of the application that can further improve the performance and loading speed.
Minimize application bundle size
The smaller the application bundle size, the faster the initial loading would be.
Code splitting
The initial bundle only contains modules needed to render the first page. Components and modules for other pages are loaded on demand. That is, they are located in separate files and only fetch them when needed.
Minification
Webpack version 4 has minification turned on by default for production build. So this is automatic when using webpack for bundling.
Gzip compression on web server
Enable gzip compression for dynamic contents can reduce download size, reduce network bandwidth and as a result, increase in loading speed. Different web servers have different configurations to enable gzip compression. So make sure to check out their documentations to turn on this feature.
For ASP.NET Core, to support gzip compression, add the following lines to ConfigureServices() at Startup.cs:
|
1 2 |
services.Configure<GzipCompressionProviderOptions>(options => options.Level = System.IO.Compression.CompressionLevel.Optimal); services.AddResponseCompression(); |
3rd party libraries justification
Other than the core libraries like react, react-dom, redux, react-redux and etc. are the minimum overhead for react/redux application. Any other 3rd party libraries must be chosen carefully. Each additional 3rd party library add size to the bundle and increase the download time. Especially for those that have bigger footprints, if you aren’t using full features of the library, you should check out if there’s smaller alternative library that can serve your purpose. And in some cases, building a simple version yourself may well worth it for the long run.
Faster first meaningful paint
First meaningful paint: The time at which the user feels that the primary content of the initial page is visible. Faster the better. Technically, it’s the paint after which the biggest above-the-fold layout change has happened, and web fonts have loaded. Check out google’s information about First Meaning Paint. Chrome Developer Tools’s performance audits can tell you how well your website performs.
Minimizing the bundle size certainly helps make first meaningful paint faster. Let’s look at other aspect that also affect the first meaningful paint.
Server side rendering
Server side rendering (SSR) is essential to improve first meaningful paint. Without SSR, everything has to be loaded before the page can be rendered at browser. With SSR, the page can become visible while the javascript bundle is still loading. And as a result, other techniques can then be applied to improve the first meaningful paint.
Render blocking contents/resources
Contents or resources that must be loaded before browser can render and display the page. The more blocking contents/resources are used, the slower the first meaningful paint.
Render blocking scripts
All javascript files are render blocking. With server-side rendering, however, we can defer the javascript files loading to make them non blocking by adding ‘defer’ attribute.
|
1 |
<script src="/js/bundle.js" defer></script> |
You can also preload the scripts so that download will start sooner (add to head section):
|
1 |
<link rel="preload" href="/js/bundle.js" as="script"> |
Render blocking css
css files are render blocking also. The remedy is to incorporate inline css for above-the-fold contents of the page and then download the css files using javascript.
|
1 2 3 4 5 6 7 8 9 10 |
<script> function addCss(url) { var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = url; link.type = 'text/css'; var link_first = document.getElementsByTagName('link')[0]; link_first.parentNode.insertBefore(link, link_first); } </script> |
Call addCss() for each css file after the page is loaded. (by attaching an event handler to window.onload)
Material icons
If you are using material icons or other web icons, they are essentially css file and are render blocking. You have to download the whole icon set to use them. While the file size is not big, it certainly adds up. We improve this by using svg version and bundle only the icons needed together with our react application.
Web fonts
Similar to material icons, they are render blocking resources. Use them only if they are must have.
There are other techniques like tree-shaking, service worker, prefetch/caching and etc. that can further improve the performance. Do you have more techniques and other ways of improving the performance and page load speed to share? We would love to know.
