Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Website Page Speed - Wordpress

Hi - Just wondering if anyone could lend some advice on website page speed? My website URL is www.buenosystems.com.au > I have customised a wordpress template and am experiencing large page load times but can't figure out how to optimise this..?

Any advice would be appreciated!

Thanks!

5 Answers

How are you hosting WordPress?

It is being hosted on our organisations internal server. Is there good reason to host externally?

Chris Jones
Chris Jones
9,385 Points

Hi Ryan,

I would recommend using the 'Network' tab in the Google Chrome Inspector Tools to identify the problem. You can also download the add on 'PageSpeed' as Robert suggested. Looking at the network tab I identified a few things:

  • Slow server response time. Have you got a decent hosting setup?
  • Missing (404) files, FYI jquery-1.10.2.min.map is a known bug in the current version of Wordpress. It's safe to remove the reference to this file from wp-includes/jquery.js. They've said they'll fix it in the next version.
  • Your page is making 56 requests, and downloading 836kb of data. Try and reduce the size of files by optimising your images and minifying your CSS/Javascript. The background image on the products page is over 700kb and took 21 seconds to download! If you are on a Mac, take a look at CodeKit for minifying your CSS/JS as well as some other stuff.

A couple of other things I noticed was

  • your logo is 666x170 but on the page you are only displaying it at 196x50.
  • Try and keep all your CSS in an external CSS file. Less the better. I noticed you've got inline styles on your pages.
  • It would be a good idea to remove your Wordpress version from the HEAD. Helps with security. Add this to your functions.php

    remove_action( 'wp_head', 'wp_generator' );

Hope that helps a little bit :)

Chris.

Hi Chris, thanks heaps for your detailed analysis! I have removed the bug from the jquery.js file and added the W3 Total Cache plugin, reduced the size of the background images to around 100kb. Does the minifying section of the W3 plugin require a paid account? I'm not sure that part is operational yet..

As for removing the Wordpress version from the head, I can enter that command at the top or bottom of the PHP file?

Chris Jones
Chris Jones
9,385 Points

Hi Ryan, I'm not 100% familiar with W3 Total Cache, we tend to use Super Cache when appropriate. I was talking about minifying your CSS and JS in your theme prior to uploading to your web host. Take a look at CodeKit if you are on a Mac (there's a 10 day trial) http://incident57.com/codekit/ . PrePros seems to be a good shout if you are on Windows though I have no experience with it sorry (http://alphapixels.com/prepros/).

You can place that line of code anywhere in your theme's functions.php file :)

Chris.

Thanks Robert, Paul & Chris - I will give these suggestions a go there are definitely many improvements to be made. CHeers!

James Barnett
James Barnett
39,199 Points

Your issue is 2 fold, your JavaScript & your fonts. You are using 16 seperate wott files adding up to over 3MB. Also you are using 2 dozen seperate JavaScript files and it's trying to load them before loading the HTML.

Check out yslow ...

  • Page size is over 3MB
  • Downloading 16 fonts
  • Using 23 separate JavaScript scripts
  • Using 17 separate CSS files
  • JavaScript in <head> instead of at the end of <body>

  • Cut out those font files
  • Move javascript to bottom so html & css loads first
  • Combine your JavaScript
  • Combine our CSS