The Need For Speed (Part 2)

aka How to find out if your site is slow…

 

Nanyang-Walk-slow-lettering-20060317-400x300

 

If you think your site is slow, it probably is. But to really tell, you need to do some testing. And to test it right you need to vary up how it is access and where so that you have an idea if it is you, your site, or your hosting provider that is slow. The last one is the hardest one to prove without disabling everything and running WordPress in its most stripped down form to see if it still tests slow. When you are done, you may want to read Part 1 and Part 3 is on its way.

The first way to test is using Google’s PageSpeed Insights. https://developers.google.com/speed/pagespeed/insights/

Type in your web address and hit Analyze.

Ugh!!!!

Google-PageSpeed-Insights-Analyze2

80 isn’t horrible but it isn’t like making an A either. Consider it a C. And the first thing it says is optimize images. Oh, How did I do on Mobile?

Google-PageSpeed-Insights-Mobile

 

I failed. Mobile phones probably hate me. I am the poster child for the slowest site on the Interwebs. Let’s get a second opinion. Just like going to the doctor we should check two sources.

So next we go to Pingdom to do the full page test. http://fpt.pingdom.com/ and it appears for my site, the rests are similar to Google’s.

Pingdom-Results

 

To make maters worse, my site had been faster just a couple of weeks ago. What happened?

Pingdom-History

 

To really figure it out, it might be good to analyze our site on a page by page basis.

We can do this by installing a plugin called Google Pagespeed Insights for WordPress. To use this plugin, you will have to install it from WordPress.org or your usual way of installing things and then go to here https://code.google.com/apis/console and register for a Google API key specifically for Google PageSpeed Insights. Visit the Install Page of this plugin for detailed information on how to do this. Go to Tools, Pagespeed Insights and go to the Options tab to put in your API key.

After you get your API entered, scroll to the bottom of the page and choose “Save Options & Check Pages”. This will take a while if your site has some size to it but you can proceed to do other things while this happens in the background.

Google-Pagespeed-Insights-Plugin-Options-Save

 

 

Go to the Report List inside Google Page Insights Plugin settings (Under Tools) to see the results. And the results are in.

Google-Pagespeed-plugin-Results

To see which pages are the worst, visit the Report Summary tab. In the lower right corner you see “Lowest Scoring Pages”

Google-PageSpeed-Insights-Plugin-ReportSummary

In the upper right corner you see graphs that show what are the biggest offenders to our speed.

Google-Pagespeed-Insights-Plugin-Bad-JavaScript

In this case, it is JavaScript. This could be caused by bad plugins, too many plugins (yes, it is possible to have too many and they will slow your site down).

All we can do is roll up our sleeves and being trying to figure out what slowed our site down so much.

If we click on our slowest page in “Lowest Scoring Pages” it will give a score for that page and a breakdown of what made it so slow.

Google-PageSpeed-Insights-Need-For-Speed-Results-graph

And the culprit in this case? It says server response time. But I am not so sure. Something is up with JavaScript and CSS too. Everything below the top result we have immediate access to in order to work on speeding things up. Let’s make sure our house is in order before we blame someone else.

Google-PageSpeed-Insights-Need-For-Speed-Insights-Key

 

In Part 3, we tear this all down and find the culprits and optimize what we thought we had already optimized.

The Need For Speed (Part 1)

aka Sometimes your site isn’t fast enough.

Google hates slow sites. So do mobile users. If your site isn’t fast enough, visitors will visit someone else’s site.

Speed-Of-Light-Tobias-600px
Speed Of Light https://www.flickr.com/photos/91369701@N00/473868198/

So after doing some research I discover a few things about my site.

1) It was slow

2) My pictures are too big

3) My provider might be slow

So I went to work figuring out what I could do to speed up my WordPress site.

Compress Me

One of the first things I learned was I needed to enable compression. This was not something I could do inside of WordPress but instead inside of cPanel on my hosting providers control panel. The back-end web server your hosting provider is using is probably Apache or Nginx. Inside Cpanel, there should be a place that says “Optimize Website” go there and turn on compression. Basically your web browser supports compressed web pages. The web server can send the pages to you compressed and your browser will decompress them on the fly. Smaller files, faster content delivery.
Optimize Website

 

WARNING: Before trying any of this, please backup your site. Click here for tutorials on how to backup your site.

Sometimes Shrinkage Can be a Good Thing

I needed to do something about my pictures. The perfectionist side of me wants to display pictures in amazing detail and high pixel rates but if you are just looking at the pictures on a mobile phone, you won’t be able to see how beautiful they are fully rendered so I can afford to reduce the number of pixels in order to speed up my site. Most of the time we seem to post the largest pictures in the world into our page. Sure everyone has fast Internet (or actually they don’t.) According to a Pew Study in August 2013, only 70% of America has access to broadband Internet. So assume someone is still looking at your site using a 56k modem with your site.

Two plugins I have used are “WP Smush It” which uses Yahoo’s image shrinker but doesn’t work with images over 2 Meg and “EWWW Image Optimizer” Both are free and work great. Under the Media menu after you install “EWWW Image Optimizer” you will see “Bulk Optimize” and “Unoptimized Images” “Bulk Optimize” will optimize any un-optimized images.

Bulk-Optimize-Progress-Ewwww

Two options you will have to fight your perfectionism over are lossy images. These settings are found under Settings, EWWW Image Optimizer, Basic Settings. Will the reduction be such that people notice or will you speed up your site by making your images smaller.

ewww-image-optimizer-settings

Next I looked for Caching plugins for WordPress.

If I just had Enough Cache

Caching works two ways depending on the caching methodology. Caching is loading your web pages into the memory of the web server rather than reading the files from the hard drive your server is hosted on. Memory will almost always be faster than hard drives. Memory works in nanoseconds while hard drives work in milliseconds. Next some caching plugins optimize your site by turning your dynamic PHP pages into static HTML. Since WordPress runs with PHP as its primary programming language, PHP code is interpreted as opposed to compiled and executed. When you visit pages on your WordPress site they are dynamically interpreted and sent by the web server to your browser.  By rendering the pages into HTML and storing it in memory, the PHP engine that interprets the page doesn’t have to do much if any work. This makes pages load faster, this and your cPanel selection that says compress HTML means your site appears even faster to your visitors.

Plugins I am using:

Autoptimize – speeds up your site by minifying your CSS (Cascading Style Sheets) and JavaScript. Minifying is the process of basically removing the white space in CSS and JavaScript by concatenating and compressing your scripts.It works in tandem with other caching plugins. “Optimize HTML Code” and “Optimize CSS Code” will be on by default but you may want to consider and test other options.

Autoptimize

 

WP Widget Cache – “Cache the output of your blog widgets. Usually it will significantly reduce the SQL queries to your database and speed up your site.” according to their info on WordPress.org. Basically it pre-fetches and then caches things that require database queries in your Widgets so they don’t have to query the database every time someone visits a page.

WP-Widget-Cache-Options

 

And finally the last piece of my Cache scheme is a plugin called WordFence Security. Now you may know WordFence as a WordPress firewall (that could take an entire article all by itself) but did you know WordFence also has caching capability? Well, now you do. WordFence uses their Falcon Engine for caching.

WordFence-Caching

 

WordFence is of course not the only Caching game in town.

WP Total Cache – is a very good caching plugin. It does things many of the individual plugins mention above do. Unfortunately working with plugins can be a trial and error process. So one week this plugin worked better than others, the next week it didn’t do as well. Why? It has to do with content, the mix of plugins your site has, and your hosting provider. If your provider doesn’t have some of the libraries needed by the plugin, it can’t do its best. So it is important you are aware of what is required.

Quick Cache Lite Edition – This plugin requires a higher version of PHP than my current provider offers (They are working on it) so I couldn’t fully test it. It has good reviews but it is a lite version so to get all the bells and whistles you have to buy their paid version. As I have already paid for the pro version of WordFence, I use it instead and it works with my current version of PHP.

Read my post (“The Need For Speed (Part 2)“) about testing site speed for more information.