Google Webfonts ladezeite optimieren Wie man die Google Webfonts zum schnellen laden bringt

Google Webfonts ladezeite optimieren

• WAM
• Allgemein
• Dienstag - 20 . März . 2018

Die Google Webfonts sind schon eine sehr feine Sache, unserer Meinung nach ein Elementarer Bestandteil einer Webseite. Problem ist aber das durch das einbinden der Google Webfonts die Seite unter Umständen langsamer wird. Dies liegt nicht daran, dass die Fonts von Google langsam ausliefert werden, sondern an den Redirects die zur darstellung gemacht werden müssen.

Das Problem lässt sich aber relativ eindach umgehen.

Die Google Webfonts lassen sich “normalerweise” in zwei möglichkeiten in eine Seite einbinden. Einmal über den Standard, der im Head bereich der Webseite eingebaut wird und einmal als CSS @import befehl.

Die sehen bekanntlich so aus

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

oder in der CSS

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
</style>

Beides Funktioniert super und ist innerhalb von ein paar Sekunden erledigt. Hier ensteht aber auch genau dann das Problem mit der Ladezeit.

Wenn die Google Webfonts auf normalem Weg eingebunden wurden, werdet Ihr sicherlich Fehler  in den Redirects bekommen.

Nur wie soll man externe abfragen so einbinden das es passt. Die Lösung ist ganz einfach. Vor kurzem haben wir euch, in unserem Blog geschrieben, wie die externe Google Analytics Datei Lokal hosten könnt, so das diese auch in den Browser Cache aufgenommen werden kann.

Nun könntet Ihr das mit der Google Webfonts genau so machen, aber…. Wir wissen nicht so genau, ab das überhaupt, erlaubt ist. (Wenn Ihr das wisst lasst nen Kommentar dazu da.)

Da wir uns hier nicht unbedingt auf dünnes Eis begeben wollten, haben wir es auf einem anderen weg, gelöst.

Wir haben die Google Webfonts schon da gelassen wo sie sind, also bei Google, sicher ist sicher. Dafür aber nur die Dateien genutzt, die auch notwendig sind.

Hää?? Um das näher zu erläutern. Bei einer Optimierung einer Seite, ist uns aufgefallen, dass Fonts importiert werden, die nicht notwendig, bzw gar nicht gewollt sind.

Erst hatten wir die Vermutung, das es sich um eine Altlast in der CSS handelte. Das wurde aber vom Kunden verneint. Also erstmal suchen wo die Font herkommt.

Da im gesamten Quellcode der Seite nicht von dieser besagten Font zu finden war, musste sie von extern kommen. Nach langem suchen sind wir, zugegeben, ehr durch Zufall auf den Verursacher gestoßen. Es waren die Importierten Google Webfonts.

Nun stand die Frage im Raum, wir bekommt man das wieder behoben.

Der Lösungsansatz war wie bei der Google Analytics Datei.

Man rufe doch einfach mal die URL auf die Google da Importiert. Im diesem Beispiel wäre das diese >> https://fonts.googleapis.com/css?family=Roboto

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Blödes Beispiel, da genau hier keine weidere Font auftaucht. Sei es drum.

Was Ihr dennoch seht ist, dass Ihr nicht nur eine Font für “latin” also die Schrift in Latein importiert, sondern auch in “greek”, “vietnamese” oder “cyrillic”.

Wer seine Webseite auch in Russisch Griechisch oder Vietnamesisch hat, kann dies gleich drin lassen.

Alle anderen die diese Sprachen nicht nutzen, können dies auch rausschmeißen. Für den “Mitteleuropäischen Raum” braucht man nur /* latin-ext */  und /* latin */.

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Google Webfonts sind schneller

Wenn ihr das in eure CSS, anstatt des normalen von Google vorgegebenen Code einfügt, werdet Ihr feststellen, das die Redirects zurückgegangen sind und die Seite somit auch wieder etwas schneller geworden ist.

Wie Ihr seht mit ganz kleinen Handgriffen wieder etwas mehr Performance.