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.
Let's get started.
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 -
- Consider implementing code-splitting
- Prioritize resources with Preload, Preconnect, Prefetch
- Embrace performance budgets
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.
- 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.
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.
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.
Hope that was helpful on your journey. Please don't forgot to hit like button if you like it!