【Wordpress高速化日記】.htaccessの書き換え効果絶大、Lazy Load系プラグインの停止、SNSボタン削減も効果あり

Googleさんから「お前のサイト遅いよ！」と警告されたのをきっかけに、素人なりに高速化に取り組んでいる@web_shufuです。前回はレンダリングブロックjavascript/cssを排除したものの、Google PageSpeed Insightsのスコアが上りませんでした。しかし今回は目に見える結果が出ました。

以下、前回の日記の末尾と同じ環境からスタートして、色々いじってみました。

BJ Lazy Loadプラグインの停止

BJ Lazy Loadはこんなプラグインです。

WordPress高速化に必須!スクロールに応じて画像を読み込むプラグインBJ Lazy Load｜Web Shufu

サイトの高速化のためには画像の読み込みを遅延させるプラグインも必要だと言う人が多かったので私も導入しました。

しかし、プラグイン導入前後の速度計測をしていませんでした。

画像の読み込みを遅らせることでサイトが速くなる理由が、あちこちで理路整然と説明されていたからです。

ですが、今回googleさんから「遅い！！」と言われたので、BJ Lazy Loadプラグインを停止して高速化効果を検証してみました。

すると、なんと、Google PageSpeed Insightsのスコアが前回の日記と比べて改善しているではないですか。

「まさかBJ Lazy Loadがサイトを遅くしてるってこと?」と自問しつつ5回くらい測りましたが全て以下と同じ結果になりました。

モバイルのスコアが+2、パソコンのスコアが+1となりました。スコアだけでなく内容も良くなっています。

前回の日記と比べてブロッキングCSSリソースが6から2へ大幅削減、ブロッキングscriptリソースは2から0と根絶されました。

私の環境ではなんと「BJ Lazy Load」が高速化を妨げていたのです。即刻削除しました。

アドセンスの非同期コードを導入

次にアドセンスの非同期コードを導入しました。

アドセンスの「広告の設定｣をクリックして、以下の画面から「コードを取得」をクリック。

非同期を選択してコードをコピー。あとはサイト内の任意の場所に貼るだけ。

このようにあっという間に導入できたのですが、Google PageSpeed Insightsの診断結果はスコアも内容も全く変わらず。

遅くなったわけではないし、非同期コードの導入はGoogleさんから指示されたものなので、このまま非同期コードを使い続けます。

SNSボタン削減

SNSボタンは明らかにページを重くします。これは体感的にわかっている方も多いと思います。

@web_shufuはこれまで以下のような形でSNSボタンを付けてきました。

PC向け・モバイル向けとも、同じ箇所にボタンをつける
個別記事ページではタイトル直下と記事直後の2箇所
カテゴリページではタイトル直下の1箇所

これを次のように改めてSNSボタンを大幅削減しました。

モバイル向けページではSNSボタンを一切つけない
PC向けページでは、個別記事ページの記事直後の位置にのみSNSボタンをつける

その結果、SNSボタンを全て無くしたモバイルではGoogle PageSpeed Insightsの診断が劇的に向上しました。

スコアは65から70と大幅アップ。レンダリングブロックCSSは2つともabove-the-fold(スクロールせずに閲覧可能な領域)の表示を担当しているので、レンダリングブロックCSSのままにしておくしかありません。

モバイルのレンダリングブロックjavascript/css排除はミッションコンプリートです。

一方PCではSNSボタンを残したのでスコア変わらず。しかも、外部サイトの画像を圧縮しろと言われても困ります。

かと言って、PC向け表示からもSNSボタンを削除すると、ただでさえ弱小な当ブログではソーシャルの拡散は望めません。

断腸の思いで、PC向け表示にはSNSボタンを残しました。

モバイル・PCの表示切替方法

モバイル向けとPC向けの表示切替には、Function Reference/wp is mobile()関数が便利ですが、wp_is_mobile()はタブレット端末をモバイルとして扱います。

タブレットをPCとして扱いたい方は以下の記事を参考に自分で関数を作って振り分けてください。

WordPressのスマホ対応に使える!!PCとの表示振り分け関数・プラグイン

圧縮とブラウザキャッシュについて

ところで、前回の日記を書く直前に私は1つの高速化対策をしていました。

以下の記事にあるコードをほぼコピペして、.htaccessに圧縮とブラウザキャッシュに関する書き込みを行ったのです。

WordPressサイト用の.htaccess例 | dogmap.jp

Googleさんが「ブラウザキャッシュの期間は最低でも1週間以上にしなさい。」と言うので、javascriptのブラウザキャッシュの期間を7日(604800秒)に変えましたが、それ以外はほんとにコピペ。

@wokamotoさん有難うございます。

この効果について検証していなかったので今更検証してみたのですが、これが想像以上に絶大でした。

どう検証したかと言うと、.htaccessを、@wokamotoさんの言う通りに書き換える前の状態に戻して、Google PageSpeed Insightsで診断したのです。

で、結果がこちらです。

.htaccessを@wokamotoさんの言う通りに書かないと、

モバイルは70→59（11ポイントダウン）
PCは77→63（14ポイントダウン）

このように世にも恐ろしい結果となりました。

再度、.htaccessを@wokamotoさんの言う通りに書き換えて元に戻したのは言うまでもないでしょう。

本日の成果まとめ

.htaccessを@wokamotoさんの言う通りに書き換えると、Wordpressが超絶速くなります。
SNSボタンは個数を削減しただけでは効果が薄いですが、全廃すると速くなります。
Lazy load系プラグインを外すと少し速くなりました。

注：Google PageSpeed Insightsの診断結果は全て「Krad XinによるロリポップWordpressサイト大量ハッキングまとめ｜ウェブシュフ」を対象にしたものです。