Archived topic
Different header height for a second or so while loading
5 replies · Started by Ashin on July 30, 2020
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.
Hi there,
looks like a lazy loader is being used. Which one ?
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?
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.
Edited.
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