『レンダリングを妨げるリソースの除外』が出来るプラグインを紹介

スポンサーリンク
スポンサーリンク
スポンサーリンク

はじめに

はじめに

ページスピードの点数の改善

ランドゥ
ランドゥ

あなたのサイトは早く読み込めていますか?

 

ページスピードに不安を抱いた方はGoogleのPageSpeed Insightsでテストしてみましょう。

PageSpeed Insights

点数の改善

いかがでしたか。僕もこの記事に書いたことを行ったところ、同じページの点数がこのように改善しました。

 

 

改善する方法はいくつかありますが、その項目の一つ「レンダリングを妨げるリソースの除外」を初心者でも簡単にできる方法を今回は紹介していきます。

さらに改善した記事があります

この記事の内容実践後に、さらに対策を行ってモバイルで67点、パソコンで96点まで改善した報告記事があります。レンダリングを妨げるリソースの除外後に読んでみてください。

 

 

「レンダリングを妨げるリソースの除外」とは

PageSpeed Insightsからの提案

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

 

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

https://developers.google.com/speed/pagespeed/insights

 

ちょっと分からない単語が多くて頭が痛くなるので、太字で示した専門的な内容を調べてみました。

First Paint をリソースがブロックとは

First Paintというのはその名の通りブラウザがwebサイトを最初に描画することで、それをリソースというサイトを構成する文書や画像によって拒否されている状況のことです。

インラインで配信とは

外部 CSS リソースをHTML ドキュメントに直接挿入することをインラインといい、その状態で配信することです。詳しくはこちらを参照してください。(別タブで開きます)

JavaScript やスタイルを遅らせるとは

最初に表示される範囲に使用される必須の CSS と JS は直接書いて、画面外(スクロールして表示される箇所)に関わる CSS と JS は遅らせて読み込ませてあげましょう。

 

という意味です。こちらのサイトを参考にしました。(別タブで開きます)

WordPressプラグインでできること

WordPressプラグインでできること
改善できる項目のリンクをクリックするとこんなプラグインが出てきます

Autoptimize

Autoptimize

 

Autoptimizeは、JS、CSS、画像(レイジーロードを含む)、HTMLとGoogleフォント、JSの非同期、絵文字の残骸の削除などを最適化することで、Webサイトを高速化します。(※日本語訳)

https://wordpress.org/support/plugin/autoptimize/reviews/

 

とあるように、先述したCSSのインラインによる配信や、遅延読み込みが可能になるプラグインです。

W3 Total Cache

W3 Total Cache

 

キャッシングによる検索エンジン(SEO)とパフォーマンス最適化(WPO)。統合キャッシング:CDN、ページ、縮小、オブジェクト、フラグメント、データベースのサポート。(※日本語訳)

https://wordpress.org/plugins/w3-total-cache/

 

キャッシュとはブラウザに一度サイトの情報を覚えさせて、再びアクセスした際に更新した部分だけを表示させる仕組みのことです。こちらのサイトを参照しました。(別タブで開きます)

WP Fastest Cache

WP Fastest Cache

 

最もシンプルで最速のWPキャッシュシステム(※日本語訳)

https://wordpress.org/plugins/wp-fastest-cache/

 

説明が言葉少なでなんか格好いいプラグインですが、機能は上述のW3 Total Cacheと似ています。導入した方の記事によるとこちらの方が安定しているとのことです。(別タブで開きます)

実際に導入してみた

機能が重複しない2つを導入

僕が導入したのはAutoptimizeWP Fastest Cacheです。

 

PageSpeed Insightsで推奨されるプラグインは機能が重複しており、W3 Total CacheWP Fastest Cacheはキャッシングが目的なので絞り込んで導入しました。

先ほどリンクを貼ったサイトを参考にした、というのが正直なところですが。🙃

 

導入前のトップページの点数はたしかこれだけ低かったですね。

 

Autoptimizeを導入した結果

設定した内容

 

  • JavaScriptコードの最適化
  • CSS コードを最適化
  • CSS のインライン化と遅延
  • HTML コードを最適化

CSS のインライン化と遅延に入力するコード

ちなみに、CSS のインライン化と遅延に入力するコードは下記のツールで確認しました。

 

Critical Path CSS Generator - by Jonas Ohlsson
Production ready Critical Path CSS Generator. Specify web page and CSS and let this tool generate your Critical Path CSS for you, in seconds.

 

使い方は3ステップで簡単です。

 

① まず『1. 重要なCSSを作成するwebページのURL』へブログのトップページのURLを入力。

② ダッシュボード→外観→テーマエディターから、親テーマのstyle.cssを開き、『2. 重要な CSS を抽出する完全なCSS』コピー&ペーストする。

『3. クリティカルパスCSSを作成する』をクリックすると、コードが出力されます。

PageSpeed Insightsの点数は…

 

モバイル: 14点→37点 (+23点)

パソコン: 59点→79点 (+20点)

 

という結果に。読者が多いだけにモバイルの改善は大変助かります。

WP Fastest Cacheを導入した結果

設定した内容

 

  • キャッシュの有効化
  • プリロード設定(ユーザーのアクセス前にキャッシュを自動生成)
  • ログインユーザーのキャッシュの非表示
  • 新規投稿と更新後のキャッシュのクリア
  • サーバーから送信されるファイルのGzip圧縮
  • ブラウザキャッシュを利用したロード時間の短縮

PageSpeed Insightsの点数は…

 

モバイル: 37点→43点 (+6点)

パソコン: 79点→93点 (+14点)

 

PCは驚くべきハイスコアに、モバイルもさらに改善しています。

まとめ

テーマで装飾している人におすすめ

ランドゥ
ランドゥ

トータルで、モバイルは29点、パソコンは34点のアップになった。成功だね。

 

今回の記事は、僕のようにWordPressをテーマ(Cocoonなど)で装飾しているユーザーにとって役に立つ内容だったと思います。

 

また同時に、画像が多いブロガーさんはこの記事の方法紹介した画像ファイルの圧縮も行ってみて下さい。

 

(文責・ランドゥ)

オススメ記事

コメント