Website Optimisation from Front-End

by Posted on

Website or WebApp Optimisation should be the aim for all frontend developers. Frontend developers are the main reason if any website is showing bad performance next comes the backend developers. Website can be optimised very well from frontend itself, there are many metrics you can improve.

Before proceeding further, I would request you to first find out the performance metrics of your website using chrome dev tool’s lighthouse tool (Inspect developer tool of chrome and run lighthouse tool). Let me run this tool for this site https://wmnitin.dev

As you can my website score is very good because I have optimised my website very well, although more optimisation is still needed.

Steps to Optimise a Website / WebApp

Let’s look at some methods that we recommend

Minification of static assets

All the frontend static assets like HTML, CSS, JS should be minified before deploying to server. You can use building tools like webpack, grunt etc to minify your files. Minification should includes comments removal, unused code removal, uglification of code, compression of assets. This will decrease the size of your static assets and website will load very fast for end users.

Image Optimisations

You should optimise all static images that are present in your assets. By optimisation of image means image compression & image lazy-loading. You should use latest webp image format which provides lossless compression of images on web. You can use webpack loader for compressing images & webpack dynamic import for lazy loading. If you are using Reactjs, you can use React Lazy & Suspense.

Lazy Loading

You should not load all the content at the initial time of loading of webpage, so you should do Lazing loading of assets which are not required on the first print of webpage. By using lazy loading you can improve onload time of your website.

Chunking of JS/CSS files

No need to make single build file for all static javascript/css resources, you should always try to break them & think about separating one single build file into multiple files.

Suppose your web application is having multiple routes then you can create routes base chunk files means each route will have different css & js file. You can use webpack dynamic import() to create multiple chunks according to your usecase.

Use CDN

CDN has many benefits which may help in improving your site load time & security. Some on the benefits of using CDN is:

  • Caching of static assets
  • Gzip of static resources
  • DDOS attack prevention
  • More uptime, as CDN can load your resource from cache if your site is down
  • Fast loading because of Low latency as your resource will load from nearest server
  • SSL / https addition
  • DNS, Page redirection rules, etc settings can be easily managed
  • Accurate Analytics

While looking for optimisation of your website, don’t forget to include CDN in your list, by this way you can achieve more optimisation features.