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.

The Why?

Why Performance Matters

Improving performance

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

Let's get started.

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. --

FCP(First Contentful Paint) and TTI(Time To Interactive) are crucial.

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

Appropriate image format

Appropriate compression method

Appropriate for display size and density according to viewport/device(Picture element)

Load only necessary - lazy loaded

Please go through following guides for detailed info.

Native image lazy-loading example -



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

Note from Google -

Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which leads to faster downloads and less data consumption.

3. Fonts

Minimise flash of fonts

Please go through below links for a detailed explanation on font-display property and font performance.

Let's cover up additional approaches as well.

4. Converting your website/apps to PWAs

Progressive Web Apps are user experiences that have the reach of the web, and are Reliable, Fast and Engaging. -- Google Web

You can partially adopt PWA by using benefits of the service worker to cache a few resources like fonts, images, styles, scripts, etc. and then moving to other approaches to build full fledge PWA.

With PWA 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 architecturing and rendering technique

6. Some other techniques

Tooling

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

You can follow Addy Osmani on Twitter for the latest updates on web performance. He is an Engineering Manager at Google working on Chrome.

Also, I would like to mention Umar Hansa for his great work for gathering and sharing great dev tool tips.

Hope that was helpful on your journey. Please don't forgot to hit like button if you like it!

Mohan