Headergrafik auf Startseite vorladen

Hi Oliver,

If you wish to preload the Background image in you Page Hero, here is a helpful response by David: https://generatepress.com/forums/topic/how-to-pre-load-a-background-image-in-the-page-hero-element/#post-1602764

More info here: https://developer.mozilla.org/en-US/docs/web/html/link_types/preload#including_media

As mentioned by David in the thread above, handling FCP first should improve other stats as well.

Kindly check these issues affecting your FCP: https://share.getcloudapp.com/nOuR9gdY

Tested through Lighthouse and Pagespeed Insights.

Hope this helps! Feel free to reach out if further assistance is needed!

Hi Fernando,

kannst du mir exakt sagen, wie ich den Code

<img style="display: none;" src="full_url_to_image" />

bei dem Element einbaue? Sollte das wegen der robusten Anwendung per Code Snippet geschehen, damit es auch bei Updates bestehen bleibt?
Wenn ich das Element im Editor als HTML Code bearbeite, ist das nicht so einfach möglich.

Danke für die Unterstützung.

Hi there,

create a new Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Add this to the Hook text area:

<link rel="preload" as="image" href="full_url_to_image"/>

Set the Hook to wp_head and set the Priority to 0
Set the Display Rules location to the Front Page

Hi,

ich habe leider keine Verbesserung der LCP-Werte in Pagespeed gesehen.
Vielleicht gibt es einen Konflikt mit dem Caching Plugin. Ich hatte es eben auch einmal deaktiviert.
Auch den Cache hatte ich nach der Veränderung gelöscht.

Kann ich vielleicht den anderen Trick aus deinem Beitrag

https://generatepress.com/forums/topic/how-to-pre-load-a-background-image-in-the-page-hero-element/#post-1602764

verwenden? Mir scheint die Option mit dem Verstecken der Hintergrund-Grafik als sehr clever!
Ich würde diese Funktion so gern auch noch bei anderen Web-Projekten nachträglich verbessern.

The <img> method proved to cause some issues. And when it works it does the same as the preload.

Do you have the hook setup with the preload link?

You may also want to temporarily remove the background image, and use a color, then test the page, this will identify how much the actual image is making to LCP... although the image is going to be an issue it may not be the whole issue.

Hi,

okay! Es ist besser auf Erfahrung zu bauen, als Sie selbst machen zu müssen:-)!
Ich habe dir 4 Screenshots in einem Sharepoint gespeichert (siehe Link privates Feld).
Es zeigt den massiven Unterschied der Leistung wegen der Header-Grafik.
Die Konfiguration ist ansonsten identisch.

Sorry i should have explained, in the hook:

<link rel="preload" as="image" href="full_url_to_image"/>

you need to change full_url_to_image to the full URL of the image you set as your Hero Background.

Das war nicht sehr clever von mir, sorry! Ich habe jetzt die URL der Grafik eingefügt,
aber es verändert sich nicht wirklich etwas. Jeweils ein neuer Screenshot ist im Sharepoint.
Pagespeed könntest du ja auch live im Browser testen.
Cache habe ich wieder gelöscht nach der Veränderung.
Hast du noch eine Idee, was falsch sein könnte?

Hmmm... i do not see the 'preload' code i the head of your site.
Is the hook still active ? If so can you change the display rules temporarily to Entire Site

Ja, es ist aktiv. Ich habe es jetzt auf Entire Site geschaltet.
Zur Klarheit nochmal der Link zur besprochenen Seite im privaten Feld.

Can you disable any Cache Plugins you're using ?

Ich habe WP Fastest Cache jetzt deaktiviert.

It is very odd. I cannot see the preload on your site.
Would you be able to provide me with a temporary admin login to the site ?
You can share the login in the Private Information field.

Hi,

ich habe einen Benutzer-Account erstellt.
Die Zugangsdaten sind im privaten Feld.