web-dev-qa-db-ja.com

Googleフォントの「ブラウザキャッシングを活用する」方法

私はPingdom経由で私のサイトをテストし、これを得ました：

enter image description here

検索しましたが、これに対する解決策が見つかりませんでした。誰も私がこれを14から100にする方法を知っていますか？

browser-cachegoogle-font-api
42
J82

Googleのヘッダー（有効期限ヘッダーを含む）を制御できないため、1つのソリューションしか見ることができません。これら2つのスタイルシートとフォントを独自のホスティングサーバーにダウンロードし、HTMLタグを適宜変更してください。

その後、必要に応じて有効期限ヘッダー（Pingdomが「ライフタイム」と呼んだもの）を設定できます。

たとえば、 最初のリンク を開きます。

/* 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;
}

この.woff2ファイルをダウンロードして、Webサーバーの任意の場所に保存します。このスタイルシートをコピーして、独自のCSSファイルまたはHTMLに貼り付けます。 fonts.gstatic.comからリンクを新しいURLに変更します。

Googleはこれらのフォントを1日の有効期限で提供します。 30日に簡単に設定できます。

25
Denis Mysenko

完全なソリューションではありませんが、2つのリクエストを1つにまとめることで状況を改善できます。

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

私のサイトの1つ で2つのフォントを作成し、14対14でスコアを付けます。

47
Mark

まず、Google Fonts CSSファイルのキャッシュと実際のフォントファイルの区別を明確にすることが重要です。 Google Fonts FAQs によると、フォントファイルは実際には1年間キャッシュされます。 24時間キャッシュされるのはCSSファイルです。

CSSアセットのリクエストは1日間キャッシュされます。これにより、スタイルシートが更新されたときにフォントファイルの新しいバージョンを指すように更新でき、Google Fonts APIでホストされているフォントを使用するすべてのWebサイトが各リリースの24時間以内に各フォントの最新バージョンを使用するようになります。

フォントファイル自体は1年間キャッシュされ、累積的にWeb全体を高速化する効果があります：何百万ものWebサイトがすべて同じフォントにリンクすると、最初のWebサイトにアクセスした後にキャッシュされ、次にアクセスした他のすべてのサイトに即座に表示されます。フォントファイルを更新して、ファイルサイズを縮小し、言語の範囲を拡大し、デザインの品質を向上させることがあります。その結果、ウェブサイトの訪問者はGoogleにほとんどリクエストを送信しません。フォントファミリ、1日、ブラウザごとに1つのCSSリクエストのみが表示されます。

これらのCSSファイルを自分でホストすることはお勧めしません。更新されると最新バージョンのフォントを使用せずに遅れてしまうからです。

ただし、CSSリクエストを高速化する方法はいくつかあります。

  1. Markが答えで述べたように、2つのWebフォントを1つのリクエストに結合できます：https://fonts.googleapis.com/css?family=Montserrat|Open+Sans
  2. どちらかのフォントの特定のスタイルのみを使用している場合、実際に使用しているスタイルのみをロードできます。ここではすべてのモントセラトをロードしていますが、3つのスタイルのOpen Sansのみをロードしています。通常（400）、斜体（400i）、および太字（700）：<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,400i,700" rel="stylesheet">
22
Paul-Hebert

Googleが提供するCSSを24時間以上キャッシュすることは許可されていないことに注意してください。

... Googleの利用規約による

6
Orlando

かなり簡単な回避策は、Font SquirrelのWebfont Generatorを使用して独自のキットを生成することです。

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

これを使用するには、フォント（MontserratとOpen Sansの両方がFont Squirrelで利用可能）をダウンロードして、ジェネレータに追加する必要があります。これは、さらにカスタマイズを追加するために使用できます。 （Google Webfontsのフォントにハンガリー語の必要なサブセットが含まれていない場合でも、元のフォントで使用可能だったにもかかわらず、何度も使用しました。）

1
Scorchio

CSSをダウンロードして自分でホストすることを勧める多くの回答があります。 Google Fontsはブラウザの機能に基づいてブラウザごとに異なるCSSを送信するため、これを行わないでください。

簡単な解決策は Easy Fonts CDN です。これはすべてのGoogleフォントをホストし、さらに次のような付加価値を提供します。

  1. CSSファイルの有効期限が長い。 （これにより、ブラウザのキャッシュを活用する問題が解決されます）
  2. 簡単にデバッグ可能なフォントファイル名。
  3. フォントクラス。 <div class="font-open-sans"></div>、<div class="font-lato"></div>などのように、CSSクラスを使用してHTMLのフォントを簡単に使用できます。完全なリファレンスが利用可能です here 。
  4. すべてのプロジェクトに含めることができ、新しいCSS URLを取得するためにGoogle Fontsディレクトリを何度も参照することを忘れることができる、単一のオールインワンフォントファイルのオプション。
  5. Google CSSはfonts.googleapis.comでホストされ、実際のフォントファイルはfonts.gstatic.comから提供され、Easy FontsのCSSファイルとフォントファイルは両方ともpagecdn.ioから提供されるため、DNSの外観を1つ節約できます。他のオープンソースリソースにPageCDNを使用する場合、またはPageCDNで独自のファイルをホストする場合、すべてのファイルが提供されるため、実際に2つのDNSルックアップを保存します他のファイルにも使用される単一のホスト上で、フォント用の専用DNSルックアップはありません。
  6. 一貫性のあるCSS URL。 1つのフォントファミリのCSSは、常に1つのURLから読み込まれます。これにより、ブラウザキャッシュの再利用が増えます。 Google Fonts CSSファイルは、フォントファミリ名を組み合わせて、無限の可能なCSSファイルを作成します。これにより、Webサイト間で共有されるブラウザーキャッシュが削減されます。

Open SansフォントとMontserratフォントだけを使用する場合のコードは次のとおりです。

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

オールインワンファイルを使用する場合は、次を使用します。

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

コードを使用して.htaccessファイルのCSSファイルにポストプロセッサとしてPHPを追加しました（カスタムの.pcssファイル拡張子を使用しています。単純なCSSファイル）：

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

次に、CSSファイルで次のコードを使用して、必要なフォントURLのコンテンツを取得し、エコーしました。

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