loading...

Web performance for a Frontend developer

mohandere profile image Mohan Dere Updated on ・4 min read

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

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

Discussion

pic
Editor guide
Collapse
sbadhwar profile image
SAURABH BADHWAR

Thanks Mohan for sharing some great insights into the web performance. It is often one of the places which is more commonly overlooked in a lot of projects while it has far reaching consequences on where the project will be successful or not.
Beyond the points you have mentioned, one of the other common issues I have seen in quite some application frontends is the excessive use of animations on the DOM elements to add more visual aspect.
Though this adds to the added eye-candy, it also triggers frequent recalculations of the layout in the browser, again impacting the user where they face input lags while the browser is recalculating the layout. This is something I really wish also comes into picture and gets optimized.

Collapse
mohandere profile image
Mohan Dere Author

Hi Saurabh,

Thanks for mentioning the cost of heavy animations. They can cause extra overheads on the main thread thus can lead to bad UX.

Collapse
oathkeeper profile image
Divyesh Parmar

One of my senior also mentioned that Images should be served in ".webp" to optimize images for fast loading.
Bundle files should be served inn gZype format to optimize js-files for fast loading.

Need to make PWA (Progressive Web App), to cache JS-files to load faster from 2nd time refresh.

But I'm not sure that everyone should go to the PWA path of development.

Collapse
mohandere profile image
Mohan Dere Author

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.

Well, peoples 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.

Collapse
oathkeeper profile image
Divyesh Parmar

I am still in learning may I know what are other approaches, and also from my little experience I always feel that performance of a site with simple HTML, JS, CSS is way better than when we create them in any JavaScript framework.

Collapse
borisschapira profile image
Boris Schapira

Hi Mohan,

TTI(Time To Interactive) as a performance budget is a tricky issue because the metric is neither simple to evaluate nor easy to act upon, making its usage very complicated when discussion web performance with different web actors.

– Our TTI is over budget!

– What's TTI?

– …

– Do you know what made it exceed the budget ?

– …

– What corrective measures can we apply?

– …

I wrote a piece on it (available on dev.to) and deeply recommend RUM metrics instead (like the distribution of First Input Delay) or Custom Metrics (for Synthetic Monitoring).

Collapse
tarialfaro profile image
Tari R. Alfaro

Says Google, when their article takes almost 10 seconds to load. Yes I am using a mobile connection. And their page is nearly 2 MB big.

Removing ads and trackers would definitely increase the performance. :)

Collapse
mohandere profile image
Mohan Dere Author

Yes Tari, That's correct.

Collapse
xngwng profile image
Xing Wang

Yes, this article seems to focus on the "loading" performance of the website.

There is whole another bugs on how to keep your code itself performant, so it doesn't feel sluggish as you use it.

Collapse
mohandere profile image
Mohan Dere Author

Yes, that's about rendering performance. The goal is to remove render blocking code bloats and reduce overheads of main thread while first contentful paint. This can be achieved by setting and achieving performance budget.