Apply 6 Steps to Increase The Page-Load Speed of Your WordPress Website


Speed up your WordPress Site

Knowing that 47% of visitors expect a website to load within two seconds, you need to make sure your WordPress website doesn’t keep potential customers waiting.   With a fast-loading site you benefit by (a) less visitors impatiently leaving your site, (b) search engines, like Google, ranking your site higher; and (c) looking more professional overall.  Although, a fast-loading site is only one of the components that lead to online success, an otherwise slow-loading site may nullify all other efforts to market or sell your products/services or promote your brand.

So, I bet you’re thinking, “that’s all said and good; but, how do I get my WordPress site to load faster?”  In a nutshell, you’ll need a (1) good host, (2) optimized and correctly sized images, (3) minified/concatenate java script, CSS and HTML files, (4) asynchronously loading or a deferred loading java scripts, (5) leveraged browser caching and (6) a CDN. Don’t run away yet. I’ll explain everything further and in detail, below.

But first, how do you know your site loads slowly?  Besides the fact that each page loads after 7 to 15 seconds, you can use certain online tools to test your page-load speed. They include the following:

  1. Pingdom (tools.pingdom.com)
  2. Google’s PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/)
  3. GTmetric (https://gtmetrix.com/)

For this discussion, we focus our attention only on page loading speed data.  You should aim to get your site loading in less than 5 seconds.

1. Choose a Good Host

While a good host does not guarantee success, a bad host obliterates it. You can own the perfect website, but if it takes 15 seconds for your server to respond to a request, your visitors will abandon you. With WordPress, you especially need to be careful where you host your site.  Big name companies may boast a lot of customers, but it’s been my experience that they can’t accommodate WordPress’s framework efficiently. I always experience sketchy server response times of up to 12 seconds with the most basic WordPress sites.  Why do you need a fast-server response time?  Imagine you click a link to your favorite site just to experience the pinwheel of death (preload-pause hell).  Now, imagine a visitor clicking a link from your Facebook Ad to your new site and nothing happens because the server is trying to reconcile things with your IP address.  After 12 seconds of nothing, you will lose a potential customer.  Additionally, you just wasted ad dollars.  So, find a host that will properly accommodate WordPress.  I strongly recommend SiteGround. Their platform is robust and their customer service is great. Other WordPress friendly hosts to consider are the following:

  1. In-Motion
  2. WP Engine

2. Shrink, Optimize and Lazy-Load Your Images

Now that you installed WordPress on your hosted site, you probably want to start adding images to your home page.   As you begin loading stock images over 3000 pixels wide, you notice your website beginning to slow down.  What’s happening? Large image files slow down page-load speed.  Your images need to be re-sized, optimized and set to load when needed (lazy loading) in order to reduce strain on the server.

Start off by shrinking your images to the smallest size necessary without sacrificing the visual quality of the image.  A 1200 pixel wide image is much too large to present in a 221 pixel wide space.

Image is too large for div

Shrink the image to a reasonable size that looks good simultaneously on the a desktop and on a tablet or smartphone.  The reduced file size guarantees a faster image load.

Secondly, high-definition digital images carry more visual detail than what’s needed to be presented on a monitor or screen. I suggest you take your favorite image rendering tool (i.e., Photoshop) and lower the quality of your images enough to significantly reduce the file size but look reasonably nice on a screen or monitor.  Reducing the quality of an image to about 66% should do the trick.  As a side note, save your image files as JPG images rather than PNG images whenever necessary. PNG files tend to be larger in size than JPG files in general.  Above, I mentioned Photoshop as a rendering tool to optimize images.  However, you can use the following plugins to help you deliver decent optimized images throughout your site:

  1. EWWW Image Optimizer (Navigate to Media >> Bulk Optimize to use)
  2. WP Smush
COOL TIP: Hover over an image and use the Right-click (Right-CTRL for Mac) shortcut in your favorite browser to reveal the Inspect Element option. Among many things, Inspect Element can show you the natural size of your image compared to the size of the element holding it.

inspect-element-3

Finally, if you have large amount of images to load on a long page, such as in a gallery, you need to delay your image load until visitors can scroll down and visually see them on the screen.  This is called lazy-loading and the idea is load resources only when necessary and not at the initial loading of the page.  Such a delay reduces strain on a server making your website appear to load faster.  Many lazy-load plugins are available for free in the plugin repository and once you install and activate them, they do all the work for you.  Try these:

  1. BJ Lazy Load
  2. Lazy Load

Some premium themes may have lazy-load options built into their structures.  Be sure to activate them in a theme’s customize section.

3. Minify /Concatenate Your JS, CSS & HTML Files

You can reduce the weight of your programming files (JS, CSS and HTML) by eliminating unnecessary comments and white space.  White space characters like “enter” and “space” should be deleted whenever necessary in order to lighten your files.  The following plugins work to eliminate comments and white space:

  1. Better WordPress Minify
  2. WP-Rocket (Commercial)

Now, the process of eliminating white space may rank as the most arduous step you have to take when speeding up your WordPress.  I say “may” because most plugins come with their own js and css scripts and, in turn, their own concepts of structure.   Minifying or merging some scripts with others may “break” your site or, at the least, make your site look a little odd.  If you experience a break, you will need to systematically exclude your site’s js/css scripts, one at a time, before you find which files are culprit.

Java Script

Plugins like WP-Rocket and Better WordPress Minify allows you to add your files’ URLs to an exclusion field, so that the plugins will ignore that specific js/css file as it minifies and concatenates the others.  The best practice in finding a culprit js/css file is to include all your js/css files in an exclusion folder (usually provided by the plugin) and dismiss each file, one-by-one, as you run and rerun your site.  The task can be time consuming, but worth it in the end.

AN ALL-IN-ONE PLUGIN: If you want to speed up your progress.  you should give WP-Rocket a shot.  Apart from optimizing your images, WP-Rocket does everything else I’m discussing here including helping you manage your CDN (discussed later).  If you don’t mind paying the $40, WP-Rocket  contains many functions sure to speed up your WordPress site in no time.

4. Asynchronously Run or Defer the Running of JS Files

On a related note regarding your external js files, you may want to asynchronously run them or defer them until your page loads.  HTML5 allows you to use the attributes async or defer to prevent the run of your js file until your page loads. The following is an example of how you would use the attribute async as you call a js file to your page, but delay the run until the page loads:

Async Attribute

However, beware.  Some deferred or asynchronously run js scripts may break the plulgin associated with it and therefore your site.  A plugin may need to run the js file during page load to display correctly, for example. Just like the best practice mentioned in the section above, you will need to pick and choose which ones to use.   I use WP-Rocket to help me organize my js files.  Although it’s a commercial plugin, I find it works better than anything else out there.

5. Leverage Your Browser Caching

Reuse the data and images in your client’s browser cache so your host’s server won’t have to waste time reloading images and data.  The aforementioned plugin WP-Rocket takes care of that.  However, if you don’t want to pay for a premium plugin, you can use Leverage Browser Caching Ninja which does a wonderful job rewriting your htaccess file.  All you need to do is install and activate this plugin.

6. Use a CDN

I highly suggest utilizing a content delivery system (CDN) to reduce strain on your server, therefore improving your page-load speed.  Where the data on your website does not change from minute-to-minute, a CDN can cache (take snapshot of your site) and store the data on a network of servers around the world.  I recommend using CloudFlare.  It’s free, easy to setup and use and will make a world of difference for your page-load speed. Other CDNs are the following:

  1. MaxCDN
  2. RackSpace Cloud Files (Commercial)
  3. Amazon Web Services

The only technical thing you need to know about setting up a CDN is updating your Domain Name System (DNS).  When you sign up for a CDN, they will give you two nameservers (i.e., hope.ns.cloudflare.com). In the “domain management” area of your host’s administration site, you should find the option to change your nameservers.  Substitute your host’s standard nameservers with the two the CDN gives you.  The new CDN nameservers, will point your domain towards the CDN’s server.  The steps take less than a minute and there’s no down time to your site.  Please note that you may want to exclude your WordPress Admin and Login sections from the CDN.  They do not necessarily need to be cached.  Most CDNs will allow you to exclude certain directories and files from their process.

Conclusion

A slow-loading site drives away visitors.  You need to make sure your WordPress site loads in a snap.  Apply my recommendations to your website and keep your visitors from impatiently bouncing away, increase your search engine ranking and look like a pro.

NEED TO SAY SOMETHING?
  1. Let me know whether you’re inspired to use these steps or if you have other ideas. Leave your comments below.
  2. For those of you who want more help with your website, be sure to contact me by [CLICKING HERE].

Leave a comment

Your email address will not be published. Required fields are marked *