Make Better Progressive Images Loading with AntiModerate
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!
Read Also: 9 WordPress Plugins to Improve Images Performance
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.
With only a few lines of code, AntiModerate should be a no-brainer to get running on any page.
The post Make Better Progressive Images Loading with AntiModerate appeared first on Hongkiat.