3 Simple Performance Tips that Will Improve Your Site Speed

by Matthew Horne · 62 comments

Thesis Skins are primed for performance right out of the box, but developers and tinkerers can still apply a number of “pro tips” to their sites to improve overall performance.

Let’s take a quick look at three of these tips and see how you can enhance your site speed today.

Remove Version Control Query Strings

Version control query strings are used to invalidate cache (which is sometimes useful), but they can also hamper performance. Unless you are actively editing assets for your website such as JavaScript and CSS, you don’t need to use version control query strings.

To remove query strings, just add the following code to your custom.php file (or if you’re developing a Skin, to your skin.php file):

/*
Remove query strings from CSS and JS inclusions
*/
function _remove_script_version($src) {
   $parts = explode('?ver', $src);
   return $parts[0];
}
add_filter('style_loader_src', '_remove_script_version', 15, 1);
add_filter('script_loader_src', '_remove_script_version', 15, 1);

What we are doing here is filtering the HTML document ($src) for scripts and styles and searching for ?ver within script and style references. Once a match has been found, anything after ?ver (including ?ver) is removed.

Add Async or Defer Attributes to Scripts

The async and defer attributes both alter the behavior of the browser in different ways. Understanding how they affect the behavior of the HTML parser is key to knowing when and where to use them.

visual waterfall of async and defer attributes in action

As you can see from the illustration above, a standard <script> with no attributes will block the parsing of HTML in the browser until the script has both downloaded and executed. The larger the script, the longer it will takeβ€”this is why some websites seem to take forever to render properly and why it is recommended to move non essential scripts to the footer.

The async attribute limits render blocking by asynchronously downloading the script and only pauses the HTML parser to executed said script. This can result in much faster HTML parsing and thus faster overall load times. This is best used for modular scripts that don’t rely on dependencies such as jQuery.

The defer attribute also downloads the script asynchronously, but the execution of the script is done after the HTML parser has finished. This is best used for scripts that have dependencies such as jQuery, however it can be buggy and problematic on our old “friend” IE9.

Generally speaking, you will use async more often than defer.

To add these attributes, just add the following applicable code to your custom.php file:

Async

/*
Force scripts to load asynchronously for better performance
*/
function add_async_attribute($tag, $handle) {
   $scripts_to_async = array('script-handle', 'another-handle');
   foreach($scripts_to_async as $async_script) {
      if ($async_script !== $handle) return $tag;
      return str_replace(' src', ' async="async" src', $tag);
   }
   return $tag;
}
add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

Defer

/*
Force scripts to defer for better performance
*/
function add_defer_attribute($tag, $handle) {
   $scripts_to_defer = array('script-handle', 'another-handle');
   foreach($scripts_to_defer as $defer_script) {
      if ($async_script !== $handle) return $tag;
      return str_replace(' src', ' defer="defer" src', $tag);
   }
   return $tag;
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

Remove jQuery Migrate

jQuery migrate is used to load any deprecated APIs and functions that were removed in jQuery 1.9, so if you do not use any of those deprecated functions (read here for information on what changed in 1.9), you can remove jQuery migrate and save a time-consuming request to your server.

Unless you use a lot of Plugins, it is quite unlikely that any of your scripts will require jQuery migrate to function properly.

Again, just add the following code to your custom.php file to remove jQuery migrate:

/*
Remove jquery migrate for enhanced performance
*/
function remove_jquery_migrate($scripts) {
   if (is_admin()) return;
   $scripts->remove('jquery');
   $scripts->add('jquery', false, array('jquery-core'), '1.10.2');
}
add_action('wp_default_scripts', 'remove_jquery_migrate');

What’s Next?

If you’ve got any other performance or implementation questions, we want to hear them! Leave a comment about any technical issues that you are unsure of or would like to learn more about. This will help us form a new series aimed at helping developers and site owners make better use of the tools available to them.

If you enjoyed this article, enter your email below to get free updates!

{ 62 comments }

Bilal Ahmad

Hello Matthew. Thanks for these amazing tips.

I have question? How do we know if one of the plugins use jQuery 1.9 ?

Chris Pearson

The simplest way to figure this out is just to test it. Turn off jQuery migrate, and then see if everything is working as it should. Odds are, everything will be fine.

Rick Lomas

I’ve been using the Google Speed Insights test to speed up a site I have that uses the Pearsonified Skin it was failing the test πŸ™ By removing the Version Control Query Strings I was able to make it pass the test, thank you.

Vivek

Thanks for sharing these tips, really helpful in creating & optimizing my website.

Thanks again for all help.

Richard Brassaw

For clarification. Is this already done in the themes: Flex and Effectus?

Matthew Horne

Yes they are.

Heidi Go

How about Classic Responsive? Are these performance tips already implemented in Classic Responsive?

I’m interested in Flex, but I can’t use it if the menu cannot be uncollapsed.

Matthew Horne

Desktop menu is coming in 1.1 for flex.

No these optimisations are not yet added to classic, but they will be added in an update.

Heidi Go

If possible, universal “uncollapsed” menu please.

My menus are very short. Just the most crucial links.

Chris

Hey Matthew,

Thanks! Yeah – these are excellent tips.
The async one is totally new to me. Awesome!
I appreciate the accompanying explanations, too.

Matthew Horne

Thank you, I look forward to writing more articles about optimisation and Thesis 2 development.

dennis

Hey Chris & Matthew, thanks for the updates. I love the flex theme and have it install on a test domain just playing around to get comfortable with it. Not sure what you mean. We are currently updating the Flex Skin to add BIG video support to your templates. Do you mean we will be able to videos to pages and post to? Thanks.

Matthew Horne

There will be a post about this soon, I have made some significant changes based on people’s feedback. Examples are an optional desktop menu, big featured videos, refined class system for flex classes, ability to embed videos in your content with your own placeholder images and numerous other changes to bring you an even better experience.

It will require a skin reset, but it’s totally worth it when you see why.

Michael

https://gtmetrix.com is the best tool I’ve found to identify issues.

Also add the following to .htaccess:

## BEGIN Disable ETags ##
Header unset ETag
FileETag None
## END Disable ETags

## BEGIN GZIP Compression ##

mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
## END GZIP Compression ##

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 7 days”

## EXPIRES CACHING ##

Matthew Horne

That’s true but I would recommend a plugin for this because it allows the user to easily purge cache.

Bill Wynne

Sending this over to the developers right now. Anything to make things leaner.

Klaus

@Michael
Internal Server Error 500

Matthew Horne

It’s because if you copy it from these comments you will get the wrong kind of quotes. Just use a plugin like W3 total cache and use browser caching.

Alec

A second to Richard Brassaw’s question above:

“For clarification. Is this already done in the themes: Flex and Effectus?”

Matthew Horne

Yes it is already done for Flex. I will add a note to the post about this.

Alec

Thank you – most helpful.

Dinsan

These are mostly Greek to me, so question. Does the Flex skin do all these? πŸ™‚

Dinsan

Okay, ignore this, I see your reply for a comment here.q

Steve Martin

A great post to help users go ahead with the site speed issue. It helped me overcome the same issue. I was aware of removing jQuery to optimize; but was looking for some technical assistance. Thank you for sharing the guidelines. It helped me exceptionally well.

Karo

Perfect timing! This is exactly what I needed right now – thank you it worked well and my page speed got better.

Richard

Thanks for these snippets Matt, they’re going to be used – a lot! (y)

C

Thanks Matthew for this information.

Picked up a bug…
if ($async_script !== $handle) return $tag;
should be:
if ($async_script !== $handle) continue;

Same applied for “defer”.

Ta

John Adam

Thank for such great guide. Their’s one more easy way to improve website speed and that is to optimize the images before uploading them to your site. Or you can use image optimization plugins to compress your images in your media manager. I think images accounts more than 60 to 70 percent of total page size, so optimizing them is really a great idea.

Thanks once again for great post.

Christian Ermlich

Hi Matthew,

where do I find the custom.php file? And use I async or defer or both?

Thanks
Christian

WPVKP

You will find custom.php file inside your Skin folder: /wp-content/thesis/skins/your-current-skin

Christian Ermlich

Thanks mate πŸ™‚

Astha

Hey Matthew,

Could you please take a look at my website and tell me if its worth changing to effectus or flex? I mean I find them pretty good looking but are they worth spending? PS. I am using thesis 2.2 but with classic responsive skin however its not responsive for mobiles etc. So I had to take the help of a plugin.

Please let me know if changing to effectus or flex have any added advantages.

TIA
Dr. Astha Goel

Mike Schinkel

Tips #2 and #3 are definitely useful, thanks.

However, what you are advocating with #1 is usually considered an anti-pattern. I am curious what an example might be where removing versions from URLs would cause a legitimate performance boost? Versions do not typically change once a site is installed unless code is updated, so what is a real-world example where this can actually provide a benefit?

I know many online speed tests will provide better scores for some reason, but speed tests cannot understand context that is not found in the HTML so cannot be perfect.

Tauseef Alam

Thanks for the wonderful tips .
I am a non-technical person and implementing these suggestions may be a challenge for me. I am looking for ways to bring down the load time of my website. Looks I need to take help of some professional to do the task for me.

Frank Ellis

Hey Matthew

Thanks for the tips and for showing me exactly how to do it. I am going to switch back to using thesis and implement as much of this as I can figure out how to do.

OasisMe

Hi, Chris, can this method being used on any wordpress themes or only for thesis? Thank you.

Chris Pearson

These tips can be applied to any WordPress site. The method described here utilizes either your current Skin’s custom.php file or the Thesis master control file, master.php.

Other Themes have similar custom.php files; this is the preferred location to add the code detailed in this article.

Gowtham V

Nice performance tips i have added these codes to classic responsive skin on thesis 2 on my site I Design Thesis and already seeing improvements in the page speed test at Pingdom.

Thanks,
Gowtham V

rosario

Hi,

For each tip there are two sets of codes. Should I also add the codes in the small boxes?

Thank you.

Mediamaya

Hi,
Thanks Matthew for your tips to improve performance, I will try immediately.

Regards,

David Cornish

Gtmetrix and MobiReady are the best tool I have found to identify issues.

Savita

Will This gonna effect any j query inserted by me for some API results?

Louis Lh.

Having a big problem with this. Very often check for improving site speed but recently check on Pingdom 71/100, Neil Patel also mentioned an average would 50/100, thanks for extra info.

Dominik Piecha

It’s easy to run in for your website and – this is the key – it works! Thank you πŸ™‚

Tally erp 9

This is a great idea. Thank for your share. I am finding a good idea to speed up for my blog. I see that here. Great. Thanks

Vineeth Mungath

This one rocks. site speed is a matter of SEO. Cache plugins and Image Optimization plugins like smush it can also be used for making WordPress website faster.

Stephen Brian

Great insight. I am not such expert to implement these, so would like to bookmark this so that my developer can fix the issues following your instructions. Thanks.

John

Awesome post, I didn’t know about these fixes! Two other ways to help your site speed are to make a simple site design without a bunch of crazy animations and limit the plugins on your site (if it’s WordPress).

Lydia

This was very informative, thank you. Users always complain that my website is too slow and I could never find a way to fix it. I will definitely be trying these tips. Hopefully things turn around for me.

John Hager

Hi Matthew,
This is a great post for me. My website so low. Every time I check Google Speed, it said that lower than 80. Please tell me some light themes to boost speed.
Thank for this awesome post !

Jason Halle

I was seeking the information on how to enhance the speed load of my website, and found your blog. Thanks for sharing the vital information and the process on how to increase the speed of the page and website too. I have implemented the Async and Defer onto my site and got the results, but still i think something is missing. Kindly do provide an update or some more process to take the speed to max.
Thanks
Jason

Hafiz

Searching for a long time about how to increase the speed of websites. I tried several other methods but after a few days it became the same as before. After searching for a long time I found your tips. I will try to occupy these I will obviously inform you. Thanks a bunch.

Arun Negi

Thanks for such a great post, really helpful tips for speed optimizing sites.

Thanks one again πŸ™‚

Resep Masakan

Thanks for the tips.

Visitors are always complaining when they visit a website that is slow. Visitors may be gone and will not visit our website again.

I will implement this tutorial to my website.

Jake Turner

Great tips. And they work. We have implemented them into several of our customers sites and have seen great results. Love this article. Generally we say CONTENT is king, but speed is a close second.

Stephen

Really great tips, rarely hear tips like these before but they can obviously help tremendously. Is there a way to make these changes so that when you update your theme files or wordpress files, you don’t lose the edits?

Aroos

Does hosting and download speed really effect SEO? Im using a shared server and not sure if it would be worth it to upgrade my server.

Someone once said any real business needs a dedicated server!

Any thoughts?

Tony Tran

I would like to speed up the speed of my websites and already apply many methods, such as optimize images and other things.

However, I don’t know much about use defer attribute for . Can anyone explain a bit further about this?

Mark smith

I found these three methods very workable when it comes to increase your websites peroformance. website loading speed and other factors are very important tasks. If performace is not good then no one is going to visit your site again in this fastest growing world. Thanks for this post.

Blog Kuya Hejo

Thanks for the tips and for showing me exactly how to do it. I am going to switch back to using thesis and implement as much of this as I can figure out how to do.

Rick Cano

Hey Matt,

Thanks again for these tips…we’ll definitely use these snippets in our Thesis designs. πŸ™‚

Jeremy

Content goes hand in hand with speed if you ask me, why would customers want to read your post if they cannot load fast, access to information is crucial nowadays, thanks for the suggestion will try this one out.