Website Optimization + Actionable Steps To Improve Your WordPress Sites Response Time!

We are a nation obsessed with speed.

Technology is evolving at such a rapid pace that we have become accustomed to having our expectations shattered all the damn time.

Think about that for a moment. Every year we expect new innovations, in a smaller form factor, with more utility, better battery life, water resistant, durable and faster – always faster. This is your user base – and their appetite for speed is only going to increase! It wasn’t all that long ago that computers had laughable amounts of computing power while filling up entire rooms.

Now we have laptops, smart phones and a constant stream of new and shiny devices that are all pushing technology to go further every single year. As a site owner it’s critical that you realize just how important delivering a responsive and quick user experience has become in today’s digital landscape. So let’s take a look at…

Why You Should Care


To help put this all into perspective – Amazon.com has estimated that just 1 second delay in their page loading speed would result in a loss of 1.67 BILLION dollars in annual revenue, or roughly 2.7 million dollars Every. Single. Day.

And it’s not just Amazon who has recognized this need for speed, Google has estimated that if they returned their search results just a 1/2 second slower to their users – It would result in 8 Million less searches every damn day.

Page-Load-Time

These statistics obviously reflect companies of great size and scale – but it serves to illustrate my point.

Speed Matters.

Page speed & optimization not only impact your users experience, but it also has a direct correlation with bounce rates, CTR, pages viewed per visit, user trust & more. While page speed alone isn’t going to directly impact your search engine rankings – You better believe that signals like bounce rate and time on page can and will have a huge impact on your success online.

[learn_more caption=”Need more Convincing? – Check out This Awesome InfoGraphic!”]

infographic-page-speed

Credits: The Awesome Info-graphic above was created by onlinegraduateprogram.com, unfortunately the domain is no longer active and has been posted for sale.

Bonus!

A survey by Akamai reported the following statistics from their study:

  • 50% of people expect a website to load in 2 seconds or less.
  • 40% of visitors will abandon a page if it takes more than 3 seconds to load
[/learn_more]

Hopefully by now you are sufficiently shocked, enlightened and eager to get started. If you have any questions or concerns along the way, please don’t hesitate to ask in the comments section below and I’ll do my best to help you get things sorted out.

 

Prologue & Quick Start Guide


You’ll probably notice pretty quickly through this tutorial that the site I’ve showcased here in this guide isn’t EveryDay-Tech.com. StraightToThePint.com is a new site that I’ve been working on lately (which would explain a bit of my absence posting here @ EDT – sorry!). The reason I chose to showcase this particular site is because it is far more complex and I wanted to ensure that I challenged myself sufficiently so I may encounter and in turn cover as many eventual struggles that others may share.

With a fancy mega menu, built in forum, a mass of images and more – It seemed like the obvious candidate. Hopefully forcing myself to jump through a few extra hoops is reflected in the quality of this guide and the following video. 🙂

Alright – Enough with the backstory, Let’s get started…

**While I feel that the video is a great place to start, It is by no means as comprehensive as the guide that follows. If you encountered any errors, display issues or anything else while following along with the video – I encourage you to read the entirety of this guide to catch anything that may have been glossed over in the video. And of course, If you still have any questions at the end of your journey, don’t be shy about reaching out in the comments below!

 

Host With The Most


For most bloggers and site owners who are just starting out, hosting plans will provide you with a low price shared hosting option. What this means is that depending on your ‘luck of the draw’, you may be paired up with any number of either low traffic websites on the same shared resource or the inverse – a bunch of high traffic sites that are consuming a good deal of resources from everyone in the shared hosting pool!

While most hosts will do their best to load balance and throttle these types of users for the greater good, sooner or later – You’ll be forced to migrate your site to a dedicated server once your traffic increases enough to warrant it.

Not all hosts are created equally!

Your particular provider may excel in certain areas and be rather aweful in others – Make sure you do your research here and figure out what metrics are important to you and will give you the highest return on investment for your hard earned money when looking at hosting providers. Check out sites like WebHostingSecretsRevealed.com for host reviews, ratings, pricing & other important details.

**If anyone is curious – I personally use BlueHost.com (aff) for hosting all my websites.

 

Choosing The Right Theme 


There is an ever growing number of free and premium themes on the WordPress market these days, So how do you figure out which ones are going to be your best bet for the long haul?

Truth be told – It’s not always an easy question to answer…

The best advice I have to offer here is to do your research – Once you’ve narrowed down your choices to a few of your favorites, make sure to take some time and visit their website and review that particular themes highlights. A lot of developers recognize that performance is just as critical as a nice paint job, look for any notation of optimization or performance enhancements from the developer. It’s easy to write sloppy or redundant code, but if the developer has gone through extra hoops to improve performance and response time – you better believe they won’t be shy about telling you about all the hours invested in making that happen.

While there are many options on the market, I’ve personally become very fond of anything Thrive Themes publishes. (StraightToThePint.com runs one of their themes after all!) You also can’t go wrong with many of the Elegant Themes or StudioPress themes. That said there are thousands and thousands of themes to choose from, just make sure that when you are shopping around you do a bit of baseline testing and research before committing too much time and energy trying to make a poorly coded theme faster.

 

Optimize Your Plugin Profile


The more plugins you have, the more javascript, css or lines of code will be required to load your page. Given the obvious exceptions of properly configured performance enhancing plugins – Most of the plugins on your site will be consuming valuable resources during loading times.

The key here is to weigh the cost to benefit ratio of each plugin you have installed.

While there may be some obvious choices among your plugin profile, many of them may have become core elements in the look and feel of your website. Thankfully with nearly every plugin, there are several other options that will generally do the same thing – the only difference being the performance impact they have on your site. The easiest method I’ve found for trimming down non-essential plugins and replacing bloated ones has definitely got to be using the P3 Plugin Profiler tool.

P3-Plugin-Profiler-Report

To get started – simply follow the link above to download and install the P3 Profiler plugin. Once installed, you’ll be able to run reports like the one above that will give you a detailed breakdown of which plugins are consuming more than their fair share of resources to load. It’s important to keep in mind however, when looking at your report – not every plugin will be applicable for your visitors. For Example: The custom login plugin should only be loaded for you, the administrator.

So after taking a look at our results, I can easily start trimming the amount of plugins I’m not using within Jetpack and maybe even start looking to disable features I’m not using within Yoasts SEO plugin. The custom login plugin can easily go (though I’m not convinced it actually impacts load times for users…), along with a few others that fell into the ‘other’ category. If you aren’t sure what to make of the results on your own site, I would suggest that you disable all non-essential WordPress plugins and run a before and after test on a site like GTmetrix.com. This should give you a more accurate look at just how much of an impact those plugins have on your site.

If you aren’t certain which plugins are the best for the job – I encourage you to check out my expert roundup. In it, I ask 42 professionals to name their go to plugins for getting things done in WordPress.

 

Optimize Images


Ahh..Images. We all love them and they help to break up content and add that extra punch to the look and feel of your site. Perhaps that’s why it’s so easy for us to get carried away with adding too many to our site. (I know, I know S2TP has lots of them!) The truth is that this is easily one of the quickest and easiest areas for many site owners to improve their site speed and response times.

Luckily – Implementing image optimization for your site is incredibly easy.

Ewww-Image-Optimizer-Banner

Ewww image Optimizer can help you do just that. Once installed, It will automatically compress all the images that you upload on the fly. It also will provide you with a tool (Media > Bulk Optimize) that will allow you to process the entirety of your current media library using their bulk optimize tool. While I currently use this plugin on all of my sites, I know many people have also had a great deal of success with WP.Smushit. Both are great at what they do, so you really can’t go wrong with either!

 

Are You Retina Ready?

Since we’re on the topic of image optimization, It seemed like the perfect time to discuss preparing your site for Retina ready displays. While this won’t have any real effect on the performance of your website, It will definitely improve the user experience for the growing number of users who are buying and using retina ready displays.

[learn_more caption=”How To Setup Retina Ready Images”]

There are a number of ways to setup retina ready images – probably the most common one you will encounter will be done by uploading images @ x2 resolution and then using css to force the re-size. While it works functionally, doing this kind of thing will kill your sites load times… If you are serving every image at twice the resolution, that then has to be re-sized, you are doing a lot of extra work for non-retina users and forcing them to load extra data.

The second, and probably more appealing option is to create 2 different versions of each image  and then serve up the normal resolution image to non-retina users and the x2 resolution to retina users only.

Standard Resolution Vs @x2 Retina

Standard Resolution Vs @x2 Retina

The free WP Retina X2 plugin is able to detect whether the user is browsing your site via a normal display or Retina ready one and then serve them the proper resolution image. Since there is no way to double the resolution of existing images on your site – I’ve resigned to manually create & upload both the regular image and the @x2 retina image for the most commonly loaded images on my site. (IE – menu items)

To do this – Simply connect to your site via FTP and browse to the following location to navigate your current images.

/www/your_domain/wp-content/uploads/2015

The way that the plugin works, is it will look for 2 different versions of the same image and based on the naming convention – will serve up the appropriate image to your end users.

For Example:

Site-Logo.png – Will display for non-retina displays

Site-Logo@2x.png – Will display for retina displays

[/learn_more]

 

Remove Static Query strings


Resources with a “?” or “&” in the url may or may not be cached properly by all caching services/plugins, by removing these queries for what are supposed to be static resources – you should notice a slight increase in performance.

Remove_Query_Strings_From_Static_Resources

While you could go through the hassle of adding the functionality manually (see below), as with most things WordPress “There is a plugin for that!”. The Remove Query Strings From Static Resources plugin is incredibly light weight and does exactly what is says. It’s entirely automatic and I’ve never encountered any issues by having it enabled. It is probably the easiest thing on this list – Just install-activate-done.

[learn_more caption=”Remove Static Query Strings Without A Plugin”]

I decided I’d place this here purely for reference, As there is no actual benefit to inserting the required lines of code into your function.php file manually. The above plugin will add something similar to the lines of code below and persist through updates.

That is literally the only thing it adds to your site, a few lines of code. I know I preached about plugin overkill in the previous section, but this is honestly one you don’t need to worry about!

To insert the code manually – Add the following to your function.php file.

 *Note: Theme upgrades will over-write this file. 

[/learn_more]

 

Minify & Inline CSS, JS and HTML


Up until now most of what we’ve done has been fairly straight forward, well If you are going to struggle with anything on this list…It is probably going to be this section right here. The goal here is to compress and merge all of your sites CSS & Javascript to reduce the number of http requests, reduce the size of the files being called via compression and optimize the order in which they are called.

The problem many people encounter when getting to this stage is that by optimizing your css+javascript, compressing it, merging it and changing the load placement can result in your site not displaying properly. I tested at least a dozen different options to try and make this process as painless as possible – What I ended up with was a the simple and elegant Autoptimize plugin created by Frank Goossens.

So rather than try to relay to you what exactly this plugin can do for you, I really think Frank explains it best…

Autoptimize makes optimizing your site really easy. It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head, and scripts to the footer. It also minifies the HTML code itself, making your page really lightweight.

Alright – So let’s get started!

1.) Download & Install Autoptimize.

2.) Go to: Settings > Autoptimize.

3.) You should be greeted by the following screen, prompting you to check HTML, JS & CSS.

**Below is my personal configuration – what I’ve found to work the best in all 3 of my sites.

Autoptimize_Config

Please note that your excluded javascript + css will differ!

 

My recommendation is to enable each option one at a time and then check to make sure that your site on as many different browsers + devices to see if any functionality or display issues crop up as a result. Typically HTML is usually pretty safe to enable – but depending on your CSS or JS profile – It may take some extra finesse to sort out which files should be excluded.

**It should be noted that if you don’t have an overtly complex website like mine, the defaults Autoptmize generates upon install should typically work out of the box. 🙂

4.) When you are satisfied, Save Changes and Empty Cache.

 

Cache Your Content


Setting up a caching plugin on your site is probably the single biggest thing you can do to improve your sites loading times.

So what exactly does a Cache plugin do?

In order to understand why a caching plugin can make such a difference for you and your users – It’s important to understand just how WordPress presents pages to your visitors. Basically whenever a user lands on a link to your website, WordPress gets a request in php to create generate the HTML file on the fly for the user. So a big part of what the cache plugin does for us in WordPress is allows us to cache the actual HTML file that is being rendered from WordPress and serve that file up directly without the need for the extra PHP work.

While there are a number of different cache plugins on the market, I highly recommend using WP super cache. While you can achieve similar results with other plugins (like W3 Total cache), I’ve found WP super cache to be just as powerful, while still being user friendly and configurable.

1.) Download & Install WP Super Cache.

2.) Activate the plugin and browse to: Settings > WP Super Cache.

3.) From the Main page – Go ahead and enable Caching.

WP_Super_Cache_Enable

 

4.) Then visit the Preload page and enable Preloading…

WP_Super_Cache_Preload

 

5.) Finally, Visit the advanced tab and make sure to enable the following:

  • PHP caching
  • Compress Pages
  • Don’t cache pages for known users.
  • Cache rebuild
  • Extra homepage checks
  • CDN support (if applicable)

 

Modify Your .HTaccess File


Your HTaccess file plays a key role in how your site serves up content, if it compress resources, sets expire dates and so much more. Often times when you enable a function within one of the performance plugins we covered earlier – What it actually is doing behind the scenes to make those changes is simply appending your HTaccess file.

Below I’ve highlighted some of the most sought after changes for your HTaccess config. You should treat the following sections as sort of al-a-cart when considering which sections to add to your own configuration. As everyone HTaccess configuration will vary slightly depending on the plugins they use and how they are configured.

You can find your HTaccess file by in the root of your sites folder. (Normally accessed via FTP.)

[learn_more caption=”Web Performance”] [/learn_more][learn_more caption=”Internet Explorer”]

The following code should only be added if you are experiencing display issues within the IE browser. It forces IE 8,9,10 to render pages in the highest mode available, independent of local settings.

 Note: This code may or may not be necessary on your site – Please make sure to test it thouroughly before putting it into production. If you are unsure, It’s best to just leave it out!

[/learn_more][learn_more caption=”Media Types & Character Encodings”]

While I haven’t personally encountered a situation where I needed to add any of the below sections to properly serve up corresponding file types – It may come in hand if you are encountering odd display issues!

[/learn_more]

**For additional modules, details and code – Make sure to check out the complete HTML5 BoilerPlate document on github.

 

Setup A CDN


The purpose of a CDN (or Content Delivery Network) is to off-load static elements of your site to be loaded from what is essentially a separate domain. Or to put it more simply, it allows users to load certain items from your CDN, while simultaneously loading other elements from our site – in theory, improving your sites response time and reducing server load.

There are varying tiers off services that be configured for CDNs, allowing you to configure which resources will be handled by your CDN and which ones will be loaded by your host. Initial configuration of setting up a CDN will vary depending on the company you choose, but for the most part they all should be fairly intuitive.

Here are a just a few to help get you started:

 

Test, Test & Test Some More!


With so many different devices, browsers, firmware versions, operating systems, etc – that are on the market today, It’s important that you put your site through the paces to make sure it looks great at all the resolutions and all the major mobile devices.

To make sure that you are focusing your time on energy on which resolutions will have the most impact – I recommend checking out this report. As far as mobile devices go, It’s not too trick to figure out…You can pretty much assume that the progression will look something like: iPhones > iPads > various android devices, kindles + tablets. I really only have one word of advice at this stage….

If you think you’ve tested enough, You probably need to test more…

 

Tools For The Job


 

p3-plugin-profiler-thumb-v2

P3 Plugin Profiler

A great plugin for detailing the resources being used by each plugin you have installed on your website. Great for finding bloated/troublesome plugins and troubleshooting load time bottlenecks.

Asset_Qeue_Manager

Asset Queue Manager

A plugin for more advanced users who want to take complete control over how their javascript & CSS gets loaded on their page. The plugin will give you a detailed breakdown of what JS & CSS elements get loaded on each page and when.

 

Screenfly

ScreenFly

Screenfly is a great way to put your site through the gauntlet, allowing you to test how your site displays on different resolutions and devices.

 

IE-Tabs

IE Tab(Chrome only)

A great tool that allows you to replicate how your site will display on varying versions of internet explorer.

 

Below are some of the most popular places to test your sites metal:

 

TakeAways


I’ve learned a lot over the last several days of relentlessly testing plugins, .htaccess code & split testing – but to summarize here are some of the most valuable things I’ve learned along the way…

  • Test Everything. 7 times. If you think you’ve tested everything enough, You probably should keep testing. (Seriously – Test all your pages, on as many devices and resolutions as possible!)
  • Make sure you are utilizing several different testing platforms to make sure that you aren’t missing certain metrics.
  • Don’t get caught up in your score too much. There are instances like calling remote resources and “cookieless” domains that simply may not apply to your configuration.
  • Perceived load time > actual load time. By loading non-essential and infrequently used javascript and css in the footer, your page can start to load all your core visual elements – giving the user the illusion that the page has in fact completely loaded when in reality non-essential elements are still being loaded as they start reading.
  • Download all the major browsers and use tools like screenfly to make sure you haven’t missed any oddities.
  • Use Chromes Inspect Element or Firefox’s Firebug to see if their are any issues with javascript or CSS loading properly.
  • Make sure all your plugins are up to date!
  • When you are finished – Don’t forget to reward yourself with an ice cold beer 🙂 You deserve it!

So there you have it – the end result of days of trial by fire testing.

If you have any further suggestions regarding pagespeed or would simply like to contribute by posting your before + after pics of your pagescore in the comments below, I’d love to hear from you!

 

Final Scores!


 

GTmetrix_PageScore_ReportHell yea!

While it’s not quite the perfect score I was going after when I started – I’ve come to realize that the metrics they use are more of a guide line than anything else. A big reason why my YSlow grade is only a 91 is because I got a zero for not using a CDN. It turns out that with my limited amount of traffic and current site configuration, the CDN was actually slowing my site response times down! Perhaps I’ll change this up when traffic levels increase for StraightToThePint.com, but for the time being she is humming along better than ever 😀

So while I may never get 100/100, it doesn’t really matter – What’s important is the actual load times, which have dramatically improved from their previous 11+ second starting point. If you’ve made it this far, I’d like to congratulate you on taking a huge step to improving your own sites loading time, user experience and hopefully profits.

~Cheers

 

Frequently Asked Questions


[learn_more caption=”Can I Add Expire Headers To Remote Resources?”]

Short anwser – No.

Resources like Goolge fonts, map API’s and similar items are called from their servers and thus aren’t affected by your local .htaccess file entries. While it may hurt your score *slightly*, the fact of the matter is they have blazing fast servers that likely serve the content to your users much faster than you could ever hope to. So while your score may suffer a bit, the actual performance should be completely optimized – one less thing to worry about 🙂

[/learn_more][learn_more caption=”What Is the pixel.wp.com/g.gif entry?”]

If you follow the link from gtmetrix – You will see a very, very small smiley. This is the form of tracking that is used by jetpack site stats to accumlate their data, kind of a kin to google analytics script. While you can configure the smiley face to be hidden ( site stats > configure > hide smiley icon ), It will still be called in the background for site stats.

If you really want to disable it and don’t care about site stats – You can go into the jetpack config and disable the site stats plugin.

More Information…

[/learn_more][learn_more caption=”What Is A Cookie Free Domain?”]

A cookie free domain means that you are serving most of your static files from a sub-domain. In the case of GTmetrix, it would mean setting up a sub-domain and then adding the appropriate code to your config to tell your site to look for static resources on the subdomain vs the main domain. The actual net benefit for setting something like this up would be marginal at best – I would urge you to research the issue further, as if you are using a CDN they may very well be taking care of this already. ( Although it may not reflect in your actual score!)

For Example, I was able to find this great bit of information via a quick google search about the CloudFlare DNS service. In response to questions about the cookieless domain statistic question that shows up in your Yslow score – Cloudflare issued this response:

CloudFlare will add a security cookie to any domain or subdomain that is being proxied by our service. In addition, since CloudFlare is already caching your static content by default, there really is no need to have a cookieless domain.

So despite the score reflected in the screenshots above – In effect if you are able to take advantage of Cloudflare (or a similar CDN) – Your page load speed shouldn’t be affected!

[/learn_more][learn_more caption=”Can I Use A CDN with My Cache Plugin?”]

I would imagine that this will heavily depend on your chosen CDN and site configuration, however I did some digging and found the following response for CloudFlare users…

Generally speaking, CloudFlare’s free CDN works well with caching plugins for WordPress likeSuper Cache and W3TC. In order to minimize potential conflicts, here are some quick recommendations:

1. Do not use more than one caching plugin on your site (don’t use Super Cache and W3TC at the same time, for example). A conflict will eventually arise.

2. Do not turn on Auto Minify compression features at both CloudFlare and the caching plugin. You would want to have only one minify option running on your site at any time. You also don’t want to install additional minify plugins if you’re already using one.

3. You do not need to put anything in the hostname fields for a CDN relative to CloudFlare. Those fields are used if you are using a traditional CDN provider (AWS, Akamai, etc).

Source: support.cloudflare.com

[/learn_more]

 

 

 

Pin It on Pinterest