Beware of "JQuery multi -loading" that hinders the improvement of Core Web Vitals

Hello.Aihara is a director of the Kusanagi development team.

In addition to "KUSANAGI", AI has improved UX by speeding up the website rendering, especially the first view display, and improves the evaluation of Core Web Vitals, a high -speed engine of "WEXAL".It is developed and used by everyone.This time, I would like to tell you about this "Wexal" proposal and introduction.

In addition to the development of "WEXAL", we actually propose and introduce customers, but there are some sites that are not easy to improve.

The cause varies depending on the site, of course, but there are some patterns, and the "multi -brushed jQuery" is encountered with a high probability.

The impact of jQuery on the rendering of the first view

The capture is a check tool on the Chrome verification tool.JQuery V3 bundled WordPress.6.0 is 30 even if it is mini -fi.There are 6KBs and you can see that the size is larger than other files.

Many plugins that depend on jQuery such as sliders are often used.Since it is necessary to load the jQuery body ahead of the plug -in that depends on it, the effect on rendering in the first view will increase, which will also affect the evaluation of Core Web Vitals.

What is "JQuery multi -load" that hinders the improvement of Core Web Vitals?

Considering that such a jQuery is read multiple times on one site ... you can imagine it."JQuery's multiple loading" seems to have three large patterns.

(1) This is a common case when using WordPress, which uses both jQuery and WordPress bundled jQuery in WordPress and creates an original theme.

When incorporating the HTML -coded data into the theme, it is surprisingly many that both the external jQuery and the jQuery included with WordPress are read, and it is operated without noticing it.

Let's unify to either.

(2) When introducing plug -ins that depends on jQuery such as sliders such as sliders that describes jQuery calls for each plug -in used, jQuery is often described as a set.

This is the case where you use it as it is and describe the same jQuery call many times.

It's useless to call the same version of jQuery twice in local and CDN.One time is enough.

(3) Since the introduction time that describes different versions of jQuery calls for each plug -in, depending on the time of introduction and the specifications of the plug -in, the version of the dependent jQuery is different, so you have to use multiple versions of jQuery.In that case, it is the most difficult case.

Examples of using multiple versions via CDN

The capture is part of the advice on Pagespeed Insights, "Please suppress the effects of third -party code."You can see that you are using multiple versions of JQuery via Google CDN.

Such a situation is often found in sites that have been operated for a long time, and some sites use three to four different versions.

In order to unify, it is necessary to find a version where the plug -in used to work in common, but it is honest that it is difficult to reach out considering the influence and man -hours.

One measure is to reduce four to two, even if they are all difficult, and download them locally to reduce the effects of the network.

Check which version of jQuery you are using when introducing, and be careful in the operation so that you do not read as much as possible.

Let's use "Wexal"

"Wexal" is an optimization of rendering as a whole by delaying JS, which is unnecessary for first view, so it is often effective for such sites.

In the introduction simulation of the capture site, the "Total Blocking Time", which is a readability indicator, has improved from 1500 milliseconds to 100 milliseconds.

How about jQuery on your site?Please take this opportunity to review it and aim for a high user experience.

"Kusanagi" is a virtual machine that operates CMS such as WordPress at high speed.We will tell you the knowledge of the web that the planning and development team gained from that experience from various angles.The eighth of the series is explained how to measure the response speed of the server to determine the health status of the site.

"Kusanagi" is a virtual machine that operates CMS such as WordPress at high speed.We will tell you the knowledge of the web that the planning and development team gained from that experience from various angles.The seventh in the serialization will explain the vulnerability of WordPress and the update Kihon.

"Kusanagi" is a virtual machine that operates CMS such as WordPress at high speed.We will tell you the knowledge of the web that the planning and development team gained from that experience from various angles.The sixth in the serialization explains how to avoid security risks due to vulnerability.

"Kusanagi" is a virtual machine that operates CMS such as WordPress at high speed.We will tell you the knowledge of the web that the planning and development team gained from that experience from various angles.The fifth in the serialization is explained about the multi -brushing of JQuery, which affects the rendering of the site.

"Kusanagi" is a virtual machine that operates CMS such as WordPress at high speed.We will tell you the knowledge of the web that the planning and development team gained from that experience from various angles.The fourth in the series is explained about the renewed PageSpeed Insights.

"Kusanagi" is a virtual machine that operates CMS such as WordPress at high speed.We will tell you the knowledge of the web that the planning and development team gained from that experience from various angles.The third in the serialization will explain the SSL of the website.

"Kusanagi" is a virtual machine that operates CMS such as WordPress at high speed.We will tell you the knowledge of the web that the planning and development team gained from that experience from various angles.The fourth in the series is explained about the renewed PageSpeed Insights.

"Kusanagi" is a virtual machine that operates CMS such as WordPress at high speed.We will tell you the knowledge of the web that the planning and development team gained from that experience from various angles.The second in the serialization is how to look ahead to the maximum content and speed up LCP.

"Kusanagi" is a virtual machine that operates CMS such as WordPress at high speed.We will share the knowledge of the web that the planning and development team gained from that experience from various angles.The first of the series is to think about "speed" in the web operation.

"Kusanagi" is a virtual machine that operates CMS such as WordPress at high speed.We will tell you the knowledge of the web that the planning and development team gained from that experience from various angles.The sixth in the serialization explains how to avoid security risks due to vulnerability.

"Kusanagi" is a virtual machine that operates CMS such as WordPress at high speed.We will tell you the knowledge of the web that the planning and development team gained from that experience from various angles.The eighth of the series is explained how to measure the response speed of the server to determine the health status of the site.