website on cleaning website not always loading - ideas?

unwashed potato! · 13 Feb 2023 at 17:32

it happened at the time of when i was trying to get the google page speed up to 100 so changed how things loaded, and then after that point, the gallery on the pages aren't always loading, needing a random amount of refreshes to get it to work. i'm not saying it is because of the changes i made to improve page loading speed, but i imagine this is the cause.

hoping it's something straight forward.

End of Tenancy Cleaning in Woking | Professional Deep Cleaning

www.mayercleaning.co.uk

you can view the gallery on the page above. if you check other pages it may be that the gallery isn't showing as there any any images there yet so better to use the link above as the one to see what i mean.

thanks

Hutchy · 13 Feb 2023 at 18:17

It's related to whatever javascript is responsible for setting the height on these elements. If you can find why it's not firing, you should be able to solve the problem.

If you load a page where the gallery isn't working, that inline height is set to 0, hiding the images.

Mr Evil · 13 Feb 2023 at 18:23

Aside from what Hutchy said, there are a couple of things I can see wrong in the source:

There is a <!DOCTYPE html> at the top, which means it's HTML 5, but then the following line is <html xmlns="http://www.w3.org/1999/xhtml"> which means it's XHTML. It can't be both. Given that XHTML is dead, the second line should just be <html>.
The meta tag with the charset attribute must be within the first 1024 bytes, but it's not. It's best to make it the first element inside the <head>.

Also the console in Firefox is complaing that "The byte stream was erroneous according to the character encoding that was declared. The character encoding declaration may be incorrect". This may be because of the previous point, or maybe your webserver is using the wrong encoding.

unwashed potato! · 13 Feb 2023 at 18:36

Hutchy said:
It's related to whatever javascript is responsible for setting the height on these elements. If you can find why it's not firing, you should be able to solve the problem.

If you load a page where the gallery isn't working, that inline height is set to 0, hiding the images.

Thanks. I've checked the page source via the console when the page loads with no images and you're right, but I think it's to do with when the script is called and decides to run and set the heights etc, as when I change the height to 100px it still isn't showing correctly, and then when I click the box, now the image loads.

Also tlif I don't have the images loading in, right click to inspect using the console, the images always then instantly display.

unwashed potato! · 13 Feb 2023 at 18:39

Mr Evil said:
Aside from what Hutchy said, there are a couple of things I can see wrong in the source:

There is a <!DOCTYPE html> at the top, which means it's HTML 5, but then the following line is <html xmlns="http://www.w3.org/1999/xhtml"> which means it's XHTML. It can't be both. Given that XHTML is dead, the second line should just be <html>.

The meta tag with the charset attribute must be within the first 1024 bytes, but it's not. It's best to make it the first element inside the <head>.

Also the console in Firefox is complaing that "The byte stream was erroneous according to the character encoding that was declared. The character encoding declaration may be incorrect". This may be because of the previous point, or maybe your webserver is using the wrong encoding.

I've trmvoed the xmlns part. Let me know if it shows as an issue still. Thanks.

touch · 13 Feb 2023 at 19:53

I would guess that it's firing the javascript before other stuff has loaded to make it work correctly.

Try something like this to run it after page load:
$(window).on('load', function() {
[...]
});

You've used 'defer' in the script tag but that's usually used for loading external scripts (like <script src="www.jquery.com/script.js" defer>). I don't know if it'll work having the defer tag on a local script?

unwashed potato! · 13 Feb 2023 at 23:14

touch said:
I would guess that it's firing the javascript before other stuff has loaded to make it work correctly.

Try something like this to run it after page load:
$(window).on('load', function() {
[...]
});

You've used 'defer' in the script tag but that's usually used for loading external scripts (like <script src="www.jquery.com/script.js" defer>). I don't know if it'll work having the defer tag on a local script?

I did that as Google wasn't happy until it was deferred.

The script is actually on a different domain, though it is the same server, the domain https://www.mayergroup.co.uk/ is where the files are stored essentially in folder grp/javascript/gallery.js, and then https://www.mayercleaning.co.uk/ accesses it by including it from the direct URL mayergroup.co.uk/javascript/gallery.js

I don't know a better way to do it, given the files the on the same server

touch · 14 Feb 2023 at 12:58

unwashed potato! said:
I did that as Google wasn't happy until it was deferred.

The script is actually on a different domain, though it is the same server, the domain https://www.mayergroup.co.uk/ is where the files are stored essentially in folder grp/javascript/gallery.js, and then https://www.mayercleaning.co.uk/ accesses it by including it from the direct URL mayergroup.co.uk/javascript/gallery.js

I don't know a better way to do it, given the files the on the same server

I mean this code:

Code:

<script defer>
    $(function(){
      $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
      $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
    });
</script>

I assumed that this was the bit setting up the slideshow but I may be wrong.

unwashed potato! · 14 Feb 2023 at 16:57

touch said:
I mean this code:

Code:

<script defer> $(function(){ $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7}); $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'}); }); </script>

I assumed that this was the bit setting up the slideshow but I may be wrong.

i see. i've had a play with it and it stillhad the issue even with the defer removed, as i think it was due to the defering of the rest of the script needed.

any way, i have sorted it enough for my satisfaction by adding a "reload gallery" button which solves the issue if the script doesn't correctly fire when first loading. i had thought of adding a delay timer of say 3 seconds but will leave it as is for now and see what i think

touch · 14 Feb 2023 at 17:07

It's not the defer that is the issue. Try and run that code inside a function which triggers after page load - example in my previous post. I thought you had used the 'defer' tag to try ad achieve that but that's not what the tag does.

edit: like this.

Code:

<script>
    $(window).on('load', function() {
          $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
          $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
    });
</script>