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?
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 -
- Consider implementing code-splitting
- Trim your JavaScript bundles
- Prioritize resources with Preload, Preconnect, Prefetch
- Reduce JavaScript Payloads with Tree Shaking
- Embrace 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
- Image Optimization
- SVG Will Save Us
- Lazy loading -- Native image lazy-loading is coming for the web.
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
- Chrome dev tool - Audit, Performance, Memory, JavaScript profiler, Coverage, Performance monitor, Network
- Lighthouse
- webpagetest
- pagespeed
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
Top comments (10)
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.
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.
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.
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.
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.
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.
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).
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. :)
Yes Tari, That's correct.
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.
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.