サイトの読み込みスピードを爆速にするためにやったこと3つ

サイトの速度を測れるPageSpeed Insightsに、何気なくこのサイトをぶち込んだところ、衝撃的な評価が表示された。

モバイル：20（0~100の範囲で評価、要はクソ雑魚ナメクジレベルの速度ってこと) 

「名前書いて2問目までは正解したから点数くれてやるよw」レベルの赤点だったので、このサイトをとことんまで見直した。今回はその話。

サイトの読み込みが遅かったらテーマ・画像を見直すこと

前提として、このサイトはワードプレスで作られています。

で、高速化の結論を述べると、先のサイトで評価がとことん低かったら「サイトのテーマ（デザイン）とアップロードしてる画像を全て直すこと」だ。

他にもこまいことやったので、まとめると以下3つ。

1. 画像の一括最適化
2. CSS、JSなどの最適化
3. テーマの変更

特に効果があったのは、やっぱりテーマの変更だと思う。

画像の最適化、テーマ変更の順で説明します。

ちなみに、今回の施策を打つ前の状態はこちら…もう散々な結果が出ました。

よくもまぁこんな低評価、低速のサイトを貴様は…と過去の自分を問いただしたい。

全ての画像を最適化するプラグイン導入

こちらは“EWWW Image Optimizer”というプラグインを入れた。

設定画面はこんな感じで、「メディア」に一括最適化というメニューが追加される。

それを押せば、アップロードされた画像を全てイイ感じしてくれる。Jpg化とかですね。

これをやった直後のサイト評価はこんな感じ。

ナメクジはトカゲに進化した。

20→53だからまぁ…画像がだいぶ圧迫してたんだなぁ…と反省。スクショとって適当にアップしてただけだもんなぁ…。

しかし当然、これではまだ足りない。まだ遅い。

目指す速度はそうフェラーリ、ランボルギーニ…阿部寛のサイト。

動画とかも差し込むし、早いことに越したことはないですからね。徹底的に速度アップしたいです。

CSS、JSの最適化

これも結構効果があったので紹介しておく。

以下2点のプラグインを導入、設定するだけでサイトの評価がどんと上がります。

1. Autoptimize
2. Optimize Database after Deleting Revisions

前者は色んな部分の最適化をするプラグインで、サイトの読み込み速度に関わってくる。設定するだけで評価が30前後変わるので、これは必須かなーと。

後者はキャッシュとか溜まったリビジョンとかを綺麗さっぱり取り除くプラグイン。これは完全にこちらの投稿側のストレスをなくすって感じですね。

新しいテーマ導入

改めて、サイト速度についての警告を見ると画像のことが8割、他はJavascriptなど細かい点の評価という感じ。

トップページではオススメの記事を5つくらい、スライドショーで表示するテーマを使ってた。

たぶんこの機能が重かったんだろうなぁ…結構気に入ってたけど、表示されるまで遅いんじゃ本末転倒だしね…。

ということで、早くてカスタマイズも楽に行えるというテーマ“Luxeritas Theme”を導入した。

頒布しているサイトはこちら↓

https://thk.kanzae.net/wp/

ネコチャァンがかわいい…のだけど、中身はもう無料でいいのか？ってくらいゴリゴリに作られてる。

サイト制作について何か述べようもんなら「素人質問で恐縮ですが…」とか聞いてくるだろうな、このネコチャァン。恐ろしい。

で、導入した瞬間のスコアがこちら。

出ました、阿部寛スコア。もうパーフェクトだわ…。

ちなみに反映してからちょっと時間を置かないと、諸々の設定が反映されないっぽくて評価が変わらなかった。

そして新しいサイトデザインがこちら。

もうめちゃくちゃシンプルだわ。スッキリしすぎてつまらないくらい。

でもまぁ、飽きないし軽いし見やすいし、これで良いかなぁ…とは思ってます。足りないのはオススメ記事の表示くらいかな。

ちなみにこのテーマだと、SNSシェアボタン、見切れちゃったけど目次が自動で入る。

なのでプラグインを2点消す運びとなった（これも軽くなる要因ではある）。

なんだよ、めっちゃ便利じゃんこのテーマ！ネコチャァンやるなぁ！！

ライバルは阿部寛

永遠の宿敵（ライバル）ですね。身長も顔も年収も全て負けてるので、何かしらは勝ちたいです。作曲？それはまぁ…分野が違いますし…。

かなり読み込みは早くなったので、以前よりはストレスなく読めるようになったんじゃなかろうか。

ちなみに、サイトの読み込み速度はSEO的にも離脱率の改善にも、大きく関わってくることです。軽くて読みやすいストレスフリーなサイトになれば、それだけ検索順位もググッと上がりますよーっていうね。

各プラグインの設定などは、別の記事が細かく紹介しているので、そちらを参考にしてください。私は多少いじったにしても、ほぼデフォのままです。