Speed. We all want it. Whether it’s with our cars, our businesses or our lives in general, we want to things to happen, and we want them to happen fast. We’re an impatient bunch!
It’s important that your website operates at high speed too. But why?
Get Our Free Logo Design Checklist
Your logo design is crucial to your business. Get our free logo design checklist now to make sure you get it right.
Here’s the deal:
Your website’s page speed can have a massive impact on your site’s visitors and your Google rank. According to Moz, “Many people have found that faster pages both rank and convert better.”
We live in a digital and ever-changing World and the demand for information at high speed is increasing every day. People are no longer prepared to wait.
Gone are the days of the dial-up modem, we live in a World of instant knowledge and access. We live in a world where load time matters, where website load speeds could mean the difference between getting that sale and losing that customer forever.
There has been a constant ongoing debate about page speed being an official Google ranking factor. As yet, it doesn’t appear that Google has made it official, but they do offer a Page Speed tool on their website.
Search Engine Watch also recently reported that Google’s next mobile-friendly update would include page speed.
A sign of things to come perhaps?
More importantly than striving for Google ranking success, though, is the effect that a slow loading website can have on your visitors.
As I said earlier, we live in an age of instant access. If people have to wait for your site to load slowly, they’ll hit the back button and find a competitor in an instant. And that’s the sound of your bounce rate increasing.
Google ranking is certainly important, but serving your customers a better website experience will matter much more in the long run.
So, how do you speed up your website?
Here are some steps that you can follow to bring your website up to speed:
Check Your Load Time
The first thing to do is to head over to Google and check your page speed. The tool will provide a handy checklist of High Priority, Medium Priority, and Low Priority issues and show you how to fix them.
First, check the speed of your home page. Then, run the tool on inner pages.
Don’t forget that you can switch between Mobile and Desktop mode using the tabs at the top.
Let’s run over some of the most common causes of a slow website, and how you can speed your website up:
Reduce The Size of Images
The first thing that can have a negative effect on your website’s speed is the load time of your images. Big images can kill your speed.
However, it’s becoming more and more common to have big “hero” sections at the top of your website’s home page. Images are everywhere in today’s web design world. So, accepting that your website will use imagery, how do we optimise them for speed success?
The first thing we need to do is find the large images that we need to optimise.
There are several ways to do this:
Use Common Sense
Have a look at your website on some devices and keep a watchful eye on your images.
Are there any that take longer than others to appear? If so, note them down, you’ve identified a culprit!
Check the WordPress Media Library
If your site is using a Content Management System such as WordPress, check your Media Library. There are things you can do to speed up WordPress, but let’s start with optimising your images first.
You can filter for images using the dropdown menu at the top. When you click on each image, you can see its vital information, ranging from its dimensions (1000 x 500) and its file size (50kb).
But how do we know what’s too big?
Here’s a rough guide:
Images For Blog Posts
Images for your blog posts probably don’t need to be much larger than 1200px wide or 100kb in size, and even that’s at the very maximum.
Hero Images and Banners
Large hero images are more than likely closer to 2000px wide and around 200-300kb in size. Again, that’s at the top end.
If we can work on these sizes to bring them down at all, it will make for a better visitor experience. Your server will thank you for this act of kindness.
Using Google Image Search
You can also use Google’s Image Search to help find large images on your website.
- Head over to Google Image Search
- Search your site using the keyword “site:yourdomain.com.”
- Shut off safe search, so the search brings back all of the images from your website
- Filter your images by size. Starting somewhere around the 600px mark is good practice.
- Begin working your way through the results and see if you can spot any images that are larger than they should be.
The Google Image Search method can be a little confusing at first.
However, Neil Patel over at Quicksprout has put together this handy guide with diagrams and more detailed instructions on implementing this search method.
Another method that Neil details in his post is the Screaming Frog method, and I recommend that you give that a try too.
You can learn more about Screaming Frog by going to their website. It’s a free tool that will allow you to audit your site and discover some of the areas that may need improvements.
Neil Patel explains the basics on how to use this program, but if all of this seems just a little too technical for you (or overwhelming), no worries. That’s where a smart, tech-savvy agency can help.
Here at Canny Creative we know how to audit your site to ensure that it’s up and running as fast as possible.
How to Reduce Your Image Size
Now that you’ve collated a list or spreadsheet of images that appear to be too big for your website, we need to working on reducing their file size. But before we do that, let’s take a look at some of the file formats.
As outlined by Jimdo over at their blog, it’s important that we use the right file format at the right time.
Here’s when to use each file format:
Ideal for use with photographs. JPEG deals with photographs in a very manageable way, and it keeps the file size of photographs down to as low as possible, which is what we’re looking for.
Ideal for use with graphics and images with a lot of flat colour. Infographics, logo designs and all other sorts of graphic work will benefit from PNG’s nice crisp lines. They also support transparent backgrounds which can be a huge advantage too.
Now that we know how to use each of the file formats, check how they align with the images on your site.
Once you’ve identified the images that you need to reduce on your website, we need a programme like Adobe Photoshop.
In Photoshop, there’s a handy “Save For Web” option (File > Save For Web) that helps you compress the size of your imagery right down.
Make sure you don’t save your new images over the top of your existing images. That way, you have a backup in case things go wrong.
Once everything is saved, upload the images back to your website (usually via FTP) and voila, you have new faster images.
Reduce the Amount of Imagery
In this article on Quick Sprout, Neil Patel gives some useful tips on how to speed up your website. One of the things Neil recommends is to reduce the amount of imagery overall on your site.
Make the page design simple. One or two images and text. But you probably want richer components on your site. If you have many images on your page, you are forcing multiple roundtrips of the server to get all the resources secured. This slows down page speed. Neil Patel
We all love a strong image, and as the saying goes, “A picture says a thousand words.”
So it’s tempting to load our sites with lots of imagery, but this isn’t always the best case when it comes to speed.
There are some insider web designer tricks to getting a lot more images on your site without slowing it down.
If you are building your site yourself, this might be a monumental task to implement. We really wouldn’t recommend that as that could lead to many painful headachey moments, but if you do take on the challenge yourself, here are some tips.
Some of the ways you can reduce the amount of imagery slowing down your site are quite technical, including:
- Combine imagery in CSS sprites
- Reduce HTTP requests (quite a tech answer, you see?)
- Get better hosting
- Consider implementing a CDN (content delivery network)
- Use a caching plugin
We love to get technical around here, but we don’t want to lead you down the dark path of image compression and HTTP requests.
The bottom line is:
When it comes to speed, images can slow you down.
If you want to have an image-rich site, you need to know how to prevent some of the image crowding issues, and that often takes a technical hand. If your brand and site depends on images, we suggest taking it to the pros.
Here are some examples of sites that are heavy on the images, but still function and work well:
We love Blik’s site because it’s colourful, artistic, and fast!
As one of the largest ecommerce sites for art supplies, Blik has to showcase a variety of materials on their site and that means imagery. However, the sheer amount of images needed does not weight Bilk’s site down, rather it enhances the brand online.
And remember, if you run an ecommerce store, you can always pix up some tips from our recent post about marketing ecommerce websites.
Blik does a good job at using images in their shopping cart section as well, without slowing down the entire process.
Want to order the “Hole to Another Universe” decal for your office? Who wouldn’t? With a clear image, easy to navigate site that works quickly, we can see why people love to shop at Blik for quirky decals and art supplies.
This is just one example of how professional web design elevates a site when a lot of imagery is needed. Bilk also avoid all of our top website design mistakes.
Not only does the professional website design maintain the speed and high level of customer experience of the site, it has created a pleasing look that reflects the brand and speaks directly to the consumers of Blik.
Well done indeed!
Performance Testing Tools
If you think your site is up and running and moving at the speed of the Concord, think again. Until you’ve tested your performance, your site might not be loading as quick as possible.
If you do have a lot of images and want to know if they are optimised properly or not, running a few speed tests might be the answer.
Of course, these tests will only give you part of the picture. It’s a starting point though and because these are all free to try, it’s worth a look see, isn’t it?
Here are a few testing tools to help you out:
Pingdom Website Speed Test
Pingdom is a good place to start testing your site speed.
Start by gong to the Pingdom website. Simply enter in your URL or website name and choose a location to test.
Let’s test our site, shall we?
We’re choosing New York City in the USA in this example.
As you can see, you’ll get a lot of information for free, without signing up or registering.
We get an A in performance, and the Canny Creative website runs faster than 91% of tested sites. Considering we have a lot of pages, and images, this is a good result.
But Wwat do you do if you don’t get a passing grade?
First, don’t panic. Next, get the report and see what Pingdom suggests you do.
Try testing it from another city, you might get a slightly better result. This isn’t a solution, but it is good to know.
There are always things you can do to get your speed up. The key is finding out what might be slowing you down, and that’s why Pingdom is the best place to start.
YSlow is a free extension that tests your website speed and web page performance:
YSlow is a question with an answer: “Why slow?”
This free Firefox extension can tell you why, and in great detail, when the question happens to be about web page performance.
YSlow tests and grades websites based on high-performance criteria established by Yahoo, and issues a report card describing areas for improvement. It also comes with a bag of tools for fixing some of the problems it uncovers.
YSlow is designed to integrate with Firebug, a suite of development tools bundled into a free Firefox extension, and YSlow’s developer recommends installing Firebug first.
YSlow placed a labeled speed meter icon next to the Firebug icon in the Firefox extension panel. We clicked the icon, and Firebug opened with the YSlow tab displayed. At the same time, YSlow ran its tests and displayed a letter grade and speed statistics in the extension panel.
Page Speed Insights
Page Speed Insights is a Google developed tool that allows you to check the speed of both your mobile website and your desktop site.
There is a grading system out of 100 and they grade you on “Speed” and “User Experience” factors. Page Speed Insights also gives you “how to fix” options for those aspects of your site that might be lagging.
Below is an example of a speed test for the search engine Bing. Notice how Google ranks visible content as a key element in speed, and also suggests that Bing enable compression.
This is just another tool you can use to find those speed bumps in your site design that might be slowing you down. Of course, these are only Google’s suggestions, but we like how this tool gives you insights from both the mobile version of your site and the desktop.
Today, many more of us solely look up companies on our mobiles, not our desktops, so you should always be aware of how your site looks and operates on any device.
Google Test My Site
We couldn’t leave out Google’s site testing tool on this list.
Google’s testing tool tests how mobile friendly your website is, how fast your site loads on desktop and mobile, and how responsive it is. While you are not going to get a load of insights with this tool, it’s quick and easy to just plug in your site and see how Google ranks it for speed.
If you do have some issues with your site being responsive – meaning it works on all platforms, then you need to do something about it now. Google has changed their algorithm rules quite a bit in the past couple of years, especially since we wrote about SEO a while back and responsive websites are becoming increasingly more important for search engine ranking positions.
If you feel that your site is lacking in the responsive department, you’ll want to choose a design agency to help you out. If you didn’t consider how your site would perform on mobile, do it now. Not only will your site rank better with Google, but with consumers.
You Have to Think Responsively: Think Mobile!
Still not convinced that your site has to work well mobile too.
Here are some stats:
Google says 61% of users are unlikely to return to a mobile site they had trouble accessing and 40% visit a competitor’s site instead.
You’ve gone through the expense and time of building your business online, only to find that over 60% of your customers won’t access your site because the user experience on their phone is terrible.
We are an impatient society, yes, but it’s more than that.
Creating a site that looks, reads, and works well on a mobile is more than just building a responsive website. It’s about connecting with your audience in their day-to-day lives, finding those moments of decision throughout their day, and giving them something to hold onto.
Over 50% of smartphone users grab their smartphone immediately after waking up.
I have to admit, I do love my smartphone.
I have been known to sleep with my mobile on more than one occasion, and yes, I do answer emails first thing in the morning. Glad to know I’m not alone, but this stat says more to me than just ‘time of day’ use of technology. It tells me how intrinsic our online lives have become to our offline lines.
If you want to become a part of your customers’ day-to-day lives, wake up with them sometimes too!
88% of consumers who search for a type of local business on a mobile device call or go to that business within 24 hours.
This stat is everything you need to know about having a responsive, mobile-friendly website.
If you’ve got someone looking you up locally, you better have a way for them to find you.
Not only does your mobile site have to have the key messages of your brand, don’t forget about the call to action buttons, and easy-to-use, call us for more information button. Make everything easy peasy for your clients!
40% if mobile searches have local intent – Don’t let those local customers miss out!
Gone are the days that local companies relied on word of mouth, or local advertising to boost sales. With Google giving preference to local searches anyway, doesn’t it make sense to be there for your local customers?
Don’t miss out on opportunities because your site isn’t responsive or fast enough. If you have any questions or concerns about your site’s mobile readiness or speed, we’d love to talk to you.
Some Final Thoughts: An Ecommerce Example
Having a fast website not only improves your Google rankings, it can make your users that much happier. You don’t want potential customers coming to your site and waiting for the pages to load.
It’s much easier to back click than wait.
Test your website to see how fast it is or isn’t running.
Too slow? No worries. There are lots of things you can do.
If you are concerned about the speed of your website, we can help you. Not only do we create stunningly beautiful sites that convert, we make sure to keep sites fast. If you’re looking for help, then let us know.
This can be an issue with many ecommerce sites, for example.
We’ve seen it before. Company X has a great idea for a new toy that every kid will want (set to rival Hatchimals) and sets up their online store. All goes well and customers start coming to the site to buy, buy, buy. Kids are happy. Parents are happy.
And so the CEO of Company xx thinks, “Let’s expand.” That’s great news!
The CEO quickly finds ways to expand the line of products and the ecommerce site needs to follow suit. That’s when their ecommerce solution needs to change and grow too.
Upon advice from a well-meaning ecommerce platform provider, Company X puts a lot of money into a much larger platform, that they are hoping can grow with their company as the toy ideas keep coming.
Here’s the thing:
Their website has slowed down considerably. Customers are not able to download images of each toy as fast as they like, and even the shopping cart has slowed. It’s enough of a slow down to annoy any customer, and many sales are not going through.
What should Company X do?
Companies that want to be able to grow and expand their sites quickly must consider speed. Many ecommerce platforms and website templates work but can slow a growing company down.
The transition from 20 products to hundreds can be a problem for some, as these companies create ecommerce solutions that are designed to benefit many, not individual companies.
A one-sized fits all approach doesn’t always work.
Speed often comes into play here, because there can be a lot of “code bloat” in ecommerce websites, not to mention the optimisation of images, that could slow your site down exponentially.
Here at Canny Creative one of the ways we grow with our clients is knowing how to create custom websites and ecommerce solutions that grow and expand your business. We’ve helped many clients get their ideas in the fast lane and we’d love to help you too.
Let us know what you think in the comments below. What have you done to speed up your website?