Webfonts, Pagespeed und Open Sans vererbt von Responsive?

Hi,

zugegeben, ein Recht wilder Titel für einen Thread. Folgendes beschäftigt mich gerade:

Ein von Responsive abgeleitetes eigenes Theme hat über die Theme-Verwaltung den Google Webfont Open Sans eingebunden (wird extern von fonts.googleapi… geladen). Jage ich nun diese Seite durch Pagespeed Insights, gibt er mir als größtest Manko folgendes aus:

“Wichtige Anforderungen vorab laden - 3,78 s - Mit können Sie das Abrufen von Ressourcen priorisieren, die aktuell später beim Seitenaufbau angefordert werden.” Als Quelle zeigt er mir an: https://www.meinedomain.de/themes/Frontend/ Responsive /frontend/_public/vendors/fonts/open-sans-fontface/Light/OpenSans-Light.woff2?201812030839

Nun meine Fragen: Bring es etwas, das rel=preload in die Abfrage zu packen oder ist es generell besser, den Font direkt selbst zu hosten? Und lese ich das richtig aus, dass Google mir da erklärt, der Font OpenSans-Light wird bereits über das Responsive-Theme eingebunden? Falls ja, warum das und wo stelle ich das ab?

Ich hoffe, hier kann jemand entwirren :wink:

Hi,

wenn irgendwie möglich, solltest Du Ressourcen Deiner Webseite immer lokal ausliefern. Häufig ist die Ursache einer langsamen Website die Einbindung externer Ressourcen, worauf Dein Webspace/Hoster keinen Einfluss hat. Hilft auch bei der Eingrenzung von Performance Problemen.

VG

Ok, also besser selbst hosten als von Google einbinden - verstanden. Aber was hat es mit der Aussage von Insights auf sich? Wird da etwa schon die OpenSans eingebunden und ich kann mir „meine“ Einbindung sparen? Und was hat es mit rel=„preload“ an dieser Stelle auf sich?

Hi,

Google PageSpeed Insights sind nur grobe Hinweise, die häufig falsch interpretiert werden (schau Dir mal die Werte von großen Anbietern an) - aussagekräftiger sind Analysen z.B. mit Pingdom Speedtest - in der Waterfall Analyse kannst Du gut erkennen, wo es bei Deiner Website zu Verzögerungen kommt.

VG

Gerade mal bei Pingdom geschaut - im Waterfall dominiert gelb (wait) ohne erkennbaren Grund. Sehr seltsam.

Hi,

schau’ besonders’ mal auf die externen Ressourcen, die eingebunden werden - idealerweise lokal ablegen …

Die Kollegen von Mittwald haben hierzu einen guten Artikel veröffentlicht, der zu empfehlen ist:
Google Fonts DSGVO-konform in Webseiten einbinden

VG

Ist denn die Open Sans schon eingebunden (responsive theme) oder nicht? Daraus werde ich nicht schlau…

Google PageSpeed Insights … (schau Dir mal die Werte von großen Anbietern an)

Große Anbieter, Shops von bekannten Marken, können nie ein Vorbild sein nach dem Motto „Die sind schlecht bei xyz und dann kann ich das auch sein.“ Die dürfen schlecht sein weil Leute erwarten das die bei Google gefunden werden. Das ist aber nicht der Fall bei 99,9% der Shops.

@m23‍ - opensans wird lokal geladen. siehst du in der von sw geladenen css. einfach in den quelltext schauen und die css im browser aufrufen (liegt in /themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/)

@beat‍ - wie erklärst du dir dass z.b. ne leere facebook login seite mit 75 von google pagespeed insights bewertet wird …

  

Zeige mir diese Seite.

@SB schrieb:

@m23‍ - opensans wird lokal geladen. siehst du in der von sw geladenen css. einfach in den quelltext schauen und die css im browser aufrufen (liegt in /themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/)

 Ja, das sehe ich, aber wo genau wird die eingebunden? Ich brauche sie nicht und würde gerne verhindern, dass sie geladen wird.

@beat‍ - guckst du hier: PageSpeed Insights 

 

@m23 - im standard responsive template.

@SB schrieb:

@m23 - im standard responsive template.

Ja, schon klar. Aber in welcher Datei?

/themes/Frontend/Responsive/frontend/_public/src/less/_components/fonts.less

Ok, Treffer. Da man bei eigenen Themes ja immer ableitet - wie stelle ich das hier an? Einfach im Responsive löschen ist ja nicht updatesicher.

Danke, wie man Template-Dateien ändert ist mir klar. Nur ist das ja hier kein smarty…

Hallo,

du kannst LESS - Dateien nicht überschreiben oder ähnliches, du kannst maximal alle LESS - Dateien “ausschließen”, siehe: Theme.php oder vom Bare - Theme ableiten, dann hast du die LESS- (aber auch die JavaScript-) Dateien nicht mehr.

Grüße

Sebastian

@sschreier schrieb:

du kannst LESS - Dateien nicht überschreiben oder ähnliches, du kannst maximal alle LESS - Dateien „ausschließen“, siehe: https://developers.shopware.com/designers-guide/configuration-using-theme-php/#discard-javascript/css-from-other-themes

Vielen Dank - ich werde da leider nicht schlau raus. Was genau muss in meine theme.php um nur den Font auszuschließen?