上級者向けSEOガイド2/9 : サイトスピードとパフォーマンス改善

米国のカリスマウェブマーケッター、ニール・パテルが書き下ろした上級者向けのSEOガイドを紹介する記事シリーズ第二弾。今回はランキングへの影響はもちろん、それ以上にサイト内のユーザーアクションにも大きな影響があるといわれるサイトスピードやパフォーマンスの確認＆改善方法について。この種の記事はこれまでにも様々な所で紹介されていますが、その中でも網羅度＆マニアック度はNo.1クラスの充実した内容です。 — SEO Japan

チャプター 1では、サイトをクロール可能 & アクセス可能にするための方法を伝授した。チャプター 1を完了し、ウェブ上のその他の多くのサイトよりも優れたサイトにすることが出来れば、まずまずの出だしと言えるだろう。

次にさらにレベルを上げ、サイトをスピードアップさせて、より効率良く動かす上で役に立つテクニックを紹介していく。効率を高めることが出来れば、ユーザーエクスペリエンスだけでなく、検索エンジンにとってもプラスに働くはずだ。

このチャプターを読み進めていけば、サイトを期待通りの早さで動かす方法に関するアドバイスを得られるはずである。

1. サイトのスピードを計測する

ページスピード、または、ページのロード時間は、ランキングを少し押し上げる効果が期待できるだけでなく、ユーザーもサクサク動くサイトを好むため、欠かせない要素の一つである。ビジターに早さを提供する取り組みは非常に重要度が高い。

サイトスピードを計測する2つの方法を紹介する。

1. グーグルのPageSpeed Online

2. グーグルのクローム向けPageSpeedプラグイン

1. PageSpeed Onlineを利用する

ステップ 1 – Google PageSpeed Onlineにアクセスする

https://developers.google.com/pagespeed/にアクセスする

ステップ 2 – ホームページでツールを実行する

すると総合スコアが得られる。ホームページのスコアは、サイト全体の基準として、有効である。

次に、優先順位がつけられた課題のリストを詳しく見ていくことが出来る:

まずは優先順位の高いアイテムと中ぐらいのアイテムに絞るべきである。アイテムをクリックすると、詳細が表示される。

このツールを利用すると、各アイテムに対する詳細な提案が得られる。一般的な問題の解決策に関しては、このガイドの後半で紹介する。とりあえず、ここではツールを使って、問題を診断する。

ステップ 3 – 内部のページでツールを実行する（特にホームページとはスピードが異なる可能性が高いページ）

私のサイトクイックスプラウトには、その他のページとは毛色が完全に異なるページが1つある – http://www.quicksprout.com/pro/

そのため、PageSpeedツールをこのページで実行し、違いを見つけておく。なぜなら、これはセールスのページであり、重要度が高いためだ。

ステップ 4 – モバイルのサイトスピードをテストする

右上の“mobile”タブをクリックする

内部のページのテストも忘れずに実施すること

2. ページのロードをアナリティクスで追跡する

ページのロードスピードをアナリティクス内部で測定することが出来る点は、ご存知の方も多いだろう。しかし、その他にも幾つかこのアプローチを活用する方法があることは、あまり知られていない。

2つの方法で手順を紹介していく:

1. ワードプレスで計測する

2. ワードプレス以外のサイトで計測する

パート 1 – ワードプレスで追跡を設定する

ステップ 1 – 通常の追跡コードをインストールする

通常の分析追跡コードをワードプレスにインストールする方法、さらには、ページスピードのコードのスニペットをインストールする方法に関しても、既にご存知なのではないだろうか。

ここではGoogle Analyticator プラグインを利用する。

これは基本中の基本だが、ヒントになるはずである。ここに追跡コードをインストールする。

次に、ページスピードを設定する前に、ユーザーの追跡を正確に設定しているかどうかを確認する。念には念を入れよう。

以下のシンプルな3つの手順に従う必要がある:

1. “no”を選択する

2. トラフィックを追跡したくないユーザーにチェックを入れる（私ならadminのみにチェックを入れる）。

3. “Remove”を選ぶ – これが一番簡単な方法だ。

次にサイトスピードの設定に移る。この分析プラグインでは、とてもシンプルな設定方法が用意されている。

“enabled”になっていることを確認する。

簡単過ぎると思った方もいるのではないだろうか。しかし、これはあくまでも上級者向けのガイドである。これで基本の設定はカバーしたので、幾つかさらに重要な機能を加えていく。

ステップ 2 – Sample Rateを設定する

あまり知られていないが、sample rateを設定することが出来る。通常、グーグルアナリティクスは、サイトスピードのデータの大半を測定の対象から外している（デフォルトでは1%のみ）。そのため、、小規模なサイトを運営しているなら、多くの重要なデータを見失っている可能性がある。

Sample Rateは、トラッカーの初期設定の前にインストールする必要があり、適切なボックスを利用する必要がある点に注意してもらいたい。

以下にコードのスニペットを掲載する（Asyncのスニペット）:

_gaq.push(['_setSiteSpeedSampleRate', 5]);

数字の‘5’に注目してもらいたい。これは、新しい sample rateである – 全ての訪問の5%を指す。一ヶ月に訪問が1万回以下の小規模なサイトの場合、この数字を50、もしくは100に上げても問題ないが、理に適った量のデータの収集に徹してもらいたい。

しかし、サイトが、1日に10000回以上訪問される場合、グーグルは、自動的に1%のサンプルのみを集める可能性がある点を留意しておこう。

出来るだけサイプルの規模を抑えつつも、データを集める上で十分な量に指定することを薦める。

ステップ 3 – ソースコードを確認する

適切に動いていることを確認するため、常にソースコードを確認する癖をつけるべきである（adminとしてコードを閲覧することが許可されないため、ワードプレスにログインしている間は、チェックするべきではない）。

次のスクリーンショットのように、Track Pageviewの上にSample Rateのコードが表示されているはずだ。

パート 2 – ワードプレス以外のサイトで設定する

基本的に同じようなプロセスだが、全ての手順を説明していく。

ステップ 1 – グーグルアナリティクスを探し出す

サイトの設定によっては、ヘッダーを処理する.phpファイルを持っている人もいれば（ワードプレスのように）、ヘッダーが用意された静的なHTMLファイルを持っている人もいる（この場合、全てのファイルをアップデートしなければならない）。

私たちの例ではheader.phpを利用している。

ステップ 2 – ページロード時間のコードを加える

基本的なことだが、ページロード時間のコードを忘れずにアナリティクスに加えておこう:

以下にアナリティクスのコードを掲載する。ページロード時間のコードは太字で表記しておく:

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-1589983-1']);

_gaq.push(['_trackPageview']);

_gaq.push(['_trackPageLoadTime']);

(function() {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

ステップ 3 – Sample Rateコードを加える

次に同じようにsample rateコードを加えていく:

再び、次のコードを利用する:

_gaq.push(['_setSiteSpeedSampleRate', 5]);

数字を使って（今回は5）ページスピードを計測するサイトの割合を調節することが出来る。

レポートの場所

次の順にアクセスしていくと、このデータを見ることが出来る:

Content->Overview->Site Speed

次の手順を見過ごす人達が多いので注意してもらいたい。“page timings” ->にアクセスし、“technical”をクリックする。

この画面は、サイトのスピードに何が影響を与えているのかを示している。

アナリティクスの設定をテストする

最後にアナリティクスのクローム用プラグイン Debuggerを使ってテストを行う -

https://chrome.google.com/webstore/detail/jnkmfdileelhofjcijamephohjechhna

以上

3. ヤフー！のYSlow プラグインを利用する

ステップ 1 – YSlowをインストールする

http://yslow.org/にアクセスする。

ブラウザにYSlowプラグインをインストールする（インターネットエクスプローラ以外）。

ステップ 2 – YSlowを開き、実行する

rulesetには3つの選択肢が用意されている:

1. YSlow (V2) – 23 ruleのフルセットを実行する

2. Classic (V1) – 初めの13のruleを実行する

3. Small Site or Blog – 小規模なサイトに適用される14のruleを実行する

1ヶ月間の訪問が1万以下の場合に限って、small site or blogを利用するべきである。1万を超えるなら、YSlow (V2) を選ぶことを薦める。

テストしたページを読み込む。“Run Test”をクリックする。

ステップ 3 – 結果を確認する

Overall performance score – 85（B）を目指そう。

また、結果のタイプでレポートを絞り込むことも出来る。

優先順位付けの戦略として、私ならまずはFに力を入れる。

各レポートには、簡単な説明、そして、ヤフー！のディベロッパーサイトに掲載されている詳細へのリンクが記載されている。

YSlowに返された一つ目のエラーを確認する。

Make Fewer HTTP Request

“This page has 23 external Javascript scripts. Try combining them into one.

This page has 7 external stylesheets. Try combining them into one.

This page has 19 external background images. Try combining them with CSS sprites.”

これは一般的なエラーであり、CSSとJSファイルが最適化、そして、縮小されていないために起きている。

この分野の改善に関しては、”LESSを使ってCSSを最適化する”セクションを参考にしてもらいたい。

それでは、特に簡単な分野の一つ – 大きなイメージの縮小に取り掛かろう。

4. 大きなイメージを見つけて縮小する

大きなイメージは、サイトスピードの低下の要因となっていることが多い。そこで、大きなイメージを見つけ、縮小するための方法を紹介していく。

メソッド 1 – グーグルの画像検索

グーグルの画像検索を使って、大きなイメージを発見することが可能だ。これは、手っ取り早く、簡単に見つけられるイメージを探し出すメソッドとしてうってつけである。。

ステップ 1 – グーグルの画像検索にアクセスする

images.google.com

ステップ 2 – サイト検索を行う

site:quicksprout.comで検索をかけると、グーグルがインデックスした私のサイトのイメージが全て表示される:

ステップ 3 – セーフサーチをオフにする

確実にすべてのイメージを表示させる必要がある。

ステップ 4 – サイズで絞り込みを行う

まずは控えめなサイズ – larger640×480以上を選び、絞り込みをかける。

ステップ 5 – 結果を見る

結果を見る際は、「大きな」イメージになるべきではないにも関わらず、最終的にサイズが大きくなっているイメージを見つけてもらいたい。CSSやHTMLで、望む大きさにサイズが変更されている可能性がある。

以下に結果ページを掲載する。私はこのイメージが気になった:

写真をクリックすると、実際のサイズは遥かに大きいことが分かる。

これは明らかに大きなイメージを手っ取り早く探す手法である。続いて、スケールに応じて、より効果が高いアプローチを紹介していく。

メソッド 2 – スクリーミングフロッグ SEO スパイダーを利用する

スクリーミングフロッグを使って、サイトをクロールし、ファイルサイズごとに大きなイメージを表示させていく。

ステップ 1 – サイトをクロールする

チェックしたいサイトをクロールする。

次にイメージをクリックする。

Over 100kbで絞り込む。

サイズで絞り込みをかける。

.csvにエクスポートする。

スプレッドシートを使って、イメージの縮小プロセスの進捗状況を記録していく。大きなイメージを大量に抱えているなら、この作業には時間がかかるかもしれない。

5. グーグルクロージャーを使って、スピードを最適化する

JavaScriptを縮小して、単一のファイルに変えることで、ウェブサイトのスピードを改善することが出来る。なぜなら、多くの大きなファイルではなく、単一の小さなファイルをダウンロードすれば済むようになるためだ。これから、グーグルのクロージャーツールをインストールし、JavaScriptを全て縮小する方法を伝授する。

グーグルのコンパイラークロージャーサイトにアクセスする
ウェブサイトのURL: http://code.google.com/p/closure-compiler/
downloadをクリックする
リンク「compiler-latest.zip」をダウンロードする。

ZIP ファイルを開く
Mac:
ZIP ファイルをダブルクリックする。すると、「JAR」ファイルが含まれる同じ名前のフォルダが生成される。
JAR ファイルを全てのJavaScriptが存在するフォルダにコピーする
この例では、compiler.jarファイルをJavaScriptがあるフォルダにドラッグしている。

コマンドラインのウィンドウを開く
Mac:
Finderにアクセスし、 Applications > Utilities > Terminalの順に開いていく。ウィンドウズ:
Startをクリックし、“command prompt”を入力し、“command prompt”をクリックする。
JavaScriptが保存されているフォルダに変える
Mac:
“~/” を入力すると、JavaScriptのフォルダの場所が特定される。
この例では、私のJavaScriptが、code、os2、public、JavaScriptと言うフォルダのホームディレクトリに存在することが判明している。
ウィンドウズ:
“cd \”を入力すると、JavaScriptのファイルが存在するフォルダが明らかになる。
Javaのコマンドを入力して、縮小したJavaScriptのファイルを生成する
ウィンドウズおよびMac:
次のコードを入力する: “java -jar compiler.jar –js jquery.js jquery_spinner.js –js_output_file output.js”
“jquery.js”と“jquery_spinner.js”を縮小したいJavaScriptのファイル名に置き換える。順番が重要なら、適切な順序で入力していく。

“
output.js”を置き変える
この例では、jquery.jsと“jquery_spinner.”と呼ばれるプラグインをコンパイルした:

4. 縮小したJavaScriptファイルをプロジェクトに戻す

この例では、列 8を加え、JavaScriptをHTMLファイルに追加した。

5. 最後にテストして、全て動作するかどうかを確認する

6. CSSファイルとJSファイルを最適化する

二つ目のセクションと三つ目のセクションでは、サイトのパフォーマンスを評価する方法を取り上げた。次に、CSSファイルとJSファイルを、「LESS」を使って最適化する上級者向けの方法を伝授する。

LESSは動的なスタイルシートの言語であり、CSSを作成する。ここでは、LESSコンパイラーに自動的にCSSファイルを縮小させ、ユーザーがページをダウンロードするスピードを上げる、高度なテクニックを紹介する。

Lessのアプリケーションをダウンロード & インストールする
Lessは、CSSファイルを圧縮するための無料のアプリケーションを用意している
Mac:
http://incident57.com/less/を訪問し、Less.Appをダウンロードする。

ウィンドウズ:
http://winless.org/を訪問し、WinLessアプリケーションをダウンロードする。

Lessをコンピュータにインストールする。
Mac: ダウンロードをダブルクリックし、LessアプリをApplicationのフォルダに移動する。

Lessアプリケーションを開く
Mac:
Applicationフォルダをクリックし、Lessをダブルクリックする。

CSSファイルが保存されているフォルダを開き、CSSファイルの名前を「.less」に変える。
この例では、ワードプレスのテーマのCSSファイルを取り上げ、すべて「.less」に変更している。
変更前:
変更後:

Lessファイルを持つフォルダをLessアプリケーションにドラッグする
この例では、Lessファイルを含むフォルダをアプリケーションにドラッグして移動している:

Click、そして、Compileをクリックしていく
すると、ダウンロードのスピードアップにつながる、新しいCSSファイルが生成される。

Lessは、開いている間に、自動的にLessファイルをCSSファイルに縮小する。
アプリケーションが開いている時は、Lessファイルを変換する度に、自動的に縮小版CSSがアップデートされる。

Lessのファイルは通常のファイルと同じように表示されるため、編集することが出来る:

しかし、縮小したCSSファイルは次のように表示される:

この例では、ファイルサイズを2000削減した。大きな違いではないが、小さな最適化を重ねていくことで、ユーザーはより早くサイトをダウンロードすることが可能になる

7. グーグルのApache向けMOD_SPEEDをインストールする

グーグルのApache向けMOD_SPEEDをインストールする

Apacheサーバーでウェブサイトを運営しており、サーバーの設定をモジュールレベルで変更する権限を持っているなら、MOD_PAGESPEEDをインストールして、容易にスピードアップを実現することが可能だ。

警告: このテクニックは難易度が非常に高く見えるが、実際にはサーバーレベルでApacheを設定した経験がある人にとっては、割と簡単である。しかし、経験のない人が自力でこのアプローチを実施してしまうと、ウェブサイト全体がダウンする事態になりかねない。Apacheのモジュールをインストールし、ウェブサーバーをコマンドラインから設定する方法を知っていることが前提である。この方法が分からないなら、経験豊かなプロのウェブ開発者かシステム管理者に任せるべきである。

MOD_PAGESPEEDの詳細は次のURLで確認してもらいたい: https://developers.google.com/speed/docs/mod_pagespeed/using_mod

Debianベースのサーバーを利用している場合（DebianやUbuntu等）:

サーバーにSSHで接続する
mod-pagespeed .debパッケージをダウンロードする。
サーバーが32-bitのマシンなら、次のコマンドを利用する:
wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_i386.deb
64-bitのマシンの場合は、次のコマンドを利用する:
wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_amd64.deb
.debパッケージをインストールする
コマンドラインに次のコードを入力する:
dpkg -i mod-pagespeed-*.deb
壊れた依存性を修正する
次のコードをコマンドラインに入力する:
apt-get -f install

RedHatベースのサーバーを利用している場合（RedHat、Fedora、またはCentOS）:

サーバーサーにSSHで接続する
mod-pagespeed .debパッケージをダウンロードする
サーバーが32-bitのマシンなら、次のコマンドを利用する:
wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_i386.rpm
サーバーが64-bitのマシンなら、次のコマンドを利用する:
wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_x86_64.rpm
Yumパッケージマネージャーを使って、“at”をインストールする
次のコードをコマンドラインに入力する:
yum install at
壊れた依存性を修正する
次のコードをコマンドラインに入力する:
rpm -U mod-pagespeed-*.rpm

MOD_PAGESPEEDを設定する

編集するApacheの設定ファイルを開く
UbuntuまたはDebianを利用しているなら、ファイルは次の場所にある:

/etc/apache2/mods-available
CentOS、Fedora、または、Redhatを利用しているなら、ファイルは次の場所にある:
/etc/httpd/conf.d
pagespeed_moduleのディレクトリを探す。
IfModuleディレクティブの内側にある。

module per folderを有効または無効にする
サイトの.htaccessファイルに次の列を加える:

ModPagespeedを有効にするには:
ModPagespeed on

ModPagespeedを無効にするには:
ModPagespeed off

8. ブラウザのキャッシング（ワードプレス以外のサイト）

恐らく、皆さんの多くがワードプレスのサイトを運営しているはずである。そこで、パフォーマンスをスピードアップする上で役に立つプラグインを幾つか紹介していく。

しかし、まずは、ワードプレスを利用していない人達のために、スピードを最適化するための技術的な情報を提供する。

ここでは、ブラウザのキャッシングを活用するため、.htaccessファイルを利用する高度なテクニックを幾つか取り上げる。グーグルのPageSpeed Onlineで警告を受けたなら、以下のテクニックを利用して、問題を解決してもらいたい。

注記: .htaccessファイルの編集に慣れている必要がある。編集するべきかどうか分からないなら、ウェブマスターに声をかけるべきである。

ステップ 1 – FTPサーバーにログインして、.htaccessファイルをバクアップする

好きなFTPクライアントを利用するか、または、FileZillaをダウンロードして、利用する: http://filezilla-project.org/

FTPを介してログインする方法をご存知だとは思うが、念の為に簡単に説明しておく:

Host: ウェブサイトの名前

Username

Password

Port: 大抵の場合、ここは空白のままにしておく。

ステップ 2 – .htaccessファイルを探す

このファイルはルートディレクトリに存在する。隠れているファイルを見られる状況にしておく。さもないと、気づかない可能性がある。

注記: 場合によっては、.htaccessファイルを持っていない可能性もあるが、その場合は、新しいファイルを作成すればよい。テキストエディタで新しい文書を作り、名前を.htaccessにする。

ステップ 3 – .htaccessファイルをダウンロードして、バックアップする

次に、.htaccessファイルをダウンロードし、バックアップを保存する。安全に編集するためだ。万が一、ミスがあったら、復元しよう。

FileZillaで、右クリックし、ダウンロードする:

テキストエディタで開く。

次に、‘save as’をクリックし、テキストファイルとしてバックアップのコピーを保存する:

これで、編集する準備が整ったことになる。

ステップ 4 – コードを加える

手順ごとにコードを紹介していく。最後に切り取り & 貼り付けすることも出来るが、手順を追うことで、仕組みを理解することが可能になる。また、個人的に、実際に入力することを薦める :-)

写真ファイル

1. RewriteEngineを有効にする – .htacessファイルでまずこの作業を行うべきである

2. <file>のラッパータグを加える

3. ラッパー内にファイルのタイプを加える

4. キャッシングを生成し、最長時間を1週間に設定するコードを加える

5. 同じコードをその他の写真ファイルのタイプにも加える – .png & .gif

– ここでは、写真のキャッシュの時間は1週間に設定している。写真が変わる頻度、そして、ユーザーが訪問する頻度に応じて、自分のサイトに適切な時間の枠を指定する必要がある。

CSS

コードは基本的に同じだが、CSSでは異なる時間の長さを選んでいる。

するとCSSは1日でキャッシュされるようになる。繰り返すが、期間は、CSSファイルを変更する頻度、そして、ユーザーがサイトを再び訪問する頻度に左右される。

Javascript

JavaScriptのキャッシングのコードも基本は同じだが、ここでは、1ヶ月に設定する。

この期間は、サイトのJavaScriptへの依存の度合い、そして、変更される頻度に左右される。

時間の早見表

以下にそれぞれの時間の枠を秒数で計算した値を挙げていく:

5分間を秒数にすると = 300
1日を秒数にすると = 86,400
1週間を秒数にすると = 60,4800
1ヶ月間を秒数にすると = 2,629,000
6ヶ月間を秒数にすると = 15,774,000
1年間を秒数にすると = 31,536,000（無限に近い）

先程も申し上げた通り、サイトにとって妥当な時間枠をファイルのタイプで組み合わせることも、マッチさせることも出来る。自信がないなら、安全を優先させ、若干時間の枠を短くすることを薦める。

このチャプターで紹介したアドバイスに従い、伝授したテクニックを実行すれば、サイトのスピードは確実に上がるはずである。次のチャプターでは、検索の新しい & 画期的な領域を取り上げていく。競合者に遅れを取りたくないなら、これから紹介するアドバイスに従ってもらいたい。

【上級者向けSEOガイドの記事一覧はこちらから】

この記事は、Quick Sproutに掲載された「Chapter 2: Site Speed and Performance」を翻訳した内容です。

Pagespeedはもちろん各種ツールのマニアックな解説からして凄かったですが、Google画像検索を使った画像サイズのチェック方法のアイデアなど、筆者のニール・パテル、探究心の塊というかオタク中のオタクというか、、、正にSEOはもちろんウェブマーケを追及するために生まれてきた人間といっても過言ではないような？今後の記事も期待できそうでワクワクしてきた適度なSEOオタクの私でした。 — SEO Japan [G+]