[Resolved] Different header height for a second or so while loading

Home Forums Support Different header height for a second or so while loading

  • This topic has 5 replies, 2 voices, and was last updated 2 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1381396
    Ashin

    Hello,

    While the site’s loading, for a fraction of second, the header height gets to be double or so of the original height. It comes back to the real height real soon. But I’m afraid the double-height might be showing for a few seconds on mobiles with a slow connection. What’s causing the error and how to correct it? I hardly have any CSS running, but have a separate mobile menu. In the website URL, I’ve added the imgur link of the recorded video showing the issue.

    #1381500
    David
    Staff
    Customer Support

    Hi there,

    looks like a lazy loader is being used. Which one ?

    #1381512
    Ashin

    Autoptimize. Turing off lazy loading option in Autoptimize was a solution. So, lazy loading images would be out of scope, or would it be just with Autoptimize?

    #1381546
    David
    Staff
    Customer Support

    Autoptimize provides an option to exclude images using a CSS Class.
    If you can link me to your site ( edit the original topic and update the Site URL field ) so i can see what logos are being used i can help with fixing that.

    #1381554
    Ashin

    Edited.

    #1381590
    David
    Staff
    Customer Support

    Add this PHP Snippet to your site:

    add_filter( 'generate_mobile_header_logo_output', function( $output ) {
      if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
          return $output;
      }
    
      $settings = wp_parse_args(
          get_option( 'generate_menu_plus_settings', array() ),
          generate_menu_plus_get_defaults()
      );
    
      return sprintf(
          '<div class="site-logo mobile-header-logo">
              <a href="%1$s" title="%2$s" rel="home">
                  <img src="%3$s" class="no-lazy" alt="%4$s" />
              </a>
          </div>',
          esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
          esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
          esc_url( apply_filters( 'generate_mobile_header_logo', $settings['mobile_header_logo'] ) ),
          esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
      );
    } );
    
    add_filter( 'generate_logo_attributes', function( $attr ) {
      $attr['class'] .= ' skip-lazy';
    
      return $attr;
    } );

    https://docs.generatepress.com/article/adding-php/

    Then in Autoptimize, enable the lazy load and in the Exclude field add skip-lazy

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