UX向上とSEOに不可欠なWebサイトの表示速度を上げる方法＋3つの分析ツール

Webサイトの表示速度を早くすると、UXを向上させると共にSEO対策にもなります。ユーザーがストレスを感じない環境を作り、滞在時間や売り上げをのばすという観点においても、表示速度はとても重要なファクターです。

その重要性は、AmazonやGoogleによるデータからも見てとることができます。Amazonは2006年に、Webサイトの表示速度が0.1秒はやくなるごとに収入が1%増加したという驚くべき情報を公開しました。また、最近のGoogleのデータによると、Webサイトが5秒以下で表示される場合、ユーザーの滞在時間が70%以上向上するということがわかっています。

この記事では、まず現状の表示速度と課題を把握するために必要な分析ツールをご紹介し、次に表示速度を上げる方法をお伝えします。

表示速度の分析ツール3選

表示速度を遅くしている原因を探るための無料のツールはいくつかありますが、その中でも特に広く使われているのが以下の3つです。

三つのツール全てに共通していえることですが、これらを使う際には完璧なスコアにこだわりすぎないようにしましょう。重要なのは最適な表示速度にするために主な問題を突き止めて改善することであり、スコアを完璧にすることではありません。特にGoogle Page Speed Insightsを使用していると、スコアが上がれば検索順位も向上するという考えからスコアにこだわってしまいがちですが、ハイスコアにこだわりすぎないようにしましょう。

(1) Pingdom Website Speed Test

他の二つのツールよりも情報量は少ないですが、重要性が高い情報を提供してくれます。提供される情報に沿って修正をした場合、表示速度は劇的に改善されるはずです。

Pingdom Website Speed Test

(2) GT Metrix Page Speed Analyzer

上記のPingdomに似たツールですが、Pingdomより多くの情報を提供してくれます。Pingdomを使ったあと、まだ改善すべき点がある場合はこのツールを使用するのがおすすめです。

GT Metrix Page Speed Analyzer

(3) Google Page Speed Insights

他のツールに比べると改善できる速度の幅があまり大きくないという点において若干見劣りはしますが、それでも改善に一役買ってくれる便利なツールです。

Google Page Speed Insights

Pingdom Website Speed Testで表示速度を測ってみた

WorkshipMAGAZINE編集部でも、Pingdomを使ってページ表示速度を解析してみました。まずページにアクセスしてWebページのURLを入力し、もっとも近い国（サーバー）を選択して「Start Test」をクリックします。ページの解析が終わると、表示速度のスコアや改善できる内容の内訳が表示されます。

レスポンスに対応できているか、コンテンツのなんの要素がどれくらいの容量を占めているのかなど、自社サイトのスピードがなぜ遅いのか、またはなぜ早いのか、わかるようになっています。かなり詳細までみてくれるので、一度やってみてください。

表示速度を上げる4つの方法

表示速度が遅い原因を突き止めたら、提案された点を改善しましょう。この記事では、表示速度を上げることにダイレクトに繋がる、主要な改善点についてご紹介します。多くの場合は初心者でも簡単に改善できます。

ブラウザのキャッシュを利用する

ブラウザのキャッシュは基本的に、WebサーバーではなくブラウザからWebページのリソースを要求するように、ユーザーのブラウザに指示することによって機能します。新規の閲覧者は対象になりませんが、リピーターについては大幅な表示速度の向上が見込まれます。

キャッシュを利用するためには、Webサイトのルートフォルダにある.htaccessファイルに行を数行追加する必要があります。もしない場合には、テキストファイルを作成して以下のコードを追加し、Webサイトのルートフォルダ内に.htaccessとして保存してみてください。

## EXPIRES CACHING ## ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" ## EXPIRES CACHING ##

リソースを統合・最小化・移動する

JavaScriptとCSSのファイルを可能な限り少ないファイルに統合し、最小に抑えることで、読み込みをより高速にすることができます。また、JavaScriptファイルが読み込まれているあいだにページコンテンツの読み込みが行われないように、ファイルを移動させることも効果的です。

JavaScriptとCSSのファイルを統合する際は、必ず正しい順番になっていることを確認しましょう。ブラウザのインスペクタを利用してファイルがロードされた順番を確認し、各ファイルをコピーしてコードをひとつのファイルにペーストする方法がおすすめです。これにより、たとえばjQueryがjQueryに依存する機能より前にロードされるように確認することができます。CSSについても同様です。

ひとつのファイルが大きくなりすぎた場合、複数のファイルに分割することも可能です。ただし、ファイルサイズは最小限に抑えるようにしましょう。ファイルができたら必ず最小化して保存し、HTML内の古いファイルを新しいファイルに置き換えます。

JavaScriptファイルの場合は、ファイルを参照するスクリプトタグを、HTMLの最後にあるBodyの終了タグの前に追加しましょう。

CDNを活用する

CDNから静的リソースを読み込むことも、表示速度改善に役立つ方法のひとつです。CDNを活用することによって、ブラウザが別のドメインからコンテンツを取得しているあいだにページが読み込まれるようになります。これにより、WebサイトでCookieが使用されている場合におこる「クッキーレスドメインからのコンテンツ配信」という問題も改善することができます。

CDNプロバイダを使用してコンテンツを配信することもできますが、独自のCDNを作るのもおすすめです。独自のCDNを作るには、まずCSS、JavaScriptまたは画像ファイルがWebサイトの他のファイルとは別のフォルダにあることを確認します。そしてフォルダを直接指定するサブドメインを作成しましょう。

たとえばCSSを提供するには「css.yourwebsite.com」というサブドメインを作成し、Webサイト内のフォルダに直接接続します。そして「/css/styles.css」を使用してCSSのファイルを参照するのではなく、フロントエンドで「csscdn.yourwebsite.com/style.css」を使用します。

この方法はJavaScript、画像、その他のリソースについても応用可能です。

画像を圧縮する

画像の圧縮には画質の低下というイメージがつきものですが、最近は画像を圧縮しても画質が著しく損なわれることはありません。Wordpressのプラグインから自動的に画像を圧縮するスクリプトまで、さまざまな画像圧縮技術が活用されていますが、手動で画像を圧縮する際に便利なのが、画像をページにドラッグするだけで手軽に圧縮することができるTinypngという無料のツールです。

Tinypng

Tinypngを使えば、目立った画質の低下なしで57KBの画像を15KBまで圧縮することが可能です。もしWebページに大きな画像がある場合や画像が多い場合、それらすべてを圧縮すればWebページの表示速度は大幅に改善するはずです。

GlupやGruntというツールをご存知でしょうか。これらのツールはJavaScriptやCSSの縮小や画像の圧縮などのタスクを自動化することに優れた、とても便利なツールです。使ったことがないかたは、Web開発ツールセットにぜひ追加してみてください。

Webページの表示速度を改善するための方法や、利用できる便利なツールはWeb上に数多く存在しています。理想的な表示速度を実現するために、今回ご紹介した方法以外も含めて、さまざまな角度からアプローチしてみましょう。

（翻訳：Asuka Nakajima）