ページ読み込み時間を短縮しようとしています。
ここで概説した 3 番目の例に従って、TypeKit JavaScript を非同期的に読み込みました。
それを機能させるには、フォントを使用する各要素に を追加する必要が.wf-loading #some-element {visibility: hidden;}あります。1) 読み込み後、または 2) 設定時間 (1 秒) 後、フォントが表示されます。
問題は、私が取り組んでいる CSS には約 200 の要素に割り当てられたフォントがあるため、200 の要素です.wf-loading{ }(注: この CSS は私が書いたものではありません)。
これにより、定期的にロードするだけでなく、DOMがそれだけ多くのものをトラバースするだけでなく、ロード時間が遅くなると思います。その場合は、Typekit を完全にやめて、通常のフォントを使用します。
この種のものでパフォーマンス テストを実行するために使用できるツールはありますか? または、誰かがこれらのことをテストしましたか?
このアプローチでは、実際には複数の DOM 要素 ( root ) を変更しているわけではありません。これは、最新のブラウザーが超高速の CSS エンジンに依存することを意味するため、関連する要素の数がページの読み込みに顕著な影響を与えることはありません。
ページの読み込みとちらつきに関する限り、ネットワーク遅延は通常、DOM 操作よりも桁違いに悪くなります。ブラウザーがフォントのダウンロードを待機している間、最初の (プライミングされていない) ページの読み込みで常にちらつきが発生します。再利用のためにフォントがキャッシュされていることを確認し、ファイルサイズをできるだけ小さく保つようにしてください。
数年前、私は Cufon と共にこの道をたどりました。最終的に、パフォーマンスが許容できる最も単純な方法を選択し、そこで停止しました。ページの読み込みを最適化することに夢中になるのは簡単ですが、機能、バグ、リファクタリングなど、より有望な改善領域があると思われます。
問題は、ブログで言及されているように、Typekit CDN が完全に失敗し、ユーザーに空白のページが表示されるというまれなケースです (ただし、確実に発生します。私にとっては 2 回以上)。これは、非同期読み込みを使用したいと思うときです。