PageSpeed Insights(ページスピードインサイト)というGoogleのページ速度チェックツールがあるのですが、これは自分のサイトの読み込み速度をチェックしてくれるというもので、自分のサイトに点数をつけてくれるサービスです。
思っていた以上に、モバイルの点数が低くて、思っていた以上にパソコンの点数が良いという結果でした!!なにか対策をしたというわけではないので、すべてテーマ(SANGO)のおかげですね!!
あと、モバイルの点数が低いのはAdSenseやGoogle Analyticsのような外部リソースを読み込んでいることが原因だと思われます?
点数が悪いからといってこれらのリソースを外すことができるかというと「NO!」なのですが、それでももう少しモバイルの点数を上げてみたい!ということで、WordPressのプラグインで対策ができないか調べてみました。
PageSpeed Insightsでは改善できる項目も教えてくれるのですが、その中でてっとり早く対策できそうだなと思ったのが、「 CSS の最小化 」です。
スタイルを結合、軽量化、圧縮してサイトの動作を速くする、さまざまな WordPress プラグインがあります。
PageSpeed Insights
と丁寧に教えて下さったので、調べてみたところ良さそうなプラグインを見つけることができました。それが【Autoptimize】。
このプラグインは CSS・HTML・JavaScriptのファイルを縮小してくれる というプラグインになります。
WordPressのプラグインの「新規追加」で、「Autoptimize」を検索して、でてきたプラグインの「今すぐインストール」をクリック。
ついつい忘れてしまいがちですが、必ず「有効化」を押して下さい。
もしくは「インストール済みプラグイン」の中にある「Autoptimize」のところにある「設定」をクリックしても同じページが開きます。
私はとりあえず「JavaScript コードの最適化」「CSS コードを最適化」「 HTML コードを最適化 」の3つにチェックをいれました。あと、「Image」のタブ内にある「Lazy-load images?」にも。
これは見えていない画像の読み込みを遅らせるという内容になってます。チェックを入れるとイメージが崩れたりと不具合がある場合も考えられますので、あくまで必要に応じて、ということでチェックをして見て下さい。
これで、変更が保存されて、変更内容が適用されます。なので、サイトに不具合がないか、必ずチェックをして下さい。CSSやJSを圧縮することによって、表示されなかったり望んでいた動きができなくなったりする可能性があります。
基本的にはこれだけでOKです。
以上の設定をしただけでどれくらいの変化があるのか、ウキウキしながらPageSpeed Insightsで自サイトのアドレスを入力した結果……
これ、モバイルは及第点じゃないでしょうか?パソコンの方は99点と、ほぼ満点!ここまで改善されたなら十分かな、と100点を目指すことはせずに運用をしています。