Archived topic
FCP and CLS issue - pages peed test
5 replies · Started by Ryan on September 16, 2021
Hello,
I am getting these 2 warnings on my site's page speed score.
1. Ensure text remains visible during webfont load - …fonts/fontello.woff
I've selected "SVG" from General- Icon type, But still, the issue remains.
2. Image elements do not have explicit width and height - Error referred to the site's logo and fixed by adding the following code.
add_filter( 'generate_logo_output','tu_logo_atts', 10, 2 );
function tu_logo_atts( $output, $logo ) {
printf(
'
',
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_logo', $logo ) )
);
}
The problem is now logo-aligned center after the code is implemented. I want it to be aligned to the left.
Thanks
Hi Ryan,
For the font issue, please refer to Tom's answer here:
https://generatepress.com/forums/topic/google-pagespeed-insights-results/#post-1363619
For the logo position, try add this CSS:
.site-logo {
margin-right: auto;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if you need further assistance :)
The logo issue has been fixed Thanks :) For the font issue, he suggests replacing fonts with regular SVG icons on Lightweight Social Icons plugin. I couldn't find any guide on how to do that :/ Can you refer to me a proper guide or assist on me this.
Thanks
I think what Tom meant was stop using that plugin, replace the font icon using other method with SVG.
Depending on where you’re adding the social icons, you could replace the LSI plugin and use a Block Element and GenerateBlocks to hook in your own social icons, which can be displayed using a Buttons Block and SVG icons.
Let me know if you need further assistance :)
I have replaced them with the method you have mentioned. Thanks
Awesome!
Glad to hear that :)
