投稿者: 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() の出力を変更します。

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

参考

Eliminate render-blocking resources

pugiemonn

CAMON.TOKYO の吉澤修です。

記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。

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() の出力を変更します。

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

参考

Eliminate render-blocking resources

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

pugiemonn

CAMON.TOKYO の吉澤修です。

記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。

当記事では 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

pugiemonn

CAMON.TOKYO の吉澤修です。

記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。

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

pugiemonn

CAMON.TOKYO の吉澤修です。

記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。