Site logo

Archived topic

Issue with LCP in Core Web Vitals

7 replies · Started by Christos on June 5, 2021

Viewing posts 1–8 of 8

Hi. CWV have an impact. All my Desktop posts pass the CWV in Google Search Console.
Mobile does not due to:

LCP for the title of posts (!!!). how it is possible that that the title is an issue in Mobile?
i.e. https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fmindfultravelexperiences.com%2Fimerovigli-santorini-best-location-santorini-caldera%2F&hl=en

This above causes the issue in the console.

2 fonts that seem not to load correctly? It says: Ensure text remains visible during webfont load
However these are indeed preloaded. Shouldn't I preload them?

I use wprocket.

I managed to solve the title LCP. But now the issue moved to the Featured Image :-). So, how to solve that?

(The fonts part remains)

Update: I managed to solve the generapress font pagespeed issue (with choosing SVG) BUT now in the mobile it now shows 2 search icons and 2 sandwich menu icons. They disappear if i click on the menu but then they appear again.

Fontello still shows in pagespeed. I used the solution to make a wp_head hook (site wide) calling the solution I found in the forums and with adding the css mentioned in the forums.. Nothing... Still shows as issue

For comments.js issue in pagespeed.

Followed the solution to add a script in functions.php

Nothing.
This one:

add_action( 'wp_footer', function () { ?>
<script>
(function() {
  var supportsPassive = eventListenerOptionsSupported();  

  if (supportsPassive) {
    var addEvent = EventTarget.prototype.addEventListener;
    overwriteAddEvent(addEvent);
  }

  function overwriteAddEvent(superMethod) {
    var defaultOptions = {
      passive: true,
      capture: false
    };

    EventTarget.prototype.addEventListener = function(type, listener, options) {
      var usesListenerOptions = typeof options === 'object';
      var useCapture = usesListenerOptions ? options.capture : options;

      options = usesListenerOptions ? options : {};
      options.passive = options.passive !== undefined ? options.passive : defaultOptions.passive;
      options.capture = useCapture !== undefined ? useCapture : defaultOptions.capture;

      superMethod.call(this, type, listener, options);
    };
  }

  function eventListenerOptionsSupported() {
    var supported = false;
    try {
      var opts = Object.defineProperty({}, 'passive', {
        get: function() {
          supported = true;
        }
      });
      window.addEventListener("test", null, opts);
    } catch (e) {}

    return supported;
  }
})();
</script>
<?php } );

Hi there,

LCP - i tested a couple of your posts and all of them were in the Green for the LCP value.
Under PSI Diagnostics Google always reports the LCP Element, this never gets removed, its just explaining what element is used to calculate the LCP time.

The double icons, is because the original Font Icon CSS has been cached in your CSS.... your site has comnbinded all CSS into one used.min.css file - i am not sure what method you're using for that but it will need to be regenerated to remove the unnecessary CSS.

Fontello is an icon font, so there is no 'fallback' for it - the only way to change its behaviour would require editing the plugins CSS files... which isn't recommended and won't actually add any value other then to remove a non-applicable warning.

And the Passive Listeners warning regarding the comments.js is a core Wordpress function, its a known 'bug' that WP do not have a fix for and therefore don't intend fixing. Main reason, as like that script you're adding, it may not work and instead it may cause other things to break.

I see. I am puzzled though as in GSC I see that all desktop version posts pass the CWV, while the mobile shows none passes due to LCP. I resubmitted the posts for Fix Validation to see what happens.

About the double icons. I use the sprocket. I regenerate css. I also click to regenerate your CSS via General and I cleared Cloudflare cache too.
The issue happened after switching in General from Font to SVG icon.

Issue with double icon dissapeared. Weird.

When i test the individual posts on Google PSI then they pass LCP in the Lab Tests. Best to wait and see what GSC returns after the validation and recrawl.

The icon issue was because the font CSS was cached, considering cache plugin, server caches and CDN caches all those needed to refresh and then for that change to propagate - you have to consider that ISP, Routers and the browser all cache files as well so sometimes it takes a while.

This archived topic is closed to new replies.