【pagespeed insights 改善】2022年度版 モバイルスピードを速くするためにやった3つのこと

サイトのページ表示スピードを改善する3つの方法PG・PC効率UP・ブログ
サイトのページ表示スピードを改善する3つの方法

当サイト「ドロイドブログ」を運営しているゆーちゃまさんです。

ブログを運営しているとSEO対策が必要になってきますね。

そのSEO対策の1つとして、サイトの表示スピードをGoogleさんは重要視しています。

Page Speed Insightsで自分のサイトスピードを測ったら、モバイルが30で赤い!
まずい、なんとか対応しなきゃ…

でも・・・

  • モバイルスピード上げるには何すればよいの?
  • 画像圧縮するくらいしか思い浮かばない。。

という方、とっても多いと思います。

僕も測ったら、はじめ33点で真っ赤
でもどうすれば早く出来るのか、思いつくのは画像の圧縮くらいで全然わかりませんでした…

そんな33点だった僕が、実際に70点にした方法を、初心者にもわかりやすく解説します。

当時の僕と同じように

  • モバイルスピードを速くするやり方教えて!
  • なるべく簡単にできる方法ないかな?

と思っている方!

3つの方法の中で、出来るものだけやってみるだけでも成果は出ます!

いちど、目を通してもらえるとうれしいです。

スポンサーリンク

Page Speed Insights で計測

まずはご自分のサイトスピードを、「Page Speed Insights」で計測しましょう。

⇒ ⇒ ⇒ Page Speed Insights

画面上部のテキストボックスに自分のサイトのURLを貼り付けて、「分析」ボタンを押すだけ!

そうすると以下の様に、モバイルとパソコンそれぞれのスコアが表示されます。

pagespeed insights パソコンのスコア
pagespeed insights パソコンのスコア
ゆーちゃま
ゆーちゃま

上がパソコン、下がモバイルのスコアです

pagespeed insights モバイルのスコア
pagespeed insights モバイルのスコア

パソコンのスコアはあげやすいのですが、モバイルのスコアをあげるのが大変。。

モバイルのスコアをせめて50以上の黄色にしておきたい所です。

スポンサーリンク

使用している画像を圧縮

まずは、使用している画像は全て圧縮しましょう。

画像サイズが大きいと、その画像を表示するのに時間がかかります。

ゆーちゃま
ゆーちゃま

特にアイキャッチ画像はページの先頭に表示されるので、アイキャッチが大きいと初期表示に時間がかかってしまいます。

EWWW Image Optimizer:画像圧縮プラグインを導入する

Ewww Image Optimizer
プラグインEwww Image Optimizer

このプラグインを利用することで、メディアライブラリに入れた画像を自動で圧縮してくれます。
とても便利ですので導入していない方は導入するのがおすすめ!

EWWW Image Optimizer の設定

ewww-image-optimizer-setting
ewww-image-optimizer設定画面
メタデータを削除

「メタデータを削除」にチェックをいれます。

これは、写真に含まれる位置情報などのデータを削除するという意味です。

必ずチェックを入れておきましょう。

遅延読み込み

画像表示を遅延読み込みすることで、サイト表示をスピードアップすることが出来ます。

他のプラグインなどで、設定している場合はチェックする必要はありません。

もし、特に遅延設定をほかでしていない場合はチェックを入れましょう。

画像のリサイズ

テーマによってサイトの最大幅ピクセルは違うのですが、ここで画像の最大幅を設定しておきましょう。
理由は最大幅以上の画像だとしても、それ以上は表示する事ができないのでその分のサイズが大きくなってもったいないです。

  • cocoon:800
  • the thor:670
  • JIN:700
  • swell:796
ゆーちゃま
ゆーちゃま

利用しているテーマの幅を設定しましょう。

僕はcocoonなので800

WebP の配信方法

webpとは、圧縮率の高い非可逆圧縮といわれるものです。
要は、pngやjpgの形式よりも圧縮率が高いんですね。

なので、この設定は必須です。

ewww-image-optimizer webp設定前
ewww-image-optimizer webp設定前

設定前は上の画像の様に、PNGと赤く表示されています。
また、下のコードの様なものが記載されているかと思います。

手動で設定する場合、上記コードをコピーして「htaccess」というファイルに貼り付けます。

リライトルールを挿入する」のボタンを押せば、自動で書き込んでくれます。
楽なので、ボタンを押しましょう。

ゆーちゃま
ゆーちゃま

成功すると、PNGの赤い表示が緑のWEBPに変わります!

リサイズタブの設定

ewww-image-optimizer リサイズタブ設定
ewww-image-optimizer リサイズタブ設定

基本タブから、「リサイズ」タブを選択。

「既存の画像をリサイズ」にチェックを入れる。

「他の画像をリサイズ」にもチェックを入れます

この他の画像をリサイズは、メディアライブラリ以外の画像を圧縮するので、チェックを入れない方が安全です。

ゆーちゃま
ゆーちゃま

最後に「変更を保存」ボタンで、設定変更を保存するのを忘れずに!

一括最適化

Ewww Image Optimizerプラグインを導入する前の画像を一括で圧縮することができます。

画像の一括最適化
画像の一括最適化

メディア -> 一括最適化 をクリックします。

ゆーちゃま
ゆーちゃま

いちばん下のボタン「最適化されていない画像をスキャンする」ボタンを押します!

一括最適化、最適化ボタン
一括最適化、最適化ボタン
ゆーちゃま
ゆーちゃま

「XX点の画像を最適化」のボタンが表示されるので、クリックするとすべての画像が圧縮されます!

squoosh

少し前まで、tiny ping で圧縮していたんですが、今はこちらの方がおすすめ!

>>> squoosh

ゆーちゃま
ゆーちゃま

画像をドラッグ・ドロップするだけ。圧縮率も単純に変えれます。枚数制限もなし。ここで圧縮してからメディアライブラリーに入れましょう!

tiny ping

Ewww Image Optimizerのみでも充分に圧縮できるのですが「tiny ping」というサイトの圧縮率の方が高いです。

使用する画像は先にこのtiny pingで圧縮したものをメディアライブラリに登録するのがおススメです。

tiny-ping
tiny-ping

⇒ ⇒ ⇒ tiny ping

ゆーちゃま
ゆーちゃま

使い方は簡単!圧縮したい画像をドラッグ・ドロップするだけ!圧縮完了後に「down load」ボタンが表示されるので、クリックで保存!

Autoptimize:リソース軽量・最適化プラグインの導入

ゆーちゃま
ゆーちゃま

css・html・javascriptなどのソースの必要のない改行などを取り除いて最適化してくれるプラグインです。

Autoptimize
プラグインAutoptimize
ゆーちゃま
ゆーちゃま

まずは上記Autoptimizeをインストールして、有効化しましょう

javascriptオプション

設定 -> Autoptimize から設定画面を開きます。

Autoptimize javascript設定
Autoptimize javascript設定
ゆーちゃま
ゆーちゃま

JS、CSS & HTML タブが選択された状態の上記画面が開きます

JavaScriptコードの最適化にチェックをいれます。

そうすると、下にある項目が選択出来るようになります。

JSファイルを連結するにチェックを入れます。
※ここで注意ですが、他のプラグインなどで同じような設定をしている場合
サイトがエラーで表示されなくなる可能性があります

ここで一旦、1番下にある「変更を保存してキャッシュを削除」ボタンで保存。

ゆーちゃま
ゆーちゃま

この状態で、自分のサイトをブラウザで表示してみてください。もしエラーで表示されていない場合は、「JSファイルを連結する」のチェックを外して変更を保存すればエラーは出なくなります。

エラーが出ない場合はこれで、Javascriptの設定は完了です。

僕の場合はエラーが表示されました。。

エラー表示された方は以下の設定にしましょう。

JSファイルを連結する のチェックを外す

連結しないで遅延にチェックを入れる

これで完了です^^

CSSオプション

Autoptimize css設定
Autoptimize css設定
  • CSS コードを最適化
  • CSS ファイルを連結する
  • インラインの CSS も連結

上記3点にチェックを入れます。

すべての CSS をインライン化はあまり変わらないので、チェックを入れても入れなくても大丈夫です。

HTMLオプション

Autoptimize html設定
Autoptimize html設定

HTMLコードを最適化にチェックを入れて完了です!

ゆーちゃま
ゆーちゃま

最後に「変更の保存とキャッシュの削除」ボタンを押して、サイトが正しく表示されることを確認しておきましょう。

プラグイン Flying Scriptsの導入

Page Speed Insights のスピードで大きな問題になるのがJavascript。

とくにアドセンスはそのJavascriptを利用していて、とっても遅くなります。

このプラグインを利用して、指定したjavascriptの実行を遅らせることでページ表示を早めることができます^^

プラグインflying script
プラグインflying script
ゆーちゃま
ゆーちゃま

まずは上記プラグイン「Flying Scripts」をインストールして、有効にしましょう

設定で遅延させるスクリプトを入力する

プラグインflying script 設定
プラグインflying script 設定

設定 -> Flying Scripts で設定画面を開きます。

「Include Keywords」のテキストエリアに、遅延させたいスクリプト名を貼り付けます。

ゆーちゃま
ゆーちゃま

スクリプト名は、Page Speed Insights で表示された、「使用していないJavaScriptの削減」を展開して表示されたスクリプト名をコピーして貼り付ければOK

pagespeed insights 使用していないJavascriptの削減
pagespeed insights 使用していないJavascriptの削減
ゆーちゃま
ゆーちゃま

なんだか、良く分からない。。という方は以下をそのままコピーして貼り付ければOKです!!!他にもあれば追加してください。

「Time Out」のセレクトボックスで、遅延させる秒数を選択します。
僕は2秒を選択していますが、2秒~5秒くらいで様子を見るのがよいです。

アドセンス狩り対策のプラグイン、Code Snippetsが遅い

アドセンス狩り対策のプラグインAdSense Invalid Click Protectorを導入している方、沢山いらっしゃると思います。

そして、一緒に使用するプラグイン「Code Snippets」というプラグイン
これはJavascriptを利用して不正クリックを検知するものです。

このスクリプト、遅延設定しても、自分で遅延コードを書いてみても僕の環境では一向に早くなりませんでした。。

ゆーちゃま
ゆーちゃま

この 「Code Snippets」 のプラグインを無効にすると 20~30 のスコアが上がります。

もし、今回の対応をいれても全然早くならない!という方で、「Code Snippets」を利用している場合は、一度「Code Snippets」を無効にして計測してみる。

そして2、30スコアが上がれば「Code Snippets」が原因です。

アドセンス狩りも困りますが、PVが少ない内は「Code Snippets」を外して、SEOでまずは評価されることを優先したほうが良いかもしれません。

まとめ

  • 画像の圧縮
  • javascript、css、html の最適化
  • javascriptの遅延実行

この3点をプラグインを利用して設定するだけで、かなりの改善が期待できます^^

また、このページ表示スピードに関してはgoogleさんも優先度高くしてチェックしています。

サチコの項目に「モバイルユーザビリティー」の項目があるのが、それを物語っていますね。

まずは出来るところから改善に取り組みましょう!

こちらの記事もどうぞ^^

(Visited 500 times, 1 visits today)
スポンサーリンク
スポンサーリンク
スポンサーリンク
PG・PC効率UP・ブログブログ
ドロイドブログ

コメント

タイトルとURLをコピーしました