Why a slow website is bad for business
People can overlook the visuals of a website, as long as it works in the way that they expect. But they will not wait for it to load. They’ll just go elsewhere.
The majority of people spend their time online with apps like Instagram, TikTok, and Facebook. We've grown accustomed to having our apps load content really fast. When we encounter a website that's slow, it makes us think that it's broken.
Roughly 40% of users will leave your site if it takes more than 3 seconds to load. *MD
Amazon also did some research, and they found out that if their page load time took an extra second, they would lose $1.6 billion in sales per year. *FC
Yes, 1 second of page load time would cost amazon over a billion dollars.
If Amazon loses this many customers due to speed, how many customers could you be losing? A few? A dozen? Thousands?
Not everyone is doing Amazon numbers, but imagine how many sales you could be missing out on.
70% of users say that a page speed impacts their willingness to buy from a webstore. *Un
You're going to have to up your game if you want more customers and users to stick around. Well, how does one get started? How do you find out if your site's slow?
Use Google’s PageSpeed Insights to get a general idea of what's going on.
Here’s our score just to brag a little
It looks at four things:
- Performance: Mostly how fast the site is, how many files you’re loading, are you loading mega sized images, does the content move/page flash when loading
- Accessibility: is the markup properly labeled so that people with screenreaders can navigate, can people tab through the site, are all of your images labelled, buttons are big enough that you can click them
- Best practices: avoiding security issues, using https, not presenting the user with location and notification requests on first load
- SEO: you have proper titles, link elements, and your site is indexable for web bots
After looking at the results page, you can get a general idea of what's going wrong.
Today we'll be looking at how to fix the suggestions in the performance tab.
Resize your images
One of the fastest ways to reduce loading times is to resize your images. You want the images on your site to be as HD looking as possible, but that means the file size may be too large.
If you have a blog, and the images are at most 800px wide, crop them to be 900px wide. This way they're large enough to be high quality and small enough to reduce file size.
By resizing your images you can shave a few milliseconds or seconds off of your load time.
A good tool to get your images resized is "squoosh.app". It's an easy tool that allows you to compress and resize your images. "Tinypng" is also a good site if you have large images that you need compressed.
Thinking with your
Things that are simple but not obvious can make a big difference. The
<head> section on a website is where most files and tags are loaded. If you take a look at this part of most websites, they’re loading way too many scripts and files that don’t need to be there.
Before any content can show up, the browser waits for these files to load first. If you know what to look for, rearranging this section can have a huge impact on your site speed. By identifying what's necessary for the site to work, you can rearrange the order of files to make it faster. Obviously, you need the title tag for SEO, and your main CSS and JS files to make your site functional. But you definitely don’t need to load all your plugins for content that’s further down the page.
If the file doesn’t affect content above the fold then you don’t need to load it right away. You don't need to add things like analytics trackers, and scripts for widgets that are far down the page. These files can be loaded further down, in a section like
<footer>. This way the user can get the site loaded faster, and have an easier time browsing.
Reduce, reuse, recycle.
If you're not using a file somewhere, throw it out! Go through your site's plugins and look at either updating or deleting them. You never know what old plugin or tracker is still kicking around. Load only what's necessary.
- Resize and compress your images.
- Rearrange the
<head>section. Only load the most important stuff.
- Remove plugins, and other files you don’t use.