ブログのこと

モバイルだけ遅いPageSpeedInsights 【23→81】〜初心者でも改善できたこと〜

お読みいただきありがとうございます。

blue+greenです。

2021年に入り、放置していたブログを再開していますが、その中で見つけたPage Speed Insights の問題

よくわからないまま分析してもらったモバイルの結果は「23」
(初めはこのことをブログに書く日がくるとは思ってもいなかったのでスクショしていませんでした…)

この時点では内容やこの結果が何を表してどういう影響を及ぼすのか、よくわかっていないものの、改善しなくてはいけない、ということはよくわかり、そこから検索しては修正、ということを繰り返してきました。

わたしはブログやPCに関して初心者で、プログラミングというのも学生のときに少し習ったような?レベルで知識ゼロなので、なかなか大変な過程だったのですが、結論から言うと、修正を初めて3日後には「81」まで改善することができました

昨年の一時期ブログを放置していて、今年になってまたブログや関連サイト(サーチコンソールやアナリティクス)をチェックするようになったのですが、その中で気づいたのが、放置していた時期よりも更新している最近の方がPV数が減っている、ということ。
多分、30%くらいは減っていて、なぜかな、と思っていたのですが、原因の1つはこれだったのかな、どうかな。。

と、前置きが長くなってきましたが、ここからはWordpressのテーマの1つのJINユーザーのわたしが実際にやったことで効果があったもの、多分効果があったかな、ということ、逆にここには手を出さなくてよかったな、これは理解できなかった(未だにできていないけれど、スコアは改善したよ)ということなどをまとめていきます

わたしもいろいろと試す中でたくさんの方の記事に助けていただいたので、わたしと同じような初心者の方のどなたかの参考になれば嬉しく思います。

あくまでも、初心者のやったことであることを大前提にしてもらって、これをやれば効果がありますよ!と保証するものでは全くないので、あくまでも一例として参考程度にしていただけたら…幸いです。

 

使用していないCSSを削除してください、という言葉にとらわれすぎていた

どこから修正していくか?

PSIでの結果を受けて、どこから修正していくか、ということなんですが、PSIの結果でこんな画面が出てくると思います。

わたしの場合も上のように改善できる項目が並んでいましたが、順番としては一番上に【使用していないCSSを削除してください】、次に【使用していないJavaScriptの削除】、そして下に続く、という状況でした。

CSSやJavaScriptって何?どうやって削除するの?とどこから手を付けてよいのかわからず、とりあえず、CSS、JavaScript、の単語を検索するのですが、検索しても内容が難しくて、何をどうしたらいいのかわからず、「使用していないCSSを削除してください」と検索してF12を押して、コードを確かめたりもしたものの、やっぱり何をしたらいいのかわからない。

考え方を変えて、検索ワードを変えてみる

上に書いたように、専門用語を検索しても初心者のわたしでは対処法がわからず、じゃあどうするか、と考えたときに、このブログをどうしたいのか、と考えると、「様々な要因で表示が遅くなってるんだから、この遅さをなんとかしないといけない」ということに気づき、検索ワードを変えてみました。
(PSIのスコアはあくまでも速度を改善する指標なのでブログの速さと必ずしも比例しているわけではないそうですが、ここまで速度が低いとなんとかしなくては、と思っていました)

そして、PSIの結果のページはモバイルとPCに分かれている、ということも、この頃ようやく気付き(汗)、PCよりモバイルが圧倒的にスコアが低い、ということも知ったので、「PSI モバイル 遅い」「PSI JIN 改善方法」などと検索ワードを変えていったのです。

【JINの場合】実際にやってスコアアップしたこと

1つ変更したら必ずモバイルとPCのブログを確認

これはまず初めに書いておきたいことです。

PSIスコアの改善のために、様々な変更を試すことになると思いますが、面倒でも1つ変更したら必ずモバイルとPCのブログ動作を確認するのは大切なことです。

わたしはこのことにしばらく気づかず、変更を続けていたのですが(汗)、あるときブログの表示が変になっていて焦りました…。

そのときも今回のことをブログに書く予定はなかったので、今まで何をしてきたのか特にメモすることもなくひたすら検索、変更をしていたので、その修正にまた時間を取られることになるのでした…。

なので、1つのプラグインを変更したら確認、1つのコードを追加したら(削除したら)確認、これはとっても大切なことです。

そして、バックアップも忘れずに…!

サイト基本設定でフォント・アニメーションの設定を確認

外観→カスタマイズ→サイト基本設定で「フォント設定」を確認します。

わたしの場合、 

そしてその下の「アニメーション機能」も有効から無効に変更しました。

スコアは微増程度で大きく変わることはありませんでしたが、フォントに関しては「使用していないCSSを削除してください」の詳細表示で出ていたURLが消えました。

画像圧縮

これは初めからEWWW Image Optimizerのプラグインは入っているので大丈夫かと思っていましたが、そうでもなさそうだったので、これからは更にTinyPNG(TinyPNG – Compress PNG images while preserving transparency)を使うことにしました。

また、メディアボタンにカーソルを合わせると出てくる一括最適化というものを初めて知り、最適化しました。
(その他にもSMASHなどの画像圧縮プラグインも試したりしましたが、最終的には削除しています)

わたしが現時点で入れているプラグインは後述しますね。

この結果、スコアは微増しました。

トップページの設定変更

ブログのトップページのデザインを変更してみました。

まず、トップページの記事一覧デザインはマガジンスタイル(2カラム)を使っていましたが、ベーシックスタイルの方が速度が上がるんじゃないか、という気がして(初めに表示される画像が少なくなるので)、ベーシックスタイルへ変更

外観→カスタマイズ→トップページ設定→トップページの記事一覧デザイン選択で変更できます。

そして、ピックアップメニューは記事タイプを使っていましたが、メニュータイプに変更

トップページ設定→ピックアップコンテンツのタイプ選択で変更できます。

ブログのデザインに関しては好みがあるので、ここまでやらなくてもよいかな、と思いつつも、このときのわたしはとにかくスコアが少しでも上がってくれれば、という一心だったので(何かにとりつかれたかのように夢中でした…(汗))変更してみましたが、これはこれで見やすくてよし、と今も気に入っているので、しばらくはこれでいこうかと思っています。

この結果もスコアは微増でした。

グーグルアドセンスの審査用のコードを消去

審査用コードを貼り付けたままなことをすっかり忘れていましたが、こちらも今回調べていく中で消去してみようと思い、消去。

審査用コードがどれでどこに貼ったのか、全く覚えていなかったので、wagashiさんのブログがとても参考になり助かりました。ありがとうございます。

スコアに関してはチェックしたかどうか…忘れてしまいました(汗)

All in One SEO Packを削除するのが一番効果あり

これ、すごく抵抗があったんです。

All in One SEO Packが不要、ということは調べているうちに何度か目にすることがあったのですが、ブログを作ったときに初めに入れたプラグインの1つでこれのおかげで助かった記憶が多々あったので、本当に消してしまっていいのかと。

でも、もし削除して不都合があるなら、もう一度入れて設定すればいい、と思って思い切って削除したら…スコアはグンとアップ

わたしには一番効果がありました。

これをやって初めて70点台が出て感動…(涙)
ここには書いていない、というか覚えていなくて書けないんですが、たくさんのことを試しても効果がないことが続いていたので、本当に嬉しかったのです。

でも、All in One SEO Packを削除して困ったことも多少あります。

All in One SEO Packを削除して困ったこと

①ブログ投稿のときのSEO設定(title設定、decription設定)が消えてしまった。
消えたことで、あれってAll in One SEO Packのおかげだったんだ、と知りました(汗)

②サイトマップでエラーが出た。
All in One SEO Packを削除した翌日にサーチコンソールでサイトマップのエラーが出ましたが、多分対処できたはず。

③サーチコンソールとアナリティクスへの紐づけがされているか、確認し、修正。

今のところこのくらいかな。
今後さらに出てこないことを祈ります。

インフィード広告はスマホではPSIスコアダウン

今回、とにかくあれこれと調べてブログと向き合う日々だったので(大げさ)、アドセンスを見直して、インフィード広告にチャレンジしてみることにしたのですが(広告を減らすのではなく増やそうとする矛盾…(苦笑))、チャレンジした結果、PCではスコアはさほど変わらず、スマホでは大幅ダウンだったので、とりあえずスマホでは外しています。

PSIスコアはいいや、という心境になったら設置するかもしれません(笑)

インフィード広告の載せ方でとっても参考になったのがJIN MANUALです。

現在使用しているプラグイン

今回、入れたり削除したり試行錯誤したプラグイン。

現在使用しているのは15個。……あれ、思っていたより多いな(汗)

・Akismet Anti-Spam (アンチスパム)
・Async JavaScript
・Autoptimize
・BackWPup
・Category Order and Taxonomy Terms Order
・Classic Editor
・Contact Form 7
・Customizer Export/Import
・Edit Author Slug
・EWWW Image Optimizer
・Google XML Sitemaps (All in One SEO Packを削除した後に入れました)
・Invisible reCaptcha
・Table of Contents Plus
・WP Super Cache
・WP-Optimize (使うときだけ有効化)

こんなに要るのかな、と書き出していて思い始めましたが、とりあえずスコアは改善したので今はこれでいいかな、と(汗)
この問題の修正でだいぶ疲労感が…。

 

今回、こんなにブログのあちこちのページを行ったり来たりしたのは、多分ブログ作成の時以来で、あのときは右も左もわからずやっていましたが、今回はじっくり取り組めたことで、ブログの設定を変える楽しさも多少わかってきたような気も…しなくもありません。

今見てみたスコアは74。

頑張ってよかった…!(自画自賛)

 

今回のブログはあくまでも一例、ということで読んでいただければと思います。

お読みいただきありがとうございました。