サイトにwebフォントを適用するようにした場合、ページ描画の途中でチラつきが発生することがあります。
FOUT(Flash of Unstyled Text)と呼ばれる現象です。
その理由と対策について記事にまとめてみました。
尚、webフォントの使い方はこちらの記事にまとめてありますので機会がありましたらご覧ください。
チラつく理由
webフォントはページが表示される際にダウンロードされます。
ダウンロード中はデバイスが持っているフォントでページが表示されていて、ダウンロードが終わればwebフォントが適用されます。
この時、チラつきが発生してしまいます。
例えば、デバイスが持っているフォントがゴシック体で、適用しようとしているフォントが明朝体であれば、一文字の高さや幅が同じだとしてもフォントデザインそのものが違うわけですから当然と言えば当然ですね。
解消方法
webフォントの仕組みから言うと根本的な解消は難しいと思います。
ダウンロードされてから適用される以上、必ずタイムラグが発生してしまいます。
ユーザー側の回線速度によってもダウンロード時間は違ってきますしね。
目立たなくする方法
チラつきをなくすことができないとなれば、いかにしてそれをユーザーに認識させないようにするか、検討する必要があります。
日本語のwebフォントの場合、JavaScriptで読み込ませて、cssで該当する箇所に適用するというパターンが多いように思います。
このJavaScriptの中身を見ると分かるのですが、webフォントのダウンロード中、ダウンロード失敗、ダウンロード成功、の各パターンにおいてhtmlにクラスを追加しており、このクラスを見ることでダウンロード状況を把握することが可能です。
つまり「ダウンロード中」はhtmlを表示しないようにしておき、「ダウンロード成功」になったら表示するようにすれば、webフォントの適用が終わったページがいきなり表示されるわけですからチラつきが気にならなくなります。
表示させないことによる問題
ただし、上記の方法の場合、問題が一つあります。
それはwebフォントのダウンロードが終わるまで画面が真っ白であるという点です。
その影響でPageSpeed Insightsで表示されるスコアが20くらい(当ブログの場合)下がります。
20を大きいとみるか、小さいとみるか。
その落ちた20を上げる苦労を考えるとチラつきは目をつぶった方がいいのかなと思うものの、実際に見ていると結構格好悪いんですよね。
悩ましいところです。
尚、ダウンロードが失敗した場合にはいつまで経っても表示されない状態が続くことになりますが、前述の通り「ダウンロード失敗」というクラスも存在しています。
「ダウンロード失敗」のときでも表示するようにすれば、webフォントが適用されていないページを表示させることが可能です。
チラつくことによる問題
PageSpeed Insightsのスコアを重視してチラつくままにしていた場合はCLSの悪化が見込まれます。
CLSは「Cumulative Layout Shift」の略で、簡単に言えば「ページの表示が完了するまでにどれだけレイアウトがずれるか」を表した指標です。
例えば、面白そうなリンクがあったからタップしようとした瞬間に画像が表示されてタップしようとしたリンクが下にずれた、などという経験はありませんか。
そのようなページはCLSが悪いと判断されて評価に影響が出てしまいます。
cssに追加する記述
上記の問題を踏まえた上で、チラつきを目立たなくしたい場合は以下の記述をcssに追加します。
html {
visibility: hidden;
}
html.wf-active,
html.wf-inactive {
visibility: visible;
}
webフォントを読み込ませるためのJavaScriptがどういうクラスを書き加えているかによって「visible」を設定するクラスを変更してください。
まとめ
webフォントを使う以上どうしても発生してしまう問題なのである程度の妥協は必要だと思います。
当ブログでは当初は非表示とする対応をしていたのですが、Google Search Consoleで表示される「ウェブに関する主な指標」の結果が芳しくなかったのでチラつきには目をつぶることにしました。
(cssを元に戻しました)
もし他にいい対応をご存じの方がいらっしゃいましたらご教示いただけると助かります。
コメント