Google Pagespeed tweaks for WordPress

May 25th, 2016 Posted in Business, Computer, Web Design, Web Development, WordPress

Google Pagespeed tweaks for WordPress

Site speed is now an important signal of site quality to Google and our SEO guy has started running sites through the Google Pagespeed tool when assessing sites for clients. This usually throws up the same issues with WordPress sites and I’ve made some notes on how to fix these. With our own server we can now get 85+ on mobile and 90+ on desktop which results in lovely green ticks on the Google Pagespeed tool.

Goals:

  1. Remove as many server requests as possible
  2. Compress everything
  3. Cache everything
  4. Reduce server response time
  5. Remove as many render blocking items as possible

1 – Remove as many server requests as possible

Combine and minify JS files used in theme

Once all the front end JS has been built, I combine and minify the various files used in the theme into one. This can knock five or more requests off and make pages quicker to load.

Remove full webfont CDN link(s) from header

This removes a request and you can add the necessary (minified) CSS to the main theme stylesheet.

For extra points, only include the CSS for icons you’re actually using. For the ZMDI Material Design icon font this can reduce file size by quite a lot.

Dequeue CSS and JS files from plugins where possible

Plugins are usually not aware of what page they might be needed on or what other styles and scripts are loaded. This is to be expected and can be solved quite easily. Loading Lightbox, gallery or social media scripts on every page probably isn’t necessary.

Put CSS in main file, add JS back in only where needed

Find the CSS file handle from the plugin file and then remove it with this:

function remove_unwanted_css(){
    wp_dequeue_style('page-list-style');
}
add_action('wp_enqueue_scripts','remove_unwanted_css', 100);

Any needed CSS (which it often isn’t) can be put in the main CSS file.

Contact Form 7

// Remove WPCF7 stylesheet and js
add_filter( 'wpcf7_load_css', '__return_false' );
add_filter( 'wpcf7_load_js', '__return_false' );

(You can alternatively use code in point 5 below for the JS though)

This great plugin has filters to remove its CSS and JS files completely.

http://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/

2 – Compress everything

  • GZIP in htaccess
  • Minify JS files
  • Use Autoptimize plugin when site finished

3 – Cache everything

  • Enable file caching in htaccess
  • Install WP Super Cache to serve HTML files instead of PHP when site is ready for launch. This works on most servers we’ve come across. People often recommend W3 Total Cache but we’ve had nothing but problems with it.

4 – Reduce server response time

  • Use as few WordPress plugins as possible and remove any unnecessary ones. A lot of functionality can be built into a theme rather than using plugins that add files to every page and database overhead.
  • Install WP Super Cache to serve HTML files instead of PHP when site is ready for launch. This works on most servers we’ve come across.

5 – Remove as many render blocking items as possible

This is often flagged with WordPress sites and it’s the CSS and JS files in the header that set if off. Moving the scripts to the footer works with the JS code we use in our theme, but can break things with other plugins so needs testing out if you do this.

// Custom Scripting to Move JavaScript from the Head to the Footer
 
function remove_head_scripts() { 
   remove_action('wp_head', 'wp_print_scripts'); 
   remove_action('wp_head', 'wp_print_head_scripts', 9); 
   remove_action('wp_head', 'wp_enqueue_scripts', 1);
 
   add_action('wp_footer', 'wp_print_scripts', 5);
   add_action('wp_footer', 'wp_enqueue_scripts', 5);
   add_action('wp_footer', 'wp_print_head_scripts', 5); 
   if ( !is_page(10) ) {
        wp_dequeue_script( 'contact-form-7' );
    }
} 
add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );
 
// END Custom Scripting to Move JavaScript

(Props to http://speedrak.com/blog/how-to-move-javascripts-to-the-footer-in-wordpress/ and http://code.tutsplus.com/articles/optimizing-contact-form-7-for-better-performance–wp-31255 for this code)

This snippet also removes Contact Form 7 scripts from any page that isn’t contact form page. This works off the page ID of the contact form to dequeue the scripts from every page apart from that one, I need to see if it can handle multiple page IDs.

WordPress Google Pagespeed – Conclusion

These tweaks help us go from 60/mobile, 70/desktop to 85+/mobile, 90+/desktop in the Google Pagespeed tool on WordPress sites we’ve built. This gets green ticks from Google and makes the sites quicker to browse so it’s all good.