PageSpeed Insigts でサイト表示速度を最適化

PageSpeed Insigts でサイト表示速度を最適化

 

画像を最適化する

ブラウザのキャッシュを活用する

スクロールせずに見えるコンテンツをレンダリングブロックしているJavaScript/CSSを排除する

圧縮を有効にする

 

PageSpeed Insightsで分析すると上記の4点が最適化についての提案として表示されました。

あまり知識がないまま最適化をしてみても、間違えてしまってサイトの表示がおかしくなるのも嫌だったので放置していましたが、「何か私でもできる最適化の方法はないかな?」と探してたら出来たので参考にしてみてください。

私がPegeSpeed Insightsの最適化をしてみたことは4個です。

 

使ってるプラグインの整理

 

WordPressのプラグインは便利だからといって、あれもこれも使いすぎるとサイトを重くすることは有名です。

WordPressでHTMLの生成をする時はPHPがプラグインの中も毎回、解析と処理をする。ということなのでプラグインの数が多ければ多いほど解析と処理に時間がかかってしまうことになります。

なので、先にプラグインの整理をして不要なプラグインは停止や削除をします。

プラグインの数を減らした理由は今回の最適化をするために必要なプラグインがあったので、そのためにも減らしました。

 

最適化をプラグインで対応したのは2個

 

  • EWWW Image Optimizer
  • Autoptimize

 

EWWW Image Optimizerは画像の圧縮をするために使用。

AutoptimizeはHTML、CSS、JavaScriptを縮小するために使用。

 

 

画像圧縮については、EWWW Imege Optimizerの設定方法を記事にしているので設定して圧縮してみてください。

私のサイトでは圧縮率は20%で、今までの画像もまとめて圧縮してくれるので便利です。

そしてプラグインのAutoptimizeですが、HTML、CSS、JavaScriptの縮小については、かなり効果があると思いました。

効果はあるけど縮小した分、サイト内でのどこかの表示が崩れることもあるので必ずバックアップを取ってから使うようにしてください。

私の場合、アドセンス自動広告が追尾されてしまい、最近の投稿記事の上をスクロールするようになってしまったので表示が崩れた例とします。

 

 

Autoptimizeの設定方法も記事にしてありますので参考にどうぞ。

 

Advertisement

 

Autoptimeizeの代わりになるプラグインだとHead Cleanerというプラグインがあります。

サクッとHTMLやCSS、JavaScriptを縮小するなら、どちらかサイトに相性が良いプラグインを使ってみるという選び方が良いかもしれません。

今回は、AutoptimeizeとHead Cleanerの両方を試してみましたが、Head Cleanerはヘッダーに意味の分からないアルファベットを表示してしまったのでAutoptimeizeを私は使うようにしています。

また、CSS、HTML、JavaScriptの縮小・圧縮することを「Minify」と言いますが、「Minify 圧縮」でGoogleで検索すると、いろいろな情報が出るので更に有益な情報も得られると思います。

少し、今回のPageSpeed Insightsで最適化の提案にはなかったことで試してみたこともあります。

画像の表示を遅らせてみようと思いLazy Loadというプラグインも使ってみました。

私のサイトではLazy Loadを使用して画像を遅らせてみたら、最適化スコアは下がってしまったので使うのは辞めています。

WordPressでプラグインを使う時は、プラグイン同士の相性があったりプラグイン同士で干渉してしまって表示がおかしくなってしまったりしまうことがあります、そこだけは注意が必要です。

バックアップを取ってからプラグインの合う合わないを試すようにしてください。

 

ブラウザのキャッシュを活用する

 

エックスサーバーをしようしてる場合は簡単な設定でブラウザキャッシュサーバーキャッシュで表示速度を高速化できます。

 

 

XアクセラレータもPHPの高速化が実現できるので試してみてください。

 

 

エックスサーバーをお使いの人がいましたら、参考にどうぞ。

 

スクロールせずに見えるコンテンツをレンダリングブロックしているJavaScript/CSSを排除する

 

スクロールせずに見えるコンテンツって単純に考えて、サイトを表示したときにスクロールを一切しないで最初に表示されてる画面の事。でいいと思います。(ファーストビューとも言いますね)

レンダリングは元の情報を整形して表示させること。くらいしか分かりませんがスクロールせずに見えるコンテンツ部分の段階で、スクロールしてからのレンダリングもしてるからレンダリングブロックしてしまって表示が遅くなってるようなのですね。

その最初の表示の時だけに必要なJavaScriptとCSSを読み込ませて、スクロールした時のJavaScriptとCSSは後から読み込ませるようにすればいいのだと思ってます。

レンダリングブロックしているJavaScript/CSSを排除する項目は、JavaScriptやCSSの知識を持っていて、書き方も多少分からいと、わかりずらいかもしれません。

なので、この最適化の提案の部分は、ググッて対処することにしました。

 

if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;       //.js以外は対象外
if ( strpos( $url, 'jquery.min.js' ) ) return $url;       //'jquery.min.js'は、asyc対象外
return "$url' async charset='UTF-8";                      // async属性を付与
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

 

上記をfunctions.phpに追加します。

やってることは下記3点です。

  • 管理画面以外で適用する
  • jquery.min.jsは非同期の対処外にする
  • それ以外のJavaScriptはasync属性を付与して非同期にする

 

参考にさせていただいたサイトでは、JavaScriptを指定している関数を書き換えるヒントもあったので、参考にしてみてください。

 

 

 

Advertisement

 

最適化したらPageSpeed Insigtsの点数は上がった

 

今回はPageSpeed Insigtsの最適化をすることは、そんなに多くの事をやる必要がなかったにもかかわらず、再適化した後に再度PageSpeed Insigtsで計測したら最適化の点数はかなり上がりました。

 

 

 

 

 

 

モバイルの最適化は99点になりました。

 

 

パソコンの最適化は89点でしたが、最適化する前は72点くらいだったのでかなり最適化できました。

 

 

実際にPageSpeed Insightsで最適化して点数を上げても、体感速度は私的には劇的に早くなったという感じはしなかったので、PageSpeed Insihtsはあくまでも指標の一つとして見ているくらいで良いと思いました。

最適化は、ある程度は必要ですがムキになって取り組む事でもなく、それならユーザーにためになる記事を書くことに時間を使ったほうが良いと思ったのが今回の感想です。

 

WordPressカテゴリの最新記事