These techniques can significantly impact your website’s user experience, loading speed, and SEO ranking and can improve Lighthouse performance scores.
Third-party scripts are any scripts embedded into your website from an external vendor.
Using third-party scripts may enable you to unlock useful features and save you time and resources, but it can have devastating results on your website if you’re not careful.
It includes problems like long script parsing time and heavy main thread workloads, eventually slowing down the page rendering process. Also, this is CPU-intensive, resulting in a delay in user interaction and negatively impacting user experience.
Here are some examples which may run third-party codes on your WordPress website:
When you analyse your website with Google PageSpeed Insights, you will see the time third-party scripts that are blocking the main thread.
To fix these issues, try to import fewer videos, social media posts, and social media sharing icons, and disable all unnecessary third-party scripts you see in Google PageSpeed Insights.
You can use pre-connect/preload and DNS-prefetch to preload necessary third-party scripts, which will establish early connections to third-party servers. You can see more information here – Preconnect to required origins.
Using Preconnect/preload and DNS-prefetch tells the browser to establish an early connection with the other third-party websites/servers.
You can also use Cloudflare Early Hints. When enabled, Cloudflare caches the scripts that have a preconnect/preload header, and browsers will start prefetching linked assets as it waits for the other third-party servers final response, which in turn improves your website loading speed.
To enable Cloudflare Early Hints, navigate to the Speed > Optimisation section from the Cloudflare dashboard, scroll down to the Early Hints section, and click on the toggle button.
You can also host third-party scripts and functions like Google Analytics, Google fonts and Google tag manager locally on your web server. You can use free plugins like OMGF to host google fonts locally and use Flying Analytics to host google analytics locally.
To Improve your script evaluation time, you should remove unnecessary/excessive scripts that your website doesn’t need to function properly.
Let’s say, you have a blog page where you configured a sidebar that has a contact form or social media sharing options and you have attached this sidebar to every blog post you have on your website.
You may have hundreds or thousands of blog posts on your website and in this situation, this sidebar loads contact forms or social media sharing options every single time someone loads a post on your website and it blocks the main thread resulting in a slower loading time.
Firstly, Install and activate the Asset CleanUp: Page Speed Booster plugin.
Applying code-splitting can help your website smartly load the smaller scripts without having to load large render blocking scripts.
You can use the POP to apply code splitting to your WordPress website. It’s an open-source framework made specifically for WordPress.
WordPress Developers try to write codes in a way that is understandable to other developers.
Developers use characters like white space, comments, hints, etc to make it more readable.
Computers can execute codes without white spaces and comments.
Minifying removes these useless characters and tries to make the code more lightweight and reduces data needed to be transferred to visitors which positively impacts the script load time and bandwidth usage of your websites.
Compress Scripts (Gzip And Brotli)
Compressing makes the scripts take less space in web servers and less time to transfer files to your other servers.
The best part is it’s easy to set up Brotli compression using Cloudflare.
To enable Brotli compression, navigate to the Speed > optimisation section from the Cloudflare Dashboard, scroll down to Brotli compression, and click on the toggle button.
Using Cloudflare Rocket Loader
By using Cloudflare rocket loader, you can have all these benefits with just a click of a button.
Cloudflare rocket loader can help you get:
To enable the Cloudflare rocket loader, navigate to the Speed > Optimisation section from the Cloudflare dashboard, scroll down to the Rocker Loader section, and click on the toggle button.
Cloudflare APO (Automatic Platform Optimization) takes your entire website and caches it in Cloudflare’s internal server network.
Cloudflare has many servers spread across the entire world. That’s how your users get the fastest and most consistent delivery of your website content, no matter where they are.
You can see more information here – Cloudflare APO