How to Optimize Your Website for Speed and Load Time

by | Oct 7, 2018

If you want to get your website up in the SERPS, you need to keep an eye on your website’s load time and performance. We humans are an impatient lot and when a web site takes too long to load – it’s bye Felicia.

On a computer, load time is one thing, but on the phone – no mercy.

According to Statistica, the worldwide percentage of people viewing internet paged on mobile phones will reach over 60% in 2019. Those figures don’t include tablets which can also rely on cell data for internet access.

That means that your site doesn’t just need to be responsive – it needs to load fast on mobile devices.

Online is Mobile

Initially, the perception was younger users were the ones using smart phones to access the internet. But as screen sizes grew and mobile processors improved, more and more people of all ages have embraced their phone as the primary way to get online.

The portability of smartphones  – versus the stationary nature of a computer – has pushed adoption levels faster than might have originally thought. It’s not like you’re going to haul your laptop around looking for free Wi-Fi to find the nearest Starbucks…which has the free Wi-Fi you need.

We use our phones. We use our phones to find stuff, to get prices and hours of operation, to chat, to buy books, movies, window shop car prices, download apps.  We use our phone for most everything.

How well will our phones like your website?

Smartphone Bounce

It might sound crazy, but your website has 6-10 seconds to load before 30% of smartphone users will jump ship and go elsewhere.  Six to ten seconds. Count it out, folks.

If you have an online store, speed rules. Around 47% of smartphone shopper expect – expect, mind you – that the website will load in TWO seconds. Thousand one, thousand two. Ding! Just to pour some tequila on your wounds, when sites don’t meet expectations, consumers are less apt to shop there again.

The future of online is mobile and your site is making it’s grand entrance.  Let’s speed it up.

Speed Test Tools

The first thing is to find out how fast (or slow) your site is.  There are some standard tools, as well as some mobile specific, that will help you understand how fast your site is loading and hopefully some tips on how to improve it.

Free Online Tools

  • Pingdom: This is a free link to a tool from pingdom.com which is a paid service with many components. This tool quickly helps you understand your speed score and performance issues.
  • GTMetrix: Excellent little tip about this site: They show images that need to be optimized and give you a link to the optimized version. Download the compressed version and replace the one you’re using. Easy-Peasy.
  • Google Page Insights: This is part of the Google Developers tools, so it’s pretty straight forward. The only issue you may have is that they are less generous with simple fixes than the other two online tools.

Mobile Specific Tools

These reviews look at a number of factors that affect your mobile performance.

In our experience some of the issues are easier to fix than others – especially if you’re not particularly technical. But they do identify some easier ways to improve load speed and usability on a smartphone.

  • Mobility Test Tool: This is a Google-based tool, so it seems like it would have a leg up on what’s happening.  I have found that after making changes, the analyzer doesn’t seem to pick them up right away.
  • MobiReady: This tool dives deep into what’s going on with your site. They offer lots of explanations for what’s up – some of them provide tips on fixing them.  If not google the problem.

Test Takeaway

Don’t get overwhelmed. Fix what you can and then retest. Ask friends to check your site on their phones or if you have fans and followers on social media, ask for feedback.

I will say that GTMetrix has an awesome knowledge base that offers code to help with caching and scripts issue.  (Big Tip: If you use Yoast’s SEO plugin, you can edit your htaccess file right from the file editor in the plugin settings. A lot of the code that will speed up your site goes right into that file.)

Once you’ve done everything you can, decide if the remaining issues are serious enough to get a designer or a developer to fix. If you’re running an online store, fixing your mobile performance should be a high priority.

Improving Web Site Speed

Typically, there are three major factors that will slow down your site:

  • How JavaScript and CSS files are handled
  • Poor use of caching
  • The size of image files

We’re going to explain how each one affects your site and offer some suggestions for plugins or code snippets to help you speed up.

JavaScript and CSS Affect Website Speed

If you look at the code for your WordPress site, you will see a number of JavaScript files.  Every theme adds them, every plugin adds them, and they all have to load. JavaScript loading can block pages from being displayed.

Cascading style sheets (CSS)  also add weight to your page and typically there are a lot of files, plus custom CSS and some inline styles.

All of these files are needed to compile the html that your browser needs to display the page properly.  As a website adds more bells and whistles and mega-themes more prevalent – the bulk of it all can pull down your site’s performance.

Parallel Server Requests

What happens is a lather, rinse, repeat cycle. For every file, the site has to talk to the server before it can move forward.  Twenty different JavaScript files? Twenty trips to the server. These transactions may seem small, but they add up. And if you’re hosting on a shared server – other people are using the same resources you are.

Optimizing your website typically involves finding a way to combine, minify or move the files to different locations on the page.  Another more technical option is to add a script loader file  that tells WordPress to change how it handles scripts.  You can also consider using a Content Delivery Network (CDN) like Cloudflare which is discussed below.

Typically, most people start with a good caching plugin.

What is Caching?

WordPress is dynamic, meaning the pages are created by pulling data and structure (text, images,) together every time it’s viewed. When  a “cache” – kind of like a stash – is created, it holds the most recent version of the page and delivers it to your browser

The browser also has a cache – which is why sometimes when changes are made on your site and you go to check them, you don’t see them.  You can clear your browsing data, open an incognito window or force a reload and you’ll see the proper version of the page.

Using caching properly will significantly improve your web site’s speed and overall performance across all devices.

WP Fastest Cache

We highly recommend this plugin for caching. It’s free – just go to Plugins/Add New on your dashboard and search for it. Basically, what is does is create and deliver static html files to the browser, eliminating the time and resources spent on creating a dynamic page.  WP Fastest Cache will also minify the html, JavaScript and CSS files to improve your load speed. Download it here if you prefer.

W3 Total Cache

This plugin delivers  a lot of options to set up your caching and site optimization, maybe a few too many in my opinion.  They get good reviews, but the set up can be a bit challenging. If you try the plugin, we’d suggest you only change the settings you understand.  Because W3 Total Cache reaches into the back end of your site (including your htaccess file) make sure you monitor the site’s performance after its activated.

AutoOptimize

This plugin offers a lot more than just caching.  It helps manage your files – moving and minifying JavaScript and CSS files. AutoOptimize is pretty easy to set up – most of the default values are good enough.  We like this plugin, but you want to make sure you have a backup of your site before activating it. Sometimes moving files around can cause unexpected problems.

Overall

Plugins are an essential part of your WordPress site but don’t try to “over-optimize” your site. And remember, every time you add a plugin – you add bulk to your WordPress installation.

Use what you need and delete what you don’t.  Before any “optimizing” plugin, back up your site in case something goes wonky.

Size Images for Speed

We’ve all been to those websites where the picture at the top of the page slowly rolls down…It’s not how you want yours to be. We all love images online, but they can definitely kick your site’s butt if the they aren’t properly optimized.  (Remember in GTMetrix? The link to the optimized versions of oversized images?)

You want to use .jpg or jpeg files for your site. The only time to use a .png file is if you desperately need a transparent background for an image.  Really think that choice through, because .png files are not compressed and are normally huge.

Smush Image Compression

We love this plugin.  Start with the free version but don’t hesitate to step up to the premium if you need even smaller file sizes.  The free plugin will compress any image under 1MB – which is way too big of a file size in the first place. (The recommended file size for online image is 200 KB.)

SMUSH will let you bulk optimize too and gives you the option to remove meta data from image file. Another nice thing is that there’s no limit on the number of images you can compress – unlike Short Pixel’s free plugin which sets monthly quotas.

Content Delivery Network

Let’s walk through what a CDN is and how helps speed up your site.  A CDN is a group of networked servers with local “Points of Presence” (POPs) spread all across the network.  When your site uses a CDN – we recommend Cloudflare – your content is served from the POP closest to the location of the request.

A user in Seattle and a user in Virginia will get the site delivered from two different POPs. As opposed to getting the content from the original server location – which could be anywhere in the US or Europe. The whole point of a CDN is speed.

For example, Cloudflare has over 110 datacenters – not only does your content get delivered quickly, you can bet your butt they’re protecting that network and by proxy, your site. This reduces your security threats and reduces your downtime no matter what happens on your host provider – you’re still up.

Sign Up

First, sign up at Cloudflare.com. Once you have an account – you need to pick a plan. There’s a free plan, jumping to the next level running $20.00 a month. If you have an online store – this might be worth the money – it also optimizes mobile experience.

Once you’re set, all you do is point the nameservers of your site over to the Cloudflare CDN. It’s typically pretty easy proposition, ask your host provider for support if you need help.

Or you can use the Cloudflare plugin.

Cloudflare Plugin

Surprisingly, this plugin is kind of a mixed bag in reviews. You will need to get the API key from your account to activate it.  Once it’s installed, it will take a day or so to transition to the new location. Monitor your site – though changing your DNS shouldn’t cause any issues, it’s always best to pay attention.

Cloudflare Summary

I’d recommend using their site instead of the plugin to set up, only because of some of the issues raised in the reviews – but that’s just me. Either way, you may be able to deactivate some of your other optimization or caching plugins too.

(Watch for conflicts – disable the caching plugins one at a time if something breaks.) Cloudflare support is offered via email, typically within 12 hours for the free plan.

Speed Matters Most

Having a beautiful website with lots of pictures and flip boxes and videos may seem like the top priority. But performance beats pretty every time. Because if your site is too top heavy to load quickly, all those bells and whistles will never get seen.

Don’t get me wrong – you want your site to reflect your brand.  And there’s no reason you can’t design a stunning website. Just be aware of how that may affect performance, and respond accordingly.

Test your site regularly and pay attention to changes in the load speed. The more traffic you get, the more resources you gobble up. On a shared server – that could slow your site down.

If you have an online store – get a CDN. If you don’t need a CDN (at least right now…) grab a great caching and optimization plugin.  Keep the quality of your images without dragging down the load time. Compress and optimize all your image files.

When you follow these steps, your site is sleeker on the code side which mean faster delivery on the user side.  No point in building a website if it’s too heavy for 60% of users to see.

If you test and improve your website’s speed – you’re bound see a surge in your SERP rankings.

Free Exclusive Website Building Tips

Enter Your Email to Get Access to my Proven Techniques to Building Great Websites and More

Share This