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).
Why does website speed matter?
How Website Speed Affects User Experience
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:
- Run a lighthouse report for page speed insights
- Use website caching
- Optimize images for the web
- Enable gzip compression
- Reduce the number of plugins
- Reduce websites HTTP requests
- Reduce Font Files
- Reduce the size of the above-the-fold content
- Improve server response time
- Use Growth Drive Design Method for web development
1. Run a lighthouse report for page speed insights
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.
- Right-click to open the “Inspect” under Google Chrome tools.
- Click on “Audits” on the top of the screen. A lighthouse should appear.
- Choose whether you want a mobile or desktop report.
- Run the report.
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.
What is render blocking?
Replace PHP with HTML
3. Use website caching
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.
4. Optimize images for the 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.
Have a mobile-version-first approach
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.
Use CSS properly
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.
Always include alt text for images.
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.
5. Enable gzip compression
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:
- Browser: Hey, can I GET index.html? I’ll take a compressed version if you’ve got it.
- Server: Let me find the file… Yep, it’s here. And you’ll take a compressed version (gzip)? Awesome.
- Server: Okay, I’ve found index.html, am zipping it and sending it over.
- Browser: Great! It’s only 10KB. I’ll unzip it and show the user.
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.
Don't gzip PDF files
- Do not gzip (already compressed) images, PDF or other binary data.
- Gzip data only in the range of 150-1000 bytes in size. The speed of compression must be faster than the time taken in delivering the content uncompressed.
- Do not compress content for old browsers.
6. Reduce the number of plugins
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 and reinstall plugins
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.
Don't inline large CSS properties
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.
Reduce the size of your stylesheet
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.
Limit the amount of third-party scripts
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.
8. Reduce your website's HTTP requests
What are HTTP requests?
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.
9. Reduce font files
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.
Font package hosting provider
- Self-hosting: hosting font resources on your web server together with the rest of your website files.
- Third-party hosting provider: using a font service like Adobe Typekit, Fonts.com or Google Fonts.
10. Reduce the size of above-the-fold content
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.
Focus on what the user sees first above the fold.
11. Improve server response time
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.
- Amazon calculated that a page load slowdown of just one second could cost the marketplace $1.6 billion in sales each year.
- Walmart and Amazon both saw a one percent increase in revenue for every 100 milliseconds of improved page speed.
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.
eCommerce site performance and page speed
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.
13. Use Growth Driven Design as a website development process
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.
Less time, more traffic and more leads
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.