このブログを高速化してみた

TIPS 0 Takuya Kobayashi

このブログ、この前まで重かったですよね。

色々手を打ってみたので報告と高速化の方法を書いておきます。

まずはどれだけ遅いかをPageSpeed Insightsで検証。

えっ、14・・・予想以上に遅かった・・・

そうだ、キャッシュプラグインを入れてみよう。

WP Fastest Cacheを導入

キャッシュプラグインはいくつかありますが、インストール数が多く、評価が高いWP Fastest Cacheをインストールしてみました。

WP Fastest Cache

インストールすると、サイドバーにいかついチーターのアイコンが表示されていかにも早そうだ。設定はこんな感じ。

.htaccessが必須なのでパーマリンク設定はデフォルト以外を選択してある必要があります。

さてさて、これで爆速になっただろう。再検証してみる。

34、なん・・・だと・・・

20上がったけれど期待外れな数値でした。

シンプルにサーバーの処理が遅いのか?

プラグインを全て無効にして、重いと言われていたビジュアル画像を消して、ウェブフォントの読み込みを消して再検証。

50・・・まぁ削りに削ってこれか。かろうじて黄色には入り込めたがなんか違う。

指摘されている内容は、サーバー応答速度とJSやCSSの最適化についてが大きかった。小手先で対処できる策はもうなかった。

と思っていたが・・

AMPを導入

5年位前に風の噂で聞いたAMP(Accelerated Mobile Pages)を導入してみることにした。なんか良く分からないけどめっちゃ早くなるヤツらしい。

「AMP」というプラグインで簡単に導入できる。

AMP

インストールしてみたらなぜか真っ白になってしまった。原因はこのテーマ特有の読み込み時のスプラッシュのエフェクトだった。テーマエディタでスプラッシュのdivを消したところ、無事にAMPは機能した。外見も変わっていない。スプラッシュはいらない。

再検証

めっちゃくちゃ早い。93って.htmlを検証しているかのよう。AMPを有効にしてPCでアクセスしてみても確かにきびきび表示される。スマホでも同様。なぜ早くインストールしなかった!

14から93ってものすごいパフォーマンスの向上ですね!

まとめ

回線速度とデバイスの処理能力が向上するにしたがって、ユーザーが許容できる待ち時間も年々短くなってきました。スマホネイティブのユーザーの多くは1秒でも読み込みが遅れたらページを離脱します。コンテンツを読まずに離脱をしてしまうので、いくら有益な情報が書いてあったとしてもそのインプレッションは無駄になってしまいます。

速度は検索順位には影響しませんが、離脱率を低減させるためには重要な要素です。

追記:自作テーマでさらに高速化しました。