If you have not yet checked the new Core Web Vitals report in Google Search Console, then you should know that effective early 2021 Google will be using it as a key ranking factor. The aim is to rank websites based on User eXperience (UX) and your websites page load time will be a BIG factor.
Two key metrics it will use to measure page speed is LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift). These and other performance metrics can be measure using the Google PageSpeed Insights tool. Below is an example:
The tool will provide an overall score for your website and provide ways to improve your web sites page load speed and ultimately the overall user experience. This will allow the website owner to go through each of the “Opportunities” and “Diagnostics” to determine what specifically is causing the delays – i.e., scripts, css, images, video etc.
Below you will find PHP and HTML code snippets that you can use today to improve your Google ‘Core Web Vitals’ and ‘PageSpeed’ score. These code snippets follow our YouTube video: How To Improve Google Core Web Vitals and PageSpeed Score. Of course, if you’re running a WordPress site you can find plugins that will take care of all of this code for you.
However, plugins add overhead and slow down your website. Therefore to implement these optimizations we will show you how you can manually implement them without the use of multiple plugins. In fact, we will perform all of the optimizations by making use of only one (1) free, lightweight plugin known as Code Snippets.
Before you attempt to modify your functions.php file or any other file on your website, we recommend you watch our YouTube videos and subscribe to our channel.
Disclaimer
All code snippets found on this page are “as-is” and are to be used at your own risk. Depending on your website or theme, disabling any of the functionality listed below could render your website inoperable. Our recommendation is to create a clone or staging website to test the implementation before enabling on your live running website. TFG Media Company nor its affiliates assume any liability for your use of these code snippets. USE AT YOUR OWN RISK!
1. Disable Gutenburg Block Library CSS
If you are not using the new Gutenburg development blocks and using instead the Classic Editor (like the millions of us are), then eliminating the slow loading Gutenburg block library CSS will improve your page load speed. To disable the block library CSS use the following code:
function remove_block_css() {
wp_dequeue_style( 'wp-block-library' ); // WordPress core
wp_dequeue_style( 'wp-block-library-theme' ); // WordPress core
}
// Fully Disable Gutenberg editor.
add_filter('use_block_editor_for_post_type', '__return_false', 10);
// Don't load Gutenberg-related stylesheets.
add_action( 'wp_enqueue_scripts', 'remove_block_css', 100 );2. Remove Query Strings
If you run PageSpeed Insights and get a recommendation that looks something like “Remove query strings from static resources”. Adding the PHP code function below will remove the query strings from static resources.
function remove_cssjs_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );3. Remove JQuery Migrate
This migration tool was added to WordPress in version 3.6. If your theme and plugins are using the latest version of JQuery then you can disable it from loading every time your website is visited. It will show up in the PageSpeed Insights optimizations as …/jquery-migrate.min.js. This will add add unneeded script evaluation time to your website’s page load and diminish your overall speed score. Disable it by adding the following code to your functions.php file:
function deregister_qjuery() {
if ( !is_admin() ) {
wp_deregister_script('jquery');
}
}
add_action('wp_enqueue_scripts', 'deregister_qjuery');4. Disable WordPress Heartbeat API
WordPress uses a a heartbeat API to allow communication between a browser and a server by continuously calling admin-ajax.php. This will impact overall page load time and increase CPU utilization, especially when hosted via a shared hosting provider. If you or your host have no requirement to use the heartbeat API, disable it with the following code:
add_action( 'init', 'stop_heartbeat', 1 );
function stop_heartbeat() {
wp_deregister_script('heartbeat');
}5. Disable Emoticons
PageSpeed Insights may give you an opportunity that suggests “…/emoticons” are taking a significant amount of time to load. This code was added to WordPress to support emojis in older web browsers. You can easily disable it using the following code:
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );6. Disable Dashicons on Front-End
Like the emoticons above, you may see that dashicons are slow to load on your website. Dashicons are utilized in the wp-admin console and if your theme is not leveraging any of these icons on the front-end of your website you can disable them. By adding the below code to your functions.php file, dashicons.min.css will stop loading on the front-end.
function wpdocs_dequeue_dashicon() {
if (current_user_can( 'update_core' )) {
return;
}
wp_deregister_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' );7. Disable or Limit Post Revisions
Every time you save a post as a draft, WordPress stores the revision in the SQL database. This can quickly lead to a large database of uneeded post revisions that, if left unchecked, will take time to iterate and index. Adding the following code to your wp-config.php file will either disable revisions completely, or set a limit on the number of post revisions WordPress will store.
NOTE: The below code snippets must be placed above ABSPATH line in your wp-config.php file or else it won’t work.
To disable post revisions:
define('WP_POST_REVISIONS', false);To limit number of post revisions:
define('WP_POST_REVISIONS', 2);8. Disable XML-RPC
If your website is not managed remotely to publish/edit/delete posts then you can disable XML-RPC. Also, leaving this feature enabled can lead to DDoS or Brute Force Attacks on your WordPress website. If you don’t need this functionality then adding the below code to your functions.php file will disable it.
add_filter('xmlrpc_enabled', '__return_false');9. Remove RSD Links
Really Simple Discovery (RSD) is only needed if you plan to use XML-RPC client, pingbacks, etc. That said, if you don’t intend to enable or use these features or need a remote client to mange your web posts then you can eliminate the header by adding the following code:
remove_action( 'wp_head', 'rsd_link' ) ;
10. Disable Self Pingbacks
I don’t know why anyone would want to leave this feature enabled other than maybe to know if you are getting a questionable back-link to your post??? We prefer eliminating the overhead associated with it and disabling it. Add the following code to your functions.php file:
function disable_pingback( &$links ) {
foreach ( $links as $l => $link )
if ( 0 === strpos( $link, get_option( 'home' ) ) )
unset($links[$l]);
}
add_action( 'pre_ping', 'disable_pingback' );11. Disable Contact Form 7 JS/CSS
If your are using Contact Form 7 on your WordPress site then you may notice that their CSS and Javascript files are getting loaded on every page. To stop this loading on every page, simply add the following filters:
add_filter( 'wpcf7_load_js', '__return_false' ); add_filter( 'wpcf7_load_css', '__return_false' );
Final Words…
We’ve covered several optimizations that will be sure to improve your WordPress website’s page load time and overall Core Web Vitals performance ratings. Make sure you heed the disclaimer at the start and test these optimizations in a controlled test environment before rolling them out to your live website.
