モバイルファーストに向けて速度改善、CSS&JavaScript最適化への道| オーシャン戦記17

オーシャン戦記17

モバイルユーザーに向けて表示速度最適化へ

オーシャン戦記とは
独自ドメインブログの運営記録を物語風に書くシリーズです。
ネットの海で悪戦苦闘する話なので戦記としてます。
2021年4月11日。ブログ開設から約3年3ヶ月!
トータル記事数268!(うち漫画記事は176)

ブログ記事の投稿はしばらくお休みしていたけど、内部的な部分は手を加えていました。

恐怖のコアアップデート、コンテンツは何も対策をしない選択をした| オーシャン戦記15

以前、ブログの表示速度が遅い認定を受けて改善を試みて見事に失敗してしまった。
ページ速度
りりこ
ページ速度一桁、最低評価です
クローラー
このページはユーザーに優しくないです 改善しましょう

私の使用しているテーマ『スワロー』は機能を最低限に絞ったシンプルが売りのテーマ。
それをあれこれカスタマイズしてしまったので、重くなってしまっている。

りりこ
放置しているのも良くないし、やるだけやってみよう

ページ速度改善(レンダリングを妨げるリソースの除外)

PageSpeed Insights
ページ速度
URLを入力するとモバイルとパソコン、それぞれに速度と改善項目が表示されます。
モバイルクローラー
測定時のモバイルは3G回線を基準にしていたようです。

りりこ
モバクロちゃんはガラケーだったんだね

モバイル画面の改善項目。(速度が遅い原因)
改善項目
一番上の【レンダリングを妨げるリソースの除外】をなんとかしてみる。

言葉の意味すらよくわからないからググって解決策を漁りました。
『Autoptimize』ってプラグインをインストールして
設定変更
フォント部分の設定を変えたら改善ができました。
※グーグルフォントの削除を選択しても改善できたけど、グーグルフォントを使用していたので他を選びました。

これはあくまで、私の場合です。
WordPressは使っているテーマ、使ってるプラグインによって改善方法が変わってきます。

だからこれが正しいってわけじゃないです。
いろいろ試して正解を探すしかないです。

クローラー
いっぱいググってね

ページ速度改善(プラグイン削除)

モバイル速度

少し改善されたけど、まだ赤点ライン。
プラグインを消すことで改善するケースもあるので、とりあえずいろいろ消した。
《使っているプラグイン》

AddQuicktag タグ打ち簡略化で便利。
All in One SEO いろいろと便利な奴。
Autoptimize プログラム最適化(今回追加した)
Classic Editor 昔の投稿エディターに戻すやつ。
BackWPup ブログデータのバックアップ。
Contact Form 7 問い合わせフォーム。
EWWW Image Optimizer 画像の圧縮、画像最適化。
Jetpack by WordPress.com いろいろと便利な奴。
SiteGuard WP Plugin セキュリティを向上。

うちのような画像コンテンツがメインのブログは『EWWW Image Optimizer』とは相性抜群。
速度改善の為にセキュリティを疎かにするわけにはいかないので、セキュリティ系も残す。
『All in One SEO』を消してしまうとnoindexの設定が全て消えてしまうので外せない。
『Classic Editor』『AddQuicktag』は記事を書くうえで必要なので残したい。
消去法で『Jetpack』を削除してみた。
モバイル速度

りりこ
しかし何も変化が無かった
重いと言われている『Jetpack』もサイトアクセラレーターなどのページ高速化機能があるので、プラマイゼロになったのかもしれない。

なので、ブラグインは元に戻しました。

プラグインの残骸

ワードプレスのプラグインは削除をしてもデータの残骸が残っていることがある。
過去のあれやこれやプラグインを試してた人は残骸データが溜まって重くなっているケースがあるらしい。

そのデータを消してくれるプラグインが『Clean Options』

テーブル削除
こんな感じで凄い数のデータが出てきます。
※プラグイン設定以外にも一般設定やウィジェット設定なども含まれます。

りりこ
英語ワカリマセン
よくわからないので適当に消しました。(バックアップ取ってからやってください)
りりこ
疑わしきは滅せよ!!
※インストールしているプラグインを消すと設定が消えます

データの判断基準。

よくわからないデータがビッシリ並んでいるように見えるけど、よく見ると現在使っているプラグインデータと同じ名前のデータが含まれています。
これらは使用中のプラグインであれば必要なデータです。

稀に過去に使用して削除したプラグインデータが残っているので消していきます。

よくわからないデータもバンバン消してしまったのでサイドバーにあった人気の記事や簡易プロフィールも一緒に消えてしまった。
改良?

プロフィールはみんなが入れてたから初期の方に設定したけど、自己紹介ページもあるし、いらないかもしれない。戻すかもしれないけど、しばらくはこれで行きます。
表示コンテンツが減ったことで、若干軽くなりました。

ページ速度改善(サーバー設定)

サーバー設定ページからPHP最新版へ切り替え。
うちはXサーバーを利用しています。
サーバー管理ページで各種切り替えが可能です。
PHP最新版
古いバージョンを使っているとサーバーの反応が悪くなるようです。
サーバー高速化
高速化設定もすべて変更。

Xアクセラレータ Ver.2を導入。
キャッシュもすべてON。

ページ速度改善(CSS&JavaScript最適化)

『Autoptimize』にはCSS&JavaScriptを最適化してくれる機能が備わっています。

ウェブページを読み込む際、最初に読み込む情報が多いほど重くなります。
ページを構成するフォントやカラー、レイアウトなど・・・
テキストや画像以外にも読み込まなくてはいけないものが多くあります。
全てページの構成するうえで大事です。

りりこ
レイアウトは凝れば凝るほど重くなる、バランスが難しい

このプラグインはそれらを最適化してくれたり、読み込みを遅延させて処理を軽くしてくれます。
設定画面

設定変更
クリティカルCSSを割り出してインライン化をしたらページ速度はさらに改善されました。
モバイル速度
しかし問題発生。
ページを読み込む一瞬だけレイアウトが崩れるようになりました。
読み込み中
パソコン版
読み込み中

りりこ
本当に一瞬、0.5秒ぐらい!!
速度も大事だけどデザインを犠牲にしたくない・・・。

そんなわけでデザインを優先させた。

改善後の速度

モバイル速度
改善項目
PCの速度

りりこ
現時点ではこれが限界でした
他にもいじったんだけど良い結果が出なかった。
バグったり、改悪してしまったり、悪戦苦闘してました。
コードエラー
変なエラーが出たこともあった。

りりこ
クローラーさんごめん、私の実力だとこれが限界だよ
クローラー
これでは赤点ですね
学生時代に赤点ばっかり取っていた私はブログでも赤点を取るのであった・・・
もっともっと勉強しないといけませんね。
りりこ
3年やってるけど、ワードプレスはわからないことだらけ
奥が深いから楽しいけどね

≪追記≫2021年5月10日↓

ページ速度改善(使用していない JavaScript の削除)

改善できる項目の上位にあった【使用していない JavaScript の削除】
ヘタにいじると取り返しがつかなくなるので放置していたけど、改善できました。
原因としては・・・

Contact Form 7 問い合わせフォーム。
使用しているプラグインに入ってたコレ。

問い合わせフォームを簡単に作れて、スパム防止機能もある便利なプラグインなんですが、困ったことに問い合わせフォームページ以外でもプラグラムが動いていたので重くなっていたようです。

りりこ
コメント欄の無いトップページや記事ページでもスパム対策がされていたのです

参考にしたページ
サポトピア様

functions.phpを編集する必要があるので、中級者向けです。

りりこ
functions.phpは間違ってしまうとブログそのものが壊れます
必ずバックアップをとってから編集してください

最終的な速度

モバイル速度
改善項目
【使用していない JavaScript の削除】が大幅に下がりました。
パソコン速度

りりこ
やっと赤点から抜け出せました
クローラー
モバイルも緑目指してもっと改善してください
りりこ
グーグルフォントが重いから点数伸びないってのもあるよ・・・
なんとかしてよクローラーさん・・・
クローラー
ロボだからわからない

課題が全て解決できたわけではありませんが、モバイルフレンドリー診断テストは合格です!
モバイルテスト
速度は50~60のオレンジライン。ようやく普通レベルになれました。

改善後、良好URLに全て改善されました!
良好URL

りりこ
モバイルファーストページになったと言ってもいいよね!
次回、コンテンツの一本化でコンテンツの質を高めていきます!
イラスト雑記

思想雑記・ブログ運営一覧