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 und richtigen 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

Direkt einen Termin buchen oder Formular ausfüllen.

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

Aktuelle Artikel

Viel Spaß beim Lesen.

How to: Shopify Conversion Tracking in Google Ads einrichten

How to: Shopify Conversion Tracking in Google Ads einrichten

In unserem Blogbeitrag "Google-Shopping - Was steckt dahinter" sind wir bereits darauf eingegangen wie Google-Shopping-Anzeigen erstellt werden. In folgendem Blogbeitrag zeigen wir ...
Weiterlesen
1&1 List Local Basic / Pro - unsere Meinung

1&1 List Local Basic / Pro – unsere Meinung

Durch eine Kundenanfrage sind wir auf das Produkt 1&1 List Local Basic von 1und1 aufmerksam geworden. Dies haben wir zum Anlass genommen mit unseren ...
Weiterlesen
Google Shopping - Was steckt dahinter?

Google Shopping – Was steckt dahinter?

Wie erreicht man für seinen Online-Shop am Besten potenzielle Kunden? Ganz einfach – Durch Gewohnheit. Google setzt an dem Punkt an, wo ...
Weiterlesen
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
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
How To: So steigerst du deine Reichweite auf Instagram

How To: So steigerst du deine Reichweite auf Instagram

Mit mehr als einer Milliarde Nutzer weltweit gehört Instagram zu den beliebtesten Social-Media-Plattformen überhaupt. Schätzungen zufolge nutzen 16,3 Millionen Deutsche die Bilder-Plattform ...
Weiterlesen

Mehr lesen


Inside Leadwerk

Einblicke in unseren Alltag

Einweihungsfeier unseres Büros

Einweihungsfeier unseres Büros

Impressionen von der Einweihungsfeier Unter angepassten Corona-Bedingungen wurde letzte Woche unser Büro in der Moltkestraße 11 in Karlsruhe standesgemäß mit einer Feier ...
Weiterlesen
Wir flitzen durch Karlsruhe

Wir flitzen durch Karlsruhe

Jetzt auch "offline" unterwegs Nach kurzer Überlegung haben wir uns entschieden unser Firmenfahrzeug mit einem Leadwerk-Design bekleben zu lassen. Unsere Wahl ist ...
Weiterlesen
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