I could have titled this article “How to completely wreck your WordPress sites SEO performance and speed metrics by using the Slider Revolution Responsive WordPress Slider Plugin WYSIWYG Features”, but that would have been a bit long :-)

Even the current title “Optimized Images Load Faster and Consume Less Cellular Data : Lighthouse Report” is a bit on the long side for a title tag

Or maybe I should have gone with Slider Revolution WordPress Slider Plugin Review.

Google Chrome Lighthouse Audit Reports

Before I show a Lighthouse Audit Report with major issues, the screenshot below is the Lighthouse Report for this sites homepage, it’s difficult to get 100 out of 100 on all 5 audit tests, my homepage has three 100 out of 100, a 96 out of 100 and a 88 out of 100: these are awesome results.

Awesome Lighthouse Audit Report

Awesome Lighthouse Audit Report

Update 2020: The work to get better SEO performance results never ends, the above screenshot is from February 2018 see the improved Google Lighthouse results below from January 2020.

SEO Gold Mobile PageSpeed Results

SEO Gold Mobile PageSpeed Results

Troubleshoot Website Performance and Connection Issues

One of my Facebook friends (Patricia Newman a children’s book author : my wife and I have a Children’s Picture Book site) posted on Facebook asking people to check her website to see if they got any connection issues.

Most users reported no issues, but a few had a Forbidden Error.

This sort of user connection data tends to be hit and miss, and doesn’t indicate WHY there might be a problem, fortunately there’s an app (free SEO tools) for that.

My first step would be check the site out via the Google Chrome Lighthouse tool which gave AWFUL results!

Lighthouse Poor Performance SEO Results

Lighthouse Poor Performance SEO Results

If you aren’t familiar with Lighthouse the above is a particularly bad result. Also see other website speed test tools for different results/issues.

19 for Performance, that’s really BAD and could be a contributing factor to connection problems! Next step would be fix some of the performance issues, see if it fixes the connection problems.

Optimize Images So They Load Faster

I’ve not performed a full SEO performance audit on the site, just a quick look for the big issues like the Lighthouse reports optimized images load faster and consume less cellular data warning.

Lighthouse Optimized Images Load Faster Suggestion

Lighthouse Optimized Images Load Faster Suggestion

The largest image is 1.3MB in size and is associated with a WordPress image slider feature, BUT a quick look through the 6 featured slider posts and I didn’t see that image?

The image slider used is the “Slider Revolution Responsive WordPress Slider Plugin”, in the source code are HTML comments like:

<!-- START REVOLUTION SLIDER 5.4.6.3.1 fullwidth mode -->

Slider Revolution Responsive WordPress Slider Plugin

I wasn’t familiar with the Slider Revolution Responsive WordPress Slider Plugin, but a Google search later I found it for sale for $25 on Code Canyon and it’s had almost 1/4 million sales and apparently powers 2.5 million sites! That’s a lot of users. v5.4.* is the newest version, so any performance issues are with recent versions: it’s February 22nd 2018 as I write this.

Slider Revolution Responsive WordPress Slider Plugin

Slider Revolution Responsive WordPress Slider Plugin

From a feature perspective the Slider Revolution Plugin looks advanced (I’ve NOT tested it) with WYSIWYG (what you see is what you get) features** and lots of options.

** Before using image sliders be aware research indicates users don’t click past the first image slide and visitors tend to be banner blind (most users ignore them): have YOU ever clicked through an image slider and visited a link? Also consider we are moving into a mobile first world, is this the sort of JavaScript and image heavy feature a user on a tiny screen with limited bandwidth wants, are there better solutions?

This sort of flashy website feature is what site owners add believing visitors will like their site more. Reality is most visitors ignore the flashy stuff and scroll to the content.

Slider Plugin Images Are NOT Responsive

Anyway, after a little head scratching and searching through the HTML source code I realized the huge image is loaded by the slider plugin as a thumbnail!

This is the relevant HTML source code:

<img src="http://www.patriciamnewman.com/wp-content/uploads/2017/08/Annie-Crawley-Breeding-Facility-1-7542.jpg" alt="Photo credit: Annie Crawley" data-ww="284px" data-hh="189px" width="1600" height="1067" data-no-retina>

Note the HTML image Width is 1600px and the height is 1067px (this is the image size loaded by a browser AND Google), but the slider plugin uses JavaScript to set the width (via data-ww=”284px”) and height (via data-hh=”189px”) to thumbnail sizes: this thumbnail image doesn’t exist, it’s the full 1600px by 1067px image scaled down to 248px by 189px and that’s a huge performance SEO NO!

Revolution Slider Images Are NOT Responsive

Revolution Slider Images Are NOT Responsive

This is what the image looks like to a visitor on a Desktop PC, the bottom left image is the 1.3MB image loaded in full! Performance SEO wise and usability wise this is AWFUL, that’s not mobile responsive, at least not what mobile responsive means to Google in 2018+.

Patricia’s homepage is loading around 7MBs of images for this slider feature, how is that mobile responsive on a mobile device having to download 7MBs of images for a slider feature! This will have a major impact on pagespeed which will have a major impact on mobile user bounce rates!

Users with JavaScript disabled get a blank space where the slider images would load, there’s no backup feature for those users, this is not a user friendly feature!

Blame the Webmaster or the Plugin Developer?

We could blame the the site owner for not uploading smaller images, but IMO this is a failing in the Slider Revolution Plugin features. The plugin developer should have coded the plugin to create the thumbnail and load the smaller image instead, not load and scale down the full size image!

Remember the plugin is called the “Slider Revolution Responsive WordPress Slider Plugin” (RESPONSIVE indicating mobile responsiveness) and is advertised as optimized for performance.

Revolution Slider is NOT Performance SEO Optimized

Revolution Slider is NOT Performance SEO Optimized

Optimized Performance

Good looks aren’t everything, so we made sure that
Slider Revolution also loads lightning fast!

  • Loaded core file size automatically scales with used features
  • Intelligent Lazy Loading options
  • SEO Optimization
  • Monitor and optimize all aspects of your sliders
  • Advanced Debugging Options

How to Solve the Optimized Images Load Faster and Consume Less Cellular Data Warning?

Since visitors tend to ignore image sliders the easiest AND best solution is dump the WordPress Slider Plugin and add one header type image in it’s place. It will look almost the same minus the flashy image slider feature.

If this is a must have feature I’d suggest.

1. Limit the number of posts added. Right now it’s 6 posts, would the best 3 featured posts be just as ignorable by visitors?

2. If using the Revolution Slider Layers feature (not used this plugin, but think that’s how multiple images are loaded for one post), limit the number of layers and make sure any images are resized BEFORE uploading them. If you want a 300px wide thumbnail image, upload a 300px wide thumbnail image.

3. Use an Image Optimization plugin like EWWW Image Optimizer which will optimize images uploaded via the WordPress media uploader. A plugin like EWWW won’t create the thumbnails, but at least the large 1600px wide image would have been reduced in size a bit. I optimize images through GIMP before uploading, EWWW is still able to scrape a further 3% to 10% saving on the original image and even more on the different image sizes created by WordPress.

Update 2020: In 2020 I convert jpg images to webp images on the fly via a WordPress plugin (WebP Express) which are even smaller than the best optimized jpgs.

4. Consider using a Lazyload plugin like Rocket LazyLoad: no idea it it’s compatible with the slider plugin, only way to know is to test. I recently updated my WordPress SEO theme (what I use on this site) to work better with the Rocket LazyLoad plugin, now all images are LazyLoaded and Lighthouse gives this site awesome audit results.

5. Use a WordPress caching plugin like W3 Total Cache and set it to have a Browser Cache, minimize and combine CSS/JavaScript files etc…

Good image optimization takes planning starting BEFORE we upload the image via WordPress. Think about what the image will be used for, if an image will ONLY be used as a 300px wide thumbnail or a small 200px wide buy now button, create an image that’s the correct width BEFORE uploading to WordPress.

David Law

*
David Law : Technical SEO Expert with 20+ years Online Business, SEO, Search Engine Marketing and Social Media Marketing experience... Creator of multiple WordPress SEO Themes and SEO Plugins. Interests: wildlife, walking, environmental issues, politics, economics, journalism, consumer rights.

Website - SEO Gold Services