投稿者: pugiemonn

PageSpeed Insights の表示で、「レンダリングを妨げるリソースの除外」をせよと指示されるケースの JavaScript の対策です。

上図では、JavaScript の jQuery などライブラリファイルがレンダリングを妨げるリソースとして指摘されています。

改善対策

JavaScript の読み込みを遅らせることで、レンダリングの妨げにならないようにします。基本的には遅延ロードなどをすれば点数改善ができます。

link タグに defer 属性を追加

JavaScript の遅延読み込みには、async と defer があるそうなのですが、今回は defer を使います。

元のタグ

以下のように外部 JS を読み込んでいた箇所が PageSpeed の指摘です。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
             crossorigin="anonymous">

改善したタグ

defer 属性を足します。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
             crossorigin="anonymous" defer>

script タグの最後に defer を足しています。一番後ろに書きましたが、属性なので script タグ内のどこに足しても大丈夫です。

PageSpeed で指摘された読み込み JS には全部 defer を足しておくとパフォーマンス改善が期待できます。

パフォーマンスの確認

PageSpeed Insights を確認して「レンダリングを妨げるリソースの除外」という記述で該当の JS（jquery-3.2.1.slim.min.js）が消えていれば OK です。

パフォーマンスへの影響

defer 属性で PageSpeed の点数に改善がみられました。

defer 設定前の点数

defer 設定なしでは、モバイル41点でした😇

defer 設定ありの点数

defer ありでは点数が改善しました。

モバイルで、17点の改善です😁
defer 設定、やる価値のある対応ですね。

WordPress の wp_head() でライブラリが出力される場合は？

当記事でご紹介した手法を WordPress で使う場合は wp_head() をカスタマイズする必要がある場合があります。wp_head() で出力される JavaScript に defer 属性を付与するには、functions.php で wp_head() の出力を変更します。

以下の記事も合わせてご覧ください。

wp_head() の使い方

参考

Eliminate render-blocking resources

なるほど😇 / <script> タグに async / defer を付けた場合のタイミング https://t.co/UJICZp6Pkg #Qiita

— ぷぎえもん Laravel スクワット テレワークと健康 (@pugiemonn) November 25, 2019

PageSpeed Insights の表示で、「レンダリングを妨げるリソースの除外」をせよと指示されるケースの対策です。

CSS がレンダリングを妨げているようなので、CSS の読み込みを送らせます。

link タグに preload と style を追加

PageSpeed で指摘された CSS を読み込んでいるタグを修正します。

元のタグ

以下のように外部 CSS を読み込んでいた箇所が PageSpeed の指摘です。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

改善したタグ

rel=”preload” と as=”style” を足します。

<link rel="stylesheet" rel="preload" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" as="style">

rel 属性に preload して欲しいという記述と、リソースを style と指定しました。この指定、以前はブラウザごとに実装に差があったようなのですが、最近は概ね対応してきているようです。

パフォーマンスの確認

PageSpeed Insights を確認して「レンダリングを妨げるリソースの除外」という記述が消えていれば OK です。

パフォーマンスへの影響

CSS のプリロードの影響はモバイルでは少し改善し、
デスクトップは大きなポイント改善となりました。

preload 設定前の点数

preload 設定なしでは、モバイル65点でした😇

デスクトップは79点

preload 設定ありの点数

preload ありでは点数が改善しました。
モバイルで+3点、デスクトップで+15点です。

モバイルで+3点、デスクトップで+15点改善されました。
レンダリングを妨げるリソース部分が改善されたようでよかったです😁

しっかり改善したようなので、preload は対応する価値がありそうですね。

WordPress の wp_head() の場合は？

当記事でご紹介した手法を WordPress で使う場合は wp_head() をカスタマイズする必要がある場合があります。wp_head() で出力される style.css などに preload 属性を付与するには、functions.php で wp_head() の出力を変更します。

以下の記事も合わせてご覧ください。

wp_head() の使い方

参考

Eliminate render-blocking resources

rel=”preload” によるコンテンツの先読み – HTML: HyperText Markup Language | MDN

当記事では PageSpeed Insights の表示で、「テキスト圧縮の有効化」をせよと指示されるケースの対策と改善手法をご紹介します。

上図ではテキストリソースの JavaScript や CSS を圧縮して通信量を抑えるように指摘されています。
この対策について見ていきましょう。

改善対策

テキスト圧縮は、ウェブサーバーが返すリソースへ圧縮の指定がよくある手法です。

gzip と deflate の指定を追加

Apache などの Web サーバーで gzip や deflate の圧縮指定をします。
圧縮指定をすれば PageSpeed の表示が消えて、速度改善が期待できます。

具体的な設定はサーバーに合わせた指定をしてください。

レンタルサーバーは .htaccess に指定

Web サーバーの設定を直接変更できないレンタルサーバーなどは、.htaccess に記述して deflate の圧縮指定を追加できる場合があります。

ご利用のレンタルサーバーの設定を確認してください。

以下は Apache を利用しているケースでの .htaccess の圧縮指定の紹介です。
.htaccess の IfModule mod_rewrite.c タグ内に AddOutputFilterByType DEFLATE を追加します。

<IfModule mod_rewrite.c>
    AddOutputFilterByType DEFLATE text/html
</IfModule>

これは HTML だけしか指定していないので、他にも追加する場合は後ろに複数追加できます。

<IfModule mod_rewrite.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/js application/x-javascript application/javascript
</IfModule>

js と css が PageSpeed の指摘にありましたので追加しました。

パフォーマンスへの影響を確認

再度 PageSpeed Insights を確認します。

deflate 設定前の点数

deflate の指定前は37点でした。

deflate 設定後の点数

こちらが deflate 設定後の点数です。

37点から66点になっています😁
29点の改善となりました。

この結果を踏まえると、速度改善では gzip と deflate の圧縮をまず検討するべきと言えますね。

参考

mod_deflate – Apache HTTP サーバ バージョン 2.2

PageSpeed Insights の表示で、「過大なネットワーク ペイロードの回避」をせよと指示されるケースの対策です。
指摘された中でもウェブフォントが上位に挙がっているので、フェブフォント向けの速度改善対応となります。

PageSpeed の指摘としてはフォントのロードに負担がかかるので遅延読み込みをせよとあります。

改善対策

負担をかけているのはウェブフォントなので、CSS を改善して読み込みを遅延読み込みさせます。

CSS で font-display 指定を swap にする

CSS の @font-face を利用してフォントを遅延読み込みさせます。
CSS を編集して @font-face に swap を設定します。

    @font-face {
        font-family: 'Noto Sans Japanese';
        font-style: normal;
        font-weight: 100;
        src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.otf) format('opentype');
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Noto Sans Japanese';
        font-style: normal;
        font-weight: 200;
        src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.otf) format('opentype');
        font-display: swap;
    }

今回の PageSpeed の指摘では Google の Noto Sans Japanese が原因だったので、そこに font-display を追加しています。

font-display で swap を指定しておけば、font のロード待ちを回避してくれます。

swap 指定のフォント表示

パフォーマンスの確認

PageSpeed Insights を確認して「過大なネットワーク ペイロードの回避」という記述が消えていれば OK です。

パフォーマンスへの影響

実はこのウェブフォントのロードは大きな影響があります。

swap設定前の点数

swap 設定なしでは、０点でした😇

swap ありの点数

swap ありでは点数が大幅に改善しました。

なんと驚きの36点もの改善となりました😁

まとめ

ウェブフォント読み込みを CSS の指定から速度改善しました。
ウェブフォントの普及は広がっていきますので、「過大なネットワーク ペイロードの回避」は速度改善では外せない項目となりそうです。

参考

If You Can Read This Fonts Work