ページの表示速度とは、1つのあるページが表示されるまでのロード時間である。言い換えれば、Webサーバーへ「ページを表示せよ」という要求を投げて、帰ってきて表示されるまでの時間でもある。
早ければ良いに超したことはなく、サイトの表示順位やコンバージョンそのものにも影響する。
ページ表示速度を改善することの重要性
そもそも、ページ表示速度が重要な理由は、まずGoogleが検索の表示ランキングでページ表示速度を1つの指標としているからだ。Googleはこれを明らかに名言しており、何かのワードで検索したときの表示される順位に影響している。
次に、Googleが各ウェブサイトをクロールしていく際に、ページ表示速度が遅いと、そのサイト全体のページの隅々にわたるまでクロールされなくなる。
クロールされないと、ページがGoogleにインデックスされないため、せっかく新しい記事を作ってもなかなか認知されず、順位はおろかインデックスすらされない状態が続く。
このように、ページ表示速度というのはSEO的に重要な意味を持っているのである。
ページ表示速度を改善する方法
ページ表示速度を改善する方法は、技術的な方法が多く、Webサイトの制作会社やサーバー管理者にやってもらう必要のあるものが多い。
その中でも、まずは自分でやり易いものから始めて、その後可能なら改めてWebシステムの業者など技術的なサポートを行ってくれるところに依頼してみよう。
どのようなしくみで、改善するために一般的にどのような方策が取られるのか理解することが重要だ。
1.画像の読み込みの高速化
画像を最適化して、画像の読み込みを高速化する方法は、技術的に難しい作業でもなく割と自分で改善できる方法の1つである。
今や各ページに画像は必須である。画像が無いと、より良く説明されていない、情報的価値の少ないページであるとGoogleに判断されやすいし、ユーザー視点で見ても画像があるほうが、目に留まりやすい。
画像の高速化とはすなわち、①正しい画像フォーマットであるか、②画像ファイルのサイズが必要最小限になっているか、である。
画像フォーマットの最適化は、単純に言えば、16色以内でおさまる画像(図など画像)はPNGファイルにして、写真などの多様な色を使う画像はJPEGフォーマットのファイルにすることである。
そして、それらの適切なフォーマットを使った画像を、ファイルに保存する際に解像度を下げてファイルサイズをできるだけ小さくすることである。
解像度を下げてもWebサイトの見栄えとしては大差はない。 サイト上で写真が表示される際に、明らかに見劣りすると判別できないギリギリのところまで解像度を下げたり、必要以上に大きな写真を使用せずに、小さくすることもポイントである。
また、少々技術的な話になるが、「css スプライト」という技術を使うことも画像の高速化に役立つ。すなわち、サイト上でよく使われるボタンなどの画像を1つ1つ表示するのではなく、サイト上で使用されるボタン・アイコンを全部まとめた1つの画像ファイルを作り、ページ上であるボタンを表示する場合に、セクションを指定して1つのボタンを表示する手法だ。
これによりHTTPリクエストの回数を減らし、表示速度の改善に資する。
2.サーバーの応答時間の短縮
サーバーの応答時間は、サーバー会社やそのサーバー会社が使用しているソフトウェア、ウェブサイトのページを構成する画像やプログラミングなどのアセットの量、ウェブサイトにアクセスしてくるトラフィック量に影響を受ける。
ページ表示速度を改善するために、サーバーの応答時間を0.2秒以内(200ミリ秒)まで縮めることが理想である。
そのためには、データベースのクエリーを改善したり、サーバーのメモリ、SSDに変えるなどサーバーのグレードアップを検討する必要がある。
まずは、自分のWebサイトのサーバー応答時間がどうなっているのか調べてみよう。
一度ウェブサイトを表示すると、キャッシュができて、2度目から自分のPCにキャッシュされたデータを使ってページが速く表示されるため、自分の管理しているWebサイトの表示速度は盲点になりがちだ。
【 正確なサーバー応答時間を計測したいとき 】
性格なサーバー応答時間を計測するツールとしては、WebPageTest(ウェブページテスト)で計測するのがオススメだ。
使い方は、① URLを入力し、② 自分のいる国(通常日本だとしてtolyo, Japan)を選択、③ スタートボタンを押す。
【 速いのか遅いのかのだいたいの目安を知りたいとき 】
だいたいの目安で知りたい場合は、Googleが作ったテスト・マイサイトがオススメである。
3.ブラウザーのキャッシュの活用
クローム、インターネットエクスプローラーなど皆が使っているブラウザーは、最初にサイトを表示した際に、スタイルシード、画像、JavaScripファイルなど色々な情報を保存する。
そうすることで、2回目に同じページを表示するとき、ページ全体をロードせずに保存してあるキャッシュを使うことでページ表示速度を高速化してくれる。
このキャッシュしてくれる期間は、サーバー上での期限の設定で指定できる。
一般的には、デザインを頻繁に変更するウェブサイトではない限り、長い期間キャッシュされるのが望ましい。最大期間である1年が適切であろう。 さらに詳細なブラウザのキャッシュの設定については、こちらを参考のこと。
4.リダイレクトを減らす
リダイレクトとは、あるURLを表示したら自動的に別のURLのページを表示するように設定して、表示するURLが自動で切り替わることである。
用途としては、サイトの工事中に別のページを表示するように仕向けたり、ページを統合する場合など色々ある。
リダイレクトは、URLが切り替わる間、表示速度に時間がかかる点であり。 一時的にどうしても必要な場合など、なるべく使わない方が望ましい。
5.CSS, JavaScript, HTMLファイルの最小化
効率的なコーディングをするだけで、サイトの表示速度は劇的に変わる。不要なスペース、文字を削除して、コーディングの説明をするコメントも控えよう。
Googleは、CSSとJavaScriptファイルに、YUIコンプレッサーを使用することを推奨している。
6.ファイルの圧縮
150バイト以上あるHTML、CSS,JavaScriptファイルは、ファイルの圧縮を行うべきである。
GZipというファイル圧縮をやってくれるソフトウェアを使って圧縮したほうがよい。 間違っても、画像ファイル自体をこれで圧縮しないこと。
画像が粗雑になって使い物にならない。画像については、上記ですでに述べた方法で行う。
7.CDN(コンテンツディストリビューションネットワーク)を使う
CDN(コンテンツディストリビューションネットワーク、コンテンツデリバリーネットワークとも言う)とは、コンテンツを世界中の色々な地域のサーバーにも分配して、ヨーロッパやアメリカなど遠いリージョンからアクセスされた場合、そこから地理的に近いところにあるサーバーが代わって、コンテンツを表示することで、サイトのページ表示速度を速める仕組みである。
CDN自体は、ページ表示速度を速める目的もあるが、セキュリティなどその他の理由で使用されることも多い。人気のあるメディアサイトを運営しているならば、一度は検討する必要がある。