Hands-on SEO & Image Optimisation with Cloudinary
With mobile-first indexing by Googlebot announced in 2016 and (almost) fully rolled out, many websites have noticed their Google page-speed insights scores being hit significantly.
Having a low page-speed insights score will indirectly have a negative effect on your SEO, and drop your page rankings down on Google search.
Many sites are image heavy, and this can cause issues with page-load speeds (unless you’re using asynchronous javascript/AJAX pages - which is a whole different kettle of fish)
We have begun using Cloudinary as an ideal solution for image-heavy websites, and we’ve found Cloudinary pricing very reasonable.
Cloudinary is also brilliant at serving the right image for each device, in terms of size, and next-gen formats such as WebP or JPEG XR.
Cloudinary alternatives
We compared Cloudinary to AWS S3, imgix, imagekit, cloudflare, cloudfront, akamai, google cloud storage, firebase, filestack, sirv, azure, uploadcare, fastly and cloud image - and it came out on top - for us - for the long-term benefits it brings.
Cloudinary example sites
To see it in action - Take a look at our case study for The Watercolour World or visit their Algolia & Cloudinary powered watercolour search page here.
We’ve built this entire site, with an image database on Azure, and without uploading a single image to the Cloudinary server manually.
It’s seamless, and one of our fastest ever sites, despite the vast (and growing) size of the Drupal database.
Imagine you own an online gallery website with 100s, or like The Watercolour World - thousands upon thousands of high-quality images.
What do you think is more important, image quality or page-load speed?
Let’s think about both in a bit more detail…
Reduce image quality (without Cloudinary)
Without a doubt, image quality is a huge part of the user experience on portfolio websites.
Hugely reducing image quality just to speed up page load times is not a smart trade-off. You’ll just annoy your visitors. So don’t do this - you don’t have to.
Reducing your pagespeed insights score (without Cloudinary)
The way Google rates your page-speed is a big deal for your search rankings, regardless of other SEO efforts you might carry out.
Google’s page-speed insights tool is now much harsher when giving your pages a loading score, especially on mobile devices.
How long your pages take to load also affects user experience.
More than half of the internet users expect a page to load in about 2 seconds.
More than 50% of people will leave a website if it takes more than 3 seconds to load on a 3G connection.
Think about how much traffic you might be losing cause your website takes a long time to load!
Technical Director Jack (Left) and Creative Director Alex (Right)
Over the past year or so, as mobile-first indexing was rolled out, our clients noticed significant changes in their page-speed insights scores.
For most pages, mobile page loading score dropped from ~90/100 to ~15/100.
It didn’t take us long to find a solution to this though!
Our Cloudinary review
With Cloudinary, in short, you no longer have to choose between image quality and page-speed!
Before diving into details it’s worth knowing what Cloudinary is.
Cloudinary allows you to store, manage and transform images, on the fly.
Reducing their size by up to 85% without reducing their quality.
Implementing Cloudinary does not require a major import.
We all know how painful (and time-consuming) it would be to download all images from your site and manually move and transform them!
Cloudinary CDN & Hosting
Using Cloudinary will reduce a great amount of development work, previously required to embed images to your site - as it has a built in CMS
It is relatively easy to integrate with any content management system such as Wordpress, Drupal & Joomla
Cloudinary has powerful transformation and customisation features, meaning you can watermark, copyright, blur, anonymise, centre and otherwise enhance your images as-and-when they’re accessed.
You can make these transformations conditional too, based on specific image attributes.
Images are hosted and served from the Cloudinary CDN which means they’re downloaded FAST.
Cloudinary automatically transforms images so they’re responsive for various screen sizes.
From 1 high-resolution image Cloudinary can give you countless transformed versions, ideal for individual usage across all platforms.
There are a number of add-ons available for your Cloudinary account to maximise your experience - and in order to optimise your Cloudinary SEO (talk to us about this)
As a result of using Cloudinary, your website will load faster, (much, much faster!) providing a better user experience
Cloudinary image security
Cloudinary gives you full control of your images, and locks down the domains which can request new transformations
Cloudinary automatically creates backup of all your resources (a major selling point for many)
Cloudinary accounts can have multiple users with hierarchical permissions
Cloudinary supports two-factor authentication (for extra security, which we’d always recommend)
Our experience with Cloudinary
We started migrating some of our clients to Cloudinary late last year to make sure they get the most value from the sites we built for them.
Most of our sites are hosted on Pantheon.
The step we took was migration of the images across the sites from Pantheon image hosting to Cloudinary.
Don’t freak out if your site is very image heavy, it won’t take months to do the migration.
Our Cloudinary migration method means that your media library remains in place, and Cloudinary’s CDN picks them up dynamically, as they’re requested by your website visitors. This effectively creates a seamless Cloudinary migration.
The way it works is - once a user clicks on the image on your site it will be instantly transformed, uploaded and hosted from Cloudinary CDN.
This takes a moment the first time, and half that moment every time after that. It is insanely quick.
If you like stats, here are some numbers we managed to achieve for our clients:
Page size pre-Cloudinary - 2600 KB
Page size using Cloudinary - 437 KB
Page loading speed on Desktop pre-Cloudinary - 3.54 seconds
Page loading speed on Desktop using Cloudinary - 2.19 seconds
Page loading speed on 3G pre-Cloudinary - 20 seconds
Page loading speed on 3G using Cloudinary - 8 seconds
You can see that Cloudinary hosting mostly benefits mobile page-speed, although it is worth doing for all-devices in our professional opinion.
In fact, your total page size can be reduced by up to 83%, and increase your page-speed by more than 50% on mobile.
Gifs, Videos, MP4, MP3 as well as images!? - what can’t Cloudinary do?
Our SEO advice to our clients used to be - avoid using gifs on your site at all times. Cloudinary transformed (pun intended) the way we use gifs.
Cloudinary reduced the size of some client gifs by 96% sounds impossible? See it yourself in this cheeky codepen - https://codepen.io/3bjb/full/jQZqzy/
Convinced? You should be! Contact our team for a professional advice on how Cloudinary could help you. Let’s preserve your image quality and rocket your page-speed and help your site climb search-rankings together!
