Web performance for front-end developers

webperformance
Back

For Web developers, performance isn't optional now. Performance plays a major role in the success of any online venture. DoubleClick by Google found 53% of mobile site visits were abandoned if a page took longer than 3 seconds to load.

Amazon and others found that 100 milliseconds of latency is responsible for 1% in sales. Flipkart triples time-on-site with Progressive Web App, 40% higher re-engagement rate.

Pinterest increased search engine traffic and sign-ups by 15% when they reduced perceived wait times by 40% and many more examples are there.

Improving performance

In this post, I am jotting down some loading performance techniques helpful for Web developers to consider while building websites/web apps.

Setting up Performance Budget

A performance budget is a limit for pages which the team is not allowed to exceed. It could be a max JavaScript bundle size, total image weight, a specific load time (e.g Time-to-Interactive in under 5s on 3G/4G) or threshold on any number of other metrics. -- @addyosmani

Follow below link on how to set the performance budget.

Now let's look at top 3 performance essentials for web developers -

1. JavaScript

The JavaScript is the most expensive resource, see The Cost Of JavaScript In 2018 by @addyosmani

Strategies deliver JavaScript efficiently -

2. Images

Images often account for most of the downloaded bytes on a web page.

Below 4 things should be considered to deliver images efficiently

Techniques/guides -

Native image lazy-loading example -

<img src="celebration.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

3. Fonts

Minimise flash of fonts

Let's cover up additional approaches as well.

4. Converting your website/apps to PWAs

Progressive Web Apps are experiences that combine the best of the web and the best of apps. -- Google Web

Using these experiences we can build reliable, fast and engaging websites/web apps. Service workers enable a Progressive Web App to load instantly, regardless of the network state. The service worker is like a client-side proxy, allows to control the cache and how to respond to resource requests.

Read The Offline Cookbook for more on Offline experience for Web and Service worker.

Top 5 Service Worker Essentials for Web Developers

Here is a Youtube video from Chrome Dev Summit 2018.

5. Best rendering technique

6. Some other techniques

Tooling

Above are some most trusted tools/services most of the peoples using it.

In Summary

Client side perf improvements

Server side perf improvements

Hope that was helpful on your journey.

Mohan

MIT © Mohan Dere.
-