PageSpeed Insightsの改善のために『Autoptimize』をインストールしました【プラグイン】

PageSpeed Insights(ページスピードインサイト)というGoogleのページ速度チェックツールがあるのですが、これは自分のサイトの読み込み速度をチェックしてくれるというもので、自分のサイトに点数をつけてくれるサービスです。

このサイトの現状

左がモバイル、右がパソコンの結果です

思っていた以上に、モバイルの点数が低くて、思っていた以上にパソコンの点数が良いという結果でした!!なにか対策をしたというわけではないので、すべてテーマ(SANGO)のおかげですね!!

あと、モバイルの点数が低いのはAdSenseやGoogle Analyticsのような外部リソースを読み込んでいることが原因だと思われます?

点数が悪いからといってこれらのリソースを外すことができるかというと「NO!」なのですが、それでももう少しモバイルの点数を上げてみたい!ということで、WordPressのプラグインで対策ができないか調べてみました。

『Autoptimize』というプラグインをインストール

PageSpeed Insightsでは改善できる項目も教えてくれるのですが、その中でてっとり早く対策できそうだなと思ったのが、「 CSS の最小化 」です。

スタイルを結合、軽量化、圧縮してサイトの動作を速くする、さまざまな WordPress プラグインがあります。

PageSpeed Insights

と丁寧に教えて下さったので、調べてみたところ良さそうなプラグインを見つけることができました。それが【Autoptimize】。

このプラグインは CSS・HTML・JavaScriptのファイルを縮小してくれる というプラグインになります。

【 Autoptimize 】 プラグインをインストール

WordPressのプラグインの「新規追加」で、「Autoptimize」を検索して、でてきたプラグインの「今すぐインストール」をクリック。

【 Autoptimize 】 プラグインを有効化

ついつい忘れてしまいがちですが、必ず「有効化」を押して下さい。

プラグイン>「Autoptimize」 から設定する

もしくは「インストール済みプラグイン」の中にある「Autoptimize」のところにある「設定」をクリックしても同じページが開きます。

必要な設定にチェックを入れる

私はとりあえず「JavaScript コードの最適化」「CSS コードを最適化」「 HTML コードを最適化 」の3つにチェックをいれました。あと、「Image」のタブ内にある「Lazy-load images?」にも。

これは見えていない画像の読み込みを遅らせるという内容になってます。チェックを入れるとイメージが崩れたりと不具合がある場合も考えられますので、あくまで必要に応じて、ということでチェックをして見て下さい。

「変更を保存してキャッシュを削除」 をクリック

これで、変更が保存されて、変更内容が適用されます。なので、サイトに不具合がないか、必ずチェックをして下さい。CSSやJSを圧縮することによって、表示されなかったり望んでいた動きができなくなったりする可能性があります。

以上で完了です

基本的にはこれだけでOKです。

PageSpeed Insightsで再チェックした結果

以上の設定をしただけでどれくらいの変化があるのか、ウキウキしながらPageSpeed Insightsで自サイトのアドレスを入力した結果……

モバイルが赤くなくなりました!!

これ、モバイルは及第点じゃないでしょうか?パソコンの方は99点と、ほぼ満点!ここまで改善されたなら十分かな、と100点を目指すことはせずに運用をしています。

お気軽にコメントください