Optimising images for the web is an important part of any website’s design. Images that are not optimised can lead to slow loading times, reduced user engagement, and worse search engine rankings. Optimised images are smaller in size, meaning they take up less bandwidth and load faster. Additionally, they can also be optimised to be more SEO-friendly, helping to boost search engine rankings. The process of optimising images for the web includes compressing the file size, using the appropriate image format, and running it through an image optimiser. Doing this will ensure that the website’s images are optimised for the web, improving the user experience and search engine rankings.

Images don’t need to be huge!

When you take a photo using your fancy SLR or your Next Gen smartphone with 6 lenses and a billion megapixels you can find the size of the file gets pretty big, 5 – 20+ megabytes is not uncommon. If you put this image straight onto your website it is going to take a long time to load. Why? Well, there are three points we need to discuss when looking at image size.

The size of the image is called resolution, a large image size would be around 1024 pixels by 680 pixels, (They might come off your phone 2 or 3 times this size). But the truth is that the image doesn’t need to be that large to look great on your website,  

Image file types matter

Image file format is the second piece of the puzzle. The best image file format for the web is JPEG (Joint Photographic Experts Group) which is the most common and widely used image format for web purposes. JPEG files are smaller than PNG files. PNG, JPEG, and GIF each have their benefits. JPEG is great for most images with lots of colour and PNG for simple images. If you’re really looking for website speed you should convert them to a WebP format.

Image file size is the final piece of the puzzle, the file size of an image is the storage space it takes up on your website and affects how long it will take to load. The best websites deliver quality images that load fast, and the smaller your image. That’s where image compression comes in.

CTA – Looking for a Performance boost for your website? Our one off Website Boost is the solution for you.

What is Image compression? 

Image compression is a process of reducing the size of an image without noticeably reducing the image quality. It involves encoding schemes to reduce the amount of data used to represent the image, thus reducing the amount of space needed to store or transmit it. Image compression can be used for various purposes, such as reducing the file size for faster transmission, reducing the memory required for processing, or providing a better experience when displaying the images on a digital device. Techniques used for image compression include vector quantization, wavelet compression, and run-length encoding.

How to compress your images

At Lighthouse we recommend the Smush Plugin. It is a freemium plugin that will compress your images, it describes the process as “Smushing” the images. And at this point you can even set them to a WebP.

Load it up and click go! It’s very intuitive and super fast, that’s why it’s one of our Quick Wins.  

---

Have you tried this quick win?

Was it easy to follow? Did it take more than 5 minutes and has it had any impact (so far)? Share your thoughts and help other membership organisations improve their Website Performance.

There’s nothing worse than browsing a website and clicking an interesting link only to end your visit on the dreaded “404 page not found”. This is the result of broken links. There are a few reasons why links can become broken on your website, but they always have the same effect. Website visitors have a bad user experience and Search engines reduce the importance of your website in their rankings. 

A broken link is a broken user experience

When a user encounters a broken link or 404 page this is a broken step in their purchasing or decision making process. It seems unbelievable that many business websites allow potential customers to slip away due to poor website maintenance. Yet it happens every day.

The good news is finding and fixing broken links is very easy, and that’s why we have made it one of our Quick wins. 

Is your website slow or difficult to use? Our Web Performance Solution will give you the boost you need.

How to find and fix broken links on your website

This quick win comes in two parts. The first part is performing a check to find broken links. In the second part we look at fixing the broken links you found. So let’s start with finding broken links:

If you have setup your Google Search Console account, you will receive notifications automatically whenever a broken link is found on your website. But ideally you should find, and fix these broken links before Google finds them. That said, we definitely recommend having these reports automated.

Ok, to manually check your website for broken links you can select an important page on your website and click every link on the page. This is obviously a very slow process you can speed this up using a Broken link checker like ahrefs https://ahrefs.com/broken-link-checker which will crawl the whole website and return which links are broken.    

Fix broken website links 

Now you have identified broken links you need to fix them. The first step is to find out where the link should be going and what’s happened to that location? So click the link and verify it is broken, is there something wrong with the link format? A misspelt word or extraneous characters will break a link. Has the target page been moved to a different place? If so you will need to get the new location URL. If the original target of the link no longer exists you will need to redirect or update the link with an appropriate alternative link.

Once you have identified why its broken you have three choices to fix this broken website link   

1. Update link
2. Redirect the link
3. Remove the link

Update link

If the link was incorrect and you know where it should be going simple edit the content and update the link with the correct URL. If the content no longer exists you will need to choose a new target for this link. Sometimes choosing a website home page or category page is a good option, if no specific alternative is available.  

Redirect the link

If the target of the link is missing and might return later, you might consider redirecting the link using a redirect plugin or your tech team. Again you will need to choose a new target for this URL, so it might be easier to update the link.

Remove the link

Finally, if no alternative exists you can remove the link, but editing the content and removing the hyperlink from the text. And maybe editing the content itself.

---

Have you tried this quick win?

Was it easy to follow? Did it take more than 5 minutes and has it had any impact (so far)? Share your thoughts and help other membership organisations improve their SEO.

We’d like to take a moment to discuss mobile websites, but if you’re looking for the quick win. Click here to go straight to the Mobile test instructions. 

What’s different about Mobile websites?

The way a website appears on smartphones and tablets is different to a desktop, and the way they are used is different too. For example Mobile can be exactly that, used in transit. Noone is ever moving around when accessing a website on a desktop computer. But your website visitors using a mobile device could be on a rickety bus journey, holding shopping in the other hand, or in an area of patchy internet connection. A badly designed website can be a mere annoyance sitting at a desk with a PC, but for a mobile user it can destroy a potential customer’s willingness to ever visit your website again.   

There are many different types of device out there with many variations of screen size, resolution, in portrait and landscape and it’s difficult to design with all these variations in mind. But it does all boil to the concept of Responsive design. Bad design is amplified on mobile devices, so keeping things uncluttered and simple will lead to a good user experience on most devices and mean a user is less likely to miss-click or tap one a button that’s too close to another. 

Mobile Friendly design

The biggest sins when forgetting mobile users tend to be to do with the size of the screen and the ability of a website user to access the content.

Clickable elements displayed too close together 

There’s nothing worse than trying to click a link, or button that’s too small and clicking the wrong thing. This happens to even the most nimble fingered user, it’s very frustrating for mobile device users, and clearly not a good user experience.

Supporting only one image resolution

This is usually a technical setup issue. But displaying images or text that won’t resize to fit a mobile screen will lead to the worst visitor experience ever, with images and text that must be scrolled passed or around to access the site. Only the most die hard user will try to access a website in this state. 

Forgetting About the Search Bar

This is the safety net of websites that have a lot of content but the architecture is challenging or the navigation options are complex on a mobile device. A search bar can mean the difference between a member accessing the content they need or give up and you lose their attention and retention.

---

How to use Google’s Mobile-Friendly Test

Okay this Quick win is a lovely simple one to try but the interpretation may require a bit more knowledge, so let’s start with how to use Google’s Mobile-Friendly test tool.

Go to the test tool page: https://search.google.com/test/mobile-friendly

Enter the URL of the webpage you want to test and click go!

Mobile-friendly test results

Page is usable on mobile

The score you want to have is “Page is usable on mobile” this means your page has passed Congratulations your website is a great place to be for mobile device users, there may be a few minor issues which won’t show in. 

However, the following mobile friendly test results are also possible:

No data available 

Ok, that is not good, hopefully the tool is having an issue, otherwise you might need to contact your tech team. 

URL is not available to Google

Are you trying to test a page that isn’t published or public? Google can only read pages that it can access with its robot crawlers.  

Page isn’t usable on mobile

You have failed the test, there are one or more issues that mean your website is not Mobile friendly and will provide descriptions of the problems.

Did your website fail the Mobile-friendly test?

Don’t worry, Lighthouse can help you fix your mobile issues and you will notice the difference straight away. More visitors, and more conversions. 

---

Have you tried this quick win?

Was it easy to follow? Did it take more than 5 minutes and has it had any impact (so far)? Share your thoughts and help other membership organisations improve their Website Performance.

Is your website too slow? Then check your Core Web Vitals (CCVs)

A slow website is bad for users. The ideal website load time is 1-2 seconds, with 50% of visitors abandoning the website visit if pages take longer than 3 seconds to load. Trying to stand out online isn’t easy. The last thing you need is to have your customers abandon your website for your competitors’ faster website. Google aims for under half-a-second load time, (I know scary, right?) and so slow website are also likely to fall down the Google rankings. If you’re reading this post it means you’re now asking yourself one question…

How fast is my website?

Measuring your website speed is easy to do and very important. A very slow website load time will have your members pulling their hair out and can be a negative Google ranking factor. But understanding what page speed means is slightly more difficult. So let’s talk about Core Web Vitals (CCVs).

What are Core Web Vitals?

In June 2021 Google introduced the three performance metrics that can be used to measure a websites speed and which impact rankings, in an effort to encourage a better user experience on the web – These metrics are known as the Core Web Vitals (CCV’c) and include:

Largest Contentful Paint (LCP)

Tracks page loading speed. From the time your web browser starts to load until the main content of a web page is loaded and ready to go.

First Input Delay (FID)

Tracks the time it takes before someone interacts with the page. By interaction we talking about clicking links, scrolling the page, etc. 

Cumulative Layout Shift (CLS)

Tracks visual stability on the page. Ok, a slightly more complex one here. Have you ever started browsing content on a page, when suddenly the article you were reading jumps down the page and an advert appears in its place? This would cause a large CLS score.

Why should Membership Organisations care about CWV’s?

So, just to summarise: Core Web Vitals are important for SEO, as they can help give your website more recognition which improves your website’s visibility and ranking in browsers. It also contributes towards an improved user experience. 

For Membership organisations your website is supposed to be a hub for your members to connect with you and each other. A slow experience will drive your members away, ruining your member retention levels.

How to check your Core Web Vitals (CWV)

So now you know the metrics involved and how to evaluate your website speed, let me introduce you to the Google speed test tool called PageSpeed Insights found at  https://pagespeed.web.dev/ 

This is the fun and easy part. Type your website address into the tool and click Go!

Now to see if your website passes or fails the test.

Have you improved your CWVs? Did it have an impact on search, traffic or conversions?
Share your experience with other Membership Organisations