The script evaluation time indicates the time needed to load, parse and execute JavaScript files.
JavaScript runs on the main thread, and the problem is when this script evaluation time blocks the main thread resulting in a load time increase with a bad user experience and page performance.
If the JavaScript fails to load and execute on time, then other content of your website starts waiting for JavaScript to execute properly, resulting in:
- Increasing page load time
- Difficulty rendering fonts/gifs/images/videos
- Increasing HTML and CSS load time
- Not capturing user inputs
So, optimising JavaScript is essential. Today we are going to show you some of the most effective ways to speed up your WordPress website and the ways to reduce script evaluation time.
These techniques can significantly impact your website’s user experience, loading speed, and SEO ranking and can improve Lighthouse performance scores.
Reduce/Limit the Use of Third-Party Scripts
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:
- Ads related plugins
- Software plugins
- Analytics plugins
- Payment gateways
- Ecommerce plugins
- Online chatbots
- Video, audio & image libraries
- Social media sharing plugins
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.
Preloading Important Scripts and Hosting Third-Party Scripts Locally
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.
Remove Unused Scripts
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.
To see unnecessary scripts that are running on your website you can analyse your website in Google PageSpeed Insights see the Reduce unused JavaScript section.
Defer And Delay JavaScript
When a browser opens a website, it tries to load the website from top to bottom but if it finds any JavaScript codes, the priority of the browser shifts to parsing, loading, and executing these codes before trying to load the contents of the website which increases your website loading time.
This issue can be resolved with defer parsing of JavaScript to allow the browser to first load the full website’s contents without waiting for the Script to complete the parsing phase and therefore reduces website loading time.
You can get some more performance from your WordPress website by delaying the JavaScript. This can delay things like fetching and parsing scripts for a few seconds and focus on resources like texts and images that users like to see right away.
The benefits of deferring and delaying JavaScript are:
- Better user experience
- Better SEO ranking
- Better script prioritisation
- Better utilise main tread workloads
- Better javascript execution time
- Less prioritising render blocking scripts
To defer JavaScript, you can try the Asset CleanUp: Page Speed Booster plugin.
Firstly, Install and activate the Asset CleanUp: Page Speed Booster plugin.
To activate defer JavaScript, navigate to Asset CleanUp and click on Settings.
Now, scroll down and click on Optimise JavaScript > Combine loaded JS (JavaScript) into fewer files and then check the two options below Combine loaded JS.
Apply Code-Splitting
If you are facing an issue with loading large JavaScript files, then you can try code-splitting which divides JavaScript into smaller snippets.
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.
Note: You should always apply code splitting before minifying your JavaScript.
Minify Scripts
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.
You can easily minify your JavaScript using Cloudflare auto minify functionalities.
To enable auto minify, navigate to the Speed > optimisation section from the Cloudflare Dashboard and then scroll down to Auto Minify > JavaScript, and click on the check box.
Compress Scripts (Gzip And Brotli)
Compressing scripts is the process of reducing the file size by encrypting JavaScript files.
Compressing makes the scripts take less space in web servers and less time to transfer files to your other servers.
Cloudflare help speeds up JavaScript evaluation time by compressing scripts using Brotli or Gzip compression. Cloudflare prefers Brotli compression but uses Gzip compression if the client does not support Brotli compression. Google developed the Brotli compression algorithm to help websites load data even faster by cutting down the cost of data transmission.
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
We discussed the benefits of differing JavaScript, delaying JavaScript, and prioritising website content(text, images, fonts, etc.)
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:
- Better website loading speeds
- Better google SEO ranking
- Better user experience
- Better javascript prioritisation
- Better minimise main tread workloads
- Better javascript execution time
- Better optimisation of render blocking scripts
- Better prioritising your website contents
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.
Using Cloudflare APO
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