Fast-Loading Website Formula

October 26, 2021

Why

Since you are here I could probably assume that you already understand why it’s important that your website loads quickly.  But, alas, a good teacher starts at the beginning–and we all know how great assumptions are–so let’s take a quick second and talk about why it’s so important to have a fast loading website.

1. Google’s algorithm is changing and dinging rankings for slow loading sites. So, if your site is slow, it’s less likely to show up when people search for it.
   
2. To be polite – who likes waiting in line? My husband and I agree the worst part of flying is waiting in lines forever. It just bookends your vacation with stress. A slow loading website is stressful for the visitors who want and need the content in it. And there’s not even a promise of sunshine and margaritas after the site loads…
   
3. To make friends (and show up in search results) – people will abandon your site before even getting to it and then you can’t make friends with them. Which is also a signal to Google that your site sucks…and then it won’t share your site on search engines, so now we’ve come full circle. 

So really, you need a fast loading site because it doesn’t matter how gorgeous your site is if people never get there, or you torture them with lines to get in. All that pretty just goes to waste.

Alrighty, so now, with all that sunshine out of the way, let’s get to the recipe you need. My fast loading formula website is:

1. Enable Caching
2. Minimize CSS and Javascript
3. Use a CDN
4. Choose the right host
5. DBD with your images and video
6. Lazy Load iFrames

What the heck is site optimization?

Site Optimization from the Perspective of a Pisces.

Imagine your fully loaded website is a pitcher of water. Each of the components of the site, from scripts to photos, fill the pitcher before it can be displayed. 

Your site likely has hundreds, if not thousands, of teeny cups with drops of water in them just waiting to be gathered and poured together to render the whole site.

For the site to load quickly, we need to make sure every container is as light as possible; because it takes more time to pour things from concrete flower pots than plastic ones.

If you have to pour from each teeny cup everytime a page in your site is loaded, it can be a time consuming endeavor (especially if they’re heavy). To save time, you want to marry like-things and often-used things together into the same container. 

Then we hold everything at-the-ready to use at a moment’s notice. The next time the site needs to be loaded, we can just pour from a few light containers to fill the main pitcher faster.

Now you’re going to run a test.

Check your website’s load time using a few free testing tools like: Google Page Speed Insights, GTmetrix, or Uptrends. These reports will tell you where you’re bogged down and give you suggestions for fixing. But, to be honest, some of the stuff they tell you is going to look at lot like geek (no not greek, geek) because it is. So I’m going to define most of the common challenges for you now.

1. Enable Caching

Caching is essentially holding things at-the-ready. 

Once the site is loaded on a device, the browser stores or caches most of the content on the page so the next time the page is loaded the content is stored locally and loads faster.  That’s why sometimes when you update your site you can’t see the changes you made until you clear your browser cache.

You’ll manage this through a plugin. We usually use WP Rocket. 

Whichever plugin you use, just make sure it works with your hosting company. Caching plugins need the server to be sympatico for the caching to actually work. If you have a plugin installed on your site and all the reports you run tell you to enable caching, your site isn’t being cached and it’s likely a server/plugin compatibility issue.

2. Minimize CSS and Javascript

Minimizing CSS and javascript is marrying like objects.

A site has lots of moving parts and each part takes time to load. When you minimize your CSS and Javascript, you’re essentially combining all the CSS and Javascript files from multiple files into just one or two.

Each plugin, as well as your theme, often has its own CSS and javascript files. So, for example, your website may need to pull, process and load 10 or more files just to display properly before the viewer can fully use it. When you minimize CSS and javascript, you only have to load 2 files to achieve the same result.

You could just copy and paste all the files into one, but that’s not really a viable solution for the long run. So we use plugins for this. 

3. Use a CDN

There are some many awesome things about using a CDN; improved load time is just one of them.  We use CloudFlare. They even have a free package for smaller sites.

A CDN (Content Delivery Network) is a collection of servers that helps speed up site load time by reducing the physical distance between the server and the user.  As with light and sound, it takes time for data to travel as well. The farther it has to travel, the longer it takes. 

This service also improves site speed by lightening the load on your server. By caching parts of your site and loading them from the CDN, it frees up resources on the server. This benefits not only your site, but others on the server also.

4. Choose the right host

I can’t make a blanket statement about which host is right for you…maybe just don’t pick the cheapest; it’s cheap for a reason.  If you have a super-cheap hosting space, it’s because you’re renting a room in a hostel. So if one person throws a party you’re all going down.  

• Pick a package that matches your site. See how many visitors you have and the bandwidth you’re using. Also, match your hosting space with your site format. For example, some hosts specialize in WordPress or WooCommerce sites – offering specific features that speed upload time for those site types.
  
• If you really need site speed, look for a dedicated space. A dedicated space is an apartment of your very own. You’ll have specific resources dedicated to your site to make sure it’s loading swiftly on the regular.

5. DBD with your images and video

Make videos and images as light as possible.

We don’t have many policies at MayeCreate (I think we have 3 to be exact) but our #1 policy is DBD – Don’t be Dumb. Our lead developer, Tyler, introduced this amazingness to the team years ago.  Turns out his dad was a champion of the phrase. 

You can certainly use a plugin like Smush to optimize images on your site, but you also need to be smart about the images you upload. What tends to happen is people update the website without knowing how image size impacts load time. They have tiny images that should be 25K loading a 700K file. 

Run a report and look at the waterfall. Sort the file size from largest to smallest. This will help you see any big images or videos slowing down your site speed.

• Get your images close to the size you want them before you place them on the page. 
• Also, realize your images don’t have to be crystal clear – faster loading trumps clarity everytime.
• Don’t load huge header images, slideshows or videos on mobile. Remove them or resize them for mobile. 
• Use an external host for video – like vimeo or YouTube – to stream your videos. Odds are good your web host isn’t made for that type of streaming.
• Use the right file type for your images. If you’re not using nextgen image formats, make sure you’re not just blanket saving all images as a PNG or JPEG, or GIF for that matter. Each has their strengths and you’ll see file size increase as you stray from the strength of the particular format. 

For example, a lot of people use PNG files almost exclusively, since the PNG format is so flexible.  But PNG is not always the smallest possible file size.  JPEG supports the broadest color spectrum, so if it’s a normal image and doesn’t require a transparent background (or animation, in which case you would use GIF), try a compressed JPEG to see if you can get the quality you want in a smaller file size.

Optimizing for Next Gen Formats

Use a plugin to convert your images into Google’s version of a web image. In the past it was JPG, PNG and now it’s WEBP. This will improve load time considerably on almost all sites.

6. Lazy Load iFrames

Another way to marry like-objects.

So when you “embed” something, you’re asking your site to load it from another location. That could be a YouTube video, or an animated gif, or the fancy graphic the BBB gives you to put in the footer of your site. 

When you put 5 YouTube videos on a page without lazy loading you’re asking the site to load each of the scripts it needs to play a video 5 times…with lazy load it only loads once.

We include this feature in our site templates but you can also implement it with a plugin.