Skip to main content
CSS is fun and cool and I like it.
Article

Lazy Loading Gravatars in WordPress

Most WordPress themes show user Gravatars in the comment threads. It’s a way of showing an image with the user, as associated by the email address used. It’s a nice touch, and almost an expected design pattern these days.

Every one of those gravatars is an individual HTTP request though, like any other image. A comment thread with 50 comments means 50 HTTP requests, and they aren’t always particularly tiny files. Yeesh.

Let’s lazy load them.… Read article “Lazy Loading Gravatars in WordPress”

Article

Lazy-Loading Disqus Comments

Lately, I’ve been obsessed with optimizing performance through lazy-loading. Recently, I’ve written on how to lazy-load Google Maps and on how to lazy-load responsive Google Adsense. Now it’s time for Disqus, a service for embedding comments on your website. It’s a great service. It eliminates the headache of developing your own local commenting system, dealing with spam, etc. Recently, I’ve been working on implementing the widget in one of my projects.… Read article “Lazy-Loading Disqus Comments”

Article

Lazy Loading Responsive Adsense Ads

You’ve been hard at work optimizing your site. You’ve already done things like lazy-loading Google Maps and been wondering if there was anything else you could do. For example, is there anything we can do to improve the loading of ads? Good news, there is some things you can do. You can respect the user’s mobile data plan by loading ads only when they are likely to appear in the viewport zone. You can also serve ads in the right … Read article “Lazy Loading Responsive Adsense Ads”

Snippet

Lazy Loading Images

UPDATE: This is pretty old. If you’re looking to lazy load images these days, I’d recommend looking at:


Use a blank.gif as the src of images, and include the width and height of the final image.

<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152">
/* lazyload.js (c) Lorenzo Giuliani
 * MIT License (http://www.opensource.org/licenses/mit-license.html)
 *
 * expects a list of:  
 * 
Read article “Lazy Loading Images”