• Resolved Gevorg

    (@gev0rg)


    Hi

    A client for whom I work reported today that all of a sudden the images of his WooCommerce shop are not showing up on the homepage.

    After looking into this matter we discovered that images do show up on other browsers but not on Google Chrome. It seems that only Google Chrome all of a sudden has problems loading the images of his website.

    Starting to research into this, I found that the image tags have a link to https://www.w3.org/... as src attribute and that the real link of the image file is located in the data-src attribute. The reason for this is because of lazy loading the images on the website.

    On this forum I found posts about it here:
    After update NO more images are displayed!

    or here:
    Lazy Loading in combination with the official amp plugin images not loading

    But I do not think it’s a problem with your plugin, I think it’s rather a problem with the outdated <svg> link which you use for the placeholder image. Therefore I would like to propose a suggestion to you:

    You use the following content for the src attribute of lazy-load <img> tags:
    data:image/svg+xml,%3Csvg%20xmlns='https://www.w3.org/2000/svg'%20viewBox='0%200%20324%20324'%3E%3C/svg%3E

    It’s meant to be a placeholder for images that are marked to be lazy loaded. However, this content links to the w3.org website via ordinary https:// protocol, not https:// protocol. The website which has the problems runs on https://.

    When a website is set up for SSL communication all links in the source code have to be https:// protocol. If links are detected that load content via https:// protocol the website is downgraded as “not secure”. This seems to be the reason why the loading of images fails in Google Chrome browser as soon as it finds images which have a https:// link in their src attribute. Prior to that, the few images not marked for lazy-loading, are being loaded in Chrome.

    Servers have different configurations via .htaccess how to handle SSL traffic. Furthermore you’ll have different behavior among the various browsers how to handle such conflicts. Maybe these circumstances culminate and cause the Google Chrome browser to abort loading images as soon as it finds the first lazy-load image which contains a https:// link in its src attribute because of the outdated w3.org <svg> tag.

    And concerning other browsers loading the images, well, the other browsers may be smart enough to recognize and consider the <svg> link to w3.org as trustworthy and not downgrade the whole website as “not secure” just because of some outdated w3.org https:// placeholder links in <img> tags.

    If my assumption is correct you could solve this problem very easily. Simply update the <svg> link in the lazy-load <img> tags. You could replace this:
    xmlns='https://www.w3.org/2000/...

    with this:
    xmlns='//www.w3.org/2000/...

    This notation should avoid any SSL conflict with .htaccess configurations on production servers, since you can not predict all the different server scenarios, and it lets the server of w3.org decide how to handle the HTTP protocol for the placeholder image.

    If this problem is already known and has been addressed then ignore this post and close it.

    Otherwise please let me know if my suggestion is helpful to you.

    Thank you for a good plugin.

    Sincerely,
    Gevorg

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @gev0rg

    Thank you for reaching out and thank you for your suggestion.
    Can you please share more information about the website the issue occurs, like the theme used, and possible Referrer-Policy: that is set?
    We need to be able to replicate the issue so that we can confirm the problem and find a possible solution.
    Let me know more information and I’ll make sure to investigate this and get back to you.
    Thanks!

    Thread Starter Gevorg

    (@gev0rg)

    Hi Marko

    Here is some info about the website:

    WordPress version: 5.8.2
    WooCommerce Version: 5.9.0

    The theme in use is Storefront, from the same developers as WooCommerce. It is version 3.9.1.

    W3 Total Cache is active in version 2.2.0. Currently lazy loading has been deactivated.

    There are two lines of Referrer-Policy included in the raw header information, these are:

    Referrer-Policy strict-origin-when-cross-origin
    Referrer-Policy no-referrer-when-downgrade

    I have currently deactivated lazy loading of image files and I received confirmation that the images do show up again in Google Chrome browser. I should mention that when I tested it with Google Chrome the images did show up, even when lazy loading was still active. But the client wouldn’t see any images on his Chrome browser, neither anyone else whom he asked to visit his website with a Chrome browser. They tried it on various devices. But when people used a browser other than Google Chrome they would see the images.

    Now that lazy loading has been deactivated they encounter no problems on Google Chrome browser.

    Let me know if you might need more information.

    Sincerely,
    Gevorg

    Thread Starter Gevorg

    (@gev0rg)

    Hi

    Were you able to do your testing concerning my suggestion?

    You could also tell me where to look for the string xmlns='https://www.w3.org/2000/... which you use for the placeholder images. This way I could do my own test. If it stored in the database, which table contains it? And if it is stored on disc, in which file is it?

    Sincerely,
    Gevorg

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @gev0rg

    I’ve tried to replicate this and it seems to be the conflict with the theme you are using and not with the protocol.
    The placeholder is set in /wp-content/plugins/w3-total-cache/UserExperience_LazyLoad_Mutator.php L253
    You can try adding the change you proposed and since you have the access to the website test and see if the problem persists.
    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Images are not loaded on Google Chrome browser, SSL issue?’ is closed to new replies.