Is your WordPress site feeling a little lethargic? We’ve curated a list of “quick wins” to boost your PageSpeed score without too much developer input. If you know how to add to your functions.php file, then these tips are definitely for you.
1. Remove unnecessary scripts
Whether you’re building a new theme from scratch or using this post to streamline your existing one, I’d recommend reviewing the following functions and updating those that apply:
Emoji Support
By default, Emojis are enabled on your WordPress installation. If you don’t want to use Emojis on your posts and comments, you can remove the script and stylesheet that are called into your theme. Simply add the following two lines to your theme’s functions.php file:
remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'wp_print_styles', 'print_emoji_styles' );
Comment Reply Script
If you’re not using the built-in post commenting system, or if you’re using a better platform like DISQUS, you can remove redundant comment script. In the first instance, remove where it’s initially being enqueued on your theme’s functions.php file. If you can’t find it, add the following code to your functions.php:
function remove_comment_reply_script() {
wp_deregister_script( 'comment-reply' );
}
add_action('init','remove_comment_reply_script');
oEmbed Scripts
Since WordPress 4.4, oEmbed is installed and available by default. WordPress assumes you’ll want to easily embed media like tweets and YouTube videos, so it includes the scripts as standard. If you don’t need oEmbed, you can remove it by installing this accredited plugin or by adding the following function to functions.php:
function speed_stop_loading_wp_embed() {
if (!is_admin()) {
wp_deregister_script('wp-embed');
}
}
add_action('init', 'speed_stop_loading_wp_embed');
Not using the new Gutenberg editor?
If you’ve updated WordPress to 5.0, but have the Classic Editor plugin installed, WordPress may still be adding it’s Gutenberg editor script into your site. Add the following to functions.php to remove that script:
function remove_block_library() {
wp_dequeue_style('wp-block-library');
}
add_action('wp_enqueue_scripts', ‘remove_block_library’, 11);
Including Contact Form 7 Scripts only when needed
If you’re using Contact Form 7, you may notice that it includes its JavaScript and CSS on pages that don’t even have contact forms on them.
Add the snippet below to your functions file to only include on the contact page. Change the $pages array to include the slugs of the pages that contain contact forms:
function cf7_scripts() {
add_filter('wpcf7_load_js', '__return_false');
add_filter('wpcf7_load_css', '__return_false');
$pages = array(
'contact',
'home'
);
if (is_page($pages)) {
if (function_exists('wpcf7_enqueue_scripts')) {
wpcf7_enqueue_scripts();
}
if (function_exists('wpcf7_enqueue_styles')) {
wpcf7_enqueue_styles();
}
}
}
add_action('wp_enqueue_scripts', 'cf7_scripts', 20);
2. Clear Out Unused Plugins
As well as being good practice for website security, any plugins you have installed that you are not using anymore could be adding time to your page load.
Either as an increase on the time-to-first-byte, as the plugin may be running its logic on every request, or it could include JavaScript, stylesheets, fonts or other resources that increase the overall size of the page your users have to download.
3. Keep WordPress & plugins up-to-date
In the same vein as above, it’s good security practice to keep your plugins and core WordPress updated. These updates can include performance fixes that improve the overall efficiency of the site.
4. Limit Post Revisions
More of a good house-keeping tip, I’d recommend limiting the revision history of your posts. By default, WordPress will keep an infinite number of revisions which builds up over time and can bloat the database, increasing the time database queries take. You can limit the number of revisions for posts by adding the following line to your wp-config file:
define( ‘WP_POST_REVISIONS’, 3 );
5. Utilise Optimisation Plugins
Alongside unoptimised images, plugins are a frequent culprit of poor performance. There are two however that I’d recommend installing from the get-go for performance and maintaining a lean website.
WP Smush
This essential plugin will trim, shear and crop all images uploaded to the media library to optimise their delivery on the front-end and keep storage sizes in-check:
Autoptimize
This lesser-known all-in-one minimiser is really worth installing. With minimal set-up Autoptimize can concatenate, compress and minify all of your scripts and styles. It even minifies the HTML code itself, helping you save those extra bytes and achieve those elusive points with page-speed tools.
WebP Express
WebP is a new image file type introduced by Google, supported by the latest versions of Chrome, Firefox and Edge. Webp images are typically smaller than their JPG or PNG counterparts, and so it’s recommended to serve WebP images to those browsers that support it.
The WebP Express plugin will automate this, by automatically converting your images to WebP when they are requested, and served to browsers that support it, whilst serving the original JPG or PNG file to those browsers that don’t
6. Let CloudFlare do the bulk of the work
CloudFlare’s has an amazing arsenal of tools that can really boost the speed of your site.
If you’re not already on CloudFlare, there’s a bit more work involved, as you’ll have to port over your DNS records, but CloudFlare makes this really simple by walking you through the process and automatically getting the DNS records it can find.
Once in CloudFlare, on the DNS tab, make sure you’ve got “the orange clouds” (DNS & HTTP Proxy) enabled for your site’s “A” or “CNAME” records. This will then allow us to use their speed and caching tools.
Under the speed tab, autominify will, as the name suggests, reduce the size of HTML, CSS & JavaScript. Brolti will further save on bytes by compressing resources. Rocket Loader reorganises your JavaScript so that high-priority resources can load first, such as your CSS. Make sure you test your website after enabling this though, as it may move some JavaScript that is required by inline JavaScript.
Under the caching tab, setting this to “standard” will mean that your server won’t have to process as many requests, as a cached version will be served by CloudFlare.
7. Start with a super lightweight theme
If you’re developing your own theme, starting off with a lightweight theme can really help with pagespeed from the get-go.
In the past, we’ve used the starter theme ‘_s’ (underscores) which is overseen by the lovely people at Automattic (you know, the guys behind WordPress). You can download the theme from the website, or find it over on GitHub.
Whilst it’s always tempting to build on a more developed theme, using a starter theme like _s gives you just the right amount of lean, well-commented, modern, HTML5 templates to build your site.
8. Use a Good Web Host
Choosing the right hosting partner is essential. If you’re a developer you’ll know just how much performance can suffer when you move from your local environment to the staging or live server.
Having done substantial research into affordable, scalable WordPress hosting, we’ve partnered with WPEngine.com for the following reasons:
- Built-in inclusive Content Delivery Network (CDN) via MaxCDN
- Their proprietary EverCache architecture is scalable, reliable and offers an impressive time to first byte.
- A built-in caching engine that negates the need for third-party plugins
- Premium tier installations for as low as £4 per site per month
Changing hosting isn’t always an immediately viable option, but choosing a hosting partner who exclusively specialises in WordPress is always worth considering.
So there it is! Go forth and be speedy!
If you have any extra tips on improving WordPress Pagespeed score or want to let us know if these tips helped improve your Pagespeed score, get in touch and let us know!