Google Fonts asynchron laden = mehr Punkte

Google’s Web Fonts sind ja bekannt dafür das Rendering einer Webseite zu blockieren und treiben speed-afine Besitzer eines Blogs förmlich in den Wahnsinn. Ich möchte Dir hier einen Lösungsweg zeigen, wie Du das Problem des Eliminate render-blocking Javascript and CSS in above-the-fold content beheben kannst.

Um nochmal auf die Google Fonts zu sprechen zu kommen, da sie ja ein großer Punkt sind, der bei „PageSpeed Tests“ wie z..: Google’s PageSpeed Insights immer wieder moniert werden. Hier geht es zumeist um diesen Punkt

Eliminate render-blocking Javascript and CSS in above-the-fold content

Und hier möchte ich nun kurz ansetzen.

Normalerweise bindet man ja den oder die gewünschten Font(s) mittels Anweisung im Header so ein

<link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,700' rel='stylesheet' type='text/css'>

Man kann aber dieses Stück Code gleich mal aus dem Header in den Footer, vor das abschließende </body> verschieben, und so das Render blockieren unterbinden.

Was aber, wenn wir gleich von vorne weg die benötigten Scripte dazu im Footer und noch dazu asynchron laden würden? Eine Hilfe hierzu ist der Web Font Loader. Wir nehmen also hierzu den folgenden Code und platzieren ihn vor dem abschließenden </body> Tag.

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Lato:400,400italic,700' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Bei vorgefertigten Themes, ich denke hier speziell an Twenty Twelve, Twenty Thirteen, Twenty Fourteen, Twenty Fifteen, Twenty Sixteen und Twenty Seventeen, kann es unter Umständen möglich sein, dass wir zuerst die Theme-eigenen Fonts deaktivieren müssen! Dazu verwenden wir ein weiteres Plugin aus dem WordPress Repository, welches diese Aufgabe für uns übernimmt.

Disable Google Fonts
Disable Google Fonts
Entwickler: Milan Dinić
Preis: Kostenlos

Du musst das Disable Google Fonts Plugin dazu lediglich installieren und aktivieren. Es gibt keine Einstellungen und verrichtet seine Arbeit out of the box.

Wer allerdings schon Autoptimize nutzt, der setzt einfach ein Häkchen bei => Google Fonts entfernen? Man spart sich somit wieder ein neues Plugin und kostbare Ladezeit :-)

Autoptimize Google Fonts entfernen