I’ve become obsessed with site speed over the last six months, systematically working through each of my sites to improve their speed. Supposed SEO benefits aside, the faster your site is, the better the user experience. And the better the user experience, the higher the conversion rate \u2013 sales, leads or newsletter subscribers; whatever a conversion for your site may be. And that’s a good thing for your business \u2013 no matter what type of business model you have. <\/p>\n
My three favorite resources for assessing site speed (and identifying site speed issues to fix) are:<\/p>\n
Well, that last one is a lie. I use Pagespeed Insights solely to assess how Google rates mobile user experience for my sites. Their site speed improvement recommendations are limited and often vague. But it’s still an important test to run to ensure you’re achieving a 100\/100 mobile user experience score in Google’s eyes.<\/p>\n
I’m no server expert. This post isn’t meant to be an all-encompassing guide. Most people with intermediate WordPress experience knowing to use caching plugins (I use W3 Total Cache<\/a>) and a CDN (I use MaxCDN<\/a> \u2013 affiliate). That said, over the last six months, I’ve come across several other simple ways<\/em> site owners and bloggers can improve their site speed despite not having a technical team managing their website. Simple as in easily executed by following basic instructions.<\/p>\n Milliseconds matter \u2013 and add up. I’m sharing a few of ways I’ve cut down on those milliseconds \u2013 in the simplest terms possible \u2013 below. <\/p>\n First, for any tips that require you to edit your theme’s wp-config.php or functions.php file, I’d highly recommend you create a backup of the current wp-config.php or functions.php file before you edit it. If anything goes wrong, you can simply upload the old copy of the file to your server via FTP or your file manager from your host’s dashboard and restore the site to normal.<\/p>\n WordPress stores post revisions in your database so that every time you click the save button, WordPress essentially archives the prior version of the post. If you write posts within WordPress like I do and click the save button often, you end up with a ton of stored revisions for each post. <\/p>\n To illustrate how much database bloat this can cause, I disabled my revision control while writing this post. My site ended up storing over 100 revisions for this post. Apparently I click the save button a lot. Now multiply that number times every post on your site. That’s a huge<\/em> amount of (usually unneeded) data stored in your database. <\/p>\n You can use the Better Delete Revision<\/a> plugin to delete all of the revisions currently stored in your database. Install the plugin and then navigate to Settings > Better Delete Revision from your WordPress dashboard. Click the Check Revision Posts plugin. This screen will pull up a list of the current revisions stored in your database. Scroll to the bottom of this page and click the button to delete them. Once that’s done, head back to Settings > Better Delete Revision from your WordPress dashboard and click on Optimize Your Database. This step will optimize your database now that you’ve deleted the revisions.<\/p>\n Once the historical revisions are deleted, and your database is all cleaned up, you’ll want to prevent or limit future revisions. <\/p>\n To remove revisions completely, add the following code to your wp-config.php file:<\/p>\n To limit the number of revisions stored, add the following code to your wp-config.php file \u2013 changing out the number 2 for however many revisions you’d like the database to store:<\/p>\n But don’t add the above code to the end<\/em> of the wp-config.php file \u2013 instead, place it after the define(\u2018DB_COLLATE’, \u201d);<\/em> line or it won’t work. <\/p>\n If you’re not sure what the wp-config.php file is or how to edit it, you’ll find a full guide to that here<\/a>.<\/p>\n Images can have a big impact on your site speed. Using a CDN will help with that, but you should also be losslessly compressing your images. You can find my full tutorial for doing so here.<\/a><\/p>\n You should also be sure to assign width and height attributes to your images. If you don’t assign them, then the browser has to guess their dimensions until the image loads and the dimensions become known. This process adds an extra step that can negatively affect load time.<\/p>\n If you are using W3 Total Cache to the fullest, then you’re already minifying your CSS. But a lot of the time your CSS file will contain unnecessary code for your site<\/em> that you can remove \u2013 making your minified CSS file even smaller.<\/p>\n For instance, if you’re using a theme that has multiple color options, then each color has separate CSS code for that color. While it’s awesome that a theme has eight color options, you’re only using one \u2013 making the code for the other seven color options nothing but bloat. If you’re using the red version of your theme, you can strip the styling for the other colors. Or, if you’re not using comments on your site \u2013 and have no plans to \u2013 you can strip the comment styling. If your theme has styling for a portfolio section you’ll never use, you can strip that styling too. <\/p>\n Important:<\/em> Keep a backup of the original file in case you decide to switch colors, enable comments, or need the original code for any other reason later.<\/p>\n If you run a WordPress based site through GTMetrix, you’ll likely see your score is lacking in the \u201cRemove query strings from static resources\u201d section under the Page Speed tab. If you click the arrow to have it show the specific issue, you’ll probably find that the style sheets for your plugins and some \/wp-includes\/ will make up most \u2013 if not all \u2013 of the files listed.<\/p>\n To fix this, you can add the following function to your theme’s functions.php file:<\/p>\n If you’re uncomfortable with touching code, you can remove the query strings with this plugin<\/a>. However, I wouldn’t go the plugin route and add to plugin bloat unless it’s your only option.<\/p>\n WordPress 4.2 added emoji support \u2013 which resulted in some CSS and JavaScript being silently added to the header of your site. I don’t use emojis on my WordPress sites, but that doesn’t stop it from loading the code to support emojis on all of my site pages \u2013 contributing to code bloat on the pages. If you’re not using emojis for your site, you can remove the emoji code from your WordPress header by adding this function to your theme’s function file:<\/p>\n For the code impaired, there is also a plugin<\/a> that will remove the code, but once again I recommend going the code-based route whenever possible.<\/p>\n Important:<\/em> If you allow comments on your site utilizing the native WordPress comments, then you’ll want to skip this one.<\/p>\n However, if your site has comments disabled, then there’s no need to slow down your site by making a request for a script you don’t need. To remove the comment-reply.min.js script from your footer, add the following code to your theme’s functions file:<\/p>\n To my knowledge, there isn’t a plugin available that does this. If you know of one, feel free to drop it in the comments below.<\/p>\n Side note:<\/em> Andrew Norcross<\/a> pointed out to me that WP doesn’t place the call for the comments script into your pages unless you have comments enabled on the page. However, I sometimes see the call on sites that don’t have them enabled. He said that’s a theme issue then and not a WordPress issue. But, he also noted that it’s not harmful to remove the script, so I’m going to continue to do so. I’d much rather strip the call then try to figure out why certain themes are calling for it \u2013 despite comments being turned off. <\/p>\n Important:<\/em> If you use the WP embed feature on your blog, implementing this will break them.<\/p>\n WordPress has an embed function<\/a> that allows you to lazily embed things from a lot of different resources. With this function, I can embed a tweet simply by putting the plain old link to the tweet in my post or via wrapping it in an embed shortcode.<\/p>\n If you don’t embed things in your WordPress site period \u2013 or if you’re like me and simply use the old-fashioned way of grabbing the full embed code from the originating source \u2013 then you can remove the call to the embed script from your code. To do so, add the following code to your theme’s functions file:<\/p>\nAn important note<\/h2>\n
Minimize the number of post revisions stored in your database<\/h2>\n
\/** Disable post revisions. *\/
define('WP_POST_REVISIONS', false);<\/code><\/p>\n\/** Limits post revisions. *\/
define ('WP_POST_REVISIONS', 2);<\/code><\/p>\n![\"WP](\"https:\/\/sugarrae.com\/wp-content\/uploads\/2016\/03\/wp-config_php_\u2014_Desktop_Dump_March_27_2016.jpg.webp\"\/)
![\"WP](\"https:\/\/sugarrae.com\/wp-content\/uploads\/2016\/03\/wp-config_php_\u2014_Desktop_Dump_March_27_2016.jpg.webp\")
<\/p>\nOptimize your images<\/h2>\n
Removed unused styles from your CSS file<\/h2>\n
Remove query strings from static resources<\/h2>\n
\/\/* Remove query strings from static resources
function _remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );<\/code><\/p>\nRemove the WP Emojis code<\/h2>\n
\/\/* Remove WP emoji code
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );<\/code><\/p>\nNo comments? Then no comment-reply.min.js needed<\/h2>\n
\/\/ Remove comment-reply.min.js from footer
function speed_clean_header_hook(){
wp_deregister_script( 'comment-reply' );
}
add_action('init','speed_clean_header_hook');<\/code><\/p>\nRemove WP embed script IF<\/u> you’re not using it<\/h2>\n