webentwicklung-frage-antwort-db.com.de

Wie kann ich das Browser-Caching für Google-Schriftarten nutzen?

Ich habe meine Site über Pingdom getestet und Folgendes erhalten:

enter image description here

Ich habe gesucht, aber keine Lösung dafür gefunden. Weiß jemand, wie ich diese 14 bis 100 bekommen kann?

42
J82

Da Sie Googles-Header (einschließlich Ablaufheader) nicht steuern können, sehe ich nur eine Lösung: Laden Sie diese beiden Stylesheets und Schriftarten auf Ihren eigenen Hosting-Server herunter, und ändern Sie die HTML-Tags entsprechend.

Anschließend können Sie Ablaufheader (was Pingdom als "Lebensdauer" bezeichnet) nach Ihren Wünschen festlegen.

Öffnen Sie zum Beispiel das erster Link :

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Laden Sie diese .woff2-Datei herunter und speichern Sie sie auf Ihrem Webserver. Kopieren Sie dieses Stylesheet und fügen Sie es in eine Ihrer eigenen CSS-Dateien oder in HTML ein. Ändern Sie den Link von fonts.gstatic.com zu Ihrer neuen URL.

Google liefert diese Schriftarten mit einer Ablaufzeit von 1 Tag. Sie können es jetzt problemlos auf 30 Tage einstellen.

25
Denis Mysenko

Keine vollständige Lösung, aber Sie können die Situation verbessern, indem Sie die beiden Anforderungen zu einer kombinieren:

https://fonts.googleapis.com/css?family=Montserrat|Open+Sans

Ich mache das für zwei Schriften auf einer meiner Sites und erziele eine Punktzahl von 86 gegenüber Ihrer 14. Wichtig ist, dass dies eine echte Beschleunigung ist, nicht nur ein Hack, um eine willkürliche Punktzahl zu reduzieren.

47
Mark

Zunächst ist es wichtig, den Unterschied zwischen dem Zwischenspeichern der Google Fonts-CSS-Dateien und den tatsächlichen Schriftdateien zu verdeutlichen. Gemäß den Google Fonts FAQs werden ihre Schriftdateien tatsächlich für ein Jahr zwischengespeichert. Es sind die CSS-Dateien, die 24 Stunden zwischengespeichert werden:

Anforderungen für CSS-Assets werden 1 Tag zwischengespeichert. Auf diese Weise können wir ein Stylesheet so aktualisieren, dass es auf eine neue Version einer Schriftartdatei verweist, wenn diese aktualisiert wird, und sicherstellen, dass alle Websites, die von der Google Fonts-API gehostete Schriftarten verwenden, innerhalb von 24 Stunden nach jeder Veröffentlichung die aktuellste Version jeder Schriftart verwenden .

Die Schriftdateien selbst werden für ein Jahr zwischengespeichert, was kumulativ dazu führt, dass das gesamte Web schneller wird: Wenn Millionen von Websites auf dieselben Schriftarten verlinken, werden sie nach dem Besuch der ersten Website zwischengespeichert und sofort auf allen anderen anschließend besuchten Websites angezeigt . Wir aktualisieren manchmal Schriftdateien, um deren Dateigröße zu verringern, die Abdeckung von Sprachen zu erhöhen und die Qualität ihres Designs zu verbessern. Das Ergebnis ist, dass Website-Besucher nur sehr wenige Anfragen an Google senden: Es wird nur eine CSS-Anfrage pro Schriftfamilie, pro Tag und pro Browser angezeigt.

Ich würde empfehlen, diese CSS-Dateien nicht selbst zu hosten, da Sie in Verzug geraten und nicht die neuesten Versionen der Schriftarten verwenden, wenn diese aktualisiert werden.

Es gibt jedoch einige Möglichkeiten, die CSS-Anforderung zu beschleunigen:

  1. Wie Mark in seiner Antwort erwähnt hat, können Sie Ihre beiden Webfonts zu einer Anfrage zusammenfassen: https://fonts.googleapis.com/css?family=Montserrat|Open+Sans
  2. Wenn Sie nur bestimmte Stile einer der beiden Schriftarten verwenden, können Sie nur die Stile laden, die Sie tatsächlich verwenden. Hier laden wir ganz Montserrat, aber nur drei Arten von Open Sans. normal (400), kursiv (400i) und fett (700): <link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,400i,700" rel="stylesheet">
22
Paul-Hebert

Beachten Sie, dass Sie das von Google bereitgestellte CSS nicht länger als 24 Stunden zwischenspeichern dürfen.

Nur sagen ... gemäß den Nutzungsbedingungen von Google.

6
Orlando

Eine relativ einfache Lösung wäre, ein eigenes Kit mit dem Webfont Generator von Font Squirrel zu erstellen:

https://www.fontsquirrel.com/tools/webfont-generator

Um dies nutzen zu können, müssten Sie die Schriftarten herunterladen (Montserrat und Open Sans sind beide auf Font Squirrel verfügbar) und sie dem Generator hinzufügen. Dies kann zum Hinzufügen weiterer Anpassungen verwendet werden. (Ich habe es oft verwendet, wenn die Schriftart in Google Webfonts nicht die erforderliche Teilmenge für die ungarische Sprache enthielt, obwohl sie in der Originalschrift verfügbar war.)

1
Scorchio

Ich sehe viele Antworten, die empfehlen, CSS herunterzuladen und selbst zu hosten. Tun Sie dies NICHT, da Google Fonts für jeden Browser ein anderes CSS sendet, das auf den Funktionen des Browsers basiert.

Eine schnelle Lösung ist Easy Fonts CDN , die alle Google-Schriftarten hostet und einige zusätzliche Vorteile bietet, wie zum Beispiel:

  1. Langer Ablauf für CSS-Dateien. (Dies löst Ihr Problem mit dem Browser-Caching nutzen)
  2. Einfach zu debuggende Schriftdateinamen.
  3. Schriftklassen. Mit CSS-Klassen können Sie problemlos Schriftarten in HTML verwenden, z. B. <div class="font-open-sans"></div>, <div class="font-lato"></div> usw. Vollständige Referenz ist verfügbar hier .
  4. Eine Option für eine einzelne All-in-One-Schriftartdatei, die Sie in alle Ihre Projekte einbeziehen und vergessen können, das Google Fonts-Verzeichnis immer wieder aufzurufen, um neue CSS-URLs zu erhalten.
  5. Spart 1 zusätzlichen DNS-Look, da Google CSS in fonts.googleapis.com gehostet wird und die tatsächlichen Schriftartendateien von fonts.gstatic.com bereitgestellt werden, während die CSS- und Schriftartendateien von Easy Fonts von pagecdn.io bereitgestellt werden. Wenn Sie PageCDN für andere OpenSource-Ressourcen verwenden oder Ihre eigenen Dateien auf PageCDN hosten, wird dies tatsächlich Sie sparen 2 DNS-Lookups, da alle Dateien auf einem einzigen Host bereitgestellt werden, der für andere Dateien verwendet wird Außerdem gibt es keine dedizierte DNS-Suche für Schriftarten.
  6. Konsistente CSS-URLs. CSS für eine Schriftfamilie wird immer über eine URL geladen. Dies erhöht die Wiederverwendung des Browser-Cache. Google Fonts-CSS-Dateien mischen die Namen von Schriftfamilien und erstellen unendlich viele mögliche CSS-Dateien. Dadurch wird die gemeinsame Nutzung des Browser-Cache über Websites hinweg verringert.

Wenn Sie nur Open Sans- und Montserrat-Schriftarten verwenden möchten, ist hier Ihr Code:

<link href="https://pagecdn.io/lib/easyfonts/montserrat.css" rel="stylesheet" />
<link href="https://pagecdn.io/lib/easyfonts/open-sans.css" rel="stylesheet" />

Wenn Sie die All-in-One-Datei verwenden möchten, verwenden Sie:

<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />
0
Hamid Sarfraz

Was ich arbeiten musste, war das Hinzufügen von PHP als Postprozessor zu meinen CSS-Dateien in meiner .htaccess-Datei mit dem Code (ich verwende eine benutzerdefinierte .pcss-Dateierweiterung - nur um es zu machen) getrennt von meinen einfachen CSS-Dateien):

<FilesMatch "\.pcss$">
SetHandler application/x-httpd-php
Header set Content-type "text/css"
</FilesMatch>

Dann habe ich den folgenden Code in meiner CSS-Datei verwendet, um den Inhalt der gewünschten Schriftart-URL abzurufen und auszugeben.

<?php
echo file_get_contents("https://fonts.googleapis.com/css?family={FONT}");
?>
0
Dom Webber