[vc_row][vc_column width=”1/2″][vc_column_text]

Tech Tip: WordPress Speed

Page speed matters. It matters so much that Google is going to penalize your SEO ranking if you have a slowpoke site.

How did our page stack up before we made changes? Well…ummmm…not so good. Time to whip this thing into shape!

This is what we did to improve our page load time from around 8 seconds to well under 3 seconds. We experimented with about a dozen plugins and a couple of Content Delivery Networks (CDNs) to find the right recipe for us. Hopefully this will help you get your site blazing and save you a little time in the process.[/vc_column_text][/vc_column][vc_column width=”1/2″][image_with_animation image_url=”3681″ animation=”Fade In” img_link_target=”_self” alignment=”center”][vc_column_text]

Creating a lean, mean WordPress machine

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][heading]Why do this?[/heading][vc_column_text]Because speed and user experience matters. Also Google is laying down the page rank hammer on sites that are slow or aren’t mobile optimized (a topic for another day). Also, research has shown that people are easily discouraged by a slow site. They found that a slow site isn’t just inconvenient, but actually results in lost conversions in the corporate space, which means lost donations in our world.[/vc_column_text][/vc_column][vc_column width=”1/2″][image_with_animation image_url=”3761″ alignment=”center” animation=”Fade In” img_link_target=”_blank” img_link=”https://www.bcdcideas.com/wp-content/uploads/2015/08/web-speed-infographic.jpg”][vc_column_text]

Click to see full infographic from Kissmetrics

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_text_separator title=”You have my attention. Now what? ” title_align=”separator_align_center”][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_column_text]Excellent! Let’s dive right in. Before we really get started, though, there are some things you need to know and get in order before we lift the hood on your site.[/vc_column_text][divider line_type=”No Line” custom_height=”20″][text-with-icon icon_type=”image_icon” icon=”icon-glass” color=”Accent-Color” icon_image=”3679″]Be prepared for your site to break. It’s okay, you can get through this. Stay calm, know how to disable and delete plugins and all will be okay.[/text-with-icon][text-with-icon icon_type=”image_icon” icon=”icon-glass” color=”Accent-Color” icon_image=”3684″]You need to know how to FTP into your site through the host. If you don’t know how to do this most hosting companies will walk you through it. If you’re freaked out at this point then you might want to get some help in your optimization quest.[/text-with-icon][text-with-icon icon_type=”image_icon” icon=”icon-glass” color=”Accent-Color” icon_image=”3685″]Experiment. Experiment. Experiment. I can’t say this enough. The right combo for me might not be the right one for you.[/text-with-icon][divider line_type=”No Line” custom_height=”20″][/vc_column][/vc_row][vc_row type=”full_width_background” bg_position=”left top” bg_repeat=”no-repeat” bg_color=”#f2e5b5″ scene_position=”center” text_color=”dark” text_align=”left” parallax_bg_speed=”slow” top_padding=”20″ bottom_padding=”20″][vc_column width=”1/1″][vc_column_text]

OMG A PLUGIN KILLED MY SITE

[/vc_column_text][vc_row_inner][vc_column_inner width=”1/2″][divider line_type=”No Line” custom_height=”20″][image_with_animation image_url=”3722″ alignment=”center” animation=”Fade In” img_link_target=”_self”][/vc_column_inner][vc_column_inner width=”1/2″][divider line_type=”No Line” custom_height=”30″][vc_column_text]

Invariably a plugin will do something wonky and give you the white screen of death or something equally horrifying. 

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/1″][vc_column_text]Luckily you got your FTP going, right? Just log in, go to <yourdomain>/wp-content/plugins/<plugin to burn with fire> or sometimes it’s located at <yourdomain>/htdocs/wp-content/plugins/<plugin to burn with fire> and delete the folder.  Go back to your site and hit refresh and see that all is well with the world again.[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][divider line_type=”No Line” custom_height=”40″][vc_column_text]

Still with me? Good, let’s get started

[/vc_column_text][image_with_animation image_url=”3726″ alignment=”center” animation=”Fade In” img_link_target=”_self”][divider line_type=”No Line” custom_height=”20″][/vc_column][/vc_row][vc_row][vc_column width=”2/3″][vc_column_text]

1. Tools

[/vc_column_text][divider line_type=”No Line” custom_height=”20″][vc_column_text]GTmetrix – This was our testing tool of choice. The key to any good experiment, as we all learned in 9th grade biology, is to keep your experiments constant. Change your measurements and your scores have no basis. After every change we ran the tool to see if there was any impact on our load time and scores.

Google Page Score – This will sometimes give you different recommendations than GTmetrix and it’s from the big gorilla itself, so don’t ignore Page Score.[/vc_column_text][/vc_column][vc_column width=”1/3″][image_with_animation image_url=”3730″ animation=”Fade In” img_link_target=”_self”][vc_column_text]SCIENCE![/vc_column_text][/vc_column][/vc_row][vc_row type=”in_container” bg_position=”left top” bg_repeat=”no-repeat” scene_position=”center” text_color=”dark” text_align=”left”][vc_column width=”1/1″][vc_column_text]

[icon color=”Accent-Color” animation_speed=”Slow” size=”regular” icon_size=”” animation_delay=”” image=”fa-bar-chart”]    Set Your Baseline

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_column_text]Run GTmetrix three or four times and average the results to see where your site is currently at. In addition to the scores the arrows will let you know if you’re doing better or worse than most sites.

For most of us this is when we come face to face with the reality that our site needs a little help. Let’s get it into fighting shape.[/vc_column_text][/vc_column][/vc_row][vc_row type=”in_container” bg_position=”left top” bg_repeat=”no-repeat” scene_position=”center” text_color=”dark” text_align=”left” parallax_bg_speed=”slow”][vc_column width=”1/1″][vc_column_text]

2. Plugins Galore

[/vc_column_text][divider line_type=”No Line” custom_height=”30″][vc_column_text]Do a search for “WordPress” and “Optimize,” “Performance,” or “Speed” and you’ll find pages of plugins that all promise to put a little giddy-up in your site. After some research of our own we experimented with around 12 of these plugins.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_column_text]

[icon color=”Accent-Color” animation_speed=”Slow” size=”regular” icon_size=”” animation_delay=”” image=”fa-camera-retro”]    Shrink Your Images

[/vc_column_text][vc_column_text]The web has been moving toward bigger images—1500 pixels wide isn’t uncommon any longer. Those images take a toll on your site’s speed, though.

If you’re using the “Save for Web” functionality in Photoshop or some other method of saving that’s maximized for web sizing then you’ll see a modest reduction in file size, but if you’re using a normal “save jpg” then there’s a good chance you’ll see significant savings using an image compressor plugin.[/vc_column_text][/vc_column][vc_column width=”1/2″][image_with_animation image_url=”3754″ animation=”Fade In” img_link_target=”_self”][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_column_text]You have many options here, but from my research they really come down to EWWW Image Optimizer and Smush.it. Smush.it will give you the most file size savings at the cost of some image quality. EWWW doesn’t save as much, but its compression is lossless which means the images don’t get compression artifacts. In our line of work images are the most important thing so we went with EWWW.[/vc_column_text][vc_column_text]If you use EWWW then it has a bulk conversion tool for images that already exist in your Media. After that everything you upload gets automatically compress, set it and forget it.[/vc_column_text][divider line_type=”No Line” custom_height=”15″][vc_column_text]The bottom line is this: if image quality is the most important thing and you’re posting large, over 1000px on the long side, images then EWWW is your jam. If you’re using images as insets in your blog posts and they aren’t that big then by all means Smush.it.[/vc_column_text][/vc_column][/vc_row][vc_row type=”full_width_background” bg_position=”left top” bg_repeat=”no-repeat” parallax_bg_speed=”slow” bg_color=”#f2e5b5″ scene_position=”center” text_color=”dark” text_align=”left” top_padding=”20″ bottom_padding=”20″][vc_column width=”1/1″][vc_column_text]

Tip: After you make any change, no matter how small, refresh your site to make sure it still looks good. The best time to find out when something breaks is immediately after it’s broken.

Then keep reviewing your GTmetrix score as you make progress to see what’s really having a big impact on your site.

[/vc_column_text][/vc_column][/vc_row][vc_row type=”in_container” bg_position=”left top” bg_repeat=”no-repeat” scene_position=”center” text_color=”dark” text_align=”left” parallax_bg_speed=”slow”][vc_column width=”1/1″][divider line_type=”No Line” custom_height=”30″][vc_column_text]

3. All About That Cache

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_column_text]This is where it gets complicated. Once again there are a ton of caching plugins out there but it really comes down to W3 Total Cache and WP Super Cache. We went with W3TC for the variety of options. Know that this flexibility comes with significant technical hurdles. Super Cache is a little simpler, but it’s still not plug-n-play by any means.

If you get confused it’s easy to find tutorials for these very popular caching plugins that use plain language to explain what each setting does.[/vc_column_text][divider line_type=”No Line” custom_height=”20″][vc_column_text]Here’s some of my settings. Keep in mind that your experience may vary and experimentation is a good thing:

[/vc_column_text][divider line_type=”No Line” custom_height=”20″][/vc_column][vc_column width=”1/2″][image_with_animation image_url=”3745″ animation=”Fade In” img_link_target=”_self”][vc_column_text]So many 1’s and 0’s[/vc_column_text][divider line_type=”No Line” custom_height=”20″][/vc_column][vc_column][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]General Settings[/vc_column_text][fancy-ul icon_type=”standard_dash” icon=”icon-glass” color=”Accent-Color” enable_animation=”true”]

• Page Cache: Enabled, Disk: Enhanced
• Minify: Enabled, Auto, Disk
• Database Cache: Enabled, Disk
• Object Cache: Enabled, Disk
• Browser Cache: Enabled
• CDN: Enabled

[/fancy-ul][vc_column_text]Page Cache[/vc_column_text][fancy-ul icon_type=”standard_dash” icon=”icon-glass” color=”Accent-Color” enable_animation=”true”]

• Cache posts page: checked
• Cache feeds: checked
• Don’t cache pages for logged in users
• Cache preload: checked, default settings

[/fancy-ul][vc_column_text]Minify[/vc_column_text][fancy-ul icon_type=”standard_dash” icon=”icon-glass” color=”Accent-Color” enable_animation=”true”]

• Rewrite URL structure: checked
• HTML minify: Enabled
• Inline CSS minification: checked
• Inline JS minification: checked
• JS minify settings: checked, drop-down = non-blocking “defer”
• CSS minify: checked

[/fancy-ul][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]Database Cache – default, did not touch[/vc_column_text][vc_column_text]Object Cache – default, did not touch[/vc_column_text][vc_column_text]Browser Cache – for all[/vc_column_text][fancy-ul icon_type=”standard_dash” icon=”icon-glass” color=”Accent-Color” enable_animation=”true”]

• Set Last-Modified header: checked
• Set expires header (if allowed): checked
• Set cache control header: checked
• Set entity tag: checked
• Set W3 Total Cache header: checked
• Enabled HTTP (gzip) compression: checked

[/fancy-ul][vc_column_text]CDN (more below)[/vc_column_text][fancy-ul icon_type=”standard_dash” icon=”icon-glass” color=”Accent-Color”]

• Host attachments: checked
• Host wp-includes/ files: checked
• Host theme files: checked
• Host custom files: checked
• Import external media library attachments: checked
• Add canonical header: checked

[/fancy-ul][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_column_text]

4. Content Delivery Networks (CDN)

[/vc_column_text][divider line_type=”No Line” custom_height=”20″][vc_column_text]These are crucial to your success. What they do is spread your content around on several servers instead of just one. The one closest to the user gets served up content. The result is a snappier experience.

We’re currently experimenting with Amazon CloudFront. I would highly recommend CloudFlare for a free option. The best part of CloudFlare is the setup ease.

If you use CloudFlare, make sure you check the CSS, JS, and HTML minimizers in the Cache page. These were able to shrink down the size of my site to be even smaller than what I got from W3 Total Cache.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][divider line_type=”No Line” custom_height=”20″][vc_column_text]

5. Other Speedups

[/vc_column_text][divider line_type=”No Line” custom_height=”30″][vc_column_text]VPS hosting – we were on a shared host for a long time. It served us well when our site was simple. The fancier we got the more our hosting struggled. I upgraded to VPS and it honestly wasn’t the speed bump that I thought it was going to be. What it did give me, though was consistency. We weren’t seeing the random timeouts and long (15+ second) page load times when the shared server got bogged down.

Plugins that were highly recommended, but didn’t work for me (i.e. worth trying)

Speed Booster Pack (no measurable effect on my scores)

Autoptimize (broke the site, white screen of death)

More information:

Varvy from Patrick Sexton  – beautiful site that breaks down some really complicated web topics and terms. Also has some additional tools for SEO, mobile optimization, etc. Highly recommended.

Resources from GTmetrix – They don’t just provide and score, they help you understand why it’s low and what you can do to improve. There’s not a lot in the way of tutorials, but it helps hone your search for how-to’s to fix the problem.

[/vc_column_text][/vc_column][/vc_row][vc_row type=”in_container” bg_position=”left top” bg_repeat=”no-repeat” scene_position=”center” text_color=”dark” text_align=”left” parallax_bg_speed=”slow”][vc_column width=”1/1″][divider line_type=”No Line” custom_height=”30″][vc_column_text]

That’s it. VPS + CDN + Ewww + W3 Total Cache ended up being our perfect combination. How did yours turn out? Have any better solutions?

[/vc_column_text][/vc_column][/vc_row]