Make Better Progressive Images Loading with AntiModerate

By Jake Rocheleau. in Toolkit. Updated on June 26, 2018.

The AntiModerate script may not sound like much. But it’s one of the best JS scripts you can run to improve performance on a larger page and maintain a strong user experience.

With this free plugin, you can load images when they appear in view and reduce your total page size.

This way the entire page can load first with small placeholders for images. Then your visitors browse naturally without waiting for every asset to load — always a good thing from the user’s perspective!

Here’s how this works: you add the AntiModerate plugin into your page along with the StackBlur.js script.

AntiModerate pulls image dimensions and forces all img tags into a fixed size on the page. These pre-loaded images are pushed through StackBlur.js which drastically reduces the total preview file size, thus loading the page a whole lot sooner.

Once these smaller images are in place then AntiModerate loads the full-size images in the background. Each blurry photo is then replaced with the regular photo once it’s finished downloading. Easy!

This saves a bunch of time waiting for images and it helps your page load much quicker. It’s a huge benefit to users since they can start consuming content sooner, and it benefits your SERP rankings since Google cares a lot about page speed.

You can install the library directly with npm or Bower, or by pulling the script through GitHub.

This only requires a few lines of JavaScript and it’s sure to help improve your page loads. Have a peek at the GitHub repo and scroll down to the setup guide to get started.

With only a few lines of code, AntiModerate should be a no-brainer to get running on any page.

Not to mention this runs on pure JavaScript so it doesn’t require any dependencies like jQuery to get working.