Failed to load resource

Hi,

That usually happens when you are using Float widget look and you have an optimization/caching plugin which breaks our codes.

Make sure to skip GTranslate javascript codes from being “optimized”.

Thanks! ??

Your diagnosis seems spot on. What are names of GTranslate js codes that I need to exclude?

All codes loaded from wp-content/plugins/gtranslate/js/ folder and all inline js codes containing “gtranslate”.

Thanks! ??

I excluded all js scripts from LScache page optimization and the problem remains. The GTtranslate plugin works fine, so it is unlikely that the problem is in js code. The problem is that one resource refuses to load. Also, there is another problem with a layout shift specifically related to floating GTtranslate icon. Could this be a css rather than js problem?

• This reply was modified 11 months, 1 week ago by mountbest.
• This reply was modified 11 months, 1 week ago by mountbest.

I do not see a problem currently on your website. There are no requests going to auto.svg file. I need a way to replicate the issue.

If everything is configured properly, there should not be any requests to auto.svg file. If there is a request to auto.svg file, which does not exist, it means that gtranslate settings are not being loaded properly, so javascript can use it instead of presuming default ‘auto’ value for the source language.

It is not a CSS issue, if you have other issues, feel free to open a separate topic and describe the issue in details.

Thanks! ??

The website and gtranslations are working ok, but PageSpeed Insights reports “Browser errors were logged to the console” in the “best practices” section. Use the PageSpeed Insights to see for yourself.

Errors can be a sign of problems or vulnerability. What tests can I do to diagnose the issue? Is it worth spending time on this diagnosis?

OK, that helped. I have used PageSpeed browser agent (Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36) and made sure I’m using incognito window, so no cookies are present and I noticed that your website loads, then it reloads with _lscache_vary cookie present for the second reload request.

First load has some optimizations present and it sends a request to auto.svg.

You can check the HTML source code by using the following curl command line tool:

curl 'https://example.com/' \
  -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7' \
  -H 'Accept-Language: en-US,en;q=0.9' \
  -H 'Cache-Control: no-cache' \
  -H 'Connection: keep-alive' \
  -H 'DNT: 1' \
  -H 'Pragma: no-cache' \
  -H 'Sec-Fetch-Dest: document' \
  -H 'Sec-Fetch-Mode: navigate' \
  -H 'Sec-Fetch-Site: none' \
  -H 'Sec-Fetch-User: ?1' \
  -H 'Upgrade-Insecure-Requests: 1' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36' \
  --compressed

Make sure to replace example.com with your own domain name.

In the response I see the following:

<script id="gt_widget_script_82729233-js-before" type="litespeed/javascript">

Which means that LiteSpeed cache is “optimizing” our code and breaking it. It must stay intact like this:

<script id="gt_widget_script_82729233-js-before">

The second request is different:

curl 'https://example.com/' \
  -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7' \
  -H 'Accept-Language: en-US,en;q=0.9' \
  -H 'Cache-Control: no-cache' \
  -H 'Connection: keep-alive' \
  -H 'Cookie: _lscache_vary=e946cfa7b3723a84eb798b60526bf3af' \
  -H 'DNT: 1' \
  -H 'Pragma: no-cache' \
  -H 'Referer: https://example.com/' \
  -H 'Sec-Fetch-Dest: document' \
  -H 'Sec-Fetch-Mode: navigate' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Upgrade-Insecure-Requests: 1' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36' \
  --compressed

Please note the Cookie: _lscache_vary=e946cfa7b3723a84eb798b60526bf3af

It has a different response with the following in it:

<script type="text/javascript" id="gt_widget_script_19983158-js-before" src="data:text/javascript;base64,...." defer></script>

Which is just js inlining with base64 encoding and it works fine. I do not think using base64 to inline scripts is “optimization”, it is extra work for the server to encode and also the browser to decode base64 and run the code, instead of just running the code, but it is fine to do that.

Here is the code responsible for reload:

<script data-no-optimize="1">
            var litespeed_vary = document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/, "");
            litespeed_vary || fetch("/wp-content/plugins/litespeed-cache/guest.vary.php", {
                method: "POST",
                cache: "no-cache",
                redirect: "follow"
            }).then(e=>e.json()).then(e=>{
                console.log(e),
                e.hasOwnProperty("reload") && "yes" == e.reload && (sessionStorage.setItem("litespeed_docref", document.referrer),
                window.location.reload(!0))
            }
            );
        </script>

Looks like it sends a request to /wp-content/plugins/litespeed-cache/guest.vary.php which determines if the page must be reloaded or not, possibly depending on the browser.

I would avoid such behavior. My personal preference is Autoptimize plugin and I also like using Cloudflare with Rocket Loader enabled for my websites.

You can disable LiteSpeed cache completely and check again.

Thanks! ??

Thanks edo, this gives me food for thought and tools to experiment with. Following your suggestion I disabled minification of js , which improved the performance score in PageSpeed Insights.