When you’re building a new website, there’s heaps of things you need to get right. Some are pretty straightforward like making sure people can actually find their way around your site without getting lost. That’s where good navigation comes in.
For Users, For SEO, Or Both?
Most of what makes a good website comes down to giving visitors a decent experience. You want quality content, something that looks good and actually works properly. Nothing worse than clicking on something that doesn’t do what it’s supposed to do.
Then there’s the SEO side of things. This is all about getting Google to notice your site and rank it well. You’ll be working on metadata, linking between pages and using the right keywords throughout your content. If you ask most web designers for their top SEO advice their top tip would be pretty clear, get found on Google.
Here’s a big positive to look at: A lot of what makes users happy also makes Google happy. It’s not always one or the other.
Fast Versus Slow Page Load Speed
One such factor is page load speed, which is how quickly any page within a website opens when someone clicks on it. One of two things is likely to happen depending on page load speed. The first is negative, where the website is poorly designed and its pages take too much time to open. Even if your site loads in 2 or 3 seconds, it can be slow.
People expect things to happen instantly online. When they click on a page they want to see it right away. If it doesn’t load quickly, they’re gone – probably never to return. That’s bad enough on its own, but Google notices this behaviour too.
Google can tell how long your pages take to load and how long people stay on them. When visitors immediately bounce because of slow loading then Google sees this as a red flag. So if people keep clicking away from your site your rankings will drop.
On the flip side, fast-loading pages keep people around longer. Google spots this positive behaviour and rewards you with better rankings. So if you want to be in the second category rather than the first, here are ten practical tips to speed up your website.
Conversely, we have a positive scenario where a website is well-designed and its pages open instantly, which Google will see. Further, when internet users click on that website, they will not click away due to slow loading pages and should instead remain for some time which, again, Google spots and gives a proverbial thumbs up to that website and rewards it with higher rankings.
So, assuming you want your website to be in the latter scenario rather than the former here are ten awesome web design tips that will ensure your website loads quickly and thus promote better rankings.
1. Optimise Every Image
Images are well known to slow websites when they load and whilst they are an essential part of most web designs, they can cause issues. They’re necessary for most designs but they can really jam things up if you’re not careful. The key is optimising them properly.
Avoid using a bigger image than what’s necessary for your content. Start by reducing file sizes using something like Photoshop. Don’t use massive images when smaller ones will do the job. Crop and resize as needed to get the file size down. You should also compress your images because this reduces the file size without making them look worse.
If your website builder supports it, try using WebP format for all your images. It’s a modern font that Google created to replace JPEG, PNG, and GIF, resulting in an image format that can handle lossless and lossy compression, alpha transparency, and animation. Converting your images to WebP will result in a significantly smaller file size, which won’t slow down your website.
2. Utilise CSS Sprites
This is a clever technique that combines multiple images into one file. Instead of loading several background images separately, you merge them into a single sprite sheet that loads faster.
You can create sprites using image editing software or a sprite sheet packer. Place your images side by side horizontally or vertically and then use CSS to show only the parts you need. It’s a bit technical but worth the effort.
3. Use Lazy Loading
This technique prioritises loading the content that’s actually visible on the user’s screen rather than loading everything at once. It’s particularly useful for image-heavy sites.
You can implement lazy loading by adding loading=”lazy” to your image tags. Developers can also use JavaScript libraries or frameworks to achieve the same result.
4. Avoid Unnecessary Redirects
Redirects are helpful in certain cases, but your website can get hit with slower loading times when used too often. An extra HTTP request gets created with each redirect which in turn, adds to load time.
Check your site regularly to find and remove all redirects that are unnecessary. Use direct links instead of redirect chains where possible. Keeping your site structure clean and organised means you’ll need fewer redirects in the first place.
5. Minimise HTTP Requests
Every element on your page from your stylesheets to your scripts to the images and fonts all require a HTTP request to the server. More elements mean more requests which means slower loading.
Remove any elements that aren’t adding value to the user experience. There are tools and plugins that can help you identify how many HTTP requests your site is making.
6. Use Only Necessary Plugins
Plugins are great, especially as so many are free. However, just like a child in a candy store, you can overindulge and slow down your website. More plugins mean more requests for their external resources.
Go through your installed plugins and remove or deactivate anything that’s outdated, redundant or not essential. Look for plugins that combine multiple functions rather than installing separate ones for each task. For example, instead of separate plugins for image optimisation, minification and caching, find one comprehensive plugin that does all three.
You should also consider whether a plugin is lightweight and well coded since these are more efficient for your site.
7. Employ A Content Delivery System
A content delivery system or CDN, has servers around the world where copies of the files that form your website can be stored and opened when needed. The data centre geographically closest to a user will load your website which makes it load way faster!
This is extra helpful if you have website visitors from different countries or continents.
8. Enable Browser Caching
When a browser caches your website, it saves certain files locally so they don’t need to be downloaded again on future visits. This makes return visits much faster.
For WordPress users this is straightforward with caching plugins. You can also go ahead and test it using Chrome’s Developer Tools or Firefox’s Web Console.
If you’re not using WordPress you’ll need to set cache policies on your web server using headers like ETag, Cache-Control, Expires and Last Modified.
Remember to use cache busting techniques when you make any big edits to your website. This might involve changing file names, paths or query strings so browsers know to download the updated versions.
9. Ensure All Coding Is Optimised
Especially for larger websites, messy code can slow things down significantly. Use optimised and compressed code wherever possible.
Choose appropriate data types to minimise conversions. You should also practice doing the simplest coding and using the most efficient algorithm possible to achieve an outcome. For example quick sort is faster than bubble sort for large arrays of data. Finally, you can go over your code and remove any calculations that it doesn’t need to do to reduce the amount of work.
10. Opt For A Fast, Reliable Hosting Server
This is not strictly web design. However, hosting is essential for your website to appear, so we decided we had to include it. Having a fast host with reliable servers can be the difference between your website loading quickly or loading slowly, so choose your web host wisely.
Don’t skimp on hosting, it’s worth investing in quality infrastructure that can handle your site’s requirements without slowing down.
