Improving your sites performance is all about ensuring multiple areas are optimized and efficient. One particular area is what the browser loads.

Unfortunately when you are using Kentico 13 in conjunction with the page builder and form builder features, you are loading JQuery 3.5.1 but not the minified version.

The cost of JQuery

JQuery 3.5.1 uniminified is 288kb, while the minified version is 89kb. That's a whopping ~69% reduction of size. Keep in mind you are loading the JQuery file everywhere. You are loading it the page tab when you configure the widgets of a page in the Kentico Admin, when you configure a form in the form builder. You are loading it on every single page where you are loading the script dependencies of Kentico (every page where you are using page builder or form builder).

Of course if you are delivery your static files via compression this would be less, it's loading 86.5kb GZIP compressed but loading the minified file it will be 31KB! All in all, it's a worthwhile reduction of size.

Better page speed, better ranking

This will effect your page score on your site. You should care about that because Pagespeed Insights from Google actually has an influence on your SEO ranking of our site. More specifically, the Web Core Vitals (opens new window). In a world were every slight optimization is key, you would want to implement this optimization. If you haven't heard of PageSpeed Insights make sure to read up on it here (opens new window) at least. While you are at it, put your site up for a PageSpeed Insights analysis if you have never done so. It'll give you a great advanage for the usability of your sight to improve the key areas the report mentions. You can do it here (opens new window).

How to load the minified file

Thankfully Kentico allows us to customize the JQuery script we are loading. Our plan is simple, configure to load the minified jquery script that we will provide.

1. First of all make sure you have downloaded the JQuery 3.5.1 file. You can find it here: https://code.jquery.com/jquery-3.5.1.min.js (opens new window)
2. Replace the default form builder library. You can do so by setting the JQueryCustomBundleWebRootPath property of the FormBuilderBundlesOptions object. Set it to the path of your minified file, which should be located under the wwwroot directory.

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<FormBuilderBundlesOptions>(options =>
    {
        // Specifies custom jQuery bundles to link instead of the system defaults
        // All paths implicitly start from the application's web root (~/wwwroot/ folder)
        options.JQueryCustomBundleWebRootPath = "Path/To/My/jQuery/Bundle";
    });

    ...
}

3. After doing so, you will need to implicitly load the JQuery file on your pages. Load it on all your pages where you are loading Kentico scripts dependencies. Set it to the path value that you have set recently:

<script src="Path/To/My/jQuery/Bundle"></script>

You can find the full documentation this on here (opens new window).

Even better: Don't load JQuery at all

Why even load JQuery at all!? It's huge and you might not even use it yourself. If how fast the FED world is progressing, JQuery is quickly becoming a relic of the old.

Well there's good news and bads news. The good news is that it is possible to not load it all, Kentico doesn't rely on JQuery for its form and page builder features anymore. The bad news is that it requires you to have updated your Kentico to at least Kentico Xperience 13 Refresh 11 (released December 7, 2023) (opens new window).

If you haven't that's tough luck, the page and form builder features are dependant on JQuery for you. Though with dotnet 8 support you might want to consider hotfixing to the latest version and doing a .net runtime upgrade because of the performance improvements (opens new window). But at least you have the option to load the minified version of JQuery as an option.