[Resolved] Layout shift

Home Forums Support [Resolved] Layout shift

Home Forums Support Layout shift

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1942895
    Scott

    Hi

    I’m experiencing Layout Shift / “Flash Of Unstyled Content” (FOUC) with the main navigation on one of my sites.

    I experienced this same problem on another site as discussed here, which was being caused by WP Rocket and is now resolved.

    However, in this instance, WP Rocket doesn’t seem to be the cause (3rd link in Private info is page load with WP Rocket disabled).

    Any ideas?

    #1942916
    David
    Staff
    Customer Support

    Hi there,

    the first place to start is to disable WP Rocket temporarily and then recheck the site. If the issues goes away then you know its one of the WP Rocket settings.

    The other user had some success with Remove Unused CSS but that can vary from one site to another.

    NOTE: The WP Rocket CSS optimizations also enable font-display: swap on your fonts, which can be a major cause of CLS issues, as you can see on initial load it uses a system font before the actual font loads… so try the above to see if that is one of the problems.

    #1943914
    Scott

    Thanks David

    I’ve disabled WP Rocket, cleared cache, but the issue persists.

    Any other ideas?

    #1944157
    David
    Staff
    Customer Support

    If i check the URL you provided in a Private Browser ( no caching ) and add disable WP Rocket by adding the ?nowprocket query string:

    https://docs.wp-rocket.me/article/1285-bypass-wp-rockets-caching-and-optimizations

    I don’t see the same issues as i do with WP Rocket enabled.

    So it is a WP Rocket setting thats looks to be causing the issue.

    #1947607
    Scott

    Hi David

    I’ve just ran another test with ?nowprocket in Private Browser and am still seeing the issue.

    New video link in private info.

    #1948397
    David
    Staff
    Customer Support

    Do you have any server side caches or optimizers ?

    #1948820
    Scott

    In Siteground Site Tools I had activated “NGINX Direct Delivery” and “Memcached” but have now disabled both and the issue persists.
    I can’t think of an other server side caches or optimizers I have.

    #1948821
    Scott

    I also have Cloudflare activated

    #1949166
    David
    Staff
    Customer Support

    Very odd – i ran a webpage test with a throttled 3G network on the site with ?nowprocket … heres the results:

    https://www.webpagetest.org/result/211001_BiDcSW_19f44b12a2774e24a327dea6e84828c9/1/details/#step1_request

    The fonts are loading really late.
    And whilst testing in Chrome Dev tools i see this console info:

    [Intervention] Slow network is detected. See <URL> for more details. Fallback font will be used while loading: <URL>

    Which i have only ever seen if i throttle the hell out of the network.

    So something seems to be interfering with the font load, chrome gets bored waiting and intervenes by loading the fallback font….

    I would suggest looking at loading the fonts locally:

    https://docs.generatepress.com/article/adding-local-fonts/

    To see if the font load can be speeded up.

    #1951597
    Scott

    Thanks David.

    I attempted loading fonts locally as you suggest but unfortunately couldn’t get this working correctly.

    I’ve switched the menu typography to system stack which seems to fix the problem.

    #1951812
    David
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.