モバイルファーストに向けて表示速度最適化へ
ネットの海で悪戦苦闘する話なので戦記としてます。
トータル記事数268！(うち漫画記事は176)
ブログ記事の投稿はしばらくお休みしていたけど、内部的な部分は手を加えていました。
私の使用しているテーマ『スワロー』は機能を最低限に絞ったシンプルが売りのテーマ。
それをあれこれカスタマイズしてしまったので、重くなってしまっている。
ページ速度改善（レンダリングを妨げるリソースの除外）
PageSpeed Insights
URLを入力するとモバイルとパソコン、それぞれに速度と改善項目が表示されます。
測定時のモバイルは3G回線を基準にしていたようです。
モバイル画面の改善項目。（速度が遅い原因）
一番上の【レンダリングを妨げるリソースの除外】をなんとかしてみる。
言葉の意味すらよくわからないからググって解決策を漁りました。
『Autoptimize』ってプラグインをインストールして
フォント部分の設定を変えたら改善ができました。
※グーグルフォントの削除を選択しても改善できたけど、グーグルフォントを使用していたので他を選びました。
WordPressは使っているテーマ、使ってるプラグインによって改善方法が変わってきます。
だからこれが正しいってわけじゃないです。
いろいろ試して正解を探すしかないです。
ページ速度改善（プラグイン削除）
少し改善されたけど、まだ赤点ライン。
プラグインを消すことで改善するケースもあるので、とりあえずいろいろ消した。
《使っているプラグイン》
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』を削除してみた。
なので、ブラグインは元に戻しました。
プラグインの残骸
ワードプレスのプラグインは削除をしてもデータの残骸が残っていることがある。
過去のあれやこれやプラグインを試してた人は残骸データが溜まって重くなっているケースがあるらしい。
そのデータを消してくれるプラグインが『Clean Options』
こんな感じで凄い数のデータが出てきます。
※プラグイン設定以外にも一般設定やウィジェット設定なども含まれます。
よくわからないデータがビッシリ並んでいるように見えるけど、よく見ると現在使っているプラグインデータと同じ名前のデータが含まれています。
これらは使用中のプラグインであれば必要なデータです。
稀に過去に使用して削除したプラグインデータが残っているので消していきます。
よくわからないデータもバンバン消してしまったのでサイドバーにあった人気の記事や簡易プロフィールも一緒に消えてしまった。
プロフィールはみんなが入れてたから初期の方に設定したけど、自己紹介ページもあるし、いらないかもしれない。戻すかもしれないけど、しばらくはこれで行きます。
表示コンテンツが減ったことで、若干軽くなりました。
ページ速度改善（サーバー設定）
サーバー設定ページからPHP最新版へ切り替え。
うちはXサーバーを利用しています。
サーバー管理ページで各種切り替えが可能です。
古いバージョンを使っているとサーバーの反応が悪くなるようです。
高速化設定もすべて変更。
キャッシュもすべてON。
ページ速度改善（CSS＆JavaScript最適化）
『Autoptimize』にはCSS＆JavaScriptを最適化してくれる機能が備わっています。
ウェブページを読み込む際、最初に読み込む情報が多いほど重くなります。
ページを構成するフォントやカラー、レイアウトなど･･･
テキストや画像以外にも読み込まなくてはいけないものが多くあります。
全てページの構成するうえで大事です。
このプラグインはそれらを最適化してくれたり、読み込みを遅延させて処理を軽くしてくれます。
クリティカルCSSを割り出してインライン化をしたらページ速度はさらに改善されました。
しかし問題発生。
ページを読み込む一瞬だけレイアウトが崩れるようになりました。
パソコン版
そんなわけでデザインを優先させた。
改善後の速度
バグったり、改悪してしまったり、悪戦苦闘してました。
変なエラーが出たこともあった。
奥が深いから楽しいけどね
≪追記≫2021年5月10日↓
ページ速度改善（使用していない JavaScript の削除）
改善できる項目の上位にあった【使用していない JavaScript の削除】
ヘタにいじると取り返しがつかなくなるので放置していたけど、改善できました。
原因としては･･･
問い合わせフォームを簡単に作れて、スパム防止機能もある便利なプラグインなんですが、困ったことに問い合わせフォームページ以外でもプラグラムが動いていたので重くなっていたようです。
参考にしたページ
サポトピア様
functions.phpを編集する必要があるので、中級者向けです。
必ずバックアップをとってから編集してください
最終的な速度
【使用していない JavaScript の削除】が大幅に下がりました。
なんとかしてよクローラーさん･･･
課題が全て解決できたわけではありませんが、モバイルフレンドリー診断テストは合格です！
速度は50～60のオレンジライン。ようやく普通レベルになれました。
改善後、良好URLに全て改善されました！
