サイト表示スピードの改善を考えてみた。

今回は

サイトスピードをどうにかしたいと思った話です。

WordPressテーマをJinに変えて、
色々楽しくて直感的に弄れて良いのですが、
ちょっと困ったことが起きました。

サイトの表示スピードが滅茶苦茶下がったのです。

Page Speed Insightというサイトで
パソコンで見た時とスマホで見た時の
表示スピードが見られるのですが、素の状態、
つまりLuxeritasから移行して、そのままの状態、
それからJin公式お勧めのプラグインを
入れた状態だと、スピードが
赤判定（０～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推奨プラグイン（テーマ導入後追加したもの）

【公式】WordPressテーマ「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で検索しました。

最終的な設定方法

一番わかりやすくて、説明が論理的で、
プラスアルファで更に高速化できる方法を
掲載していたサイトです。
参考にさせていただきました。

具体的にはまず、プラグインを導入後、設定で

1. 全般タブにあるスイッチを、有効にする、
   オンに切り替える
2. 最適化タブで
   Javascriptの圧縮/結合、Javascript関係を
   オフに（広告表示などの理由から）
   HTML圧縮化をオフに（同上）
   それ以外は全部オンにします。
3. チューニングタブで
   CSS 結合の優先度、
   Googleフォントを削除をオフに。
   それ以外はオンにします。
4. メディアのタブで
   Iframes 遅延読み込み、
   インラインレイジーロード
   イメージライブラリ、
   オリジナルバックアップを削除する、
   可逆最適化、
   EXIF / XMPデータを保存する
   を、オフにして、
   それ以外を全部オンにします。
5. CDNタブで
   CDN を有効にする、
   Quic Cloud APIをオフに、
   JQuery を
   リモート読み込みの設定をCdnjsに、
   それ以外をオンにします。
   （あとで設定するCloudflareに関係する項目）
6. 高度タブの
   オブジェクトキャッシュをオフに、
   その下のテーブル内は特に変更なし、
   HTTP / HTTPS の互換性を向上させるを
   オフに、
   それ以外をすべてオンにします。

LiteSpeed Cacheの設定は一旦ここまでです。

競合するプラグインを削除する

LiteSpeed Cacheは高速化に関する
いろいろなプラグインの複合のようなものらしく、
高速化のために入れていた各プラグインと
機能が丸被りなので、それを削除しました。
具体的には上で青字表記していた

• EWWW Image Optimizer
• Autoptimize
• BJ Lazy Load
• WP Super Cache

画像圧縮も、
画像読み込み遅延も、
データベースの最適化も、
キャッシュ削除機能も、
全部LiteSpeed Cacheに入っているので
いらないと思います。
WordPressはプラグインが増えると重くなる、
と言われているので、
１つのプラグイン導入で４つ分の機能があるのは
とても良いですね。

Cloudflareを導入/設定する

LiteSpeed CacheのCDNタブで設定した項目に
関係することです。

に飛びます。

導入方法

1. サービスに登録する（無料）
   トップページからメールアドレスと
   パスワードを登録してサインアップします。
2. URLを登録する
   サイトURL を登録します。
   （僕の場合、https://touhanblog.net）
3. nextをクリックして、
   プランはFREEを選択します。
   confirmボタンをクリックします。
4. DNSレコード確認
   何もせずにそのままcontinueを押します。
5. ドメインサーバー側の変更の設定
   一旦cloudflare側は
   このままの状態で置いておき、
   ドメインサーバー側を設定します。
   左側に現在の設定が表示されていますが、
   それを右側に表示されている設定に
   書き換えます。
   僕の場合ですと、
   お名前ドットコムでの設定になります。
   ドメイン変更時に結び付けたサーバーを、
   １と２はそれぞれ
   cloudflareのボックス内に表示されている
   URLをコピーして、それを貼り付けます。
   ３、４、５は消してください。
6. ドメインサーバー側の設定が完了したら、
   cloudflareのサイトに戻って
   continueを押します。
7. cloudflare　Global APIの取得
   画面右下の方に
   Get your API key
   というリンクがあるのでクリックします。
8. メール云々いう画面が出てきますが、
   最初にメールアドレスを登録した時に
   承認のためのメールが来ているはずなので、
   それを開いてVerifyをクリックします。
9. 承認後の画面下の方に
   API Keysと書かれた欄の、
   Global API keyという項目の、右
   Viewボタンをクリックします。
10. ログイン画面でメールアドレスと
    パスワードを入力して、
    私はロボットじゃありません
    も、チェックして、
    表示されたAPI Keyをコピーします。
11. WordPressのLiteSpeed Cache設定画面の
    CDNタブで、一番下にある
    cloudflare APIの項目で、
    枠内のスイッチをオンにして、
    メールアドレスとドメインを入力。
    グローバルAPIキーの欄に
    先ほどコピーしたキーを貼り付けます。
    上手くいっていれば、
    ドメインの欄が緑色の枠線になります。
12. cloudflareの管理画面に戻り、
    speedの項目でAuto Minifyの
    チェックを外し、
    Rocket Loaderをオフにします。
13. Browser Cache Expirationの項目で
    キャッシュの更新時間を設定します。
    良く作業をする場合は短めで。

Cloudflareはここまでです。

終わりに、だけど終わらない

今回ここまでやってみて、
自分でサイトを見る分には結構、
かなり早くなったと思うのですが、
計測サイトで見てみると、あまり、それほど、
思ったほど変わってない感じだったので、
もうちょっと調べて、
もうちょっとだけ変えてみました。

次回はその話です。