Layout shift on page load

  • Resolved therealgilles

    (@chamois_blanc)


    4 years, 1 month ago

    The home page slider creates an undesirable layout shift on page load. It’s visible on your demo site. This lowers the core web vitals.

    It would be great if this issue were fixed. There are numerous sliders out there that do not create this layout shift problem, so I am guessing it’s fairly easily fixable.

    Here is the GTMetrix report showing the 0.15 CLS issue:
    https://gtmetrix.com/reports/demo.themeisle.com/ci3xHNZm/

    The recommended value is 0.1 or below.

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter therealgilles

    (@chamois_blanc)

    4 years, 1 month ago

    Referencing this other issue that someone had posted 4 months ago:
    https://ww.wp.xz.cn/support/topic/reducing-cumulative-layout-shift-in-clients-section-of-hestia-homepage/

    Thread Starter therealgilles

    (@chamois_blanc)

    4 years, 1 month ago

    Here is a screen recording showing the layout shifts:
    https://www.veed.io/view/45f026db-c9a7-42a5-920e-b3948e60df4e?sharingWidget=true

    The layout shift is visible is light blue/purple.

    Thread Starter therealgilles

    (@chamois_blanc)

    4 years, 1 month ago

    Here is part of the problematic javascript code:

    /**                                         
                 * Calculate height for .page-header on front page                      
                 */                                            
                'headerSpacingFrontpage': function () {  
                        if ( this.inIframe() && this.isMobileUA() ) {
                                return;              
                        }   
                        if ( $( '.home .carousel' ).length > 0 ) {
                                var pageHeader = $( '.page-header' ),
                                        windowWidth = $( window ).width(),
                                        windowHeight = $( window ).height();
                                if ( windowWidth > 768 ) {
                                        pageHeader.css( 'min-height', (windowHeight * 0.9) ); // 90% of window height
                                } else {                   
                                        pageHeader.css( 'min-height', (windowHeight) );
                                }                   
                        }                          
                },

    I am pretty sure this can be written with css directly. Doing this in javascript is suboptimal.

    Thread Starter therealgilles

    (@chamois_blanc)

    4 years, 1 month ago

    The second part of the problem is this code:

    
                /**                                                                                                                      
                 * Add padding in post/page header                                                                                       
                 */                                                                                                                      
                'fixHeaderPadding': function () {

    Here again, I’m pretty sure it could be written in CSS now that CSS variables and calc() function are available. For instance, the WordPress admin bar height is available through the –wp-admin–admin-bar–height property.

    Thread Starter therealgilles

    (@chamois_blanc)

    4 years, 1 month ago

    Here is the start of a fix for the home page slider layout shift:

    /* Fix home page slider layout shift */

@media (min-width: 768px) {
  :not(iframe) .home .carousel .page-header {
     min-height: 90vh;
  }
}

@media (max-width: 767px) {
  :not(iframe) .home .carousel .page-header {
     min-height: 100vh;
  }
}
    Thread Starter therealgilles

    (@chamois_blanc)

    4 years, 1 month ago

    Here is a more complete solution (but I could be missing something). Use your own heights for the navigation bar.

    :root {    
    /* navigation bar */
    --navbar-not-transparent-height-sm: 70px; /* 480px and below */
    --navbar-not-transparent-height: 80px; /* 481px and above */
    --navbar-transparent-height: 110px;
}

/* Fix home page slider layout shift */

@media (min-width: 768px) {
  :not(iframe) .home .carousel .page-header {
     min-height: 90vh !important;
  }
}

@media (max-width: 767px) {
  :not(iframe) .home .carousel .page-header {
     min-height: 100vh !important;
  }
}

.home .carousel .item .container {
    --home-carousel-item-container-pt-shift: calc( ( var(--wp-admin--admin-bar--height, 32px) - 32px ) * 46 / 14 );
    padding-top: calc(var(--navbar-transparent-height) + 50px - var(--home-carousel-item-container-pt-shift) ) !important;
}

@media (max-width: 480px) {
  .no-content .page-header.header-small {
    min-height: calc(var(--navbar-not-transparent-height-sm) + 230px) !important;
  }
}

@media (min-width: 481px) {
  .no-content .page-header.header-small {
    min-height: calc(var(--navbar-not-transparent-height) + 230px) !important;
  }
}
    luciamarinescu

    (@luciamarinescu)

    4 years, 1 month ago

    Hi @chamois_blanc!

    I forwarded this issue to our developers to see what could be done about it. We’ll come back to you with a message after we investigate this further.

    Thank you!

    Thread Starter therealgilles

    (@chamois_blanc)

    4 years ago

    @luciamarinescu: Any update on this?

    luciamarinescu

    (@luciamarinescu)

    3 years, 11 months ago

    Hi @chamois_blanc!

    We investigated this further and there is not much we could do to improve it. The element that could cause the small increase that you reported in the CLS score could be the slider, so one option would be to disable it. Another alternative would be to rebuild the frontpage in Gutenberg.

    I hope this helps!

    Thread Starter therealgilles

    (@chamois_blanc)

    3 years, 11 months ago

    Hi @luciamarinescu, not going to lie, that’s a bit disappointing news, after I provided code to fix the issue for at least one of the scenarios with the slider. It feels like the investment in improving the Hestia theme has gone and passed.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Layout shift on page load’ is closed to new replies.

Tags