You might be wondering why your beautiful website with stunning effects, comprehensive brand messaging and clear calls to action has a high bounce rate and low conversion rate. Well, my friend, there’s a good chance you have a case of — poor website speed. You know that feeling of trying waiting for a video, image files or a slow website to load? Some of the common words used are, “Ugh, why won’t this work?!” or, “This isn't worth my time…” Chances are, your customers could be feeling the same way on your website!
If your website doesn't load quickly, it doesn't matter that you dominate search rankings with the right content.
Let’s walk through a few simple “check engine lights” that you can use to determine if poor website speed is slowing down your business. We’ll also dive into some solutions you can incorporate to get back up to speed (pun intended).
Customers hate waiting! If your load time is too long, they will bounce from your website. Or, in simpler terms, they will leave.
What’s a normal bounce rate to have on a website?
0% – 25%: It’s most likely too good to be true. There might be something wrong.
26-40%: Target metric!
41-55%: Average. Most websites fall into this category.
56-75%: Much higher than average. Slow website speed might be sending people running.
76% – 100%: Your website needs a helicopter lift to the emergency room (this is clearly a metaphor)!
As a rule of thumb, a bounce rate in the range of 26 to 40 percent is excellent. 41 to 55 percent is roughly average. 56 to 75 percent is higher than average, but may not be cause for alarm depending on the website. Anything over 75 percent should result in immediate attention. Google found that 53% of mobile website visitors leave if a webpage has a three-second delay, yet many sites have a load time of 5 seconds or more. You should be thinking, “Whoa! This is an opportunity to increase conversion through optimizing page speed because my competitor's website speed is horrendous.”
How can you fix this? Here are the action steps we’ll review to improve website speed:
The first and most important step before jumping into patching up your website is knowing how to diagnose what’s wrong. The best way to do this is by running a speed test. The Google Chrome browser has a free tool to see what is affecting page load time and the overall user experience.
Be sure to run a report for both mobile and desktop.
Once this report is generated, you will be able to see what is negatively affecting your website speed. Which then leads to the question — how to optimize website speed? Now that the issues have been diagnosed, you can properly move forward with treating them. It is vital that you go through a website QA checklist. Another free option is YSlow, which analyzes your page and tells you why it's slow. A paid solution to website monitoring is Pingdom. Pingdom allows users to monitor websites, applications and servers.
Render means loading, so render-blocking JavaScript is code that’s keeping the page from reaching optimal load speeds.
Google recommends removing or deferring JavaScript that interferes with loading above-the-fold content on your webpages. The defer attribute tells the browser to hold off on downloading the resource until HTML and CSS are complete. Once the browser has finished with the HTML, it will then download and render all deferred scripts in the order in which they appear in the document. Simply put, it’s best to place JavaScript after everything else.
To remove render-blocking JavaScript in WordPress, you can use the same methodology as mentioned above. However, here’s a helpful plugin that will do the trick.
A large amount of fo PHP can seriously affect loading websites. Calling info through PHP uses up server resources and should be replaced with static HTML.
Website caching, otherwise known as browser caching, is an important method to speed up recurring visitors to the website. Following the 80/20 rule — 80 percent of business comes from 20 percent of customers — often means the same customers are returning to websites frequently. With this in mind, adding browser caching is vital to delight your raving fans with decreased page load time and optimal website performance.
Optimizing images is more important than scripts, fonts and JavaScript rendering. Proper image optimization is one of the easiest things to implement, but many website developers overlook this key principle. If you refer to the chart linked below, images use the same percentage of average KB per page if you combine CSS, fonts and JavaScript.
https://kinsta.com/blog/optimize-images-for-web/
Use the appropriate file formats. JPG is best for photographs, SVG for vector images and PNG for everything else. GIFs should be used sparingly, and if used, make sure to optimize them.
Considering 48% of global internet traffic comes from mobile devices, optimizing image sizes undoubtedly affects mobile website speed optimization. When browsing on mobile, users are loading high-quality images. The incorrect use of images that might have minor effects on the desktop will severely affect user experience on mobile. Compressing images will decrease the bounce rate and lead to a better chance of a conversion.
When using CSS in place of background images, shapes and gradients can significantly increase the website optimization speed. It’s rarely necessary to use background images for borders, shadows, rounded edges, gradients and some geometric shapes. Defining an “image” using CSS code uses considerably less bandwidth and is easier to modify or animate later. The rule of thumb: minify, minify, minify.
You should be using alt text for SEO purposes and adhering to ADA compliant website standards. This is non-negotiable and should be built into every web development process. This doesn't directly affect web speed; however, it should be heavily considered for SEO purposes.
In WordPress, install the WP Smush.it plugin to compress your images automatically. This will reduce the size of your images without losing any visual quality. Reduce each image's file size to less than 100 KB and aim for under 1 MB per image. Large image size directly results in slow websites and quick-to-leave visitors. The Smush image optimization plugin is the best on the market for compressing images and saving load time.
Modern browsers now understand gzip-compressed files, making it easier to save space by reducing file transfer size.
What does it mean to gzip files?
The file is smaller, which results in a faster download and a happy customer.
Better Explained does a great job of giving a real example to the effectiveness of gzip files:
According to Yahoo, "gzip compression generally reduces the response size by about 70%. Approximately 90% of today's Internet traffic travels through browsers that claim to support gzip." File compression is an essential part of ensuring website speed is optimal. If you are using VPS hosting, you can enable it yourself. If you have a WordPress site, enable gzip compression using the W3 Total Cache plugin.
If you are using Wordpress CMS, relying on lots of plugins will have a significant impact on website speed. While plugins can add fancy, new features, overuse can severely hurt website load time.
Uninstall all your plugins in WordPress. After you have done this step, go through and reinstall plugins one by one. This might seem somewhat tedious, but it’s important to remember the cost of each second you lose on your website.
Apart from plugins, you can use widgets in WordPress, which are a great way to add features to your theme. They are less bulky than plugins and are easy to add. These widgets don't require coding or development knowledge.
https://backlinko.com/page-speed-stats
Be careful when inlining CSS files. While selective use of inlining a few CSS styles might make sense, inlining large data can cause the size of your above-the-fold CSS to be much larger, which will slow down page render time. Sometimes Inline CSS styles are necessary to ensure essential content loads before the rest.
The smaller your stylesheet, the limited amount of page load time. Many developers start with lean stylesheets, but CSS can expand over time as the feature count increases. Be careful trying to use large CSS frameworks. Many frameworks, such as Bootstrap, Semantic-UI, or Foundation, have a large percentage of styles that aren't included in the web page. You’re unlikely to use a large percentage of the styles, so only add modules as you need them.
Third-party scripts significantly slow down page loading speed. Each third-party script added to a page increases load time by 34.1 milliseconds. The best ways to optimize CSS and reduce third-party scripts is through minifying. This is the process of compressing CSS files. The best way to remedy this issue is through minification. You can use free CSS minifiers to reduce the file size and web page load time.
When consumers use a search engine and type in a web address, HTTP requests get triggered. This happens when a web browser sends a "request" to your website's server for information on a webpage. When a user visits a page on your website, your server heeds this request and returns the files contained on that page to the user's browser. The fewer HTTP requests a website has to make, the faster the site can load.
On WordPress, there are numerous plugins that can help you do this. HTTP requests can affect your website's user experience, i.e., the number of files being requested and the size of the files being transferred. Some of these HTTP requests might be severely affecting loading times.
The larger the file size from database queries, the longer it will take to transfer it from your server to a user's browser. Find out how many HTTP requests there are under the Google Chrome audit.
Google Fonts make it easy to add custom fonts to any webpage. However, this can also result in massive font packages with just one line of code. Only use the fonts you need. Only load the weights and styles you require, e.g., Roman, 400 weight, no italics. Aim for two fonts on the webpage. This reduces load time and results in a clean design look. Any more than three fonts looks messy and takes too much time to load.
There are two main options for hosting these font packages:
First impressions can make or break consumer trust in a company. Just as it is essential to give a firm handshake and have proper business etiquette when first meeting, it’s crucial to have a firm digital handshake.
This means you might need to leave out that beautiful JavaScript effect above the fold to improve overall user experience. Above-the-fold content needs to render first on the web page, which buys time for the content below the fold to load. Allow essential HTML and CSS properties to load first.
Content Delivery Network (CDN) works by providing alternative server spots for users to download resources. Instead of waiting for the content to be delivered from the original place (which could be traveling thousands of miles away), it loads at the nearest node. These content delivery networks (CDN) reduce payload time and improve user experience. Cloudflare is our favorite (and is free to get started with). Cloudflare provides CDN hosting and support that significantly improves load time for repeat visitors.
A large number of website visitors or surge in demand can severely affect customer retention and consumer experience.
You can estimate the potential loss of revenue for your business using the Google page speed insights tool. This website speed test is a fantastic tool that showcases the monetary effects of poor load time.
Through a client experiment, web performance expert Tammy Everts discovered that a two-second page speed decrease boosted conversions by 66%. She says that “eCommerce shoppers will never learn to be patient with slow pages.” Exceeding customer expectations are essential to retaining online business.
A Growth Driven Design website can more effectively help you achieve your marketing goals. The GDD process of web design is built on data-based marketing insights. This lean website development method builds in a process that prioritizes page speed and SEO.
GDD also reduces the amount of time and money traditional web design takes. In fact, GDD principles generate 17% more leads and a 14% increase in site traffic in less time after project launch (6 months after launch). It is important that companies have a webmaster who evaluates, maintains and provides QA for the website. This enables business owners to keep their focus on running the business operations.
Want to learn more about the Growth-Driven Design process? Read our guide to Growth Driven Design
Figuring out why your website has slow load times is just the beginning to improving SEO and user experience. Remember, customers hate waiting! If your load time is too long, they will bounce from your website. We've gone over the reasons website speed is so important and thirteen ways to increase load time.
If your website speed is slow the rest of your digital presence suffers.
Looking for a marketing partner to help patch up your website? Schedule your free strategy session to talk over solutions to get your website back up to speed.