当サイト「ドロイドブログ」を運営しているゆーちゃまさんです。
ブログを運営しているとSEO対策が必要になってきますね。
そのSEO対策の１つとして、サイトの表示スピードをGoogleさんは重要視しています。
Page Speed Insightsで自分のサイトスピードを測ったら、モバイルが30で赤い！
まずい、なんとか対応しなきゃ…
でも・・・
- モバイルスピード上げるには何すればよいの？
- 画像圧縮するくらいしか思い浮かばない。。
という方、とっても多いと思います。
僕も測ったら、はじめ33点で真っ赤。
でもどうすれば早く出来るのか、思いつくのは画像の圧縮くらいで全然わかりませんでした…
そんな33点だった僕が、実際に70点にした方法を、初心者にもわかりやすく解説します。
当時の僕と同じように
- モバイルスピードを速くするやり方教えて！
- なるべく簡単にできる方法ないかな？
と思っている方！
３つの方法の中で、出来るものだけやってみるだけでも成果は出ます！
いちど、目を通してもらえるとうれしいです。
Page Speed Insights で計測
まずはご自分のサイトスピードを、「Page Speed Insights」で計測しましょう。
⇒ ⇒ ⇒ Page Speed Insights
画面上部のテキストボックスに自分のサイトのURLを貼り付けて、「分析」ボタンを押すだけ！
そうすると以下の様に、モバイルとパソコンそれぞれのスコアが表示されます。
上がパソコン、下がモバイルのスコアです
パソコンのスコアはあげやすいのですが、モバイルのスコアをあげるのが大変。。
モバイルのスコアをせめて50以上の黄色にしておきたい所です。
使用している画像を圧縮
まずは、使用している画像は全て圧縮しましょう。
画像サイズが大きいと、その画像を表示するのに時間がかかります。
特にアイキャッチ画像はページの先頭に表示されるので、アイキャッチが大きいと初期表示に時間がかかってしまいます。
EWWW Image Optimizer：画像圧縮プラグインを導入する
このプラグインを利用することで、メディアライブラリに入れた画像を自動で圧縮してくれます。
とても便利ですので導入していない方は導入するのがおすすめ！
EWWW Image Optimizer の設定
メタデータを削除
「メタデータを削除」にチェックをいれます。
これは、写真に含まれる位置情報などのデータを削除するという意味です。
必ずチェックを入れておきましょう。
遅延読み込み
画像表示を遅延読み込みすることで、サイト表示をスピードアップすることが出来ます。
他のプラグインなどで、設定している場合はチェックする必要はありません。
もし、特に遅延設定をほかでしていない場合はチェックを入れましょう。
画像のリサイズ
テーマによってサイトの最大幅ピクセルは違うのですが、ここで画像の最大幅を設定しておきましょう。
理由は最大幅以上の画像だとしても、それ以上は表示する事ができないのでその分のサイズが大きくなってもったいないです。
- cocoon：800
- the thor：670
- JIN：700
- swell：796
利用しているテーマの幅を設定しましょう。
僕はcocoonなので800
WebP の配信方法
webpとは、圧縮率の高い非可逆圧縮といわれるものです。
要は、pngやjpgの形式よりも圧縮率が高いんですね。
なので、この設定は必須です。
設定前は上の画像の様に、PNGと赤く表示されています。
また、下のコードの様なものが記載されているかと思います。
1 2 3 4 5 6 7 8 9 10 11 12 | <IfModulemod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{REQUEST_FILENAME} (.*).(jpe?g|png|gif)$ RewriteCond %{REQUEST_FILENAME}.webp -f RewriteCond %{QUERY_STRING} !type=original RewriteRule (.+).(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L] </IfModule> <IfModulemod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> AddTypeimage/webp.webp |
手動で設定する場合、上記コードをコピーして「htaccess」というファイルに貼り付けます。
「リライトルールを挿入する」のボタンを押せば、自動で書き込んでくれます。
楽なので、ボタンを押しましょう。
成功すると、PNGの赤い表示が緑のWEBPに変わります！
リサイズタブの設定
基本タブから、「リサイズ」タブを選択。
「既存の画像をリサイズ」にチェックを入れる。
「他の画像をリサイズ」にもチェックを入れます。
この他の画像をリサイズは、メディアライブラリ以外の画像を圧縮するので、チェックを入れない方が安全です。
最後に「変更を保存」ボタンで、設定変更を保存するのを忘れずに！
一括最適化
Ewww Image Optimizerプラグインを導入する前の画像を一括で圧縮することができます。
メディア -> 一括最適化 をクリックします。
いちばん下のボタン「最適化されていない画像をスキャンする」ボタンを押します！
「XX点の画像を最適化」のボタンが表示されるので、クリックするとすべての画像が圧縮されます！
squoosh
少し前まで、tiny ping で圧縮していたんですが、今はこちらの方がおすすめ！
画像をドラッグ・ドロップするだけ。圧縮率も単純に変えれます。枚数制限もなし。ここで圧縮してからメディアライブラリーに入れましょう！
tiny ping
Ewww Image Optimizerのみでも充分に圧縮できるのですが「tiny ping」というサイトの圧縮率の方が高いです。
使用する画像は先にこのtiny pingで圧縮したものをメディアライブラリに登録するのがおススメです。
⇒ ⇒ ⇒ tiny ping
使い方は簡単！圧縮したい画像をドラッグ・ドロップするだけ！圧縮完了後に「down load」ボタンが表示されるので、クリックで保存！
Autoptimize：リソース軽量・最適化プラグインの導入
css・html・javascriptなどのソースの必要のない改行などを取り除いて最適化してくれるプラグインです。
まずは上記Autoptimizeをインストールして、有効化しましょう
javascriptオプション
設定 -> Autoptimize から設定画面を開きます。
JS、CSS & HTML タブが選択された状態の上記画面が開きます
JavaScriptコードの最適化にチェックをいれます。
そうすると、下にある項目が選択出来るようになります。
JSファイルを連結するにチェックを入れます。
※ここで注意ですが、他のプラグインなどで同じような設定をしている場合
サイトがエラーで表示されなくなる可能性があります
ここで一旦、１番下にある「変更を保存してキャッシュを削除」ボタンで保存。
この状態で、自分のサイトをブラウザで表示してみてください。もしエラーで表示されていない場合は、「JSファイルを連結する」のチェックを外して変更を保存すればエラーは出なくなります。
エラーが出ない場合はこれで、Javascriptの設定は完了です。
僕の場合はエラーが表示されました。。
エラー表示された方は以下の設定にしましょう。
JSファイルを連結する のチェックを外す
連結しないで遅延にチェックを入れる
これで完了です＾＾
CSSオプション
- CSS コードを最適化
- CSS ファイルを連結する
- インラインの CSS も連結
上記３点にチェックを入れます。
すべての CSS をインライン化はあまり変わらないので、チェックを入れても入れなくても大丈夫です。
HTMLオプション
HTMLコードを最適化にチェックを入れて完了です！
最後に「変更の保存とキャッシュの削除」ボタンを押して、サイトが正しく表示されることを確認しておきましょう。
プラグイン Flying Scriptsの導入
Page Speed Insights のスピードで大きな問題になるのがJavascript。
とくにアドセンスはそのJavascriptを利用していて、とっても遅くなります。
このプラグインを利用して、指定したjavascriptの実行を遅らせることでページ表示を早めることができます＾＾
まずは上記プラグイン「Flying Scripts」をインストールして、有効にしましょう
設定で遅延させるスクリプトを入力する
設定 -> Flying Scripts で設定画面を開きます。
「Include Keywords」のテキストエリアに、遅延させたいスクリプト名を貼り付けます。
スクリプト名は、Page Speed Insights で表示された、「使用していないJavaScriptの削減」を展開して表示されたスクリプト名をコピーして貼り付ければOK
なんだか、良く分からない。。という方は以下をそのままコピーして貼り付ければOKです！！！他にもあれば追加してください。
1 2 3 4 5 6 7 8 9 10 11 | flying-pages.min.js adsbygoogle.js vcdal.js stickyfill.min.js jquery-migrate.min.js jquery.min.js highlight.min.js javascript.js show_ads_impl_fy2019.js 1.12.4/jquery.min.js js/adsbygoogle.js |
「Time Out」のセレクトボックスで、遅延させる秒数を選択します。
僕は２秒を選択していますが、２秒～５秒くらいで様子を見るのがよいです。
アドセンス狩り対策のプラグイン、Code Snippetsが遅い
アドセンス狩り対策のプラグイン「AdSense Invalid Click Protector」を導入している方、沢山いらっしゃると思います。
そして、一緒に使用するプラグイン「Code Snippets」というプラグイン。
これはJavascriptを利用して不正クリックを検知するものです。
このスクリプト、遅延設定しても、自分で遅延コードを書いてみても僕の環境では一向に早くなりませんでした。。
この 「Code Snippets」 のプラグインを無効にすると 20～30 のスコアが上がります。
もし、今回の対応をいれても全然早くならない！という方で、「Code Snippets」を利用している場合は、一度「Code Snippets」を無効にして計測してみる。
そして２、30スコアが上がれば「Code Snippets」が原因です。
アドセンス狩りも困りますが、PVが少ない内は「Code Snippets」を外して、SEOでまずは評価されることを優先したほうが良いかもしれません。
まとめ
- 画像の圧縮
- javascript、css、html の最適化
- javascriptの遅延実行
この３点をプラグインを利用して設定するだけで、かなりの改善が期待できます＾＾
また、このページ表示スピードに関してはgoogleさんも優先度高くしてチェックしています。
サチコの項目に「モバイルユーザビリティー」の項目があるのが、それを物語っていますね。
まずは出来るところから改善に取り組みましょう！
こちらの記事もどうぞ＾＾
⇒ ⇒ ⇒ 【画像サイトマップ image-sitemap】作成方法を徹底解説。誰でも簡単に作れます！画像をgoogleに認識させよう！
⇒ ⇒ ⇒ 【windows仮想デスクトップおすすめ】作業効率UP！使い方は3ステップで簡単！
⇒ ⇒ ⇒ 【厳選 chrome ブラウザ】簡単に作業時短！google chrome便利機能とショートカット
⇒ ⇒ ⇒ 【java map】Mapの使い方、使いどころを実例で解説
コメント