Blurred images on high density displays (Retina) or unnecessarily large images on small mobile screens are two extremes which can significantly hurt your website user experience and performance.

We have covered how to utilize next generation image formats to improve web page loading time previously. This time, let’s expand our knowledge of picture HTML element and how it can be used to serve different images based on device screen size. Continue reading...

Deferring offscreen images can help to reduce initial website size and improve time to interactive. Performance gains can be significant on mobile websites, where most of the web content is not visible initially due to smaller viewport size. Continue reading...

Web security topic is a slight tangent from mobile web performance, but I believe that security is an equally overlooked topic and deserves a mention. I hope you will learn one or two unexpected browser behaviors with security impact from this article and it will motivate you to learn more. You don’t have to treat this set of HTTP headers as a security checklist, the ultimate goal is to understand what tools are available to you and how to apply them. Continue reading...

Is your website, actually, a tool or a service which can provide value by performing tasks even when used offline? If not, then don’t waste time on progressive web apps. If you just want offline caching, stick with a simple Service Worker. Continue reading...

Google has released Web Vitals, an opinionated browser performance API wrapper to track essential metrics for a healthy site. It will be an evolving user-centric page speed metrics implemented across various Google tools for web developers. Web Vitals is a nudge for website owners to start measuring real user experience, instead of relying on synthetic tests like Lighthouse. Let’s see how to add Web Vitals to a website and start sending data to Google Analytics. Continue reading...