remove <noscript> tag automatically generated for each image

[balrogmedia]

Hello everyone,

I've tried to find a solution online but I didn't find one.

I use wp-rocket with lazyload, but I don't want the

is there a way of removing it, please? Thank you in advance for your precious help!

[piotrbak]

@balrogmedia Hello and thanks for creating the issue. We don't have any clean way of doing that, could you tell us what's the reason behind removing compatibility code?

[balrogmedia]

I think it is unnecessary and just makes the site heavier, but mainly because web accessibility evaluation tools don't like it, for example https://wave.webaim.org/, so I think there is an accessibility issue with the noscript tag.

[sandyfigueroa]

The user opened a ticket, and it was closes in favor of this feature request

They provided this to check the results of their website's test: https://wave.webaim.org/report#/https://casinoonlinesoldiveri.it/ Screenshot: https://prnt.sc/hBH51ZR7tJPk

I think it should be fine to provide at least a filter (if possible) for the users who want to disable this, since it can save some HTML size if the site has a lot of images.

[DahmaniAdame]

Normally, if the original image is accessible, that same image wrapped inside the noscript tag would be accessible as well.

Checking the site on Chrome and Firefox accessibility audits didn't show any issues with the noscript tag related to the fallback images.

Using an actual screen reader like NVDA doesn't show the issue as well.

Checking the error on Wave, the noscript inner code is not rendered correctly, while it is for other faulty elements:

<img src="https://placehold.jp/3d4070/ffffff/150x150.png" alt="Image description">
<noscript>
&lt;img src=&quot;https://placehold.jp/3d4070/ffffff/150x150.png&quot; alt=&quot;Image description&quot;&gt;
</noscript>
<img src="https://placehold.jp/3d4070/ffffff/150x150.png">
Noscript element
<noscript>
&lt;img src=&quot;https://placehold.jp/3d4070/ffffff/150x150.png&quot;&gt;
</noscript>

It's turned into HTML entities. Possibly what prompts Wave to think the content is not accessible as it doesn't see the image's markup correctly.

Removing the noscript will guarantee that images will go missing on browsers with JavaScript disabled.

If that's an acceptable risk, having a filter will make sense.

Otherwise, turning on the native lazyload would be a wiser option if passing the Wave audit specifically is a must, as other audits seem to be fine with how the fallback image is implemented inside the noscript tag - https://docs.wp-rocket.me/article/1292-chrome-native-lazyload

[balrogmedia]

Thank you for your answer!

is it correct to have this first quotation marks here?

If it is correct, then shouldn't the quotation marks " within the tags be replaced by apostrophes '?

That would fix i guess?

[DahmaniAdame]

is it correct to have this first quotation marks here?

Yes. But it's Chrome's doing, not WP Rocket :)

When JavaScript is enabled, Chrome adds the " on the inner HTML of the noscript tag.

If you check the source code, test with JavaScript deactivated, or test on Firefox, you will notice that the " marks are not there.

If it is correct, then shouldn't the quotation marks " within the tags be replaced by apostrophes '?

We don't control the " mark added by Chrome. And on the browser itself, it's not an issue.

But it could be problematic if Wave parses the content of the noscript as text, which it seems like it does (it turns everything into HTML entities).

[balrogmedia]

I understand.

I'm not sure what to do. I would like my site to be 100% accessible on Wave, but Lazy load is also important.

Thank you anyway!

[DahmaniAdame]

@balrogmedia keep the lazyload on, and use the following helper plugin to enable the browser's native lazyload :)

Images will be lazyloaded, there won't be any noscript added, and it will work in all browsers regardless of whether JavaScript is deactivated.

[balrogmedia]

Which plugin Dahmani?

[DahmaniAdame]

@balrogmedia this one - https://github.com/wp-media/wp-rocket-helpers/raw/master/lazyload/wp-rocket-enable-native-lazyload/wp-rocket-enable-native-lazyload.zip

Reference - https://docs.wp-rocket.me/article/1292-chrome-native-lazyload

[vladyslav-storozhenko]

Hello, I would also like to add to this conversation, as we also had similar request from our SEO specialists to remove this noscript tag, as it makes search bots think that the image is duplicated (it's alt attribute is saved in cache, that's what triggered SEO specialists). Given that there is no way at all to control this part of lazyload's behavior, we were forced to use another plugin

[balrogmedia]

hi,

I seem to have removed the >noscript> tag by removing the following lines

private function noscript( $element ) { return '';

on file wp-content/plugins/wp-rocket/inc/Dependencies/RocketLazyload/Image.php

I have no idea if I shouldn't, but it seems working.

What do you think about it? thanks

[balrogmedia]

Nah, forget that. It was giving some issues.

Any chance to have a disable button form the WProcket team?

[justingolden21]

We would also like this for our website. We have some pages with many images, and have an excessive DOM size partially due to these tags. We're trying to improve performance and ideally wouldn't choose between excessive DOM size and compressed images. Thanks!

[balrogmedia]

Thank you!

I've tried but I see no difference in the code.

Your code is beyond my skills so I dont know what is the issue. But if in future you get it working don't hesitate to let me know please

Thank you!

Il 13/12/2023 05:44 CET Capstan @.***> ha scritto:

You need to add a filter in functions.php to disable these tags:

// Lazyload fix function nonoscript_lazyload($in) { return str_replace( '', '', $in ) ; } add_filter( 'autoptimize_filter_imgopt_lazyload_cssoutput', 'nonoscript_lazyload');

— Reply to this email directly, view it on GitHub https://github.com/wp-media/wp-rocket/issues/5723#issuecomment-1853261873, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXP2FGGG5JXFSDLVLAUKLQ3YJEXD3AVCNFSM6AAAAAAUIVMISWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNJTGI3DCOBXGM. You are receiving this because you were mentioned.Message ID: @.***>