loader image

Lösung: Darauf achten dass der Text während der Webfont-Ladevorgänge sichtbar bleibt

Ux 787980 1920 1140x425
Lesedauer ca. < 1 Minute

Wer schon einmal mit PageSpeed Insights seine Seite getestet hat, stößt vielleicht auf die folgende Meldung bzw. Vorschlag:

Darauf achten dass der Text während der Webfont-Ladevorgänge sichtbar bleibt

Sie können Gebrauch von der CSS-Funktion „font-display“ machen, um sicherzugehen, dass der Text für Nutzer sichtbar ist, während Webfonts geladen werden.

Image 4

Um diese Meldung zu beseitigen muss dass CSS in Ihrem System angepasst werden. Hierbei gilt es zu beachten, welcher Font geladen wird. In der Auswertung von Google sieht man welcher Font von welcher Quelle stammt.

Webschriftarten die außergewöhnlich sind werden extern eingebunden oder vom eigenen Sever gehostet. Außergewöhnliche Schriftarten sind auf den PC’s und SmartPhones dieser Welt nicht zu finden.

Daher werden Sie verzögert geladen und bis dahin wird standardmäßig kein Text/Font angezeigt. Um die Art zu bestimmen wie die Fonts geladen werden gibt es unterschiedliche Parameter die im Quellcode auf dem Server gesetzt werden können.

@font-face-Regel bindet Schriftdateien ein
|
| Frei wählbarer Name für die Schrift
| |
@font-face { |
font-family: Route;
font-display: swap;
src: url(/fonts/route/Route.woff2),
url(/fonts/route/Route.woff); }
^
|
+- Link zur Schriftdatei

In diesem Fall wurde der Paramter „font-dispay: swap;“ eingebunden. Dieser sorgt dafür, dass vor der Schriftart die z.B. extern eingebunden ist, eine andere Schriftart eingeblendet bzw. geladen wird.

Der Fehler in PageSpeed Insights sollte nun nach der Einbindung dieses Parameters nicht mehr erscheinen.

  Online-Marketing , Suchmaschinen       


Über den Autor


Kommentare

  • Die SASS Version von Font Awesome bindet das Font Face von sich aus mit ein in der fertigen CSS. Die Fehlermeldung kommt trotzdem auf Insights.

    Antworten
  • Hey. Ich habe nicht ganz verstanden wo der Code eingebunden werden muss? Im Theme Ordner?

    LG und danke!

    Antworten
    • Hallo, das kann sich unterscheiden je nach Theme.

      Antworten
  • Hallo zusammen,
    wo muss dieser Code eingebunden werden? In der Style.css des Themes? Frage deshalb, da ich dort die Fonts, die von Pagespeed Insights moniert werden aufgeführt habe.

    VG

    Antworten
    • Ich kenn ezwar das Template von Ihnen nicht. Aber ich vermute dass man es hier hinterlegen sollte.

      Antworten
  • Hallo,

    ich habe den Code jetzt in Word kopiert und auf meinem Desktop gespeichert. Google beschwert sich aber immer noch. Was mache ich denn falsch?

    LG

    Antworten
    • Eventuell liegt es am Cache? Einfach mal einen Inkognito-Tab öffnen.

      Antworten


Wie ist Ihre Meinung zu diesem Thema?

Ihr direkter Draht zu uns

Machen Sie den ersten Schritt.

Online-Marketing Agentur

Leadwerk
Hauptstandort Karlsruhe
Moltkestraße 11
76133 Karlsruhe

Rufen Sie uns an

Festnetz: (+49) 721 9098 1140

Schreiben Sie uns

hallo@leadwerk.de

Unsere Arbeitszeiten

Montag-Freitag 9:00 - 17:30 Uhr

Mit dem Absenden des Formulars erklären Sie sich mit den Datenschutzbestimmungen einverstanden.

Aktuelle Artikel

Viel Spaß beim Lesen.

Unsere Erfahrungen mit dem WordPress-Plugin Blog2Social

Unsere Erfahrungen mit dem WordPress-Plugin Blog2Social

In diesem Bericht schauen wir uns das WordPress-Plugin Blog2Social genauer an und geben einen kleinen Einblick in das Tool, dessen Funktionsweise und ...
Weiterlesen
Wie Sie mit Google Ads Geld verbrennen

Wie Sie mit Google Ads Geld verbrennen

Viele Unternehmen haben bereits ein Google Ads Konto im Einsatz. Sie haben es selbst angelegt oder anlegen lassen. Nun dümpelt es schon ...
Weiterlesen
5 Tipps für einen erfolgreichen Online-Shop

5 Tipps für einen erfolgreichen Online-Shop

Der erste Schritt ins E-Commerce ist die Erstellung eines Online-Shops. Dies ist heutzutage, dank vieler Anbieter, relativ einfach und schnell realisierbar. Das ...
Weiterlesen
Ladezeiten Optimierung Ihrer Webseite

Ladezeiten Optimierung Ihrer Webseite

Die Optimierung der Ladezeit einer Webseite ist ein sehr wichtiger Aspekt im Off Page Bereich der Suchmaschinenoptimierung (SEO). Dieser Teilbereich gewinnt durch ...
Weiterlesen
Suchmaschinen und gute Texte: wie Deckel und Kochtopf!

Suchmaschinen und gute Texte: wie Deckel und Kochtopf!

Suchmaschinen lieben gute Texte! Jeder, der eine Webseite hat, weiß es: Wenn Besucher nach zwei Sätzen einschlafen, sind die Texte schlecht. Und ...
Weiterlesen
Ein Funnel-Beispiel aus der Praxis

Ein Funnel-Beispiel aus der Praxis

In diesem Artikel beschreiben wir ein Praxisbeispiel eines Funnels. In der Theorie wurden wir schon oft mit dem Thema Funnel konfrontiert. Selten ...
Weiterlesen

Mehr lesen


Inside Leadwerk

Einblicke in unseren Alltag

Bald auch bei Ihnen auf dem Parkplatz?

Bald auch bei Ihnen auf dem Parkplatz?

Unser kleiner agiler Stadtflitzer ist demnächst mit neuer Optik auf den Straßen rund um Karlsruhe unterwegs. Vielleicht bald auch in Ihrer Einfahrt? ...
Weiterlesen
Neues Projekt mit Medienpartner

Neues Projekt mit Medienpartner

Mit Kopfsalat gelingt jedes Vorhaben Ich war heute mal wieder zu Besuch bei Kopfsalat Medien in Karlsruhe. Er ist unser kompetenter Medienpartner ...
Weiterlesen
Das letzte Bild hängt!

Das letzte Bild hängt!

Wir haben es geschafft, das letzte Bild im Büro hängt. Im November vergangenen Jahres sind wir in neue Büroräume in der Innenstadt ...
Weiterlesen
Die Kundenpräsente sind gekommen

Die Kundenpräsente sind gekommen

Die neuen Leadwerk-Flaschen sind diese Woche gekommen. ✓ Ab sofort bekommt jeder neue Kunde beim Start einer Zusammenarbeit dieses kleine Präsent von ...
Weiterlesen

Partner & Tools

Partner2