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

Ux 787980 1920 1140x425
Lesedauer ca. < 1 Minuten

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.

Ähnliche Artikel
Kopfsalat1
Neues Projekt mit Medienpartner

Mit Kopfsalat gelingt jedes Vorhaben Ich war heute mal wieder zu Besuch bei Kopfsalat Medien in Karlsruhe. Er ist mehr...
Document 3268750 1280
Leads über das Internet

Leads über das Internet generieren, wie soll das funktionieren? Genau diese Frage behandeln wir in diesem kurzen Artikel. Das Internet mehr...

  Online-Marketing , Suchmaschinen , WordPress Agentur       


Über den Autor

guest
7 Kommentare
Älteste
Neuste Top bewertet
Inline Feedbacks
View all comments
Anonym

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.

Anonym

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

LG und danke!

Anonym

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

Anonym

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

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.

Seo Online Shop Unterschiede Webseiten 150x150

Die Unterschiede zwischen SEO für Online-Shops und Webseiten

SEO ist wichtig für jede Webseite oder Online-Shop, aber es gibt einige Unterschiede, die man beachten muss. In diesem Blog Artikel erfahren ...
Weiterlesen
Empfehlungsmarketing 150x150

Die richtige Strategie für mehr Umsatz durch Empfehlungsmarketing

Viele Unternehmen setzen heutzutage auf Empfehlungsmarketing. Doch was genau ist Empfehlungsmarketing und wie kann es richtig eingesetzt werden? Was ist Empfehlungsmarketing? Empfehlungsmarketing ...
Weiterlesen
Cookies Richtig Setzen 150x150

Cookie Tracking richtig umsetzen

Warum Cookies? Cookies sind kleine Textdateien, die auf Ihrem Computer gespeichert werden und die Ihr Browser speichert, um bestimmte Informationen wie bevorzugte ...
Weiterlesen
Google Ads 150x150

Die Bedeutung von Google Ads für kleine Unternehmen

Zahlreiche kleine Unternehmen sind mit kostenlosen 100-Euro-Google-Anzeigengutscheinen, die sie im Rahmen von Marketingkampagnen erhalten haben, zu mir gekommen und haben gefragt, welche ...
Weiterlesen
Google Rich Snippets 150x150

Das “Featured Snippet” in den Google Suchergebnisseiten

Google "Featured Snippet" - was ist das? Wenn Sie sich die Google Suchergebnisseiten (SERPs) ansehen, werden Sie feststellen, dass manchmal ein "Featured ...
Weiterlesen
Zweite Meinung Online Marketing 150x150

Zweitmeinung für Ihre Online-Marketing Strategie

Sie haben eine tolle Website, leider bringt sie nicht die gewünschten Besucher oder Kunden. Vielleicht liegt es an Ihrer Online-Marketing Strategie? Wir ...
Weiterlesen

Mehr lesen


Inside Leadwerk

Einblicke in unseren Alltag

IMG 8835 150x150

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
Leadwerk Smart 150x150

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
Auto 150x150

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
Kopfsalat1 150x150

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
Wandbild Leadwerk 150x150

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
Leadwerk Flaschen 150x150

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



Eine Tasse Kaffee gefällig?


Wir laden Sie hiermit herzlich zu einem virtuellen Zoom-Kaffee ein, um unverbindlich über ihr Vorhaben zu sprechen.

7
0
Wir freuen uns über Ihren Kommentar!x