PageSpeed Insights で「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript / CSS を排除する」と提案されたときの修正方法

Google Developer では無料サービスの1つとして「PageSpeed Insights」という「ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための修正方法を提案してくれるツール」が提供されています。

PageSpeed Insights でサイトの読み込み速度を検証

当の「PageSpeed Insights」ページの結果

ちなみに当の「PageSpeed Insights」のページもチェックできて、このような結果が出ています。

Pagespeed Insightsでチェックした画面

モバイル96点、パソコン97点という、ほぼ満点の結果です。さすがですね。

点数を気にし過ぎないように

しかし、Google の作ったウェブページであっても「修正を考慮」「修正が必要」と提案されるので、一般のサイトで検証してみて、多少の注意喚起があったとしてもそこまで過敏に反応する必要はないでしょう。

またレンタルサーバーが遅延の原因となっていることもありますので、サイト管理者にはどうすることもできない場合もあります。

ツールを活用する理由

しかし、ウェブページの表示速度はSEO的にも重視されています。表示するのがあまりに遅いと、サイト訪問者に不利益なだけでなく、サイト全体の評価を下げてしまいかねません。ウェブページの読み込み時間を短くすることは、管理者の側にとっても、サイト訪問者にとってもメリットがあることなので、ぜひ活用したいところです。

よくある「修正が必要」項目

さて、こちらでサイトの表示速度をしらべてみると、よく出てくるのが「スクロールせずに見えるコンテンツのレンダリングブロックJavaScript / CSS を排除する」でしょう。

スクロールせずに見えるコンテンツのレンダリングブロックの指摘

修正が必要な箇所を具体的にファイル名で教えてくれるのでわかりやすいですね。ピンポイントで問題点がわかります。以下、見ていきましょう。

問題点の修正方法を具体的に提案してくれる

「レンダリングブロック JavaScript を削除してください」

プラグインが原因なことはよくあります。Amazon や楽天のスクロールするタイプのアフィリエイト広告や、WordPress テーマに含まれるものも多いです。

「次のスクリプトの非同期バージョンを使用してください」

こちらはGoogle AdSense の広告で表示される場合が多いようですね。

「次のCSS 配信を最適化してください」

自分でCSS を変更している場合だけでなく、やはりプラグインを指摘される場合が多いです。

ベストな方法を見つけるのは難しい

細かい設定をやりだしたらきりがありません。たとえばレンタルサーバーの性能を考慮したり、ウェブページのソースコードを修正したり、プログラムを変えたり、ファイルを圧縮したり、いろいろできます。キャッシュ系プラグインを比較検証してみたり、たとえばコンテンツデリバリーネットワーク(CDN)なら「CloudFlare」がありますね。

でも、どのように組み合わせたらベストの効果が出てくるのか、なかなかすぐにはわかりません。

ソースコードを書き換えたりするのは多少の専門的な知識が必要です。また、キャッシュ系プラグインをインストールして有効化したら、他のプラグインと競合してウェブページの表示がおかしくなったり、画面が真っ白になってログインできなくなった、ということもあります。

WordPress 初心者にとっては、できるだけカンタンに、すぐに出来て、ある程度は効果のある方法を試してみたいものです。

すぐに出来るカンタンな修正方法

ということで、あまり難しくなく、プラグインのインストールやソースコードのコピー&ペーストでできる修正方法にしてみました。方法は3つです。

  • Google AdSense広告を「非同期」にする
  • WordPressプラグインを導入する
  • 「.htaccess」ファイルの記述を追加する

以下、その手順です。

Google AdSense広告を「非同期」にする

こちらはGoogle AdSense を導入しているサイト向けになります。「非同期」の広告コードを取得して書き換えるだけです。

まずログインして「広告の設定」をクリックします。「広告ユニット」が並んでいるところの「コードを取得」を選んでください。

Google AdSense広告を非同期にする

すると「広告を作成しました」というウィンドウが出るので「コードタイプ」を「非同期」に変更してください。

Google AdSense広告が非同期になっているかを確認

あとはウェブページのGoogle AdSense 広告のコードを書き換えるだけです。

WordPress プラグインを導入する

導入するプラグインは2つです。どちらもインストールして有効化するだけで、とくに設定は要りません。

JavaScript 対策

Asynchronous Javascriptプラグインサイト

Asynchronous Javascript」はファイルを非同期で読み込んでくれます。

CSS 対策

Autoptimizeプラグインサイト

Autoptimize」はJavaScript やCSS、HTML をまとめて、小さくしてくれます。設定画面で3つの変更ができます。

ただしウェブページによっては表示がおかしくなることがあります。上のプラグインでJavaScript 対策をしているので、わたしは「Optimize CSS Code?」にだけチェックを入れて機能させています。これで不具合もなくなりました。

【追記】その他の人気プラグイン

以下のプラグインも利用者が多いみたいです。

また、PageSpeed Insights の指摘とは直接関わってこないかもしれませんが、スクロールして画像が表示されるときになったら読み込むLazy Load 系プラグインは、サイト全体の高速化に役立ちます。

多くのサイトで紹介されている「Lazy Load」は2年以上更新がないので使っていません。このような警告が出ていました(2014年11月現在)。

プラグインページで2年以上経過しているのに更新がないときの警告

This plugin hasn’t updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress. (このプラグインは2年以上更新していません。もはやメンテナンスもサポートもされておらず、最近のWordPress バージョンでは互換性の問題があるかもしれません。)

ほかの多くのプラグインでもそうですが、この警告が出ているプラグインにはセキュリティ上の問題があるかもしれないので、利用する際にはご注意ください。

「.htaccess」ファイルの記述を追加する

こちらは少しだけ難しくなります。JavaScript やCSS などのファイルの有効期限を設定して、サイト訪問者のブラウザにキャッシュを利用する方法です。WebサーバーでApache モジュールの「mod_expires」を使います

単純な設定を追加するだけで高い効果が期待できますが、「.htaccess」ファイルに直接記述するので、わからなければやらなくてもかまいません。

こちらのサイトを参考にしました。

WordPressサイト用の.htaccess例 | dogmap.jp

以下を追加します。

数字はサイトに合わせて変更してください。

GoogleはJavaScript を1週間(604,800秒)に設定するよう推奨しているそうです。それ以下の時間だと、また「修正が必要」と表示されます。

「mod_deflate」はレンタルサーバーによっては使えない場合があります。追加してサイトを見てみると「503」が表示されるかもしれません。

「mod_expires」だけなら多くのレンタルサーバーで利用できるので、 上記の箇所だけを追加するのはおすすめです。

他にも方法はたくさんある

今回は「スクロールせずに見えるコンテンツのレンダリングブロックJavaScript / CSS を排除する」に限定しています。しかも、すぐにできる方法だけです。

細かい設定にこだわるなら、さらに効果的で効率的な方法があるはずです。しかし、それをやるにはもう少し知識が必要になってきますので、WordPress 初心者としては、これくらいで妥協しました。

また何か見つけたら書いてみます。

【追記】

こちらの記事も書きました。

WordPressでレンダリングを妨げる JavaScript を削除する簡単な方法のまとめ | かっぱのWordPress入門ブログ

WordPressでCSSの配信を最適化するために簡単にできることのまとめ | かっぱのWordPress入門ブログ

関連記事

Google Analytics のトラッキングコードをプラグインなしで埋め込んでみました:Google の推奨する PHP の設定方法

いままではかんたんに設置できるプラグイン「Google Analyticator」を使っていたのですが、サイトデザインも一新したことなので、プラグインの数を整理・削減していっています。今回はGoogle が提供しているアクセス解析サービスの…

Twitter Cards をプラグインなしで設定してみました:Twitter カードアナリティクスも使えるようになった!

Twitter Cards とは? 「Twitter Cards」というのは、ふだんのTwitter投稿で表示されるスペースの下の部分に、設定した説明内容を追加するサービスです。たとえばサイト名や紹介文や画像などを入れることができます(リッ…