When someone clicks on a link to your website and immediately leaves the page to find another site, it’s called a bounce. The bounce rate of a page is the percentage of visitors who bounce when they land on it. Continue reading to learn effective website design tips…
If a page on your website takes 5 seconds to load, studies show the bounce rate will be 90 percent higher than a page that only takes 1 second to load. Those 4 seconds mean you’ll lose almost twice as many people.
Let’s look at 7 web design tips to speed up your WordPress site to avoid losing visitors.
Why Website Performance Is So Important
How quickly your website loads when a visitor lands is important in a couple of ways. First, the longer your site takes to load, the more visitors you’ll lose, as we’ve already pointed out.
The second reason website performance is important is from a search engine optimization (SEO) perspective. Page load speed is one of the factors that Google takes into account when ranking websites. If your page loads too slowly, it considers that to be a worse user experience than a page that loads quickly. So, it will rank the page lower in the results.
Google also considers the bounce rate in their ranking algorithm. If a searcher clicks on a link in the results and immediately clicks back to Google and chooses a different link, it will reflect poorly on the first site. A slow-loading page gets a higher bounce rate so the speed hits your SEO from two directions.
1. Choose a Good WordPress Theme
One of the benefits of building your website with WordPress is the range of themes you can choose from. Because WordPress separates the design component of your website from the content on the pages, changing the layout doesn’t require you to reformat or reload any content.
Change the theme and the entire site updates with the new look automatically.
This gives you a huge range of ready-to-use themes to choose from. But all themes are not created equal. Some themes, especially free ones, have a lot of unnecessary code that slows down the page load speed
When choosing a theme for your WordPress site, look for one that’s optimized for speed. This doesn’t mean your site won’t look good but it might mean you need to look a little harder to find a theme with a layout you like that’s also optimized for performance.
A second option is to get a custom site design. This gives you the best of both worlds – a unique layout for your site that’s optimized for the highest possible speed.
2. Optimize Your Website Content
The content of the pages on your site plays a big part in its speed. Different types of content will load at different speeds. For example, text content loads quickly, even with thousands of words on the page. Video, on the other hand, is slower to load, especially if it’s loading from an external site like YouTube or Vimeo.
Optimizing Multimedia Content
Multimedia content like video and audio has the biggest performance hits. To avoid having them slow down your page load speed, use a “lazy loading” plugin.
These plugins stop WordPress from loading the multimedia content until your visitor scrolls down to the part of the page where the video or audio is embedded. They can start reading the content immediately and as they scroll down, the multimedia content loads in the background.
There’s no change to the design of the page, only the way it’s loaded.
Optimizing CSS Code
CSS, or cascading style sheets, is the code on a web page that tells your browser how it should be formatted and laid out. This code is usually written to make it easy to read, which means there’s a lot of blank lines and white space in the code.
While this makes it easier to decipher when you’re making changes, that unnecessary code increases the load time of your site. A process called “minifying” removes all the unnecessary code, leaving only what the browser needs to lay out the page. Installing a “minify” plugin will automate this process.
Optimizing Images
Images are another component of the page that will have a big impact on the loading time. If you use a lot of images on each page or the images aren’t properly optimized, they’ll slow down your site with no benefit to your visitors.
The first step to optimize your images is to resize them for the web. Digital cameras and smartphones take pictures that are larger than necessary for website use. Resizing them to an appropriate size will make the files a lot smaller, which means they’ll load faster.
For example, if your original image is 8,000 X 6,000 pixels but your website displays them at 800 X 600, the file is 100 times larger than it needs to be. If you have two or three of these images on the page, that’s a lot of wasted bandwidth.
3. Install a Caching Plugin
Treating the layout as separate from the content is one of the benefits of using WordPress to power your website but it does have one disadvantage over traditional “static” websites. Every time a visitor views a page on your site, WordPress has to combine the layout and the content to reconstruct the page.
This adds processing time to every page someone visits, every time they visit. You can use a caching plugin to reduce this overhead.
A caching plugin saves a copy of each page on your site so that “snapshot” of the page can be sent to your visitors instead of having to process the theme and content every time. This saves time on every page view, speeding up your site.
If the page changes, the caching plugin recognizes that and creates a new copy of the page so your visitors will always see the latest version.
4. Use a Content Delivery Network (CDN)
As we’ve already covered, certain types of files – multimedia and images in particular – slow down the loading speed of your website. And the effect multiplies as your website gets more popular and more visitors are landing on it at once.
A content delivery network, or CDN, lets you host the most resource-intensive files separately from the rest of your website. You can load video, images, and other large files from the CDN to lessen the load on your server.
The reason they’re called content delivery networks is that they have a network of servers that can share the load. Most CDN services have servers located around the world. They can also serve your content from the server that’s closest to your visitor, saving a bit more loading time.
5. Reduce the Number of HTTP Requests
When a visitor lands on a page on your website, their browser sends an HTTP request to your webserver to load the page. Every individual component on the page gets a separate request.
That means every image, video, script, and stylesheet gets its own request. The more requests needed to load the page, the longer it takes to load.
Reducing the number of components by combining similar things into a single file or removing unnecessary images and other content will help speed up the load time.
6. Use WordPress Hosting
Almost every web hosting service supports WordPress but supporting it and optimizing for it are two different things. WordPress-specific hosting services configure their servers in a way that will run WordPress-based sites as quickly as possible.
They’re also more familiar with WordPress and how it works so aside from the web design and site performance considerations, they typically offer much better technical support for any WordPress-related questions you might have.
7. Use the System Font Stack
Custom font packs such as Google Fonts give you a much wider range of typeface choices for your website but they come at a cost. Embedding custom fonts in your site adds weight to the pages and slows down their load time.
Custom fonts average 6 percent of page weight on WordPress-based sites. Removing the custom fonts immediately reduces your page size and load time by that 6 percent.
The term “system font stack” refers to the fonts that are included in every major operating system such as Windows and macOS. By using those fonts in your web design, nothing extra needs to be loaded when a visitor views a page on your site.
How to Test the Impact of These Website Design Tips
If you start with a particularly slow-loading WordPress site, you’ll be able to measure the changes by loading the page in your browser. Going from a 10 second load time to 5 seconds is an obvious change.
As you optimize your site’s speed, it gets harder to detect the difference after making a change. The best way to check the results of each change you make is to use a speed testing service like GTMetrix. It will load your site through its server and show you the number of seconds it took to load.
After each change, check the load time again to get a clear idea of how much of an impact it had.
Getting Help with Your Website Design
These website design tips will help you get the best performance from your WordPress site. However, you’ll need to invest some time to implement them. And if you aren’t already familiar with the more technical side of WordPress, you’ll need to spend more time learning how to do everything.
If you’d rather focus on what your business does best and leave your website design to experts, Zelen Communications can help. We can take care of a range of website development services to get your website running as fast as possible and bringing in new customers.
Get in touch with us today to discuss your website design needs and what we can do to help.