Images are fundamental to a content marketing strategy.
People only remember 10% of what they read or hear. Add pictures and this number goes up to 65%. Probably worth your while, right?
But you already know that. You’ve probably chosen tons of visually-appealing and relevant photos that will help drive traffic to your website. So what's the catch? Well, now your website takes a long time to load, which will probably discourage your target market to continue viewing. And when traffic is lessened, sales will be affected.
Your problem is not without a solution. In fact, here are 5 easy tips to help you speed up your image-heavy website without sacrificing those beautiful photos!
But before anything else…
There are different tools you can use to measure your website’s speed. One great (and free) tool is PageSpeed Insights by Google. Very user-friendly, it only asks for your website’s URL for it to analyze the contents and generate suggestions on how you can improve your speed.
Another useful tool is Pingdom which not only measures the speed of your website but also analyses and grades your website’s performance, giving you more insights on how to further improve your site.
Now, let's start improving your website!
Content Delivery Networks - or CDNs - are a set of caching or proxy servers that are distributed globally. A CDN caches the images on your website into its globally distributed networks so if your website server is in Australia, and your customer is from the US, the CDN sends your images from a node closest to your user in the US, instead of getting the image from your server in Australia. This process cuts down the load time of your website. When selecting your CDN, you have to make sure that it supports HTTP/2 to further speed up the loading time of your website.
Your images are important for your website so this tip doesn’t mean removing and sacrificing a big chunk of your images for a faster website loading time. However, there is a way for you to delay loading your images upfront without negatively impacting the user experience. The technique is called lazy loading.
This means your website will not be loading every single photo on your website as soon as the user visits. If you load all of the photos on your site, your images would compete for bandwidth, therefore affecting the speed of your website. In lazy loading, photos that are not immediately required or are not yet visible to the user will be loaded at a later time - when they scroll down the page, for example. The user may not even scroll to the very end of the page so you would save bandwidth by not loading those photos.
Additionally, you can always create buttons, badges, and other advanced visual elements to lessen the load on your website.
You probably know it by now, but because it's so important, we'll say it again. Make sure your website is mobile-friendly. The traffic that most websites receive doesn’t come from computers anymore. A huge percentage of traffic is generated from mobiles but, unfortunately, the data speeds are still much slower. So you have to make sure that you’ve developed and designed web experiences for mobile.
It may sound simple but resizing your images will do wonders for your website speed. It's not even that ‘complicated' (the main objection we hear) resizing using CSS or HTML. If you only need a 700x700px photos for your website and you have an image much larger than that, resize it before you even upload it to your browser. Doing this to all of your photos will drastically speed up the website loading time compared to when you use the original image size.
Aside from resizing your images, you have to make sure that they are in the right format for your website. The most common image formats currently used on the web are JPG, PNG, and GIF. There’s also a relatively new image format called WebP, and it combines the best features of the three formats. It's 30% smaller and is supported on 75% of the modern browsers. Given that WebP offers huge performance benefits, it's recommended that you use this format for your website. For browsers, however, that don't support WebP, you can still use the other formats.
Ensuring that your end-user will have a seamless experience on your website is important for you to capture their attention and show your value as a brand. These tips may be easy and simple but they will bring a huge difference to your traffic generation. Be sure to follow these tips for a faster website loading time!