CODEWITHSUNDEEP
lighthousepagespeed-insights
Alex Douglas
Alex Douglas

Reputation: 576

Receiving strange error in Page Speed Insights on a single website

I have a website on my server that will not run in Page Speed Insights (all other sites on this server run fine): https://[URL]/. I get the following error:

An error has occurred Lighthouse returned error: PAGE_HUNG. Lighthouse was unable to reliably load the URL you requested because the page stopped responding. You may refresh to try again. If the problem persists, please visit the PageSpeed Insights mailing list for support.

However, the site loads fine for me in all browsers.

Upvotes: 0

Views: 2653

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24855

That is because there is an error on your site.

If you set the user agent to a mobile phone there appears to be an error within your "autooptimise" JS file that means it gets stuck in a loop printing an empty array to the console.

Steps to reproduce

  1. Open developer tools in Google Chrome (f12)
  2. Set the device as 'Galaxy S5' (top left corner, second icon in that looks like a mobile phone and a tablet to activate the "device toolbar")
  3. Reload the page with the "console" tab open.
  4. Watch the 12000 console.logs per second roll in!

How to fix

As far as I can tell this is due to your slider, it appears to log the images (6 images) fine on a desktop but the second there is a mobile user agent it logs a blank array thousands of times a second.

This looks to be caused by the fact that you have two nested loops using var i.

It appears that the first loop starts trying to loop through the items, it encounters the second loop (which is now a loop that does not execute as the slides variable is an empty array and has no length) but the one thing that still gets executed is the var i = 0.

This then resets i to 0 and the for (var i = 0; i < bodyClassList.length; i++) { loop never gets above 0 so it creates an infinite loop.

var bodyClassList = document.getElementsByTagName("BODY")[0].classList;
    for (var i = 0; i < bodyClassList.length; i++) {
        if (bodyClassList[i] === 'page-id-123') {
            var slides = $('.slides li img').toArray();
            console.log(slides);
            for (var i = 0; i < slides.length; i++) { //this resets the i variable to 0 every time because slides.length = 0 (therefore i is not incremented)
                //this never gets executed as the slides.length is 0.
                //removed a load of if / else statements for brevity
            }
        }
    }

Simply change your code so that one of the loops has a different variable name and you won't get this collision. (i.e. var i for the first loop and make sure the second loop is var j for example).

I am aware this could be down to auto optimise making a mistake so you will have to check your unminified source code first and if that uses two different variables then you may have to manually minimise / alter the file in question.

Why don't you get the same problem when the slides variable isn't empty?

Because although the reset to 0 within the second loop happens here too i gets incremented to 5 before the first loop is executed a second time.

if (bodyClassList[i] === 'page-id-123') { occurs at index 5 so when the first loop increments to 6 it bypasses it the second time and the i variable never gets reset to 0.

Ironically if you had one less slide this problem would have shown itself a lot sooner!

Upvotes: 1

Related Questions