Optimizing WordPress for Google PageSpeed

wp_pagespeed_header

ERRATA: Woops I accidentally made an error about the CSS generated by plugins using PHP query. Already fix the statement by properly referring to the correct method to disable the offending CSS using either wp_deregister_style or wp_dequeue_style.

Once upon a time, someone try to optimize WordPress for Google PageSpeed

For the past few days, I’ve been trying to tweak my site performance since I noticed my old faithful iPod Touch 4th Gen struggle and randomly crash when browsing my site.

So this prompt me to check if there is any way to reduce the site load and of course to ensure the user experience is feasible on older and slower devices.

This means bouncing back to Google PageSpeed service regularly to debug my site performance as I tweak my WordPress site configuration (which I got the chance to encounter the WORDPRESS WHITE SCREEN OF DEATH thanks to my itchy finger in modifying a plugin source code in the process-).

First stop, Desktop

wp_pagespeed_desktop

The above screenshot shows the best score that I can get after whatever voodoo magic tweak that is apply to the site backend.

Namely the biggest culprit that apply to both mobile and desktop is:

  1. Redudant Javascript. Whenever possible, ensure that every Javascript plays a big role in the site operation. If the JS only play a minor role (like cosmetic effect for the site visual), consider removing it and use alternative option like CSS.
  2. Extra CSS from plugins. This one pisses me off to no end as I wonder how does one remove the offending CSS as it block the website from rendering until it fully loaded. So what I learn is that CSS from plugins is generated using PHP query which you can disable it using either wp_deregister_style or wp_dequeue_style. You can read more about it on this site (make sure to go through the comments too!).
  3. The dreaded Google OpenSans fonts introduced in WordPress 3.8+. Ok I noticed this extra CSS for the front end visitor which is useless for me as I’m using Adobe Typekit font. Problem is it is used in both the backend and frontend interface so after googling around on how to remove it without modifying the core WordPress files, add the following code to your current theme’s functions.php:
    // Remove Open Sans that WP adds from frontend
    if (!function_exists('remove_wp_open_sans')) :
        function remove_wp_open_sans() {
            wp_deregister_style( 'open-sans' );
            wp_register_style( 'open-sans', false );
        }
        add_action('wp_enqueue_scripts', 'remove_wp_open_sans');
    
        // Uncomment below to remove from admin
        // add_action('admin_enqueue_scripts', 'remove_wp_open_sans');
    endif;
  4. External JS/CSS served by Content Delivery Network. Oh well this is beyond our control. You cannot do much about it as even Google complained about their own server being slow. For taukeke, currently the only major external JS is served by Google AdSense and the Typekit font by Adobe. I did removed one major external JS that is WordPress very own Stats JS. The particular JS doesn’t affect desktop user much but on mobile devices, it can slow down up to 5 secs on my iPod Touch which is something you want to look into. Use Google Analytics as alternative to WordPress own Stats JS (which you can disable through the Jetpack module).

While there are other potential issues such as bloated database or hardware malfunction, the three culprits listed above is the major slowdown for my site.

Currently, the site can be browsed without any random crashing on my iPod Touch 4th gen although with minor slowdown. Other than that, I can always use it as my benchmark to approximate how slow mobile devices perform when visiting my site.

Ignoble Mobile

wp_pagespeed_mobile

Ok no matter what method I employ, I still can’t fix this particular problem: PRIORITIZE VISIBLE CONTENT.

While Google already spit out the full description about the problem right in front of me, I can’t find any way to fix it.

Even by stripping off the landing image (noooo my precious artwork) and Google AdSense, it still doesn’t fix it.

Oh well, it will be in my list of future fixes when I got a better understanding of the technical side of the problem.

Further reading and extra tips to squeeze your WordPress site performance

I highly recommend reading Smashing Magazine’s Case Study on their attempt to improve their site performance.

If you don’t mind learning the hoops to deploy your own Virtual Private Server (VPS), give Digital Ocean a try as their cheapest plan only cost USD $5 per month (although with USD appreciating against most currencies in the world, this can be a bad thing for some users). Nothing beats running your own server without fighting for resources when using shared-hosting service like HostGator. Yup HostGator is great only for the first 12 months and they will chomp your butt after that grace period.

Let’s say you already running your own server, remember to get Google PageSpeed module (not to be confused with the PageSpeed Insight service which is the main topic of this post). There is ample of tutorials online on how to deploy PageSpeed module on different platforms and it is one of the best tweak that shows noticeable improvement.

Also don’t forget to use plugins that will help to minify HTML, JS and also inlining CSS such as Autoptimize. It helps to trim the delivered page size to your visitors and remember to pair it with a caching plugin like WP Super Cache as it defeat the purpose to process everything from scratch again for repeat visitors.

Update 1st Feb 2015: I found a really good site that helps to inspect your website and offer great written solutions on how to improve your PageSpeed score. Visit https://www.feedthebot.com/pagespeed/ and insert your site URL that you want to optimize. It will offer suggestion on how to improve it with actual case study by the author himself.

Hope this article helps in your journey to improve your WordPress site performance!