Speed up WordPress

I don’t have the feeling that my blog is particularly slow, but that’s because I haven’t really started out yet. I’m very worried that it will get slow soon, especially because I will have blog posts with (optimized/compressed) 40-50 photos.
This can’t be changed, but other things can.

I already read a lot about it, went through various tutorials, but yet I feel there’s some more I could do.

Read More

First of all, my blog seems to be doing well at the moment. At least according to Webpagetest.org.

Here’s my blog, so you can try yourself.
I’m trying to figure out what all the results REALLY mean, but I don’t get all of them.

Images:

I already compressed most of my images.
CSS sprites take a loooooooooot of time and so I’ll skip this for now and work on that much later when I actually get a bit higher traffic.

To compress my images I use Photoshop (save for web) and Yahoo’s SmushIt.

Javascript:

The scripts I’m using seem to cause some problems in terms of speed as I get the following suggestions from the Webpagetest.org site:

“380.5KiB of JavaScript is parsed during initial page load. Defer
parsing JavaScript to reduce blocking of page rendering.”

I have absolutely no clue what that means. Could anybody tell me more about that?
(I know that this is not particularly related to WordPress, but it’s part of speeding it up anyways, so I hope you’re willing to help me out here)

Another warning concerning Javascript:

The following external resources have small response bodies. Inlining the response in HTML can reduce blocking of page rendering.
http://zoomingjapan.com/travel/mount-koya-travel-report/ should inline the following small resources:
    http://zoomingjapan.com/wp-content/plugins/gravatar-box/gravbox.js?ver=1.0
    http://zoomingjapan.com/wp-content/plugins/jetpack/modules/wpgroho.js?ver=3.2.1
    http://zoomingjapan.com/wp-content/themes/alltuts/js/contact-form.js?ver=3.2.1
    http://zoomingjapan.com/wp-content/themes/alltuts/js/my-slider.js?ver=3.2.1
    http://zoomingjapan.com/wp-content/themes/alltuts/js/scrollable.js?ver=3.2.1
    http://zoomingjapan.com/wp-content/themes/alltuts/js/sliding_tabs.js?ver=3.2.1
    http://zoomingjapan.com/wp-content/themes/alltuts/js/sprinkle.js?ver=3.2.1
    http://zoomingjapan.com/wp-content/themes/alltuts/js/tab-renamer.js?ver=3.2.1
    http://zoomingjapan.com/wp-content/themes/alltuts/js/welcome_back.js?ver=3.2.1
    http://zoomingjapan.com/wp-includes/js/l10n.js?ver=20101110

So, it was recommended not to have any script calls in your template files, I put ALL of it in a js folder in my theme instead and that’s what you get. Thousands of tiny scripts. Of course I’m using wp_enqueue_script!
Does that mean it’s better to put it back into my header.php? Or create a custom.js and throw in all the code that possibly can work together well?!
Or put all the Javascript in the footer.php?!
I just don’t understand what would be the best environment for WP here!

Redirects:

Remove the following redirect chain if possible:

http://0.gravatar.com/avatar/2b7d7f6b4622da443cc8081ca78db661...
http://zoomingjapan.com/wp-content/themes/alltuts/images/usericon.png?s=30

Remove the following redirect chain if possible:

http://1.gravatar.com/avatar/35991606c4e61d2d3a4ba61a9e03ab79...
http://zoomingjapan.com/wp-content/themes/alltuts/images/usericon.png?s=30

Remove the following redirect chain if possible:

http://www.zoomingjapan.com/wp-content/themes/proton-child/images/toplight.png
http://zoomingjapan.com/wp-content/themes/proton-child/images/toplight.png

This is coming from the following code in my function.php:

add_filter( 'avatar_defaults', 'newgravatar' );

function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo('template_directory') . '/images/usericon.png';
$avatar_defaults[$myavatar] = "ZoomingJapan";
return $avatar_defaults;
}

Can I get rid of the redirect, but keeping the function alive?

Other steps:

  • Disable revisions (done)

  • Empty trash every 2 days (done)

  • Optimize dabatase once a week (not yet)

  • Use a cache plugin (done: W3 Total Cache)

  • Flush early (not yet: <?php flush(); ?> not sure if that’s a good
    idea to use??!)

  • Use CloudFlare as CDN (not yet: what do you think about that? does it work well with WP?)

Do you have any other suggestions that are relatively easy to implement?

I know, quite a lot of questions, but if you can give me just a little suggestion for any of the points, I’d be really grateful.

Thanks a lot in advance.

Related posts

Leave a Reply

6 comments

  1. I was in a similar situation recently and started using W3 Total Cache too.

    I’m not sure what settings you have at the moment, but it’s worth experimenting a bit if you can to see that you’re really using W3 Total Cache to the max

    For example, I originally only had Page Cache and Browser Cache checked on the main screen, but I hadn’t gone into the dedicated sections and optimised them there too.

    My advice would be to try enabling different options (checking different boxes) one at a time and previewing the changes, then once you’ve made a few re-run your speed checks

    You can also try turning on the Minify setting in W3 and experimenting with that. You can either do Auto or if you really want to go to town chose the manual setting and then on the dedicated Minify page, use the Help option towards the top to automatically detect Javascript and other CSS files that you can potentially minify (don’t forgot to add them via the appropriate checkbox too), you can also chose to delay the loading of these files in some cases which may help with your Javascript parsing issues.

    Be extra careful with Minify and test the changes (on more than one browser after clearing all caches) as you may find that some scripts don’t ‘like’ to be minified or won’t accept being loaded later in the page (for example you might botch the loading of the CSS on your site)

    Finally I would also recommend trying Cloudflare (though I’ve seen people have mixed results with this in terms of speed) and also a CDN

    I use MAXCDN which seems good and cheap to me and is nicely integrated with W3, here’s some more info on that:

    http://www.wpbeginner.com/plugins/how-to-install-and-setup-w3-total-cache-for-beginners/

    I am not an expert at this yet but I’ve used W3 Total Cache to significantly speed up a number of sites in the last few days, the key is experimenting bit by bit and testing, it can be a bit laborious but if you’re looking to get the absolute most out of your WP setup it’s worth a try

    PS Also try and install the WP Smush It plugin and use it to compress all your images
    PPS Always gets said but just to repeat, disable any plugins you’re not using too

    Hope this helps!

    Big love

    Nick

  2. You have to balance speed optimization with reality.

    That means don’t obsess over speed analytics, there is one thing you should be looking at in terms of satisfying users, load time (in most cases).

    Test your page un-cached and then cached, you should see a noticeable difference in how fast they load, for me your site is loading around 2.5 seconds, that is totally acceptable considering your images.

    If you want to further speed things up the largest benefits in your case would be to:

    • Server scaled images, you have CSS (or php I did not look) serving
      re-sized images, instead use exact image sizes in html.
    • Further compress your images useing something like WebP, (you
      will have to then convert them back in photoshop).
    • Use a server cache like varnish
    • Combine your javascript and optimize it

    You start to run into the fact the optimizing beyond a certain level becomes a lot of work, in some cases it is worth it, others not so much.

  3. My 2 cents without being an expert

    • optimize your theme. Check for functions that you don’t need or manually code them
    • check if you need all your plugins
    • use debug plugins to check queries
    • debug with Pingdom.com, blitz.io and google analytics (page speed)
    • use W3 cache plugin with as much enabled as possible, cache, cdn, mimize etc
    • optimize images
    • try cdn
    • use a good host or vps or own server
    • use apc or other cache
    • try nginx instead of apache
  4. I would suggest running your site through GTmetrix. There is also a GTmetrix for WordPress plugin you can use to monitor your site’s efficiency.

    As Wyck says, you really should be serving scaled images. Not doing so will cause a significant lag in your load time.

    You should also be specifying image dimensions – always. Do this using height and width attributes (rather than CSS) for the fastest result. Unfortunately, some plugins and third-party widgets do not do this.

    You should also minify and combine scripts where possible. You have to take care here – more so with JS than with CSS – as some scripts don’t play nice with others when combined. Also, keep testing as you combine. Sometimes combining multiple scripts can actually increase your download time – because you are now downloading one large file instead on a few smaller files (which can be downloaded concurrently). Use W3TC for this.

    I wouldn’t worry about deferring JavaScript. This is basically unmanageable in WP, due to plugins etc.

    You can’t do anything abrout the Gravatar redirects, but the third redirect you list seems to be going from www to a non-www domain (or vice versa). Make sure you always use a consistent domain.

    You are calling a jquery-comment-preview.css which doesn’t exist, so that is wasting time. Also, you are calling two files from fileden – these are slow to connect. Try not to make unnecessary requests to different domains.

  5. JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering. I add this code to my functions.php it worked for me.

    function defer_parsing_of_js ( $url ) {
        if ( FALSE === strpos( $url, '.js' ) ) return $url;
        if ( strpos( $url, 'jquery.js' ) ) return $url;
        return "$url' async onload='myinit()";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
    
  6. This question is evergreen. I think one approach to speed WordPress is to evaluate how fast your queries are performed. May be you have the excellent hosting, but from some reason, you are using some dump plugin or so, your queries take a few seconds to execute.

    The solution for that would be on disk page caching. This would require space. In that way when the requests are sent you caching plugin forwards the requests to reading on disk file which is fast (on SSD disks).

    So in cases you site is really static in nature, or for those parts of your web sites that are static in nature, you can use that.

    I cannot recommend any plugin like that, I wrote one plugin for my self 5 years ago, called Acache, and I may consider releasing that one day.

    Really it was 20 lines of code. I don’t know why I am not using that any more.