ContaoをGoogle Page Speedに最適化

2010年8月7日 22:37

(Contao公式サイトの記事: Optimizing Contao for Google Page Speedの翻訳です。)

2010年8月7日 Leo Feyer

少なくともGoogleがウェブサイトの速度はページランクの基準の1つとアナウンスしてから、ウェブページを最適化に人々はたいへん気を使うようになりました。この記事は高いページスピードのスコアを得るためにContaoを"調整"する方法を示します。

対象は通常のウェブサイト

ここでは殆どの方はContaoを共有のホスティングアカウントでインストールされていることを前提にして、ロードバランサー、コンテンツ配信ネットワーク、オペコードキャッシュといったもので悩ませたりはしません。これらは確かに強力なページの速度を最適化するツールですが、通常のウェブサイトには少し大袈裟です。

それよりは、Contaoに搭載された機能と、ちょっとした.htaccessの魔法(つまり、Apacheのmod_rewriteのような機能を使うことを意味する方法)で、ページスピードのスコアを最適化できることを知って欲しいのです。

必要なもの

基本的に、次の2つが必要です: FirebugとGoogle Page SpeedプラグインをインストールしたFirefoxと、mod_deflate、mod_headers、mod_expires、mod_rewriteをサポートしたApacheウェブサーバーです。もし、サーバーがこれらの必要事項を満たさない場合は、iNet RobotsホスティングプランやContaoのホスティングパートナーを検討してください。

完璧なスコアについて

ページスピードの完璧なスコアは100点満点中の100点となりますが、Google自身のスコアも96点だけに留まります。これは、すべての推奨に意味があるわけでも、そのすべてを実際に実現できるわけではないためです。例えば、「効率の良いCSSのセレクタを使用する」という注意はgoogle.comだけではなく、contao.orgや殆どのウェブサイトもそうしたいでしょう。確かに#mainmenu li.active spanはマシンにとって非効率なセレクタのように見えます。しかし、もっとも効率の良いセレクタを使用するより、すべてのブラウザーで実際に動作するブラウザーを問わないCSSのドロップダウンメニューとすることがもっとも重要なのだと、どうやってコンピューターに知らせれば良いでしょう? もちろん、両方を得ようと試みようされると思いますが、殆どの場合に不可能と理解することも重要です。

Contaoのバックエンドを設定

バックエンドの設定の"全体的な構成"のセクションで、GZip圧縮を使用とします。これによって、Contaoはブラウザーに送る前にページを圧縮します。また、バックエンドの設定ののモジュールで、URLの書き換えを有効とします。これはページの速度に関係した設定ではありませんが、ページランクの改善に大きく役立ちます。

それから、テーママネージャーに移ってページレイアウトを変更します。"スタイルシート"のセクションに"スタイルシートを集約"という、Contao 2.9で追加された、たいへん重要な新機能があります。これを有効にすると、Contaoはすべてのスタイルシートを1つに結合して、ウェブサイトの読み込み時間を大幅に改善します。特に、たくさんのスタイルシートがあるときに有効です。また、TinyMCEのスタイルシートを使用しない場合は"files/tinymce.cssを抜く"にチェックを入れていることを確認してください。

また別の重要な速度をチューニングするオプションは"専門的な設定"のセクションに隠れています。"MooToolsのソース"のメニューを探して、"googleapis.comからロード"を選択してください。これによってContaoはMooTools Coreスクリプトをあなたのサーバーの代わりにGoogleコンテンツ配信ネットワークからロードするようにします。

以上がContaoのバックエンドでしなければならないすべてです。次に、Apacheの構成を見ていきましょう。

Apacheの構成を調整

一番簡単なApacheの構成を変更する方法は.htaccessファイルを使用することです。以下に記述しているすべてのコードはContao 2.9.1の.htaccess.defaultファイルにあります。しかし、このファイルを単に名前を変更するのではなく、デフォルトの設定をよく見て、必要があれば個々の要求に応じて調節してください。

圧縮を有効

既にContaoのバックエンドでPHPファイルのための圧縮の設定を行ったので、ApacheサーバーはCSS、JavaScript、XMLファイルだけを扱う必要があります。その場での圧縮はmod_deflateが行います。

<IfModule mod_deflate.c>
  <FilesMatch "\.(css|js|xml)$">
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>

Vary: Accept-Encoding ヘッダーを指定

Proxyキャッシュサーバーは、非圧縮と圧縮済みの両方のバージョンのファイルのを保管すべきです。なぜなら、GZip圧縮されたファイルを受け付けないクライアントが存在するためです。しかし、殆どのProxyキャッシュサーバーは Vary: Accept-Encoding ヘッダーがない場合はそのような処理を行いません。そこで、mod_headersを使用してVaryヘッダーを送るようになっていることを確認します。

<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary Accept-Encoding
  </FilesMatch>
</IfModule>

ブラウザーキャッシュに梃入れ

Google Page Speedは画像、JavaScript、CSSファイルは1週間先に期限切れとなるように指定することを推奨しています。そうすると、これらのリソースをブラウザーはネットワーク越しではなく、ローカルのディスクから読み込みます。mod_expiresを使用すると簡単に達成できます。

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/png A604800
  ExpiresByType image/gif A604800
  ExpiresByType image/jpg A604800
  ExpiresByType image/jpeg A604800
  ExpiresByType text/javascript A604800
  ExpiresByType application/x-javascript A604800
  ExpiresByType text/css A604800
</IfModule>

徹底して90%に迫る

今までのところで、調整の取り組みはcontao.orgのページスピードのスコアを100点満点中、86点まで増やすことができました。

先に説明しましたが、より効果的なCSSをcontao.orgで使用したり、CSSフレームワークのファイルから左カラムとカスタムレイアウトセクションで未使用の4つの書式を削除することは不可能です。また、既にCSSとJavaScriptのファイルをできるだけ少ないファイルに結合して数を減らしているので、後に残された選択肢は複数のホストからダウンロードを並行させることと、静的なコンテンツをクッキーなしのドメインから行うことです。両者ともコンテンツ配信ネットワークの使用が適切そうですが、明らかにcontao.orgには大袈裟過ぎます。

しかし、実際はGoogleはコンテンツ配信ネットワークの使用を要求していません。さらに異なるホスト名を使用することすら要求していません、あなたのドメインのサブドメインであっても良い、ただ"クッキーなしのドメイン"であれば良いのです。

そこで、私はサーバーのコントロールパネルで"st1.contao.org"、"st2.contao.org"、"st3.contao.org"のドメインを設定して、すべて"www.contao.org"と同じディレクトリを指すようにしました。コンテンツの重複を避けるため、Contaoのルートディレクトリの.htaccessファイルに以下の行を追加しました:

##
# st[0-9].contao.org上でファイルが存在しない場合は明示的に404ヘッダーを
# 送ります。これで空の開始ページ(空のURL)が読み込まれることを防ぐでしょう。
##
RewriteCond %{HTTP_HOST} ^st[0-9]\.contao\.org [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* - [R=404,L]


##
# st[0-9].contao.orgを経由して動的なリソースを送り出しません。
##
RewriteCond %{HTTP_HOST} ^st[0-9]\.contao\.org [NC]
RewriteCond %{REQUEST_FILENAME} \.(php|html)$
RewriteRule .* - [R=404,L]

上のコードのおかげで、これらサブドメインを通してPHPとHTMLのファイルを要求することはできません。しかし、スタイルシート、画像、PDFといった静的なファイルを要求することはできます。そして、これらのドメインは"クッキーなし"です、まさにGoogleが欲しがるように。ただし、...。

Google Analyticsが我々の計画を台無しに

デフォルトでは、Google Analyticsのクッキーはドメインと、そのすべてのサブドメイン(我々の場合は".contao.org")に対して有効です。もちろん、これは我々の静的なドメイン"st[1-3].contao.org"も含むことになります。幸い、この動作はmoo_analyticsyのテンプレートで変更できます。

戻る