フォントの面でパフォーマンスの問題が発生する

Question

サイトの読み込みに数秒間のフリーズがあり、ブラウザにフォントが表示されたテキストが表示されます（テキストが表示されます）。

私は10秒間のフリーズを経験するユーザーからの苦情を受けています。

私はそれについて何ができますか？

@font-face{ 
    font-family:'GillSans'; 
    src:url('../fonts/GIL_____.eot'); 
    src:url('../fonts/GIL_____.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/GIL_____.woff') format('woff'), 
     url('../fonts/GIL_____.ttf') format('truetype'), 
     url('../fonts/GIL_____.svg#GillSans') format('svg'); 
} 
@font-face{ 
    font-family:'GillSansB'; 
    src:url('../fonts/GILB____.eot'); 
    src:url('../fonts/GILB____.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/GILB____.woff') format('woff'), 
     url('../fonts/GILB____.ttf') format('truetype'), 
     url('../fonts/GILB____.svg#GillSansB') format('svg'); 
} 
@font-face{ 
    font-family:'GillSansBI'; 
    src:url('../fonts/GILBI___.eot'); 
    src:url('../fonts/GILBI___.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/GILBI___.woff') format('woff'), 
     url('../fonts/GILBI___.ttf') format('truetype'), 
     url('../fonts/GILBI___.svg#GillSansBI') format('svg'); 
} 
@font-face{ 
    font-family:'GillSansI'; 
    src:url('../fonts/GILI____.eot'); 
    src:url('../fonts/GILI____.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/GILI____.woff') format('woff'), 
     url('../fonts/GILI____.ttf') format('truetype'), 
     url('../fonts/GILI____.svg#GillSansI') format('svg'); 
} 

Answer 1

圧縮し、あなたのフォントをキャッシュしてみてください。ここ

は、私がフォントフェースを挿入する方法です。 Apacheを使用する場合は、ここでの.htaccess

を使用してこれを設定することができますが、Apacheとモジュールmod_expiresを使用すると仮定すると、パフォーマンスの第一人者スティーブ・サウンダ

追加情報およびリソース

から非常にhelpful overviewで、 mod_deflateは、ABOを追加した後、あなたの.htaccess

<IfModule mod_expires.c> 
    Header set cache-control: public 
    ExpiresActive on 

    ExpiresByType font/ttf  "access plus 1 month" 
    ExpiresByType font/woff  "access plus 1 month" 
    ExpiresByType image/svg+xml "access plus 1 month" 
</IfModule> 

<IfModule mod_deflate.c> 
    <FilesMatch "\.(ttf|otf|eot|svg)$" > 
    SetOutputFilter DEFLATE 
    </FilesMatch> 
</IfModule> 

に次のルールを追加することができ、有効になっています.htaccessにするには、関連するヘッダーフィールドを確認して確認します。

詳細については、cache controlとcompressionの速度のヒントをご覧ください。