こんにちは。kumafumoです。
在宅ワーカーである私が、ブログを始めたのが、2020年4月1日。
それから約1年2か月が経とうとしています。
正直言ってPV数・収益…色々考えてみても、まだまだブログ初心者です。
ブログをやっていると、色々な問題に直面します。
その中でも、かなり悪戦苦闘ものの１つが、表示速度の改善です。
PageSpeed Insights が有名でブログをされている方ならご存じの方も多いと思いますが、
もしブログをされていて、やった事がないという方がもしいらっしゃったら、一度やってみてください。
今回は、ブログ初心者である私が悪戦苦闘してPageSpeed Insightsの点数を上げた道のりを簡単に書きたいと思います。
出来れば、英語がずらっと並んだコードみたいなのをいじらずに解決したいと思い、色々なブログを読み漁りました。
悪戦苦闘の結果、点数はここまで伸びた！
先ほどの点数が、
トップページ モバイル63点 パソコン96点
人気記事 モバイル76点 パソコン95点
色々ブログを拝見していると、パソコンの方が良い点数の傾向が高いようです。
もちろん、理由は私にはわかりません。
私が特に苦戦したのがモバイルの点数です。
え？90点台じゃないの？って思われるかもしれません。
ならないんです…。まだわからないところがあって…。
これでも上がったほうなんです…。
大体これを計測するのに、トップページ（このブログの場合：kumafumo.com)だけを計測される方が多いと思いますが、
中身の記事（全部調べるのは無理だと思うので、一番読まれている記事のURL）も調べた方がいいと思います。
私は、最初トップページばかりやっていて、よし、そこそこ高くなったぞ！と思ったのも束の間。
試しに中身もやってみたら、モバイルが30点台！
ヤバい…。でも自分のスマホで見る限りそんなに表示が遅いとは思えないのだが…。
しかし、GOOGLEがそう言ってくるなら仕方ありません。
色々たくさんの方のブログを読み漁り、色々試しました。
おかげで在宅ワークが全く手につかず(笑)
まず、このブログの
テーマ：THE THOR
サーバー：mixhost
※他の方のブログにも書かれていますが、テーマや入れているプラグインなどで、この通りやってもうまくいかない事があります。
「レンダリングを妨げるリソースの除外」に立ち向かう！
これ、ほとんどの人が直面していると思います。
レンダリングって何？リソースって何？
説明してある親切なブログを読んでも全くわからないバカな私…。
ちなみに、「THOR」で解決できますというブログも見つけたのですが、私のブログでは解決しませんでした…。
という事で、
恐らく皆さん知っているであろう、
「Autoptimize」
を入れてみました。
あと、同じ会社？が作っている
「Async JavaScript」
も一緒に入れるといいのだとか。
※「Autoptimize」の設定をされる方で、THORを入れられている方は、
「THOR」の「CSSの非同期読み込み設定」は、
重複するので、チェックは外しておいた方がいいそうです。
THORの機能より、Autoptimizeの機能の方が上と書いてらっしゃる方がいらっしゃいました。
本当かどうかはわかりませんが…。
先ほど、色々検索していたところ、設定の参考になるブログ様を発見しました。
私の説明よりもはるかに分かりやすいので、勝手ながら載せさせて頂きます。
尚、ラピン様の設定と私の設定が異なるところがございます。
「Async JavaScript」の設定も載せてらっしゃったので、併せて載せさせて頂きます。
WordPressプラグイン「Autoptimize」の使い方と設定方法について解説しています。Autoptimizeと…
WordPressプラグイン「Async JavaScript」の使い方と設定方法について解説しています。JavaScr…
私なりのポイントを追加で載せておきます。
画像の遅延は、専用のプラグインが存在します。
しかし、私の場合は、それを入れると画像が表示されなかったり、
そもそもインストール画面で、プラグインの最終更新がめちゃくちゃ前で不安になったので、
この「Autoptimize」の画像遅延設定を使用することにしました。
あと、「追加」のタグにて、
私は、「Googleフォントの削除」にチェックを入れました。
2つのプラグインを入れたものの、点数に物足りなさを感じた私は、まだ出来る事があるのではないか？と色々調べました。
「レンダリングを妨げるリソースの除外」もまだ残っているし、他にも項目があったからです。
「使用していないJavaScriptの削除」に立ち向かう！
「レンダリングを妨げるリソースの除外」と「使用していないJavaScript」共通のファイルが存在することを発見しました。
そこで、「使用していないJavaScript」をググって調べてみました。
そこで、見つけたのが、このブログ様でした！
Gooleの検索結果のランキングには、ページエクスペリエンスが影響します。上のページにもあるように、今年（2021年）5…
「Flying Scripts by WP Speed Matters」というプラグインに、
表示されている「js」がついているファイルをとりあえず記載。
そうすると、点数が爆上がり！
モバイルの点数が今まで見たことの無い高点数に！！
最後に…
ブログを始めて早1年数か月。
周りにブログをやっている人がおらず、わからない時はひたすらググる日々…。
まだまだ分からないことだらけですが、
今回は、私みたいにブログ初心者で分からないと悩んでいる人の為に備忘録的に書いてみました。
最後までお読みいただきありがとうございました。
2021/5/27追記：更なる高得点が出た！
色々また調べていたところ、出会ったブログでAutoptimizeの設定を試したところ、
更に高得点が出ました！
参考にさせて頂いたブログは、こちらです。
Autoptimizeは、WordPressのソースコードを圧縮して高速化するプラグインです。HTML・CSS・Java…
個人的に思うのは、人によって、入れているテーマやサーバーなど色々な条件下で、どの設定が正解ってのは無いと思います。
色々なブログを参考にさせて頂いて、人によって設定方法が違うからです。
皆さんも色々な設定を試してみて下さい！
その中で、私のこの記事が少しでも役に立てば幸いです。（ほとんど他人のブログ任せですが…）