In this blog post, I will share some simple steps from my experience improving an application’s frontend performance. In my application, the overall lighthouse score increased to 98% from around 50-60% after implementing the tips I will discuss here. Lighthouse is a tool provided in Chrome developer tools where we can check the frontend performance of our application on various metrics. Learn about more about the Lighthouse here. The Techstack of my application is NodeJs, Webpack, VueJS, and Vuetify; however, the below steps are common to all frontend applications in Javascript and NodeJS. These are a few basic techniques that dramatically increase the application’s performance.
1. Remove unnecessary codes, files, and npm packages.
The size of the application does impact performance. The light application runs faster as it takes up a few resources. Reducing the size also can reduce infrastructure costs. Remove all unused code and files from your application.Verify your package.json, check if npm packages are lingering around without use, and delete them. Take the help of tools like depcheck and other npm packages if you need help finding unused packages manually or if the project is enormous.
2. Upgrade third-party npm packages
npm-update command updates the package or packages to the latest version. Another way is npm-check-updates, which upgrades your package.json dependencies to the latest versions, ignoring specified versions.
3. Analyze npm packages
Analyze packages which are taking more memory. Can we replace them with more simple packages? For example replace the moment package with luxon package. Use the incredible tool called Bundlephobia where you can see the bundle size and download time for packages.
5. Resize/Compress images
Resize the image’s dimensions to the optimal size required by your application. Try to compress the image to reduce its size while maintaining its quality.
4. Add async to third-party script/CDN URLs
If third-party CSS or javascript files are slowing down your page load, then remove them if they are not adding value to your website or optimizing their loading using the async or defer attribute in the script tags.
6. Use rel=”preload” to preload critical resources
Preload identifies resources your page will need very soon and helps to start loading them early.
<link rel="preload" as="script" href="path_of_important_script.js">