Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 24, 2021 at 4:54 pm #1307330
    thinkjarvis

    Hi Guys I am getting a fade in on the first element of the page on sites.

    This animation is considered render blocking and affects the LCP score on mobiles.
    I can use CSS to set the animation properties to appear or none but this doesnt stop the code being provessed or rendered.

    Is there a way to disable this without a CSS overide? It seems to only occur in the following scenarios:

    The first element is an ALB Colour Section
    The first element contains another ALB element like an ALB Image, a Column layout or anything else.

    If the ALB Colour Section does not contain anything then the fade in does not take place.

    NOTE – The example in private is technically the second element but I have hidden the main menu making it equivalent to the first element on a normal site.

    June 24, 2021 at 5:13 pm #1307332
    Yigit

    Hey Thomas,

    Could you please try adding following code to Quick CSS and check if that helps?

    .js_active .av-minimum-height .container {
    opacity: 0;
}

    It is added on 104th line of enfold/css/shortcodes.css file :)

    Best regards,
    Yigit

    June 24, 2021 at 5:52 pm #1307341
    thinkjarvis

    Thanks for the quick response @yigit

    I added the following based on your suggestion as critical css to the header:
    Not entirely sure it has made a lot of difference but the site is JUST passing LCP with a score of 2.3 to 2.5 sseconds on a GOOD test run in Chrome Dev Tools.
    Total score is 98/100 on a good run.

    @media only screen and (max-width: 1024px) {
.js_active .av-minimum-height .container {
z-index: 1; /*required for transition*/
opacity: 1 !important;
-webkit-transition: none !important;
transition: none !important;
}
}
    • This reply was modified 3 years, 6 months ago by thinkjarvis.
    June 24, 2021 at 5:56 pm #1307343
    thinkjarvis

    Just edited the response Opacity 0 means that the elements are not visible.

    Opacity set to 1 solves the load issue but adds a layout shift so I have set it back to the following:

    @media only screen and (max-width: 1024px) {
.js_active .av-minimum-height .container {
z-index: 1; /*required for transition*/
opacity: 0;
-webkit-transition: none !important;
transition: none !important;
}
}
    • This reply was modified 3 years, 6 months ago by thinkjarvis.
    June 25, 2021 at 1:44 pm #1307439
    Yigit

    Hi,

    Sorry, I meant to say set opacity to 1 :)

    Have you tried commenting out the code in shortcodes.css file and check if that helps?

    If it does, you can copy enfold/css/shortcodes.css file into your child theme inside /css/ folder and add following code to functions.php file of your child theme

    add_action( 'wp_enqueue_scripts', 'wp_change_shortcodescss', 20 );
function wp_change_shortcodescss() {
   wp_dequeue_style( 'avia-shortcodes' );
   wp_enqueue_style( 'avia-shortcodes-child', get_stylesheet_directory_uri().'/css/shortcodes.css' );
}

    Best regards,
    Yigit

    June 25, 2021 at 3:05 pm #1307458
    thinkjarvis

    I’ll give it a try and let you know.

    I am trying to resolve the LCP issues with Enfold at the moment. In some cases all is fine, in others it is not.

    Good comparison for you:

    https://www.burdenbasket.co.uk has an empty color section as the main header and the LCP score is still pretty good

    https://www.hemppureoils.co.uk as per previous posts has a color section with elements in it and the LCP score bounces around a lot more depending on how well the test executes.

    Both sites will score all green on occassion but with elements within the color section things slow down.

    I think the only solution is to add critical css inline for the entire above the fold section and remove client side rendering including animations on mobile devices.

    Another point probably overlooked by all Enfold users – If you follow ICO’s guidelines (GDPR) to the letter, you should only be loading essential cookies and anything marketing should be on opt-in only. Doing this stops analytics.js loading on pageload – Improving pagespeed scores by up to 10 points and ensuring GDPR compliance.

    June 28, 2021 at 1:12 pm #1307732
    Yigit

    Hi,

    Please do and thanks for sharing the tip. I am sure that is overlooked by many :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.