今回はMovable Typeを使うときの小ネタを紹介します。
私はエックスサーバーというレンタルサーバーでMovable Typeを動かしてこのブログを書いています。エックスサーバーは安価で高速化のための機能が充実していますよね。
- ブラウザーのキャッシュの有効化
- サーバーキャッシュ設定
- FastCGIでCGIの動作ができる
このうち、「ブラウザーのキャッシュの有効化」についてエックスサーバーのヘルプでは以下のように書かれています。
ブラウザ側でのキャッシュ利用を指示するレスポンスヘッダ(Expires, Cache-Controlヘッダ)の出力を付加します。同一ファイルへの再アクセス時にはブラウザ側のキャッシュファイルが利用され、表示速度の向上や転送量の軽減を行うことができます。
ブラウザキャッシュ設定 | レンタルサーバーならエックスサーバー
表示の高速化はGoogleも重要視している要素で、ユーザーのウェブページ閲覧体験の向上だけでなく、検索結果の順位にも多少影響があるといわれています。
読み込み速度はこれまでもランキング シグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。 そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。
この ”Speed Update” （と私たちは呼んでいます）は、ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し、ごくわずかな割合のクエリにしか影響しません。
Google ウェブマスター向け公式ブログ [JA] : ページの読み込み速度をモバイル検索のランキング要素に使用します
わずかな影響とのことですが、表示の高速化をすること自体は閲覧者にとって良いことなので取り組んでおいた方がよいでしょう。
ただ、エックスサーバーの「ブラウザーのキャッシュの有効化」の機能を有効にしていると「ファイルを更新しているのに、キャッシュが効きすぎて最新版の情報が出てこない！」という問題が発生します。すでに前の情報がブラウザーにキャッシュされていて、そちらの情報を優先的に表示しているからですね。
スーパーリロード（Shiftキー＋更新アイコンをクリックとか）すればだいたいは更新されるのですが、それも毎回だと面倒です。
私はエックスサーバーでMovable Typeを動作させているので、ブログ記事のプレビューでこの問題で悩まされました。
ただ、ヘルプをよく読んでみると、解決策が載っていたので、そちらを紹介します。
エックスサーバーのヘルプにはこう書いてある
さきほどのエックスサーバーの「ブラウザーのキャッシュの有効化」のヘルプには以下のようにも書いてあります。
.htaccessにて下記の設定をされている場合はそちらが優先されます。
ブラウザキャッシュ設定 | レンタルサーバーならエックスサーバー
- Cache-Control
- Expires
- Pragma
- Set-Cookie
つまり、エックスサーバー側のキャッシュ設定を変更するには、.htaccessでレスポンスヘッダを設定すればよいということになりますね。
.htaccess に書く内容
早速ですが、.htaccessに追記しましょう。
Movable Typeではブログ記事のプレビューファイルは「mt-preview-」から始まるファイル名ですので、以下のように設定します。
<Files ~ "^mt-preview-.*\.html$">
Header set Pragma no-cache
Header set Cache-Control no-cache
</Files>
こうすることで『ファイル名が「mt-preview-」で始まって最後が「.html」のファイルはキャッシュしない』と指定することができます。
プレビューファイルの末尾が「.php」だったり拡張子がない場合は「"^mt-preview-.*.html$"」の「.html」を削除すればよいでしょう。
それでは、よいMovable Typeライフを。