Web performance for front-end developers
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.
In this post, I am jotting down some loading performance techniques helpful for Web developers to consider while building websites/web apps.
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
- Load only necessary - lazy loaded
- 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>
Minimise flash of fonts
Let's cover up additional approaches as well.
Progressive Web Apps are experiences that combine the best of the web and the best of apps. -- Google Web
Using these experiences 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.
Client side perf improvements
- Js is the render blocking resource so reduce js / reduce main thread work
- Reduce network requests
- Uglify scripts
- Do code splitting
- Load scripts before body close
- Reduce image sizes
- Implement lazy loading for images/scripts/all resources
- Use CSS Sprites
- Inline images/data images
- Put Stylesheets at the Top
- Use Preload, Preconnect, Prefetch
Server side perf improvements
- Use better compression for resources like brotli
- Use fast servers - memory and cpus
- Use a Content Delivery Network
- Add an Expires or a Cache-Control Header/Configure ETags
- Reduce DNS Lookups/Avoid Redirects
- Use http/2
Hope that was helpful on your journey.
MohanMIT © Mohan Dere.