Delay loading offscreen images to improve mobile website performance


Images can have a big performance impact on your mobile website. Some of this impact can be alleviated by encoding images in the next generation file formats like WebP. But if a web page has 30 large images, then no matter how much compression next gen formats can provide, mobile browsers will still need to make 30 network calls and fetch data. And the more network calls are made over slow connection, the longer it will take for the web page to fully load or in the worst case render. Continue reading...

Don’t delay first contentful paint with your fancy font


Who doesn't love a fancy font to spice up otherwise repetitive website looks. I definitely do. And as you can see at the top of this page, I am using a font from Google Fonts library as the website logo. If you have not heard about Google Fonts before, I definitely recommend checking it out.

I will cover the most important performance and user experience aspects when loading custom fonts. Google Fonts will be used as a concrete example, but solutions can be generalised for other 3rd party services as well. Continue reading...

The irony of Apple homepage and Safari WebP support


I was analysing load time performance of the big tech mobile homepages and was quite surprised to see the results of As you can see from the screenshot above, homepage could be saving 2.25 seconds of load time if images were served in the next generation file formats. One of those widely supported formats is WebP, created and open-sourced by Google. Continue reading...

Google Analytics tracking code is async and you should update


I have been loading Google Analytics scripts async on my web properties since the async attribute was introduced. I honestly do not see any reason to prioritize analytics code versus my own content, because in the end the same metrics will be collected. Regardless if Google Analytics scripts are loaded sooner or later. Continue reading...

Reduce website load time by serving images in the next generation file formats


Images are the most easy to overlook when evaluating website load time performance. Large images seem like the necessity of modern web design. Something we cannot compromise on and just need to accept as a fixed cost of the creative vision. Who doesn't love a photo of a valley in the Amazon forest covering the entire background of a landing page. How else could you convey the simplicity, thoughtfulness and world changing impact of the software you hacked together over the weekend to manage todo items. Jokes aside, images are easy to overlook, but there are techniques to reduce image size and improve web page load performance without losing friends in the design department. One of which you will learn by the end of this article. Continue reading...

Newer posts
Older posts