Web performance for a Frontend developer
Tags: react, webperf
Published: 2019-04-25 15:42:56

---
title: Web performance for a Frontend developer
published: true
description: 
tags: react, webperf
---


For Web developers, [performance](https://developers.google.com/web/fundamentals/performance/why-performance-matters/) isn't optional now. Performance plays a major role in the success of any online venture. [DoubleClick](https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/) 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](https://developers.google.com/web/fundamentals/performance/why-performance-matters/)

## Improving performance

In this post, I am jotting down some [loading performance](https://developers.google.com/web/fundamentals/performance/get-started/) techniques helpful for Web developers to consider while building websites/web apps. For rendering performance, please follow [this](https://developers.google.com/web/fundamentals/performance/rendering/) 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.

- [Start Performance Budgeting](https://addyosmani.com/blog/performance-budgets/) by [@addyosmani](https://mobile.twitter.com/addyosmani)
- [Setting and Calculating a Web Performance Budget](https://www.keycdn.com/blog/web-performance-budget#setting-a-web-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](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4) by [@addyosmani](https://mobile.twitter.com/addyosmani)

Strategies deliver JavaScript efficiently -

  - Consider implementing [code-splitting](https://webpack.js.org/guides/code-splitting/)
  - [Trim your JavaScript bundles](https://nolanlawson.com/2018/03/20/smaller-lodash-bundles-with-webpack-and-babel/)
  - [Prioritize resources with Preload, Preconnect, Prefetch](https://developers.google.com/web/fundamentals/performance/resource-prioritization)
  - [Reduce JavaScript Payloads with Tree Shaking](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/)
  - [Embrace performance budgets](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/)



###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.
 
- [images.guide](https://images.guide/)
- [Image Optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization)
- [SVG Will Save Us](https://svgontheweb.com/)
- [Lazy loading](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/)
-- [Native image lazy-loading](https://addyosmani.com/blog/lazy-loading/) is coming for the web.


Native image lazy-loading example -
 
```html
<img src="celebration.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
```
Note from Google -

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


###3. Fonts

> Minimise flash of fonts

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

- [Controlling Font Performance with font-display](https://developers.google.com/web/updates/2016/02/font-display)
- [`font-display` for the Masses](https://css-tricks.com/font-display-masses/)


Let's cover up additional approaches as well.


### 4. Converting your website/apps to [PWAs](https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/)

> 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](https://developers.google.com/web/fundamentals/primers/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](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/) for more on Offline experience for Web and Service worker.

**Top 5 Service Worker Essentials for Web Developers**

[Here](https://www.youtube.com/watch?v=IBpQlNeq5-o&index=3&list=PLNYkxOF6rcIDjlCx1PcphPpmf43aKOAdF&t=0s) is a Youtube video from Chrome Dev Summit 2018.


### 5. Best architecturing and rendering technique


- [Rendering on the Web](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)
- [The PRPL Pattern](https://developers.google.com/web/fundamentals/performance/prpl-pattern/)
- [Architect your App Shell](https://codelabs.developers.google.com/codelabs/your-first-pwapp/#2)


###6. Some other techniques

- [HTTP Caching](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching)
- [Optimizing Encoding](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer)


## Tooling

- [Chrome dev tool - Audit, Performance, Memory, JavaScript profiler, Coverage, Performance monitor, Network](https://developers.google.com/web/tools/chrome-devtools/)
- [Lighthouse](https://developers.google.com/web/tools/lighthouse/)
- [webpagetest](https://www.webpagetest.org/)
- [pagespeed](https://developers.google.com/speed/pagespeed/module/)



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


You can follow [Addy Osmani](https://mobile.twitter.com/addyosmani) 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](https://mobile.twitter.com/umaar) for his great work for gathering and sharing great [dev tool tips](https://umaar.com/dev-tips/).



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


Mohan