今回は
サイトスピードをどうにかしたいと思った話です。
WordPressテーマをJinに変えて、
色々楽しくて直感的に弄れて良いのですが、
ちょっと困ったことが起きました。
サイトの表示スピードが滅茶苦茶下がったのです。
Page Speed Insightというサイトで
パソコンで見た時とスマホで見た時の
表示スピードが見られるのですが、素の状態、
つまりLuxeritasから移行して、そのままの状態、
それからJin公式お勧めのプラグインを
入れた状態だと、スピードが
赤判定(0~49点=遅い)になってしまいました。
ちなみに2019年現在、
無料テーマ最強・最速のうちの
ひとつに数えられるLuxeritasでは
緑判定(90~100点=速い)でした。
そんなわけで今回はスピードについて
いろいろ調べて、弄ってみました。
Jin推奨のプラグインと、
Luxeritas推奨のプラグイン
WordPressテーマを変更するにあたって、
ふたつのテーマは
構造もプログラムも全く別なので、
推奨されているプラグインも違います。
僕はLuxertasの時は、公式の推奨するプラグインを
そのまま入れていました。
テーマでそこまで弄るのは
これが初めてだったので、
これが実質僕のサイトの標準プラグイン、
ということになります。
入れていたプラグイン
- PubSubHubbub
- XML Sitemap & Google News feeds
- WordPress Ping Optimizer
- WP-Optimize
- Category Order and Taxonomy Terms Order
- Simple Page Ordering
- IP Geo Block
- Rinker
- Contact form 7
- EWWW Image Optimizer
- UpdraftPlus – Backup/Restore
Jetpackは相性が最悪というか、公式曰く、
せっかくLuxeritasで対応している
SEO対策が無駄になるようなので、
削除しました。
キャッシュ系プラグインも、Luxeritasの場合、
入れた方がむしろサイトが重くなることが多い、
とのことでしたので、
これも入れていませんでした。
画像読み込み遅延系のプラグインは、
元々Luxeritas本体にLazyLoad機能が実装されて
いたので入れていません
というか、入れて不具合で酷い目にあったので削除しました
Jin推奨プラグイン(テーマ導入後追加したもの)
- Autoptimize
- BJ Lazy Load
- WP Super Cache
- AddQuicktag
- Table of Contents Plus
- Post Types Order
- Search Regex
- JetPack
- classicEditor
導入するにあたって、
Luxeritasで被っているものと、
あまり必要性を感じなかったもの
=赤字のプラグインを削除しました。
Jetpackは公式推奨通り、
統計機能だけ使っています。
サイト診断
スピード計測サイトを見てみると、
大体何が悪くて評価が低いのかわかるのですが、
- 次世代フォーマットでの画像の配信
- サーバー応答時間の短縮
- 使用していないCSS を削除してください
- 適切な画像サイズ
- レンダリングを妨げるリソースの除外
- テキスト圧縮の有効化
- サーバー応答時間の短縮
大体この辺が原因のようです。
といっても、Jin公式お勧めの
高速化するためのプラグイン、
- BJ LazyLoad
- EWWW Image Optimizer
- Autoptimize
- WP Super Cache
これは入れていたのと、
画像フォーマットに関しては推奨されている
JPEG2000、JPEGXR、Webpなどの規格が
普及していなくて、
ブラウザによっては表示できないものがある
(らしい)=変更できない、
僕自身プログラムに関してはからっきしなので、
CSSやプログラム関係を下手に弄れない、
サーバー応答時間の短縮、
と言われても契約プランをより上位のものに
変更すれば良くなるかもしれないが、
そこまではできない、
などの理由から、八方塞がりで、
「もうどうしようもないやん、これ」
「もうこれで良いか」
と半ば諦め気味で、ネットでJin 高速化とか、
Mixhost 高速化で検索していたところ、
なんと、ありました、見つかりました!
高速化する方法。
プラグイン
「LiteSpeed Cache」を導入する
Mixhost 高速化で検索すると、
Mixhost公式ページのヘルプ&サポートページが
出てきます。
そこには簡単に、ザックリ言うと
一般的なキャッシュプラグインか
LiteSpeed Cacheを入れてね!
Mixhostはこのプラグインが使える
唯一のサーバーだよ!!
という内容で、
LiteSpeed Cacheとはなんぞ?
というのがMixhost公式ページの説明では
(具体的な設定方法などが)
ちょっとわからなかったので、
今度はLiteSpeed Cacheで検索しました。
最終的な設定方法
一番わかりやすくて、説明が論理的で、
プラスアルファで更に高速化できる方法を
掲載していたサイトです。
参考にさせていただきました。
具体的にはまず、プラグインを導入後、設定で
- 全般タブにあるスイッチを、有効にする、
オンに切り替える - 最適化タブで
Javascriptの圧縮/結合、Javascript関係を
オフに(広告表示などの理由から)
HTML圧縮化をオフに(同上)
それ以外は全部オンにします。 - チューニングタブで
CSS 結合の優先度、
Googleフォントを削除をオフに。
それ以外はオンにします。 - メディアのタブで
Iframes 遅延読み込み、
インラインレイジーロード
イメージライブラリ、
オリジナルバックアップを削除する、
可逆最適化、
EXIF / XMPデータを保存する
を、オフにして、
それ以外を全部オンにします。 - CDNタブで
CDN を有効にする、
Quic Cloud APIをオフに、
JQuery を
リモート読み込みの設定をCdnjsに、
それ以外をオンにします。
(あとで設定するCloudflareに関係する項目) - 高度タブの
オブジェクトキャッシュをオフに、
その下のテーブル内は特に変更なし、
HTTP / HTTPS の互換性を向上させるを
オフに、
それ以外をすべてオンにします。
LiteSpeed Cacheの設定は一旦ここまでです。
競合するプラグインを削除する
LiteSpeed Cacheは高速化に関する
いろいろなプラグインの複合のようなものらしく、
高速化のために入れていた各プラグインと
機能が丸被りなので、それを削除しました。
具体的には上で青字表記していた
- EWWW Image Optimizer
- Autoptimize
- BJ Lazy Load
- WP Super Cache
画像圧縮も、
画像読み込み遅延も、
データベースの最適化も、
キャッシュ削除機能も、
全部LiteSpeed Cacheに入っているので
いらないと思います。
WordPressはプラグインが増えると重くなる、
と言われているので、
1つのプラグイン導入で4つ分の機能があるのは
とても良いですね。
Cloudflareを導入/設定する
LiteSpeed CacheのCDNタブで設定した項目に
関係することです。
に飛びます。
導入方法
- サービスに登録する(無料)
トップページからメールアドレスと
パスワードを登録してサインアップします。 - URLを登録する
サイトURL を登録します。
(僕の場合、https://touhanblog.net) - nextをクリックして、
プランはFREEを選択します。
confirmボタンをクリックします。 - DNSレコード確認
何もせずにそのままcontinueを押します。 - ドメインサーバー側の変更の設定
一旦cloudflare側は
このままの状態で置いておき、
ドメインサーバー側を設定します。
左側に現在の設定が表示されていますが、
それを右側に表示されている設定に
書き換えます。
僕の場合ですと、
お名前ドットコムでの設定になります。
ドメイン変更時に結び付けたサーバーを、
1と2はそれぞれ
cloudflareのボックス内に表示されている
URLをコピーして、それを貼り付けます。
3、4、5は消してください。 - ドメインサーバー側の設定が完了したら、
cloudflareのサイトに戻って
continueを押します。 - cloudflare Global APIの取得
画面右下の方に
Get your API key
というリンクがあるのでクリックします。 - メール云々いう画面が出てきますが、
最初にメールアドレスを登録した時に
承認のためのメールが来ているはずなので、
それを開いてVerifyをクリックします。 - 承認後の画面下の方に
API Keysと書かれた欄の、
Global API keyという項目の、右
Viewボタンをクリックします。 - ログイン画面でメールアドレスと
パスワードを入力して、
私はロボットじゃありません
も、チェックして、
表示されたAPI Keyをコピーします。 - WordPressのLiteSpeed Cache設定画面の
CDNタブで、一番下にある
cloudflare APIの項目で、
枠内のスイッチをオンにして、
メールアドレスとドメインを入力。
グローバルAPIキーの欄に
先ほどコピーしたキーを貼り付けます。
上手くいっていれば、
ドメインの欄が緑色の枠線になります。 - cloudflareの管理画面に戻り、
speedの項目でAuto Minifyの
チェックを外し、
Rocket Loaderをオフにします。 - Browser Cache Expirationの項目で
キャッシュの更新時間を設定します。
良く作業をする場合は短めで。
Cloudflareはここまでです。
終わりに、だけど終わらない
今回ここまでやってみて、
自分でサイトを見る分には結構、
かなり早くなったと思うのですが、
計測サイトで見てみると、あまり、それほど、
思ったほど変わってない感じだったので、
もうちょっと調べて、
もうちょっとだけ変えてみました。
次回はその話です。
コメント