ブログの読み込みを高速化する為に試してみたことのまとめ 【追記あり】

wordpress-speedup-thumb

先日のEvernoteの記事を見て「読み込み超遅い!!」って事に気づきました。大きな画像を大量にぶち込んでるんでそりゃ遅いに決まってるんですけどね、ちょっとコレは耐え難いのではないかと思いまして。

wordpress-speedup-before
で、読み込み時間計測ツールを使ってみたらこの秒数ですよ。 PCでコレですよ?スマホだと悲惨な事になってそうですね。 


スポンサードリンク


PageSpeed Insightsで結果を見てみる

PageSpeed Insightsは、Googleが作ったページ読み込みの評価ツールです。結果がどうなったかといいますと

wordpress-speedup-before-spwordpress-speedup-before-pc

こんな感じ。ギャー!!!

特にスマホ、こんなん即ブラウザバックしますわ。

改善を試みる

wordpress-speedup-image

何から手つけていいかわからんのですけども

Googleさんが画像を圧縮しなさいよ!とおっしゃってるのでコイツから実行します

EWWW Image Optimizer

wordpress-speedup-ewww

WordPress内の画像を圧縮してくれるプラグインです。 ここの内容を元にとりあえず設定をしてみました。(情報が古く、一部違うところもあるので注意)

wordpress-speedup-compression

今後アップロードするファイルは自動で圧縮してくれるらしいんですけども今までのやつは手動で圧縮掛ける必要があるらしく、 ポチッとボタンを押して圧縮かけました。結構時間かかります。

で、実行した結果がこちら!

wordpress-speedup-after-sp

wordpress-speedup-after-pc

スマホが 36 → 40に

パソコンが 54 → 60に

・・・微妙すぎません?

悔しいのでもう少し頑張る

まともに改善できた気がしないので、軽量化できそうなプラグインを突っ込んでみました。

Head Clearner

wordpress-speedup-headclearner

htmlソースのhead部分のコードを整理して最適化してくれるプラグインです。 先ほどのPageSpeed Insightsさんが「CSSとJavascriptを最適化しなさいよ!」と仰ってたのでコイツで対処します。 あと、「Javascriptの読み込みコードをbodyの終わる直前に持ってく」のも効果高いらしいので設定しときます。

Lazy Load

画像の読み込みを最適化してくれるプラグインだとか。とりあえず「入れればPageSpeed Insightsの評価上がる」と書いてあったので入れときます

最終結果

wordpress-speedup-final-sp

wordpress-speedup-after-pc

最終的に、スマートフォンでの結果が36→55に、PCでの点数は54→63に。 正直コレでもまだまだ遅いんですが、これ以上はサーバーをいいのにするしかなさそうなのでとりあえず保留です。

なお、ページ読み込み時間はこんな感じで若干改善しました。こんだけやってわずか1秒・・・。

wordpress-speedup-final

今回使ったツールまとめ

PageSpeed Insights

PageSpeed Insights

EWWW Image Optimizer

EWWW Image Optimizer
Smaller Images, Faster Sites, Happier Visitors. Comprehensive image optimization that doesn't require a degree in rocket science.

Head Cleaner

Head Cleaner
Cleaning tags from your WordPress header and footer.

lazy Load

Lazy Load
Lazy load images to improve page load times and server bandwidth. Images are loaded only when visible to the user.

※追記

コピペ一発でSimplicityを結構高速化する方法という記事がSimplicity(このブログで使用させて頂いているWordpressテーマ)の公式ホームページにあ りまして、試してみたところPageSpeed Insightsのスコアが劇的に改善いたしました!

simplicity-speedup-sp

simplicity-speedup-pc

スマートフォンが55 → 71に、パソコンが63 → 75に!

やってる事自体はファイルのキャッシュとリソースの圧縮の設定だけなので、Simplicityテーマでなくても効果が期待できると思います!ホームページの高速化にお悩みの方は是非! (.htaccessファイルのバックアップを取ってから試すことをオススメします)

※追記ここまで


スポンサードリンク