Did you know, your WordPress blog or website can load a lot faster than you think. Especially when we live in the mobile-dominated world, where speed and performance are everything. On mobile, the network connection may be slow, but users want the content to be loaded in an instant. So, you just need to cut down some weight out of your WordPress site to make it speedier.
Your website gets a few seconds to perform in front of its viewers, if that didn't go well, they will just abandon your website and move on. On top of that, search engines like Google and Bing want speed and optimisation to rank your website higher on their result.
Let's find some hanging weights on WordPress and cut them down, which in turn will improve the speed of your site. Here some quick performance tips for your WordPress site, which can be used by both beginners and pros.
Remove Query Strings from CSS and JS
If you check your website's page source (Ctrl+U for Windows and Option+Command+U on Mac) you will find each and every CSS, JS files end with a version control query strings. Like, the ?ver=1.2.4 or vers=1.3.4, which essentially determine the version of the file being loaded. It's useful for developers who are actively customising their website like adding new CSS styles or changing the JS. However, this can hamper the performance of your website as this query strings prevent caching of those files or invalidate the cache.
Once you have launched your WordPress website, there are only a few edits needed on the part of CSS and JS. So, you definitely don't need to use version control query. You can easily remove query strings from CSS and JS resources on your WordPress site by adding the below snippet to functions.php in your theme folder.
/*
Remove version query strings from CSS and JS links
*/
function dwh_remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts[0];
}
add_filter( 'script_loader_src', 'dwh_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', 'dwh_remove_script_version', 15, 1 );
If you are little afraid to use custom codes on your function.php, you can try the free WordPress plugin Query Strings Remover by Atul Kumar Pandey. This plugin essentially does the same thing and doesn't require any configuration from your part.
Disable Emojis on WordPress
Yes, you love emojis, we love emojis but it's not that important to your personal or company WordPress blog. Since version 4.2 WordPress adds wp-emoji-release.min.js (11.6 KB) file to every single page of your WordPress site. It essentially helps to display Emoji characters on your post and pages. If you are not interested in displaying this emojis then you can safely disable the WordPress emojis to improve page load time. You can add the below snippet to functions.php of your theme folder to disable emojis on both frontend and WordPress admin side.
/**
* Disabling Emojiicons on WordPress
**/
function dwh_disable_emojicons() {
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
//remove TinyMCE emojis
add_filter( 'tiny_mce_plugins', 'disable_emojicons_tinymce' );
//remove DNS prefetch for emojis
add_filter( 'emoji_svg_url', '__return_false' );
}
add_action( 'init', 'dwh_disable_emojicons' );
What the above snippet does is that it will hook into init and remove all actions related to emojis. In addition, the above snippet will also disable emojis from TinyMCE editor or your WordPress post/page editor. Now you also need to add the following filter function to disable TinyMCE emoji plugin.
/**
* Filter function to remove the TinyMCE emoji plugin.
**/
function dwh_disable_emoji_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( 'wpemoji' ) );
} else {
return array();
}
}
Like earlier, if you're afraid to edit the theme files, you can use the free WordPress plugin Download Disable Emojis by Ryan Hellyer. This plugin disables the new WordPress emoji functionality.
Remove jQuery Migrate from WordPress
Another JS file added to every single page of your WordPress website is the jQuery Migrate (10KB). It's essentially used to load any deprecated and/or removed APIs and behaviours that were removed in jQuery 1.9. If your themes and plugins are up-to-date and none of your plugins is using any of those deprecated functions, then you can safely remove jQuery Migrate from front-end and speed up your site.
/*
Remove jQuery Migrate from WordPress
*/
function tf_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', 'tf_remove_jquery_migrate');
Usually, plugins and themes which are updated in a one-year period of time won't need jQuery Migrate to function properly. Most of these plugins would probably compatible with the latest jQuery and will work flawlessly (unless you have a pretty old website). You can check if your WordPress website requires jQuery Migrate by adding define('SCRIPT_DEBUG', true); in your wp-config.php file found in the root folder of your WordPress installation. After adding check your browser developer console for any errors or logs.
Note that after experimenting remove or comment-out that line from the wp-config.php file, you don't want to keep it enabled. We always recommend doing this on your local or dev server of your website.
To remove jQuery migrate from WordPress, just add the following snippet to function.php in your theme folder.
You can use these three simple performance tips to boost up the speed of your WordPress blog or site. This can save valuable time in loading your site, by reducing HTTP requests and also reduce the overall size of your whole WordPress site. The faster it loads the better experience for your readers and better ranking on search engines.
If you are looking to further speed up your WordPress website, then you could try the premium Perfmatters plugin. It's a lightweight WordPress performance plugin that can reduce HTTP requests, strip out unwanted/unused code, and minimizing back-end load. Some of its features include -
- Disable emojis, embeds, RSS feeds, XML-RPC, scripts per page/post, WordPress Heartbeat API, self pingbacks.
- Remove jQuery migrate, WordPress version number, wlwmanifest link, RSD link, RSS feed links, REST API links.
- Disable and Limit Post Revisions.
- Change the autosave interval.
Go ahead and give some of them a try, you won't be losing anything. Got any doubts, write down your queries in the comment section below.