Hands-on SEO & Image Optimisation with Cloudinary
Cloudinary is a software that allows you to store, manage and transform images. It is so powerful, it can transform images on the fly reducing their size by up to 85% without reducing their quality. One of the best things about Cloudinary is that it can transform images on the fly. Having a lot of images on your website you no longer have to choose between image quality and page loading speed!
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!
Page Speed Optimisation
Reducing the time it takes to load a page on your website, without altering the content, is called page speed optimisation. Faster pages rank higher in Google's search results pages, and convert more customers. Both of these are known facts, well documented by Google, Walmart, the BBC, and Amazon.
Reducing the time it takes to load a page on your website, without altering the content, is called page speed optimisation.
Faster pages rank higher in Google search results, and convert more customers. Both of these are known facts, well documented by Google, Walmart, the BBC, and Amazon.
Begin improving website loading speed
PageSpeed Insights is a free tool powered by Google. It tests how long it takes to load your site on a typical desktop and mobile device.
Type a website URL into the given field to see an instant page speed and website optimisation score out of 100. You should be aiming for a score of 80 at least.
The PageSpeed Insights tool will also give you suggestions on which elements of your page needs optimisation.
Why is page speed important?
Having a slow website adds risk to your online business. Long load times have a negative effect on user engagement.
A Google study conducted in 2016 aggregated masses of Google Analytics data and found that half of mobile users leave a page if it takes more than 3 seconds to load.
Even if the other half of those mobile users decide to stay on your (poorly optimised) site, they will be less likely to return in the future.
This factors in to an increased bounce rate (another Google ranking factor) and lower average time spent on the page (aka 'dwell time') will then lead to further decreased search engine rankings.
Long loading pages also have a negative impact on indexation. It is difficult for the search engines to crawl a website that takes a while to load.
If the pages can’t be accessed quickly and simply by search engines such as Google, then you're likely to hit whats referred in SEO circles as your Google 'crawl budget'.
This results in fewer of your pages being refreshed in the index, which means it takes Google longer to find your newest and best content. Indirectly this means, once again, lower rankings in Google search.
Consider the opposite. Optimising page speed brings you many benefits. If your pages load faster, Googlebot will index more pages. If you have a lot of content on your website (10,000s of pages for example) then it is particularly important to get Google to index as many pages as possible!
The key to success is influenced by two factors:
Getting GoogleBot to crawl more pages on your website
Reducing the size of the pages that GoogleBot visits
Those two factors could be influenced by optimising your website loading time. As mentioned before, increasing the number of pages crawled by GoogleBot potentially contributes to the increase in your website traffic.
Why use a website speed optimisation service?
If it is still hard to imagine what effect long loading pages have on your site, let's get into stats. According to 2018 statistics, every second counts. A 1-second delay in loading time leads to:
16% decrease in customer satisfaction
7% decline in conversions
11% fewer page views
This might not sound like a lot, but don’t forget that it represents only a second of delay in loading time and the numbers double with every extra second a page takes to open.
In addition, slow loading pages lead to decreased conversion rates. People prefer to purchase goods from those sites that load faster.
Page speed optimisation is even more important for mobile devices. Phones have less memory, limited battery life, lower processing power and often are not on wifi. In fact, 75% of global mobile users are on 2G or 3G connections only. Mobile web latency will be therefore be much higher than desktop or tablet, generally speaking.
Google crawls websites as if it was using a phone these days, so you need to seriously consider how mobile versions of your pages are appearing.
It is easy enough to test page speed on your phone right now:
disconnect from wifi
load up and browse your website
note which pages take longest
Keep an eye out for high-resolution images or large files such as gifs which will increase the delay, and size of your page even further.
note: It is good practice to load the most useful content first. This is usually the text of an article, followed by images, and then complex features. Does your website load elements in that order? Does the page jump around while it loads? These are important aspects in website health according to Google.
How to make web pages load faster - a to do list
Minimise HTTP requests. Separate HTTP requests are made for different features present on your site. Consider minimising the number of those requests by deleting unnecessary files to get your pages to load faster.
Decrease the number of files on your site. Combine them effectively. Have a look through your JavaScript, CSS, and HTML. Avoid using messy code. It is better to remove useless code, spacing, and formatting. As a general rule, the fewer elements you have on the site, the fewer HTTP requests will be made.
Optimise JavaScript and CSS loading. Make scripts load asynchronously, meaning that several can load simultaneously. If different elements on your page load in parallel page loading time will decrease.
Defer loading of JavaScript. It is advisable to get your website’s main content loading prior to any large files. This can crudely be done by putting css and html early on in your webpage, and javascript later on.
Minimise the server response time. In addition to the time it takes to load the actual content of the page, there is also a certain amount of time required for the server to respond and send the first bits of data. When an HTTP request is sent from a browser, a DNS lookup is performed to locate the server, the request is sent to the server, the server processes the request, and finally a response is sent back to the browser. While there could be some factors that you have no control over - such as a user having poor internet connection - you can still influence server configuration and dynamic content creation to improve response times on the server side. Using a CDN could really help minimise the time required for traffic to flow between the browser and the server (see point 10 below).
Decrease the time taken for a browser to do the DNS lookup. In simpler words, a DNS lookup is a process of your browser translating the URL of the site into the IP address associated with it. This issue could be resolved by switching to a faster DNS provider.
Upgrade your hosting. If you want to get more traffic to your website, it is advisable to abandon shared hosting and consider choosing between VPS hosting or a dedicated server. This can reduce the time it takes to serve packets of data to your visitors.
Compress files you’re using. Avoid using bulky images that reduce page speed loading time. Most images can be compressed without noticeably reducing their quality. Contact us to discuss this!
Enable caches, for between 7 to 30 days. Both browser and server cacheing can be utilised to greatly increase load times. Browser cacheing stores certain content in a user’s browser so that next time they visit a site they don’t have to download those assets again. Server cacheing saves the content of pages on the server so it can be easily retrieved the next time someone wants to view that page.
Use a content delivery network (CDN). If your website gets high levels of global traffic it is often a good idea to utilise a CDN. This will distribute your site’s assets to servers positioned all over the globe, decreasing the distance information has to travel from server to user, thereby reducing their page speed loading time.
Consider using 3rd party hosting for some content. If your website has a lot of multimedia content, such as videos and large files it is advised to use external hosting. Keeping those files on your main server can use a lot of resources, which could leading to latency and a poor user experience. The best practice would be to upload videos to a website like YouTube or Vimeo and then embed those into your site.
These are just some of the techniques you can use to improve your site’s load times. If you’d like to discuss any of these points further, or think there are other ways your site may be able to be optimised get in touch and we’ll happily discuss your specific scenario in greater detail.
A Squarespace SEO Agency
As an agency with 35+ Squarespace sites on our books, we've done conversion tracking, PPC landing pages, and SEO work all specific to Squarespace, and without any major challenges. Read on for a few practical tips for optimising your Squarespace site
Squarespace provides you with a number of tools to help you boost the ranking of your website through search engine optimisation (SEO).
As an agency with 35+ Squarespace sites on our books, we've done conversion tracking, PPC landing pages, and SEO work all specific to Squarespace, and without any major challenges.
Read on for a few practical tips for optimising your Squarespace site for search engines. If you're in the market for an SEO-specific agency with Squarespace experience then hit us up.
In fact, our SEO retainers for Squarespace are among our happiest clients as we consistently deliver higher YOY traffic growth for them.
Anyway, below are a few Squarespace SEO tips from us, and they're quite general given that our 35 Squarespace sites are all very different in both form and function.
Squarespace SEO optimisation tips
All your URLs should be clean and simple. You can edit this in the blogging and SEO sections of your site (which affects a large number of pages) or on an individual basis in the 'Options' tab on pages and your blog posts. They should be easy for humans to read and ideally contain your focus keyword. By going to the page settings whenever you create a new page and changing your URLs to an appropriate length and style, you can keep on top of your page URLs.
The description for each page should be customised. As well as the URL, it is accessed from the page settings. Remember that what you write in the description might be visible for users not only in search engines, but on your site, depending on the Squarespace template you've gone for. This makes some Squarespace templates less SEO friendly than others! Some pages will show your description in the banner (we have some custom code to hide this though, if you find this a chronic issue)
The content of your website should be structured and styled with the use of ‘headings’. Search engines use headings to distinguish between sections of content on a page, like the outline of a long essay. It is key for your website. Do not use headings for style purposes, as this can result in whole paragraphs being deemed a 'heading' even though it's just an introduction to a page. Try to use 'bold' or keep the heading sentences short if you need to use them for aesthetics. They should be primarily function over form. Proper use of headings also makes skim-reading your content much easier for your users.
Tags and/or categories added to your gallery images, products, and blog posts are real problems with Squarespace. Squarespace creates tag and category pages where relevant content is listed, but this is invisible in search engines as these pages are blocked by the Squarespace Robots.txt file (which you can't edit - annoyingly!). Don't despair - for effective SEO here, the best route forwards is to use Squarespace summary blocks. Create pages which WILL be indexed, and bring through your products/blogs/images by tag or category there.
For your images, you might want to consider adding ‘alt text’. ‘Alt text is the description of an image. It is particularly useful to the search engines as they cannot read images but can read the text; alt text tells search engines what the image is about, making it possible for the image to be included in the web search.
To achieve the goal of ranking higher in the web search, consider using the Squarespace blog feature. Use it to push news and information out, and to keep your site 'fresh'. The more recent quality content you have, the higher chance you have of being ranked highly by search engines. To get the most out of the blogging feature you should continuously and consistently add new content to your website. Don’t forget to structure it with the headings and add tags and/or categories too!
Squarespace automatically creates lighter versions of the website for mobile and other devices to speed up page loading. Search engines tend to prioritise sites that are compatible with all devices so this is a definite place where Squarespace wins!
While Squarespace covers all the technical aspects, it is quite easy to get carried away with all features available and a variety of different tasks that need to be done.
Here at 3B digital, we have extensive experience in working with Squarespace websites whether marketing microsites or just company websites. We created, have optimised and now maintain more than 35 Squarespace websites for our clients and would be happy to put our acquired knowledge into helping you boost your website ranking ASAP.
Search Engine Optimisation (SEO)
Search Engine Optimisation (SEO) is at the very centre of everything we do at 3B; if we don't launch a site with all of our SEO best practice it can render any future off-site work pretty worthless... so we do it!
3B Digital is a “technology-led” design house that is led by Search Engine Optimisation (SEO) considerations. This means that everything we do - from the Wireframing & Information Architecture process through to site launch - is governed by our on-site SEO best practice.
SEO can broadly be broken down into two areas, on site and off site work. Onsite SEO work covers all development processes that directly affect the content/structure of the website and its web pages (such as navigation, page titles, headings, etc). This onsite work is essential as it provides the foundations that all further SEO work is built upon - it is vital to get the on-site basics right.
Offsite SEO work covers all development processes that produce external links and content that refer back to, or reference any part of the website or its domain name (such as directories, social media, blogs, press releases, review sites, etc). This offsite work builds on the foundations laid by the previous onsite work, and can provide the greatest increase in ranking performance (usually upwards of 60% of the total SEO work), and thus ROI.
Before launch of any project, we run through a 45+ item process of best practice. This includes the provision of sitemaps.
These you will have seen on sites, to allow easy navigation to articles, but we go several steps further, offering a code-based XML sitemap direct to Google, which lists every article within your site. In very short order you should find that Google has indexed your pages and starts ranking them well.
We also prepare a Google News sitemap, with the hope that Google decide to include your content in their News search results.
VIDEO: Hugh Williams presents 3B's SEO Best Practice at the 2011 JandBeyond Joomla Conference.
View this page for information regarding Drupal SEO
Our search engine optimisation (SEO) services
