PageSpeed Insightsを参考にしてWordpressの表示速度を改善したときに行った施策をメモ。
数日前に自分のサイトをチェックしていたところ、スマホでアクセスしているにも関わらずPC用のサイズのAdsense広告が出てきていて驚いた。
スマホにPC用の広告が出ている原因を調べていると原因は「WP Super Cache」のキャッシングが原因ということがわかった。
どうやら次のような仕組みで不具合が生じている様子。
- レスポンシブデザインにしており、広告表示は「wp_is_mobile()」を使って切り替え。
- スマホからのアクセスだとキャッシュを生成されない。
- PCで表示されたページはキャッシュされる。
- 一度キャッシュが作られたページは当たり前だがキャッシュの期限が切れるまでキャッシュを表示する。
- キャッシュでは「wp_is_mobile()」の出力結果をキャッシュしているためスマホでもPCの広告が表示される。
- 管理者権限の場合キャッシュを生成しない。
まぁ当たり前といえば当たり前で自分の「WP Super Cache」の設定が悪かったり、ちゃんとログアウトして確認しなかったのがいけなかったのだが、なんだかもったいないことしてたな～と少し落ち込んだ。
一日のPV1万超あって半分以上がスマホだから結構損したはずだ。
んで、WP Super Cacheの設定を直そうとしていたけれどなんだかうまくいかず、外すことにした。
もともと対して高速化されていなかったので外しても少し表示が遅くなったかな程度だがこれを気にちゃんと表示の高速化に取り組むことに
ブラウザキャッシュや画像やCSS、Javascriptの圧縮などは行っていなかったし。
サイトの表示速度の調べ方
基本的には下の2つのサイトを利用して点数をあげていくようにする。
・PageSpeed Insights
・GTmterix
自分のサイトを試したところ大きく分けて次のような指摘をされた。
- 画像を圧縮する。
- Javascript、CSSを圧縮し、それぞれ一つのファイルにまとめる。
- ブラウザキャッシュを設定する。
実際に行った高速化の施策
とりあえず何か使えそうなプラグインがないか探していると下記のブログの記事がとても参考になった。
【WordPress高速化】プラグイン導入とテーマ改善で爆速化した方法
【WordPress高速化】キャッシュ系プラグインの導入などわたしが行った対策をご紹介
この中で自分が行ったのは「Autoptimize」の導入と「WP Hyper Response」の内容をfunctions.phpに追加。
あとはhtaccessでブラウザキャッシュの設定。結果これだけで驚くほどレスポンスが向上した。
「Autoptimize」については下記のブログでかなり詳しく解説されており、設定もその通りにした。
・ 【Autoptimize】Autoptimizeの高度な設定 より使えるようにする設定
一部Jqueryがおかしくなったところがあったが、自分がめんどくさがってインラインに記述したJavascriptをちゃんと外部ファイルに移したらOKだった。
なにごともめんどくさがらずにちゃんとやらないとな。。
「WP Hyper Response」はプラグインをインストールしようとしたら最終更新がかなり前になっていたので、不安になってプラグイン作者のサイトに行ってみたらプラグイン自体がかなりコンパクトであったのでfunction.phpにそのまま書くことに。
ブラウザキャッシュの設定は色々調べてみたらhtaccessに下記のコードを追加するだけでいいみたい。
|
1 2 3 4 5 6 |
ExpiresActive On ExpiresByType text/css "access plus 1 days" ExpiresByType image/gif "access plus 1 weeks" ExpiresByType image/jpeg "access plus 1 weeks" ExpiresByType image/png "access plus 1 weeks" ExpiresByType application/x-javascript "access plus 1 weeks" |
以上で高速化の施策は完了。
他にはスマホのときに見せるコンテンツを少なくして一人あたりのPVをあげられるように見直したり色々と手を加えてみた。
定期的に色々と見直すのは大事ですね。