Different header height for a second or so while loading

[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.

[David]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ashin]

Edited.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts