読者目線でサイトの表示速度が遅いと他のページに行きたくなりますよね？
SEO的にも読者様に見てもらえない記事というのは痛いんです。
高画質な画像などの貼り付けによって重たくなってしまったページを高速化するためのプラグイン『LiteSpeedCache』に関して記事をかいていきます。
導入前と後の比較も画像付きで載せますのでびっくりしますよ！
早速ですが改善前後のPC【デスクトップ】とMobile【携帯電話】の比較をしてみました。
【結果はこちら】
この点数の改善には私もびっくりしました！
という結果も踏まえて、サイトの表示スピードの管理はしっかりしていきましょう！
※本記事で紹介している情報は執筆時点のもので、閲覧時点では変更になっている場合がございます。
ご利用の環境（ブラウザ、サーバー、プラグイン、テーマ、またはそのバージョンや設定、WordPress本体のバージョンや設定など）によっては本記事の通りに動作しない場合がございます。
あらかじめご理解いただければ幸いです。
事前に確認しておくこと
プラグインを入れる前に以下の2つは必ずやっておきましょう
- サイトのページ表示スピード確認【比較のため】
- バックアップを取っておく
サイトの表示スピード確認
順を追って設定を進めていきますね！
Step1:『PageSpeed Insights』にアクセス
- 『PageSpeed Insights』を開く
- 開いたら以下の個所にご自身のURLを入力
Step2:スコア確認
携帯電話【Mobile】とデスクトップ【PC】のスコアが表示されます。現状のサイト表示スピードを知っておきましょう。
改善する前の私のスコアはMobile55点/PC86点でした
バックアップを取っておく
プラグインを入れて不具合が起こる可能性は０ではありません。必ず設定のバックアップを取っておくことをお勧めします。
サイトの表示スピードが遅くなる原因
- 画像の容量が大きい
- アイコンフォントを多用している
- 動画の埋め込み
- キャッシュが溜まっている
などが考えられます。
- 高頻度でアクセスするデータを取り出しやすい場所にあらかじめ保存しておいたファイルのこと
- 本来はパソコンのパフォーマンスを向上させ、パソコンを快適に使うために必要なもの
- しかしキャッシュというのはそのままにしておくとファイルを蓄積しパソコン動作に対して悪影響を与えたりハードディスクの容量を圧迫してしまうことがある
- 定期的に削除することが望ましい
要は
- 画像の容量を落とす/圧縮する
- アイコンフォントは最小限に
- 動画の埋め込まない
- Cache(キャッシュ)のクリア
をすればいいわけですね！
キャッシュをクリアにすることを『パージ』と言います！
サイトの表示スピード改善に向けて
サイトの表示スピードが遅くなる原因がわかったところで早速プラグイン【LitespeedCache】をインストールしていきましょう。
プラグイン【LitespeedCache】のインストール
表示ページの高速化をしてくれるプラグインがこちらの『LitespeedCache』という優れものプラグインです。
【LitespeedCache】がインストールできたら『有効化』クリックして設定に進みます。
LitespeedCacheの設定【一般】
①一般設定
- 自動アップグレード⇒オフ
- ドメインキー⇒クリック
- ゲストモード⇒オン
- ゲスト最適化⇒オン
- サーバーIP⇒オン
- 通知⇒オン
| 項目 | 設定と詳細 |
|---|---|
| 自動アップグレード | オフ WordPressのプラグインに自動更新機能があるので大丈夫です |
| ドメインキー | ドメインキーの要求をクリック Quic.cloudをブログと連携させます |
それではドメインキーの要求をクリックしていきましょう。
- 画像の圧縮
- HTMLの圧縮
- CSSの圧縮
が可能になります。
この『圧縮』がサイトの表示スピードに大きく影響が出る部分です！
以下の手順で進めていきます。
- ドメインキーの要求をクリック
- 次回の利用可能な要求時間が表示
- ブラウザの『』を押す
- ドメインキーが自動的に入力
- 『*********』このようになっていればOKです
②チューニング設定
チューニングはいじらないでOKです
ここまで設定ができたら変更を保存をクリックします
LitespeedCacheの設定【キャッシュ】
このキャッシュ設定では【キャッシュするページ】【デバイス】を選択していきます。
①キャッシュ
| 項目 | 設定と詳細 |
|---|---|
| キャッシュを有効にする | オフ(Cocoonの場合) オンにしないと全てのキャッシュ設定が無効になってしまいます |
| ログインしたユーザーをキャッシュ | オフ ログインできるのは自分だけなので |
| コメントをキャッシュ | お好み 読者様がコメントを確認できるタイミング オン自分の承認後 オフ自分の承認前 |
| REST IPをキャッシュ | オン ブログ更新時に自動的に記事キャッシュ |
| ログインページをキャッシュ | オフ ログインページは自分しか利用しないため |
| favicon.icoをキャッシュ | オン ブログのファビコンをキャッシュします |
| PHPリソースをキャッシュ | オン CSSとJavaScriptをキャッシュできる |
| モバイルをキャッシュ | オン MobileとPCで異なるデザイン表示 |
【モバイルをキャッシュ】に関してはレスポンシブルデザインの場合『オフ』でもOKです。
私はCocoonなので『オフ』にしています！
モバイル設定以下はデフォルト設定でOKです！
ここまで設定ができたら変更を保存をクリックします
②TTL
この項目はキャッシュの保存期間を設定する部分なのでデフォルトのままでOKです
③パージ
私もこのLiteSpeedCacheを使って初めて『パージ』という言葉を知りました!
そして定期的なキャッシュのクリアが重要ですね！
設定は以下の通りやっていきます
全てにチェックを入れたら変更を保存をクリック。
| 項目 | 設定と詳細 |
|---|---|
| アップグレード時にすべてをパージする | オン テーマ、プラグインが更新されると自動的にキャッシュクリア |
| 公開/更新の自動パージルール | オンすべてにチェックを入れる テーマ、プラグインが更新されると自動的にすべての項目のキャッシュクリア |
| 古いものを出す | オン キャッシュが未作成の場合、過去のページを表示してくれる |
古いものを出す以下は飛ばしてOK
ここまで設定ができたら変更を保存をクリックします
④除外
LitespeedCacheのデフォルトは空欄になっていますが、そのままでOKです。
⑤ESI
デフォルトのままでOKです
⑥オブジェクト
デフォルトのままでOKです
| 項目 | 設定と詳細 |
|---|---|
| オブジェクトキャッシュ | オン サーバーのデータベースをキャッシュします |
⑦ブラウザ
| 項目 | 設定と詳細 |
|---|---|
| ブラウザキャッシュ | オン スムーズなウェブページの表示 |
ブラウザキャッシュを『オン』にしておくと過去にアクセスしたサイトの情報を保存しているので
スムーズにサイトを表示させることができるよ！
ブラウザキャッシュTTLはデフォルトのままでOK!
ここまで設定ができたら変更を保存をクリックします
⑧高度な設定
特に高度な設定はしなくてもサイトの表示スピードは抜群に上がりますのでオフのままでOKです
LiteSpeedCacheの設定【キャッシュ】が完了です！
LitespeedCacheの設定【CDN】
今回はCDNの設定はしなくてOKです。
『Content Delivery Network』の略でウェブコンテンツを効率的かつスピーディーに配信できるよう工夫したネットワークのこと
ホームページの表示やコンテンツ配信に問題が起こらないようにする仕組みなんだって！
LitespeedCacheの設定【画像の最適化】
それでは次は【画像の最適化】を行っていきます。
この設定はサイトの表示スピードに大きくかかわってくる部分なのでとても重要です！
- ブログ内にアップロードしている画像
- ブログ内に投稿している画像
要は自身のサイト内で保管している画像データです！
| 項目 | 設定と詳細 |
|---|---|
| 自動要求Cron | オン アップロードした画像の圧縮＆WebP化を自動的にやってくれる |
| 自動戻しCron | オン QUIC.cloudから圧縮した画像とWebP化した画像の自動取得 |
| オリジナル画像の最適化 | オン ブログ内の画像を圧縮してくれる。 |
| 可逆最適化 | オフ 非可逆圧縮画像の方が容量が小さい |
| EXIF/XMPデータを保存する | オフ 画像情報の削除により画像容量が小さくなる |
| WebPバージョンの作成 | オン ブログの画像をWebP化してくれる |
| WebP画像への置換 | オン ブログにアップロード済の画像WebP化 |
| WebP属性を置換する | オフ LiteSpee Cacheがする画像の種類を指定してくれるWebP化 |
| WebPの特別なsrcset | オフ オンにした場合画像のWebP化が制御される |
| WordPress画像品質管理 | デフォルトのまま この値は大きいと高画質、小さいと低画質になるため |
ここまで設定ができたら変更を保存をクリックします
- 一度圧縮すると逆圧縮ができない圧縮方法
- 容量の小ささ重視した圧縮方法
- 元画像を保存する際には小さくし、開く際は圧縮前と変わらない画像が開ける
- 同じ画像を使いまわす可能性がある場合は可逆圧縮画像がオススメな方法
写真の撮影日時やカメラの機種名、絞りやISO感度といったカメラの設定、編集に使ったソフトウェアなどさまざまな情報を含んだデータの集まりのこと。
XMP(Extensible Metadata Platform)
メタデータの事なので『ファイルやフォルダなどのデータそのものに関連する情報』を指しています
簡単にまとめるとレスポンシブで最適な画像を設定する方法になります。
- サイズ違いの画像を条件によって切り替える機能
- 最適なサイズの画像のみを読み込んで余分な通信量を減らす
LitespeedCacheの設定【ページの最適化】
主に以下の項目を圧縮するための設定を行っていきます！
- CSS設定
- JS設定
- HTML設定
CSSやHTMLの圧縮を行うため、デザインが崩れる場合があります。
定期的なバックアップを取り慎重に設定していきましょう！
①CSS設定
CSS設定に関する項目はページデザインが崩れる大きな原因になりますのでほとんどの項目がオフ設定になります
| 項目 | 設定と詳細 |
|---|---|
| CSS圧縮化 | オフ デザインが崩れる可能性が高いため |
| CSS結合 | オフ デザインが崩れる可能性が高いため |
| UCSSを生成する | オフ デザインが崩れる可能性が高いため |
| UCSSインライン | オフ デザインが崩れる可能性が高いため |
| CSSの外部とインラインを組み合わせる | オフ デザインが崩れる可能性が高いため |
| CSSを非同期読み込み | オフ デザインが崩れる可能性が高いため |
| URLごとのCCSS | オフ デザインが崩れる可能性が高いため |
| インラインCSS非同期ライブラリ | オフ デザインが崩れる可能性が高いため |
| フォント表示の最適化 | Swap 後ほど説明します |
ここまで設定ができたら変更を保存をクリックします
Webフォントを使う場合、フォントファイルを読み込むのに多少時間が掛かるため、その間テキストが表示されないままになるのを避けるためです
- すぐに代替えフォントでの表示が始まる
- 目的のフォントがロードされ次第フォントが入れ替わる
『できるだけ早くテキストを読んで欲しい』」+「読んでる途中でフォントを入れ替えても差し障りがない」場合に使用します
②JS設定
設定は以下の通りでOKです
| 項目 | 設定と詳細 |
|---|---|
| JS結圧縮 | オン 余分な改行や空白を削除する |
| JS結合 | オフ デザインが崩れる可能性が高いため |
| JSは外部とインラインを組み合わせる/td> | オフ デザインが崩れる可能性が高いため |
| JS遅延読み込み | オフ デザインが崩れる可能性が高いため |
ここまで設定ができたら変更を保存をクリックします
画面描画に関係ないJavaScriptファイルの読み込みを後回しにすることで画面に表示するまでの時間を短縮する方法です。
ファイルがある分だけ読み込みに時間がかかります。要はHTMLをブラウザが解釈して画面に表示するまでの時間も長くなるのを避けるための方法です。
今回の設定をオフにしているのは私が『Cocoon』を使用しているのでJavaScriptの読み込み遅延機能は既に搭載されている機能だからです！
③HTML設定
| 項目 | 設定と詳細 |
|---|---|
| HTML圧縮 | オン 余分な改行や空白を削除する |
| DNSプリフェッチ制御 | オフ Cocoonの場合、標準で設定がるため |
| HTML Lazy Loadセレクタ | オフ Cocoonの場合、標準で設定があるため |
| クエリ文字を削除 | オフ 各種解析ツールに支障が出るのを避けるため |
| Googleフォントを非同期に読み込む | お好みで Googleフォントを使用している場合はオフにしましょう |
| Googleフォントを削除 | お好みで Googleフォントを使用している場合はオフにしましょう |
| WordPress絵文字を削除 | お好みで 必要がなければオンにしましょう |
| Noscriptタグの削除 | オフ JavaScriptサポートがない古いブラウザがで異常がでることを想定して |
ここまで設定ができたら変更を保存をクリックします
このクエリ文字に関してはGoogleアナリティクスなどのアクセス解析にも利用されているのでオフにしておきましょう
Webブラウザーやアプリケーションにおいて、リンクで指定されたドメイン名を事前に名前解決することです。一部のWebブラウザーでは、DNSプリフェッチにより今後アクセスされる可能性の高いドメイン名を事前に名前解決しておくことで、実際にアクセスされた際のコンテンツ読み込みにかかわる時間の短縮を図ります。
④メディア設定
| 項目 | 設定と詳細 |
|---|---|
| 画像遅延読み込み | オフ Cocoon利用の方はオフでOKです |
この項目以降は画像の遅延読み込みなのでそのままでOKです
ここまで設定ができたら変更を保存をクリックします
⑤VPI
| 項目 | 設定と詳細 |
|---|---|
| ビューポートイメージ | オン 画面に表示されていない箇所の画像を遅らせて表示してくれます |
| ビューポートイメージCron | オン cron ベースのキューを介してバックグラウンドで自動で生成されます |
ここまで設定ができたら変更を保存をクリックします
⑥除外するメディア
この項目はデフォルトのままでOKです
⑦ローカリゼーション
| 項目 | 設定と詳細 |
|---|---|
| Gravaterキャッシュ | オン コメント欄をよく利用する人（設置している人）はオンにしておきましょう |
| Gravaterキャッシュcron | オン コメント欄をよく利用する人はオンにしておきましょう |
| GravaterキャッシュTTL | デフォルトのまま コメント欄のキャッシュをを保管する期間を指定します |
| Gravaterリソースのローカライズ | オン すべての外部のJavaScript すべての外部のJavaScript ファイルをローカル サーバーにコピーすることができます。 |
| Gravaterローカライズファイル | オン ローカルにコピーする外部のJavaScript ファイルを指定することができます |
ここまで設定ができたら変更を保存をクリックします
⑧チューニング
デフォルトのままでOKです。
①CSS設定②JS設定③HTML設定などですでにオフ設定しているのでここで指定する項目は特にありません。
LitespeedCacheの設定【データベース】
消去するものや最適化する項目を選択することができます。
①管理
私は念のため以下の順番で確認後『すべて消去』をするようにしています。
- 自動下書き確認
- 投稿のリビジョンを確認
- すべて消去
全て消去する前に記事を書き終えると決めておけば問題はないと思います。
②DB最適化設定
| 項目 | 設定と詳細 |
|---|---|
| リビジョンの最大数 | 『0』 私はリビジョンを必要としないので『0』にしています |
| リビジョンの最大エイジ | 『0』 リビジョンを保管する期間ですが上記で『0』にしていれば『0』で問題ありません |
ここまで設定ができたら変更を保存をクリックします
LiteSpeedCacheの設定【クローラー】
クローラー設定を行っていきます。
Googleのクローラーとは別物で、サイト内を循環しキャッシュを更新してくれます
①一般設定
この項目のみ設定しておけばOKです。
ここまで設定ができたら変更を保存をクリックします
LiteSpeedCacheの設定【ツールボックス】
『ツールボックスに関してはとくにいじるところはないのでこのままにしておきましょう』
LiteSpeedCache【パージの実施】
全ての設定が一通り完了したのでパージ（キャッシュをクリア）していきます
- サイトのトップページ◇のアイコンクリック
- すべてをパージをクリック
『すべてをパージをクリック』すると確認表示なくパージされますので、クリックの際は慎重に！
不具合が出てしまったら
LiteSpeedCacheの設定完了時に不具合が出てしまったら以下の方法で対処をしていきましょう。
1項目ごとに保存⇒確認を繰り返す
こまめに保存確認を繰り返ししておくと万が一不具合が起きたとしても設定箇所が特定できるので安心ですね！
サイトの表示スピード確認
残すは最終の確認です！
100点/100点では・・・ない
さいごに
WordPressにおけるサイトの表示スピードが遅くなる原因と対策について解説をしてきました。
この優秀なプラグイン『LiteSpeedCache』を使い、サイトの表示スピードを安定させていただきたいと思います。
サイトの表示スピードを向上させて読者の皆さんに読んでもらえるような記事をどんどん書いていきましょう!
コメント