Please note some of the links in this post are affiliate links. This means if you click on the link and purchase the item, I will receive a small commission at no extra cost to you.
The other day I enabled Cloudflare’s Rocket Loader on my WordPress website after some feedback from Google Page Speed Insights that my site was experiencing render blocking.
What can Rocket Loader help with?
Rocket Loader is a free resource that comes with Cloudflare. What it does is defer the loading of scripts such as JavaScript until after the main content of the page such- text, images, fonts, stuff that the user can see – have loaded so that the user doesn’t have to wait for what’s most significant to them. At the time of writing, Cloudflare says, it will improve your results for the following Google Core Web Vital metrics which have a significant impact on your SEO:
- Time to First Paint (TTFP) – the very first pixel change
- Time to First Contentful Paint (TTFCP) – this measures the time between the moment when the user navigates to the website and when the first meaningful content is rendered to the screen, be it image, text, SVG
- Time to First Meaningful Paint (TTFMP) – first meaningful paint has been deprecated and is replaced with Largest Contentful Paint, so hopefully Rocket Loader can help with this too. Largest Contentful Paint (LCP) is a measurement of how long it takes for the largest text, image or video within the viewport to be fully rendered. Part of this metric involves figuring out what the largest piece of content actually is. There are some fairly complex rules around what this is and you can see more about it here. This video also gives you the detailed lowdown of this metric.
- Document Load – a JavaScript event that fires once all the page’s resources have loaded. This is less important to Google these days as the page could already be interactive by this time.
Google specifies time ranges that define if your value for each metric is good, needs improvement, or is poor. Better enable Rocket Loader if it’s poor! 😀
The Results
It did make my Google Page Speed Insights a little better and also noticeably sped up the page from the user perspective, however it caused some problems as well. One section – a slider sitting right at the top of one of my pages – ground to a halt and it looked like the entire page was broken (so check your pages!). I took the easy way out with this one and just listed the page as an exclusion.
However, when browsing the front end of the site while logged in, it stopped displaying my WP Admin toolbar meaning that I couldn’t do things like click edit on a page to go to the back end and edit it. I couldn’t disable the page to solve this because the toolbar could show up on any front end pages.
Never mind though, Cloudflare provides a way to exclude certain scripts from Rocket Loader and this is done by adding the cfasync=false data attribute to the script tag:
data-cfasync="false"So the script that loads the Admin toolbar would look like this when it is excluded:
<script type="text/javascript" data-cfasync="false" src="https://example.com/wp-includes/js/admin-bar.min.js" id="admin-bar-js"></script>But how do I do that if I’m on WordPress?
Good question! WordPress has a filter for that called script_loader_tag. This filter allows you to modify the script tag for any enqueued script.
So put this snippet in your functions.php file and your Admin Bar should show back up:
add_filter( 'script_loader_tag', 'add_data_cfasync_to_admin_bar', 10, 3 );
function add_data_cfasync_to_admin_bar( $tag, $handle, $src ) {
// Check if this is the 'admin-bar' script handle
if ( 'admin-bar' === $handle ) {
// Add the data-cfasync="false" attribute to the <script> tag
$tag = str_replace( 'src', 'data-cfasync="false" src', $tag );
}
return $tag;
}Happy editing!
The featured image for this post is by John Baker on Unsplash