andrewceharris

Another vote from me, we already use offload media with s3, but are considering a move to R2 so we can use Cloudflare’s image optimization

It’s in a CSS file

Just tried all of them on our testing site, seems to have the same issue with all.

Don’t think it was an update then, my bad.

I thought it worked before, but maybe it only worked locally without the plugin and that setting enabled.

I can fix this by using an escaped version of the background image, which is what i normally use anyway generated from here https://yoksel.github.io/url-encoder/.

background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' version='1.1' viewBox='0 0 68 48'%3E%3Cpath fill='%2523f00' fill-opacity='0.8' d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%2523fff'%3E%3C/path%3E%3C/svg%3E");

Probably not worth trying to fix that on your end ??

It seems related specifically to the “Inline all CSS?” option, disabling that has fixed the issue for me.

Ooh that’s a good idea using skip-lazy class.

FYI i’m having the issue on the inline SVG placeholders with Lighthouse.

define( 'SU_ABOVE_FOLD_IMAGES', 2 );

add_filter(
	'ewww_image_optimizer_filter_page_output',
	function( $buffer ) {
		$dom = new DOMDocument();
		// workaround for HTML5 errors https://stackoverflow.com/questions/6090667/php-domdocument-errors-warnings-on-html5-tags
		libxml_use_internal_errors( true );
		$dom->loadHTML( $buffer );
		libxml_clear_errors();
		$images         = $dom->getElementsByTagName( 'img' );
		$above_fold_idx = SU_ABOVE_FOLD_IMAGES - 1;
		$idx            = 0;

		foreach ( $images as $img ) {
			if ( $idx <= $above_fold_idx ) {
				// skip lazy loading of above fold images
				$img->setAttribute( 'class', $img->getAttribute( 'class' ) . ' skip-lazy' );
			} else {
				break;
			}
			$idx++;
		}

		libxml_use_internal_errors( true );
		$html = $dom->saveHTML();
		libxml_clear_errors();

		return $html;
	},
	1
);

This has solved it for me for now, making sure to run the filter first with a low priority so the skip-lazy classes are added to the first 2 elements before they are converted to pictures, etc.

Thanks for you help!

I have those settings enabled, but Lighthouse still warns me to preload the “Largest Contentful Paint Image”.

Only way i found to fix this was to disable the webP picture generation and just use the JS version, but this causes issues on mobile as it seems to cause a download for images that are “display: none;”.

It seems fix would be to create one big loop with picture and img elements, so they are processed in order. But guess that’s quite a big refactor.

I might try look at filtering the final output of the page to remove the data-src/data-srcset from the first x elements.

add_filter(
	'ewww_image_optimizer_filter_page_output',
	function( $buffer ) {

		// Remove data-src, data-srcset, etc from first 2 images, img or picture
		return $buffer;
	},
	10000
);

Thanks for the heads up ??

@nosilver4u Autoptimize hasn’t been set to inline any JS or optimize the JS on my site, although i do use it for CSS.

We did recently upgrade to the latest WordPress version with webp support.

Even after disabling Autoptimize and every other performance plugin on our testing site, the error still shows for us.

If i re-enable “JS-WebP-Rewriting” in the settings, the error disappears. However, i’d like to avoid additional JS on the frontend, as we use Cloudflare for full page caching, we can let the server handle that so i was just using the picture rewrite.

Maybe this class exists even when it’s disabled

// class-eio-lazy-load.php line 289
// If JS WebP isn't running, set ewww_webp_supported to false so we have something defined.
if ( ! class_exists( 'EIO_JS_Webp' ) ) {
	$body_tags = $this->get_elements_from_html( $buffer, 'body' );
	if ( $this->is_iterable( $body_tags ) && ! empty( $body_tags[0] ) && false !== strpos( $body_tags[0], '<body' ) ) {
		$body_webp_script = '<script>var ewww_webp_supported=false;</script>';
		// Add the WebP script right after the opening tag.
		$buffer = str_replace( $body_tags[0], $body_tags[0] . "\n" . $body_webp_script, $buffer );
	}
}

That works!

Thank you,

just to warn you though, if someone doesn’t use the filter it’s returning an error when you save/create a post. The error relates to trying to array push to a string.

i updated this line

$listofurls = apply_filters( 'swcfpc_post_related_url_init', '__return_empty_array', $postId );

to this

$listofurls = apply_filters( 'swcfpc_post_related_url_init', __return_empty_array(), $postId );

and it worked again.

Also little note to anyone else, but in order to use the second param $pageId, you will need to make sure you put that in the add_filter call, i.e. add_filter('swcfpc_post_related_url_init', 'callback', 10, 2);

The last 2 makes it so the filter callback can receive 2 arguments.

Thanks for the quick reply!

Just some way to filter that initial $listofurls array would be great. Then we could alter that list.

i.e. in functions.php the logic could be figured out by the theme

add_filter('wp_cloudflare_related_links', function( $listofurls, $postId ) { 
  // always bust
  $listofurls[] = "/learn";

  // bust only if postId includes, or even get post and bust based on content
  if ($postId == 2) {
    $listofurls[] = "/another-url";
  }
  return $listofurls;
});

then in the get_post_related_links() using apply_filters to get the added URLs.

function get_post_related_links($postId) {

  $this->objects = $this->main_instance->get_objects();

  $listofurls = apply_filters(
    'wp_cloudflare_related_links',
    array(),
    $postId
  );

One other thing i noticed is that the home page is added by default as one of the posts that gets busted, which in our case isn’t an archive. Is there a way to disable that url being added by default?

line 1109 of /libs/cache_controller.class.php

// Home Page and (if used) posts page
array_push($listofurls, home_url('/'));
$pageLink = get_permalink(get_option('page_for_posts'));
if (is_string($pageLink) && !empty($pageLink) && get_option('show_on_front') == 'page') {
   array_push($listofurls, $pageLink);
}

• This reply was modified 3 years, 9 months ago by andrewceharris.
• This reply was modified 3 years, 9 months ago by andrewceharris.
• This reply was modified 3 years, 9 months ago by andrewceharris.

Hi Saumya,

The pages use a custom template.php file in the theme.

i.e. page-learn.php for the page /learn

and inside they create a custom query using WP_QUERY to grab the relevant articles.

<?php
$learn_query = new WP_Query( $args );
	
if ( $learn_query->have_posts() ) :
  while ( $learn_query->have_posts() ) :
    $learn_query->the_post();
?>
     <!-- markup is here using query loop -->
<?php 
  endwhile; 
else :
?>
   Sorry we couldn't find any results for this query...
<?php endif; ?>

• This reply was modified 3 years, 9 months ago by andrewceharris.
• This reply was modified 3 years, 9 months ago by andrewceharris.

Awesome, have just updated and it works now.

Thanks!