Technologies and standards powering the web are evolving fast, allowing us to do more with less and to achieve stunning user experience and performance with minimal investment of time and resources. If you are starting a new project today, you can leverage such great tools as Gatsby and Next backed by a headless CMS to build blazing fast static or server-side rendered web properties, optimized for the contemporary Internet. Alas ditching your current battle-tested code written in PHP, Python or Ruby and switching to an entirely different Node-based stack is a luxury not every product can afford. Besides, while the idea of ditching and switching seems so tempting, deep inside you know that each new tool is bound to bring new pains and headaches.

So, what can we realistically do to improve Web Vitals of our legacy apps? How can we plan and iterate without overwhelming our teams with a full-blown rewrite at the expense of other business-critical features? How can we stay abreast with modern web, while utilizing server-side technologies we are already married to?

Let me share some insights from my own journey and walk you through some of the steps you can take to boost your Lighthouse score and improve manageability and performance of your client-facing applications.

Get up to speed

Everything you think you knew about the web is probably outdated. State of the art technologies that were the talk of the town a year ago are now obsolete. W3C proposals you have never heard of are now supported by all major browsers. The pace of web-standardization and adoption of these new standards by rendering engines is mindblowing.

Before you start optimizing, you should understand the direction, in which the web is heading and what you need to do to keep up. web.dev is a great resource that will get you started on what you should strive to achieve.

Modular Web

ES6 is now natively supported by almost all browsers (aside from a few black sheep that we should collectively ignore to avoid another IE9 situation). Combined with dynamic imports this makes bundling in its classical sense counterproductive. The bundler no longer needs to aggregate your assets into large files that can be loaded with a single request; a bundle is now a loader that can smartly resolve your dependency graph and load individual modules when they are needed. The bundlers are evolving: Webpack 5 is out with a promise of better bundle optimization, caching strategies and module federation; Rollup with its native ES6 support makes bundling simpler and more intuitive; Parcel with its no-configuration build approach offers a simpler alternative without mind-boggling chain of loaders.

#bundler #core-web-vitals #front-end-development #javascript-tips #lighthouse