Drop Your Image Slider for Faster Load Times

Remove Image Sliders to Increase Page Load Speed

For years now the internet has been getting quicker. Sites are now able to provide features which would easily bog down browsers and drive away visitors a mere six to ten years ago. These upgrades give us potential, but also provide pitfalls. And in many cases, just because you can does not mean you should. Large image sliders are one potential trap.

I came to the internet in 1999 as a Flash ActionScript coder. Limited as it was, the language allowed me to provide interaction to clients which had never been available or even considered. It was great to make immersive experiences and navigation systems no other sites were using. As the client requests got more imaginative and complex, I started to notice their sites slowing down on load. While not knowing at the time, I was experiencing the diminishing return of features.

Since then, site optimization has become a field into itself. There are numerous load time to visitor patience stats out there. In 1996, the time frame was 10 seconds. Now, we are looking at 2 seconds or less. I find it interesting that despite better bandwidth and more rich content, people are not waiting more than 20% the time they would wait 18 years ago even though the experience is vastly superior and engaging.

The Need for Speed

With this need for speed demand on your site, why are so many sites clogging their pipes with multiple large images packed into image sliders? This seems counter productive and potentially dangerous to sites attempting to attract and retain visitors. Perhaps it is my early experience with Flash, but I have been trying to get clients not to use large image sliders on their sites. Some want them, and perhaps they make sense in certain instances. In general, they are only slowing down your site.

In our current web space, many visitors see these as advertisements, and not providing deeper content. Yup. All those glorious images hoping to lure clients deeper into your content are being ignored as advertising flap. While they might look cool and splashy, they might not be as effective as the trend would lead you to believe.

Further, all these lush images are big. Big images take time to load. Multiple images take even longer and all these need to be loaded into your browser ahead of time. All that extra time might be just enough that your visitor opts to click away and then never sees your beautiful images, much less your meaningful content. That is simply not good.

Back to Bland Text Only Pages?

With all this, it might sound like I am advocating bland, imageless sites. That is not true. I think there is a place for images on sites. If you have a proven and popular site, for example, you could get away with a longer loading time as your material has already been vetted in the eyes of the community. Or perhaps you are making a portfolio site. Maybe you are an artist, and your page is intended to be a platform to showcase your work. These are perfectly fine reasons to have bigger or more images and a slightly longer load time.

In those cases, however, there is still likely a better approach than an image slider. And you DO still need to mind those site speeds.

How about a well optimized hero graphic? This can be a larger image with, ideally, HTML text over the top displaying your message. This provides you a space to make your page sexier and set a tone, but not unduly delaying the content. Alternately, consider using a smaller graphic, perhaps a square. This provides an additional content space opposite the image for you to bring your messages higher up the page. The more content you can get in front of your viewer before they need to scroll, the easier it is to hook them.

But my Client REALLY Wants This

Some times you will be faced with a client who will hear none of your logic. They know their competition has these sliders, so they needone as well. In cases where you cannot convince someone of your logic, there are still some tools you can leverage.

ASYCHRONOUS LOADING
If you are comfortable with javascript and have the ability to add it to the site, loading images with an asynchronously could be a good approach. This solution can be a good workaround for keeping the page loading quicker and supplying a client request. While this certainly helps, it is not something everyone can implement and might be challenging for the client to update, though admittedly it could be good for recurring revenue.

PAGE CACHE
Cache could also be leveraged. This allows you to keep loaded images stored in the visitors browser so repeated images are called, not provided fresh from the server on every page. There are many ways to use caching on a page. Often times implementation is determined by your server. If you use WordPress, though, you ought to check out WP Super Cache as a definite plug-in to include. Essentially, this creates static files from your dynamic WordPress pages, eliminating the need to run the somewhat more intensive WordPress PHP scripts.

Run Lean and Clean

The modern web is an exciting and powerful space. Do not waste yours by simply jumping onto the latest fad.

This entry was inspired by a very interesting presentation put on by Troy Dean [ @troydean ] of WP Elevation, a resource for WordPress Consultants, in conjunction with Bidsketch, an online proposal solution. To view the presentation and learn how to receive a free copy of the e-book “16 Simple Marketing Tactics to Get More Clients” by Bidsketch, watch the webinar. No sign-ups, no passwords. Absolutely free.

Comments (1)

Leave a Comment