レンダリングを妨げるリソースの除外

ブラウザがWebページを表示する際にブラウザの最初の表示を妨げている原因を特定している分析項目です。例えばPageSpeed Insightsでは今回以下の項目がありました。

/earlyaccess/notosansjp.css (fonts.googleapis.com)

この項目はフォントの読み込みです。フォントを読み込んだ後でないと、一般にはブラウザは描画を確定することができません。そのためフォントを読み込まれるまでページの表示おこなわれないことになります。PageSpeed Insightsはこのようなときにどう対応すれば良いか教えくれます。以下の文言が表示されていました。

「ページの First Paint をリソースがブロックしています。重要な JavaScript や CSS はインラインで配信し、それ以外の JavaScript やスタイルはすべて遅らせることをご検討ください。詳細」

方法は2つあることがわかります。

1. インライン配信
2. 遅延読み込み

それぞれについて述べます。

↑目次

インライン配信

インライン配信はスタイルをCSSに記述するのではなく、直接HTMLに記述する方法になります。直接記載されているためスタイルシートからCSSを読み込む必要がなくブラウザでの描画が高速になります。とは言えスタイル(CSS)と文書構造(HTML)は分離するのがあるべき姿ですので、CSSをインライン化するためのツール用いてインライン化したHTMLを生成することが多いです。

「CSS インライン化」などで調べるとたくさんでできます。

↑目次

遅延読み込み

遅延読み込みは、ブラウザに「このファイルは後から読み込んでも良いよ」と事前に教える方法です。ブラウザ側での全体の読み込み時間は変わりませんが、読み込まない時点で先に表示しておいて、後で読み込んだ内容を画面に反映させます。これにより、ユーザーが待たされているという体感時間を短くすることができます。

大きくレイアウトや表示が変わるものでなければ、遅延読み込みを用いて、後でファイルを読み込みます。

上記の例だとフォントの読み込みに時間がかかっています。デフォルトフォントでまずは表示して後で指定フォントを読み込むという方法が良いとおもいます。

<link rel='subresource' href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">

上記のようにrel属性をしていします。ただ上記の場合、再描画時にガタガタとしていやだという場合もあるかもしれません。上記はgoogleのnotosansというフォントですが他にもユーザビリティをあげるためのオプションが用意されています。上記のearlyaccessというのは早期提供版で今は性能改善を果たした版があります。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&amp;display=swap" rel="stylesheet" />

上記のように指定するとフォントをswapしておくためフォントかすでにある場合、高速に表示されます。それいがいにdisplay=optionalを指定するとすぐに表示できない場合は代替フォントに置き換わったままになり再描画時のガタガタした感じを防ぐことができます。

フォント系の高速化はセオリーがあるので、PageSpeed Insightsが問題の原因としてフォントcssを指定した際にはぜひ試してみてください。

↑目次

まとめ

今回は「レンダリングを妨げるリソースの除外」について述べました。

細かいテクニックは他にも色々あるのでこの記事を取りかかりしていただければと思います。

↑目次