[Resolved] performance problem

[Ghazi]

I’m having trouble with the performance of my site specifically these two issues:

1- Image elements do not have explicit width and height
2- Avoid enormous network payloads

It appeared after I switched to generatepress template
Is it because of a problem with setting up the template or not
If yes, what should I do, or what is my mistake?

Thank you all

[David]

Hi there,

1. Image elements do not have explicit width and height
your logo is an SVG and for whatever reason WordPress has not been able to extract the width and height attributes. You can use a PHP snippet provided here to add them manually:

https://docs.generatepress.com/article/generate_logo_output/#setting-a-width-and-height

In this line of the code:

<img width="999" height="999" class="header-image" src="%3$s" alt="%2$s" title="%2$s" />

you can edit the width="999" height="999" sizes to match your lgoo.

2. Avoid enormous network payloads
The top 3 items in that list are all images, if you click on those URLs you will see what images they are. You need to replace those images with better optimized images especially the first one which is the SVG you have as your hero background.

[Ghazi]

Thank you for your prompt response

Regarding problem number 1
Can you help me how to add the code? What is the exact code that I add and where do I add it?
Is it on the page there are three different codes? Or the line of code you put for me in the reply

Regarding problem number two
Thank you, I will try to solve it by solving pictures

[David]

So this is the code:

add_filter( 'generate_logo_output','tu_logo_atts', 10, 2 ); 
function tu_logo_atts( $output, $logo ) {
	printf(
		'<div class="site-logo">
			<a href="%1$s" title="%2$s" rel="home">
				<img width="170" height="58" class="header-image" src="%3$s" alt="%2$s" title="%2$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_logo', $logo ) )
	);
}

I made the width and height match the visible size of your logo.
That code is PHP.

This doc explains how to add PHP: https://docs.generatepress.com/article/adding-php/

TLDR: Are you using a Child Theme?
If Yes, then the code goes in the Child Theme folders functions.php
If No, then use the Code Snippets plugin ( link in above doc ) and add it to a new snippet.

[Ghazi]

Code Snippets plugin was used

The code was placed and the specified problem was solved

Thank you

[David]

You’re welcome!

[Author]

Posts