16

最近、ある時点でWebサイトの読み込みが非常に遅いことに気付き始めました。

私はこれをfirebugで調査しましたが、ページの読み込みに非常に時間がかかる場合、これが表示されます。

ファイアバグネット検査 完全にランダムに見えますが、webfont.woffへのリクエストはただ待って永遠に待ちます。このリソースに手動で到達しようとすると、正常に動作し、100ミリ秒以内に応答します。私が話しているページはhttp://wtf.maikelzweerink.nlで、カスタムフォントはメインドメインmaikelzweerink.nlから取得されます。

フェイスフォントはdefault.cssで宣言されており、これもメインドメインからのものです。

@font-face {
    font-family: 'Proximanova Regular';
    src: url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.eot');
    src: url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.eot?#iefix') format('embedded-opentype'),
         url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.woff') format('woff'),
         url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.ttf') format('truetype'),
         url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.svg#ProximaNovaRgRegular') format('svg');
}

正しいHTTPヘッダーでも

クロームで同じ取引（クリックすると拡大します）： Chromeタイムテスト

4

4 に答える 4

9

MIMEタイプは、フォントではなく、フォント上でtext/plainに設定されます。

.htaccessファイル（Apacheを想定）に次を追加します。

AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf         ttf ttc
AddType font/opentype                  otf
AddType application/x-font-woff        woff

これにより問題が修正され、すべてのブラウザでフォントが機能するようになります。

于 2012-09-03T17:11:58.963 に答える
4

base64 エンコンディングを使用して CSS 内にフォントを埋め込み、リクエストの量を減らしました。base64 には初期帯域幅のコストがかかるという欠点がありますが、うまくいきます! これで修正されました。

もちろん、サイズが 180KB の CSS ファイルにはあま​​り満足していません :/

編集: 問題は ISP であることが判明しました。フォントを手動でロードすると、キャッシュから取得されました（くそったれクロム！）。どういうわけか、これらのフォントは ISP サービスで直接利用できず、ハードディスクからの要求/読み取りにはしばらく時間がかかります。

于 2012-09-04T17:08:43.247 に答える
0

フォントだけじゃない…

Chrome でページを何度もリロードすると、画像もスタックする

このウォーターフォールで画像が遅いことがわかります - http://www.webpagetest.org/result/120904_JN_85ef2c2901df72a0b0ec4b3181eeec77/1/details/

于 2012-09-04T15:10:57.187 に答える