HTTP/2 Push für Font Files - Wie / wo kann ich den Response Header ändern?

Hallo Ihr Lieben,

im Zuge meiner Anpassungen für die Google Core Web Vitals wollte ich die Shopware Fonts gerne per HTTP/2 Push ausliefern lassen.

Hierfür muss ich irgendwie den Response Header ändern, was in php über ein solches Kommando gehen sollte:
header(“Link: </assets/font/sourcesanspro_regular.woff2>; rel=preload; as=font; crossorigin”);

Aber wo kann ich in meinem Shopware Template den Response Header ändern?

Danke und viele Grüsse

Jens

Hat sich erledigt.

Ich habe gerade gelesen, dass Chrome in zukünftigen Versionen HTTP/2 Push nicht mehr supported wird. Es ist den Aufwand also nicht wert:

https://groups.google.com/a/chromium.org/g/blink-dev/c/K3rYLvmQUBY/m/vOWBKZGoAQAJ?pli=1

Hallo,

das war auch von Anfang an eine Tot-Geburt, da über Preload allenfalls css/fonts und ein paar andere eher unwichtige Extensions, die den geringsten Teil der Page-Size ausmachen, parallel bzw. über Preload geladen werden konnten.

Aber für die ein oder anderen besonders im Shared-Hosting war die Erwartungshaltung sehr verlockend, dass die Webseite schon da ist, bevor man die URL eingegeben hat :slight_smile:

Viele Grüße

Ich lade die Fonts jetzt per Preload, indem ich folgenden Code in die header.tpl in themes\Frontend<yourtheme>\frontend\index\header.tpl eingefügt habe:

{* preload font files *}

{block name=„frontend_index_header_css_print“}

<link rel="preload" href="themes/Frontend/Responsive/frontend/_public/src/fonts/shopware.woff2?" as="font" type="font/woff2" crossorigin>

<link rel="preload" href="themes/Frontend/<yourtheme>/frontend/_public/src/fonts/subset-OpenSans-Bold.woff2" as="font" type="font/woff2" crossorigin>

<link rel="preload" href="themes/Frontend/<yourtheme>/frontend/_public/src/fonts/subset-OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin>

<link rel="preload" href="themes/Frontend/<yourtheme>/frontend/_public/src/fonts/subset-OpenSans-SemiBold.woff2" as="font" type="font/woff2" crossorigin>

{$smarty.block.parent}

{/block}

In den Chrome Developer Tools wird unter Network jetzt auf jeden Fall angezeigt, dass die Fonts direkt nach dem index file geladen werden.

Preload sollte nicht bei zu vielen Fonts verwendet werden - macht zwar Google glücklich, geht aber hinsichtlich Performance nach hinten los und ist kontraproduktiv, da es das rendern der Seite verlangsamt für den Besucher.

Siehe auch

Viele Grüße

1 Like