サイトの表示速度が遅くて困っていませんか？
サイトの表示速度はSEOにも大きく関わっていると聞くけど、具体的にどうしたら良いのか分らない方に向けて記事を書いています。
私がサイトの表示速度29点から98点に爆上げした具体的方法を共有していきます。
メモ
サイト表示速度29点っていうのはかなりヤバいです。
大半の人が表示される前に諦めて戻るボタンを押すレベルと認識しています。
こんな人におすすめ▽
- サイトの表示速度が遅くて困っている
- 具体的に何を改善したら良いのか分らない
- 手軽に真似出来る方法を知りたい
では、早速見ていきましょう。
＞＞cocoonからAFFINGER5（WING）にテーマ移行する時の注意点！
＞＞ブログ初心者が登録するべきASP（アフィリエイト）3選を解説
目次
私のサイト表示速度が激おそになった理由
私事ですが、最近ワードプレスのテーマを変更しました。
メモ
変更前：無料テーマのcocoon
現在 ：有料テーマのAFFINGER
cocoonの時はPC、モバイル共に表示速度は良好だったのですが、テーマを変えたら激おそになりました。
テーマ移行の注意点については、以下の記事でまとめています。
テーマ変更前に参考にしてください。
-
cocoonからAFFINGER5（WING）にテーマ移行する時の注意点！
続きを見る
サイト表示速度改善前の数値
改善対応する前の数値を共有しておきます。
PC▽
モバイル▽
これはかなり遅いです。
サイト速度を測ったことが無い方はこの記事を読む前に、一度測定してみましょう。
私はpagespeed insightsというサイトを使って計測しています。
サイトの表示速度を爆上げした方法5選！
では、具体的に何をしてどれだけ上がったのか見ていきましょう。
ポイント
- 画像のサイズ等見直し
- キャッシュプラグインを導入
- CSS及びHTMLの見直し
- javaScriptの読み込みタイミングの見直し
- カルーセルの除去
以上の5つです！
では、詳細を見ていきましょう。
画像サイズ、形式の見直し
ポイント
- 画像は全て圧縮されているか？
- ファイル形式はJPEG及びWEBPになっているか？
以上の2点に着目し見直しました。
画像をPNGで扱っている方は要注意です。
ワードプレスの場合は「EWWW Image Optimizer」というプラグインを使用する事で、画像の圧縮及びファイル形式の変換まで出来ます。
まだインストールしてない方はインストールして圧縮しましょう。
この作業でページスピードはどう変化したのか？
PC▽
モバイル▽
なんとびっくり、ほとんど改善されないどころか下がっている！？
この理由としては、以下の二つ
注意ポイント
- 測定タイミングで誤差が発生する
- もともとJPEGで圧縮していたのでさらなる改善が見込めない
つまり、常日頃から画像ファイルに気を配っている方はこの手順は飛ばしても無なさそうです。
キャッシュプラグインの導入
続いてはキャッシュプラグインの導入です。
キャッシュとは、一度アクセスされたページで行った処理をキャッシュとしてそのまま保持する機能です。
キャッシュを残すことで、ページが表示される際にサーバー側の処理が少なくなり、表示速度が上がるというカラクリです。
使用したプラグインは「WP Super Cache」です。
こちらのプラグインをインストールして、設定でキャッシュを有効にする設定にチェックを付けるだけです。
この作業でページスピードはどう変化したのか？
PC▽
モバイル▽
気持ち程度の改善と言うことですね。
ただ、サイトスピードを上げるのは小さいことの積み重ねですので侮れません。
CSS及びHTMLの見直し
続いては、CSS及びHTMLの見直しです。
HTML/CSSのファイルの容量が重いと表示スピードが遅くなります。
また、読み込むファイル数が多いと、その分だけ取得に時間がかかります。
ですので、そのソースコードそのものを縮小してしまおう！という試みです。
こう書くと難しそうに聞こえますが、ソースコードを変更する必要はありませんので安心してください。
今回使用したプラグインは「Autoptimize」です。
複数のCSSファイルを１つに結合し、余白や改行を消してファイルサイズを軽くしてくれるプラグインです。
チェックするだけで簡単にソースを圧縮してくれます。
この作業でページスピードはどう変化したのか？
PC▽
モバイル▽
この対応では10点以上の点数アップする結果となりました！
サイト速度に悩んでいる方は対応必須と言えますね！
javaScriptの読み込みタイミングの見直し
こちらは、ブログはheadタグ内にあるソースから実行されます。
headタグ内で呼び出される処理を少なくすればするほど、表示速度が上がると考えて問題ありません。
このような理由から、headタグ内のjavaScriptの処理をフッターに移してしまおう！という作戦です。
今回使用したプラグインは「Scripts-To-Footer」です。
こちらはインストールして有効化するだけで問題なく動作します。
この作業でページスピードはどう変化したのか？
PC▽
モバイル▽
PCは10点近くあげる事が出来ました。
モバイルは安定しませんね。
カルーセルの除去（サイトレイアウトの見直し）
内部的な処理は一通り対応したモノの・・・。
表示速度がイマイチ改善されていない。（とくにモバイル）
という事で、サイト構成をシンプルにしてしまう作戦に変更しました。
今までサイトトップページ
メモ
- ヘッダーに最新記事カルーセル
- カテゴリ毎に記事一覧カルーセル
上記の用に、カルーセルを多用したトップページにしていました。
それを今回は、ヘッダーのカルーセルを残して、ブログカード型に差し替えました。
結果▽
PC▽
モバイル▽
PCでは超高速といっても過言では無い、98点を出せました。
モバイルでも及第点といったところの70点台を出せています。
カルーセルがこんなに処理が重たいなんて想像していませんでした。
結論 レイアウトは詰め込みすぎない
今回は様々な対応をした中で、結局はサイトをシンプルにすることが一番効果的と言うことが分ったと思います。
カルーセルとかオシャレでついつい使いたくなってしまいますよね？
でも結局スマホから見たら2記事くらいしか表示できません。
ならカルーセルじゃ無くて良いのでは・・・？
私はヘッダーのカルーセルのみ残しておりますが、そのうち撤廃するかも知れません。
ポイント
シンプル イズ ベスト！！
私がcocoonからAFFINGERに変えて困ったことはこちらにまとめています。▽
＞＞cocoonからAFFINGER5（WING）にテーマ移行する時の注意点！
他にもブログ運営お役立ち記事が多数有ります。