Speeding up WordPress: How we cut our page speed in half

Speeding up WordPress: How we cut our page speed in half

hyperspace-Featured-image

[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]gtmetrix scoreRun 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]

Kate Runy

CONTENT & MEDIA SPECIALIST

A passionate technical wizard, Kate thrives on managing online content, social media for communications, and development projects.  Kate is the workhorse of the team, pulling out amazing feats of content creation and management week in and week out. 

Prior to joining BC/DC Ideas, Kate coordinated website and social media content, communications, and advertising for Go Global NC and Alzheimer’s NC.

Things that make her happy: I love animals about as much as I love working for nonprofits.

Mishel Gomez Cespedes

CONTENT COORDINATOR

Mishel brings a passion for video storytelling and quippy social media content to the team.  At BC/DC Ideas, she is most likely editing video or scheduling the next moving social media post for our clients.

Her ear for storytelling is her greatest asset. Mishel has a unique ability to assemble content into a concise story that moves audiences to action.

A graduate of Wake Forest University she spent a semester in Spain and years serving her community through the campus organizations. Now, she is putting her passion for good to work.

Brian Crawford

creative director

Mix equal parts nerd and creativity and that’s Brian. A natural problem-solver, Brian’s ability to cut to the core of any problem helps guide our creative team to the correct solution without wasted time or money. It’s the core, this little nugget of truth, that helps our clients take the next step with their audiences.

Brian gets the greatest joy out of helping our clients realize and connect with their story. He is a true believer that everyone and every organization has a compelling story to tell, you just have to listen with an open heart.

Things that make him happy: Hanging out at the park with family, toddler-speak, hitting the focus pull, and good coffee.

Dawn Crawford

principal

The engine behind BC/DC Ideas, Dawn has dedicated her career to good. Dawn brings her considerable experience and expertise to helping elevate the nonprofit sector. Our team’s lead strategist, Dawn is often seen leading our IdeaStorms, penning communications plans, or checking in with clients.

Before launching BC/DC Ideas in 2010, she earned her chops in 10+ years of communications leadership roles for public health, healthcare and youth-focused nonprofits. Working for nonprofits is Dawn’s dream job, and she loves that her 40+ hours a week make the world a better place.

Things that make her happy: A glass of champagne to celebrate big wins, Basecamp, living in the South, seeing the world, and a well-formatted spreadsheet.