How do I optimize my website?

by | Jul 9, 2020

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 on to the next site. The action of improving your website’s speed and performance is called “optimization”.

On a computer, high-performance hardware can bridge some site speed gaps, but on mobile, your site will not be afforded such mercies.

People have become used to instant gratification – mobile access has allowed people to work from their computer in their pocket. As a result, the search engines now rank sites based on their content and performance. Do not expect your website to show up at the top of search if it doesn’t look good and load quickly on mobile.

Welcome to the Age of Mobile-First Optimization

Let’t take a moment to marvel at the capability of today’s cell phone. You can play video games, write documents, send emails, film videos, and of course make phone and video calls.

The portability of smartphones  – versus the stationary nature of a computer – has made the importance of a good looking mobile website an absolute must. If you are like most people, you access the internet on your phone every day, and likely multiple times a day. 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 almost everything.

So ask yourself – how does your website look on your cell phone?

Bounce Rates and Engagement on Mobile

It might sound crazy, but your website has about 3 seconds to load before mobile users will jump ship and go elsewhere. With this in mind, you might want to consider your “above the fold” content to ensure whatever is up top loads lightning fast.

If you have an online store, speed rules. Around 47% of smartphone shoppers expect your website will load in TWO seconds. If they are hopping all over your website, those seconds really add up, so weigh that in your consideration for what’s important for your users.

This is where things start to get tricky – while a fast loading website is essential, it still needs to look good, so you will be tasked with walking the tightrope between a fast website and a good looking website. If you can maintain a proper balance, you will be on your way to good rankings and higher engagement.

Speed Test Tools

The first thing you need to do 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.

Before you get your grades and start thinking the world is coming to an end with how slow your website performs, just remember you are up against a rubric that holds sites like Amazon accountable. If you are a one-man-band or perhaps only working with a small team, you would be wise to remember the best is the enemy of good. Your goal is to make your site good enough to not receive penalties – not so fast and stripped down that users receive a terrible looking website faster than the blink of an eye.

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 PageSpeed 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.

What to do with Your Results

First and foremost: don’t get overwhelmed. Fix what you can and then retest. Some big reasons people get failing grades are due to massive image sizes and lack of a caching tool and CDN. The lower your grade, the more it should improve from simple fixes. Shoot for about a 75-90 on Pingdom and GTMetrix and you will have a site that is sufficient.

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. The final 10-20 points on optimization tests are often tricky, highly technical processes. Making technical fixes runs the risk of breaking your website, so if I were to ever recommend getting outside help, this is where I would recommend doing so.

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 and type 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 Rocket

We highly recommend this plugin for caching. This is a premium plugin that goes the extra mile to improve your website’s optimization capabilities. The nice thing about WP Rocket is that it is a complete solution with a relatively simple implementation strategy. The essential setup does not require the help of a developer and the support team is available if you need help.

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. As a free tool, this is a pretty good solution. The premium functions make this a complete solution, but if you are only interested in working with the free version you should understand there are certain intentional limitations intended to promote the paid version of this plugin.

Autoptimize

This plugin offers a lot more than just caching.  It helps manage your files – moving and minifying JavaScript and CSS files. Autoptimize 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. Autoptimize is an incomplete solution, but as a free solution, it is really good compared to the rest.

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. These tools are powerful, so they harbor a great deal of potential to either fix your site speed woes, or the potential to crash your website. Furthermore, if you ever plan on transferring your website, make sure you completely remove your caching plugins (not just deactivate, remove) prior to running a transfer.

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 they aren’t properly optimized.  (Remember in GTMetrix? They will give you details to your ideal image sizes)

You want to serve your visitors next-gen image formats, which goes beyond what WordPress offers on the back end. While you want to keep your image uploads small, there are programs and services that can convert your images into webp formats.

WP Smush Image Compression

Every site should use this plugin – it is simple and the free version can go a long way to improve your site performance.  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 file size in the first place. (The recommended file size for an online image is 200 KB.)

Smush will let you bulk optimize your images and gives you the option to remove metadata from the 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. WPMU Dev has a lot of other plugins, and I find most of them to be great enhancement opportunities for various other aspects of your website.

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 (such as 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, but you can also bet 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.

Today there are a number of hosting companies with built in CDN options. Given that the CDN is provided by your hosting provider, I would recommend trying the in-house option before moving to an external source –  the in house option could yield great results and save you some money.

Cloudflare Basics

Should you choose an external option, my personal recommendation is to start with Cloudflare. Sign up at Cloudflare.com. Once you have an account – you need to pick a plan. There’s a free plan as well as several paid options. A site without a CDN has an opportunity to improve, so if you have not implemented a CDN, give the free one a shot, then consider the paid options as needed for your site.

Once you’re set with your name and account info in Cloudflare’s website, all you do is point the nameservers of your site over to the Cloudflare CDN. It’s typically a 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 for consistent performance when you get set up initially – changing your DNS shouldn’t cause any issues, but 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 optimizations or caching plugins just from using Cloudflare.

(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, but it is not Everything

Having a beautiful website with lots of pictures, a nifty slide show, and videos may seem like the top priority, but fast and decent looking beats slow and visually stunning every time. If your site is too top-heavy to load quickly, all the bells and whistles will be missed by users who left before the site loads.

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. You can upgrade to better servers, but you also want to keep in mind that you can make a great looking website with simple design techniques.

Regardless of your website build – get a CDN. If you aren’t ready for 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, you will have a website that runs faster and gives you a better chance of success. This could improve your SEO rankings, increase engagement, and in the long run, boost sales.

Keep your eye on your site’s performance – this will be a moving target. You can get a faster loading website with relatively little effort, but like anything else with your website, a little bit of consistent effort will go a long way.

Stay In The Know!

We are coming out with great articles, courses, and ways to help you continue to enhance your digital web presence. Subscribe to our email list to be notified when we introduce new content!