This blog loads faster than 97% of all websites tested by Pingdom's Website Speed Test as you can see in the report above. It wasn't just naturally this fast, it took some effort. To save you time and help you speed up your WordPress site, I've outlined 19 specific ways you can do this on any WordPress driven web site. Some of these items will not be options if your web host doesn't accommodate them, but most of them will be relevant regardless of your web host.
Best Practices for Load Time Optimization
- Use the fastest WordPress hosting
- Everything on this list is essentially pointless if you're on a bad WordPress web host, so make damn sure you're not! For cheap and fast go with SiteGround. For the fastest go with WP Engine.
- Remove Unused Stylesheets & Scripts
- If you're not using it, remove it.
- Remove Unused Images Referenced via Stylesheets
- Don't reference what you don't use.
- Disable Unused Plugins
- Make sure you're only running plugins you actually use or they'll clog up your site for no good reason.
- Ensure Elements Load Only When In Use
- For example, don't load a script in your header file throughout your site if it only needs to be called on one page.
- Use JPG's Instead of PNG's when Appropriate
- JPG's have smaller file sizes, if you don't need the image to be transparent, then you don't need it to be a PNG.
- Don't Rely on Slow Third Parties
- Twitter is notorious for downtime and slow connections, cache their data, don't depend on it being available all the time or it will destroy your site's load time.
- Localize External Files Whenever Possible
- Don't make external requests when you don't have to; the more you make, the more servers you have to trust to not slow your web site down.
- Load All Stylesheets in the Head Before scripts where possible
- JavaScript generally takes longer to load than stylesheets, you don't want your JavaScript to delay the loading of your styles.
WordPress Plugins for Load Time Optimization
- Use WP Super Cache
- While this may be less popular than W3 Total Cache, I have found it to reduce load time more effectively. You'll just have to deal with a less user-friendly interface to take advantage of it.
- Use Better WP Minify
- Sometimes it's better not to minify your files, so test the load time with Pingdom's Website speed test before and after enabling it, to determine whether or not it makes sense for your site. This is particularly true if you have a lot of CSS files being loaded, as one big group they can take a lot longer to load than they would separately.
- Use WP Smush.it
- Ideally you'll be able to just bulk "smush" all your images. Yahoo's Smush.it service tends to be a bit unreliable however. If it's not working at the time, you can always run a GTmetrix report on your site and manually download the compressed version of the images it reports as not being optimized.
Third-Party Services for Load Time Optimization
- Use a Content Delivery Network
- I recommend either Cloudflare - Click here for my setup guide or MaxCDN - Click here for my setup guide
- Why use a CDN on your Blog?
A CDN (content distribution network) is useful for speeding up your website's load time for your visitors, particularly users located far from your website's server's physical site. What it does is store your images, JavaScript & CSS files on locations throughout the world so they load faster via the closest POP (point of presence) site. This also helps reduce the amount of bandwidth your server uses. CDN service is relatively inexpensive with MaxCDN and free with Cloudflare and adds a lot of value, plus it's easy to do, so why not do it? Anyone that takes their website seriously should use a CDN. - Use CSS Sprites (create them with SpriteMe)
- This gem makes it super easy to create & implement CSS sprites for your site.
.htaccess Tweaks for Load Time Optimization
- Enable mod_deflate
- After enabling mod_deflate on your server, add the following directives to your .htaccess file:
# MOD_DEFLATE #<IfModule mod_deflate.c>#The following line is enough for .js and .cssAddOutputFilter DEFLATE js css#The following line also enables compression by file content type, for the following list of Content-Type:sAddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml#The following lines are to avoid bugs with some browsersBrowserMatch ^Mozilla/4 gzip-only-text/htmlBrowserMatch ^Mozilla/4.0[678] no-gzipBrowserMatch bMSIE !no-gzip !gzip-only-text/html# MOD_DEFLATE #- Enable mod_headers
- After enabling mod_headers on your server, specify a vary: accept-encoding header by adding the following directives to your .htaccess file:
# MOD_HEADERS #<IfModule mod_headers.c><filesmatch ".(js|css|xml|gz)$">Header append Vary: Accept-Encoding# MOD_HEADERS #- Set Cache Expiration
- Add the following directives to your .htaccess file (with whatever expiration you feel is most appropriate for your site of course):
# CACHE EXPIRATION #ExpiresActive OnExpiresByType image/jpg "access plus 1 month"ExpiresByType image/jpeg "access plus 1 month"ExpiresByType image/gif "access plus 1 month"ExpiresByType image/png "access plus 1 month"ExpiresByType image/ico "access plus 1 month"ExpiresByType text/css "access plus 1 month"ExpiresByType application/javascript "access plus 1 month"ExpiresByType application/pdf "access plus 1 month"ExpiresDefault "access plus 1 week"# CACHE EXPIRATION #
WordPress Functions for Load Time Optimization
- Load JavaScript from Your Template's Footer
- You can install the Scripts To Footer WordPress Plugin...or just add it's PHP code to your functions.php file:
/* Plugin Name: JavaScript to Footer Plugin URI: http://www.prelovac.com/vladimir/wordpress-plugins/footer-javascript Description: This plugin automatically moves JavaScript code to page footer, speeding up page loading time. Version: 0.4.1 Author: Vladimir Prelovac Author URI: http://www.prelovac.com/vladimir */// super easy way to move javascript to footer 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);
The problem is, some of your JavaScript files may not work properly if they're moved to the footer. In this case you'll have to move the JavaScript files to the footer on a case-by-case basis. You can do this utilizing the wp_register_script() & wp_enqueue_script() functions. These are normally found in the functions.php file of your WordPress theme. The fifth parameter in each function is $in_footer. As long as you set this parameter to true for both functions for a given script, the given script will then be loaded in the footer where the wp_footer() function is called in your theme's template.
For example if you had the script prettyphoto being included as follows:
wp_register_script( 'prettyphoto', $uri.'/js/prettyPhoto/js/jquery.prettyPhoto.js', array('jquery') );wp_enqueue_script( 'prettyphoto' );
You would adjust it as follows to get it to load in the footer:
wp_register_script( 'prettyphoto', $uri.'/js/prettyPhoto/js/jquery.prettyPhoto.js', array('jquery'), '', true );wp_enqueue_script( 'prettyphoto', '', '', '', true );- Remove Query Strings from Static Stylesheets & Scripts
- Add the following to your functions.php file to remove them from all your scripts & styles:
/* Remove unnecessary query tags from scripts & stylesheets in header */ function _remove_script_version( $src ){ $parts = explode( '?', $src ); return $parts[0]; } add_filter( 'script_loader_src', '_remove_script_version', 15, 1 ); add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );
Use the following instead if you need to keep the version query string on a style or script for some reason (i.e. the Google Maps API reference breaks if it's removed):
/* Remove unnecessary query tags from scripts & stylesheets in header */ function _remove_script_version( $src ){ $parts = explode( '?', $src ); //return str_replace("http://maps.google.com/maps/api/js","http://maps.google.com/maps/api/js?sensor=false&ver=3.5.1", $parts[0]); return str_replace("http://maps.google.com/maps/api/js","", $parts[0]); } add_filter( 'script_loader_src', '_remove_script_version', 15, 1 ); add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );
Share Your Results
Test your load time before following this guide. Once you have fully implemented these techniques, please share your results in the comments! Also, if you have any further recommendations I'd love to hear those too!