年間何百ものWebサイトを確認している当社でも、内部施策SEOが完璧にできているというサイトを見たことがありません。内部施策SEOに漏れがあるということは、自分でできることをやっていないということであり、それだけで機会損失を発生させている可能性があります。本書では、ご自身でセルフチェックと修正ができるよう、Googleが推奨する内部施策SEOのうち、重要なポイントをかいつまんでご紹介しております。
2018年1月18日、Googleのウェブマスター向け公式ブログにて、モバイル検索のランキング要素にページの読み込み速度が組み込まれるSpeed Update（スピード アップデート）を実装することが発表され、2018年7月9日に全てのユーザーに対して開始されました。
このアップデートは、極端に遅いサイトのみ対象となるアルゴリズムの変更ですが、サイトの表示速度が遅いことはユーザーの離脱が起こる可能性もあり、Web担当者にとっては頭を悩ませる問題のひとつかと思います。そこで今回は、サイトの表示速度の重要性や、表示速度を改善する具体的な方法についてご紹介します。
目次
表示速度とは、ユーザーがサイト（ページ）に訪問した際の表示時間（ページの読み込み速度や応答速度）のことを言います。
では、なぜ表示速度の改善が必要なのでしょうか。これには、大きく分けて3つの理由があります。
例えば、あなたが検索行動を行っているとき、見たいページがなかなか表示されず、ロードが長いサイトをじっくり見たいと思うでしょうか？
俗に言う「重い」サイトは、内容の良し悪しに関わらず、ユーザーから嫌われます。そのサイト自体を目的としていない場合、離脱して同じ情報を扱う別のサイトに移動してしまうこともあるでしょう。
ユーザーにとってストレスなくサイトを閲覧してもらうために、サイトの表示速度は重要な要素のひとつです。
Googleは2010年4月9日（金）のウェブマスター向けブログにて、このように述べています。
You may have heard that here at Google we’re obsessed with speed, in our products and on the web. As part of that effort, today we’re including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.
Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings. We use a variety of sources to determine the speed of a site relative to other sites.
引用元：Using site speed in web search ranking
重要なところをざっくり直訳すると「検索ランキングのアルゴリズムで、サイトの表示速度を考慮しています。Googleはさまざまな方法を使って、サイトの速度を判断します。」と述べています。つまり、サイトの表示速度も検索ランキングを決める要素のひとつなのです。
また、最初に記載しましたが、2018年7月9日からは、モバイル検索のランキング要素にも組み込まれています。
では、ランキング要素としてなぜ組み込んだのでしょう。こちらも上記の引用内に答えがあります。
「私たちの内部調査では、サイトの応答が遅い場合、訪問者の滞在時間が短くなることがわかりました。ユーザーはスピードを重視しています。そのため、私たちはサイトの表示速度をアルゴリズムに組み込みました。」
Googleが掲げている理念のひとつに「ユーザーに焦点を絞れば、他のものはみな後からついてくる。」というものがありますが、Googleの検索アルゴリズムは、突き詰めれば「ユーザーのためになること」が基礎になっているのです。
実は、サイトの表示速度が遅いと売上が減少するという恐ろしいデータが出ています。
EC最大手Amazonによると、サイト表示が0.1秒遅くなると、売り上げが1%減少。1秒高速化すると10%の売上が向上するという公表が出ています。また、Googleからも、ページの反応が0.5秒遅くなるとアクセス数が20％低下するという調査結果が出ています。
他にもアメリカのAberdeen Group 2008年の調査によると、スピードが1秒遅くなるとページビューが11％、コンバージョンが7%、顧客満足度が16%低下するという調査結果が出ています。
上記のように、表示速度が遅くなることでアクセス数が低下・顧客満足度が低下・売上が減少、表示速度が速くなることでそれらが向上するということがわかります。
参考：2008年 Google調査、2006年 Amazon調査、2008年 米Aberdeen Group 調査
サイトの表示速度が速ければ、UX向上・SEO効果・さらに売上の向上と、いいことだらけです。表示速度が速くて困ることはありませんので、ご自身のサイトの表示速度が遅いと感じる方は、改善を行いましょう。
少し話がズレますが、表示速度に関係してよく質問をいただく、「Speed Update（スピード アップデート）」と「モバイルファーストインデックス」について解説します。
同じように感じられている方のいるのですが、実はこの2つは異なるアップデートです。
簡単に言うと下記のような違いがあります。
| モバイルファーストインデックス | インデックスの基準をPCからモバイルへ変更 |
|---|---|
| スピードアップデート | アルゴリズムにモバイルの表示速度を組み込む変更 |
つまり、モバイルファーストインデックスはインデックスに関するアップデートで、スピードアップデートはアルゴリズムのアップデートです。
また、Google Webmastersの公式Twitterでも関係がないアップデートとアナウンスしております。
Speed and mobile-first indexing: The mobile speed update in July is independent of mobile-first indexing. Fast sites are awesome for users, especially on mobile, since devices & connections there tend to be slower than with desktops.
引用元：Google Webmastersの公式Twitter
このように、どちらとも検索順位に関わるアップデートですが、アップデート種類が異なりますので、混同しないように注意しましょう。
では、具体的な改善方法をお話する前に、まずはどのように表示速度を調査するのか見ていきましょう。
サイトの表示速度を調査できるツールはいくつかあります。その中でも、主要なGoogleが提供しているツールを3つご紹介します。
Test My Siteでは、モバイルページの表示速度を無料で調査することができます。3Gでのページの読み込み速度が表示されます。さらに、その下には、その読み込み速度による推定の離脱率が表示されます。
このツールの嬉しい機能の1つが、下記のように自社サイトが同じ業種内と比べてどれくらいの表示速度なのか比較してくれる機能です。自社サイトが他社に比べて勝っているのか劣っているのか気になる方にとってはありがたい機能です。
また、「無料レポートを取得する」をクリックし、アドレスを入力すると、入力したアドレス宛にレポートを送付してくれます。
実は、Google Analyticsでも確認することができるのをご存知でしょうか？Google Analyticsにログインしていただき、「行動」内にある「サイトの速度」で確認することができます。
いくつか表示される項目がありますので、それぞれどんなことが分析できるのか見ていきましょう。
サイト全体の読み込み時間の平均がグラフで表示されます。また、ブラウザごとの表示速度も確認することができます。
各ページの表示速度が把握できます。
また、各ページの表示速度がサイトの平均表示速度に比べて遅いのか、速いのかも合わせて表示されます。平均よりも遅い場合には右側に赤色グラフが、平均よりも速い場合には左側に緑色のグラフが表示されます。
各ページの平均読み込み時間と改善提案が表示されます。
この「PageSpeed の提案」に表示されている改善をクリックすると自動で、PageSpeed Insightsが立ち上がるようになっており、改善のポイントを表示してくれます。
通常何のデータも表示されていませんが、分析したい時間を独自に設定しトラッキングすることで、分析したいデータを表示させることができます。
参考サイト：カスタム速度
3つ目が、PageSpeed Insightsです。こちらもGoogleが提供している無料のツールになります。
「ウェブページのURLを入力」部分に調査したいURLを入力すると、下記のような画面が出てきます。
2018年11月14日より、PageSpeed Insightsの分析エンジンがLighthouseを利用することになったため、今までのPageSpeed Insightsでは、分析できなかったことも結果として表示されるようになりました。
引用元：PageSpeed Insights、Lighthouse の使用を開始しました
そこで、まずは簡単にどのようなことがページに記載されているのか見ていきます。
Lighthouse を使用してページを取得・分析したパフォーマンス指標が計算され、その指標が0~100のスコアとして表示されます。
| 0~49（赤色） | 遅い（修正が必要） |
|---|---|
| 50~89（黄色） | 平均（修正を考慮） |
| 90~100（緑色） | 速い（修正の必要なし） |
First Contentful Paint、First Input Delay などのページのパフォーマンス指標が表示されます。しかし、一部のデータは取得されない、ラボデータと異なる場合があるみたいなので、注意しましょう。
必ずしもすべてのサイトに表示可能なフィールド データがあるとは限りません。データは、毎日更新される Chrome ユーザー エクスペリエンス レポートを利用し、過去 28 日間かけて収集されます。実際のネットワークの状態や Chrome ユーザーが使用する端末は広範囲に及ぶため、ここでの指標は、ラボデータ欄の指標とは異なることがありますのでご注意ください。
引用元：PageSpeed Insights、Lighthouse の使用を開始しました
改善すべき項目とその項目を改善することにより、どれくらいの時間が短縮できるのかが表示されます。
さらに、各項目をクリックすると項目によっては、改善すべき画像やcssなども表示されます。
アプリケーションのパフォーマンスに関して、おすすめの設定がどれくらいできているかの情報が表示されます。
既に改善ができており、追加での改善の必要がない項目が表示されます。
では、把握できた改善すべきポイントはどのように改善していくのがご紹介します。
今回は、「Test My Site」と「PageSpeed Insights」から改善すべき内容として表示される内容の一部をご紹介します。
ウェブページのスタイルを指定するための言語がCSSです。この.cssファイルが複数のある場合、できるだけひとつの内容にまとめてください。
「async属性」と「defer属性」を使用してレンタリングを妨げないようにします。
外部ファイルを読み込む間、レンダリングが途中で中断され遅延が発生する問題をは、上記の施策によって解決します。
PageSpeed Insightsでは、サーバの応答時間が0.2秒以上であるとこの項目の修正対象となります。
この解決方法としてgoogleが推奨している方法は下記です。
既存のパフォーマンスやデータを収集して調査します。データがない場合は、自動的なウェブ アプリケーション監視ソリューション使用したり（ほとんどのプラットフォームでホストされたオープンソース版が提供されています）、カスタムな計測プログラムを追加したりします。
パフォーマンス上の最大のボトルネックを特定して修正します。一般的なウェブ フレームワークやコンテンツ管理プラットフォームを使用している場合は、パフォーマンス最適化のベスト プラクティスに関するドキュメントを確認してください。今後のパフォーマンスの問題に備えて、監視と警戒を続けます。
引用元：PageSpeed Insights サーバーの応答時間を改善する
なお、WordPressを使用している場合、プラグインが多いと重くなる原因となります。そのため、使用していないプラグインは停止、もしくは削除を行いましょう。
また、PHPのバージョンが古い場合にはバージョンアップするのも有効な手段です。
現在の.htaccessファイルに下記の記述を追加するだけで解決です。
これにより、一度閲覧したファイルを保存して使い回す期間をファイルの種類によって設定することが可能になります。
まずは画像の枚数を減らすことが理想です。例えば、テキストで良いのにも関わらず画像になっている部分は、画像内容をテキストにしましょう。
次に、残す必要がある画像を適切な大きさに変更しましょう。無駄に画像が大きい場合は、これにより表示速度を遅くしている可能性があります。
最後に、画像を圧縮してファイルの軽量化をしましょう。これを行うに際には下記ツールを使用すると便利です。
なお、こちらのツールは非可逆圧縮ですので、圧縮ファイルを元に戻す事が不可能です。使用する際は、元データのバックアップをとってから行いましょう。
下記を現在の.htaccessファイルに下記の記述を追加するだけで解決です。
最初の「AddOutputFilterByType」から「text/xml」までは1行で記載して下さい。
これにより、ホームページの内容や画像を表示する際、ブラウザとWebサーバの間で毎回この圧縮を行う事で表示速度を改善することができます。
JavaScriptとCSSのコード量を少なくすることで、読み込み量が少なくなるため表示速度を速くすることができます。
なお、下記ツールを使用することで簡単に圧縮することが可能です。
googleが推奨している方法は下記です。
Google の推奨事項に従ってレスポンシブなウェブ デザインを使用すると、必然的にサイトでリダイレクトを避けることができます。
サイトでどうしてもリダイレクトが必要な場合は、次の両方を行う必要があります。
HTTPリダイレクトを使用して、モバイルユーザーエージェントを持つユーザーを、モバイルの対応するURLに中間リダイレクトなしで直接送信します。
パソコン向けのページに<link rel=”alternate”>マークアップを含めて、モバイルの対応するURLを指定し、Googlebotがモバイルページを検出できるようにします。
引用元：PageSpeed Insights リンク先ページでリダイレクトを使用しない
googleが推奨している方法は下記です。
スクロールせずに見える範囲の重要なコンテンツを最初に読み込むようにHTMLを構成する
ページの主要なコンテンツを最初に読み込みます。サーバーからの最初のレスポンスでページの重要な部分の表示に必要なデータがすぐに送信され、残りは後で送信されるように、ページを構成します。つまり、コンテンツのスクロールせずに見える範囲のスタイルを指定したインライン部分と、遅れてもよい部分の2つにCSSを分割する必要があります。
読み込みを速くするためにサイトを再構成する方法として、次の例を検討してください。
HTMLでメインのコンテンツを読み込む前にサードパーティのウィジェットを読み込んでいる場合は、メインのコンテンツを最初に読み込むように順序を変更します。
サイトでナビゲーション用サイドバーと記事の2列で構成されたデザインを使用していて、HTMLで記事より前にサイドバーを読み込んでいる場合は、記事を最初に読み込むことを検討します。リソースで使用されるデータの量を減らす
さまざまな端末に適合し、重要なコンテンツを先に読み込むようにサイトを設計し直したら、次の手法を使って、ページの表示に必要なデータの量を削減してください:
リソースを圧縮（ミニファイ）する: HTML、CSS、JavaScript は、不要な空白やコメントを削除して圧縮することができます。リソース内の変数名を変更するツールを使用すると、さらに最適化できる場合があります。
可能な場合は画像の代わりに CSS の使用を検討します。
圧縮を有効にします。
引用元：スクロールせずに見える範囲のコンテンツのサイズを削減する
なお、上記10個の解決策の他、WordPressなのであれば下記のプラグインを入れることで、表示速度を速くすることも可能です。
SEOの内部施策を満たしたWebサイト制作
Webサイト制作に関して以下のお悩みを持ったことはありませんか？
「検索エンジンに好まれる内部施策をWebサイトに実装してくれるのか・・・」
「SEOに強いWebサイト制作会社を探してる・・・」
以前、私がWebサイト制作を外注する時に「SEO要件を満たしたWebサイトを作ってくれる会社なのか」「成果を最大化するアドバイスがもらえるのか」こうした会社を見つけることが出来ませんでした。
当社はWebサイト制作はもちろんのこと、SEO歴16年以上の実績を持つ「SEOの相談ができるWebサイト制作」を依頼できる会社です。なぜなら、SEO相談実績1000社以上で多くのWebサイトのSEO改善を図ってきたからです。また、経験豊富な専任コンサルタントが社内のSEOコンサルタントや制作チームと連携してWebマーケティングの収益最大化を目指すことができます。
当社の強みは以下にあります。
当社にWebサイト制作をお任せ頂いたお客様で様々な成果事例が報告されています。
当社は「SEO×クリエイティブ」のちからで課題を解決できるWebサイト制作の代行会社です。当社の「Webサイト制作サービス」をご確認ください。
いかがでしたでしょうか。
まずはこの記事をもとに、ご自身で改善してみてください。
そして、わからないこと、できないことがあれば、ぜひお気軽にお問い合せいただければ幸いです。
社内でWordPressを運営しているのであれば、Webサイトへの集客力を上げるため、SEO対策が可能なプラグインの利用が欠かせません。もし…
皆さんはSEOを外注ではなく、自分で実施したいと考えたことはありませんか？ 外部リンクによるSEOが終焉に近づき、コンテンツによるSEOが全…
SEO対策を行う際に、キーワードの選定は非常に重要な項目です。 Webマーケティングは、顧客となりうるターゲットユーザーを明確に定義するとこ…
WordPressでサイト立ち上げることになった時、「どんなプラグインを使うべきか分からない！」とお困りの方も多いのではないでしょうか？ 今…
「WEBサイトの流入が増えない」「狙っているキーワードでの検索順位がなかなか上がらない」といったSEOに関する悩みを抱えているが、「原因が何…
SEOやコンテンツマーケティングなどのWebマーケティングをする際、コンテンツの設計においてキーワードの選定は非常に重要です。 たとえば、ウ…
SEOのアウトソーシングがはじめての人でも大丈夫！当社のSEOコンサルティングは、お客様に合わせて施策をカスタマイズするこだわりのサービスです。
Webマーケティングに関わる施策全般をワンストップで
ご提供します。
お気軽にご相談ください。
Webマーケティング最新ニュースのレポートや無料セミナーの先行案内が届く、お得なメルマガ配信中！
検索順位で1位まで上げるためのSEOポイント8つ
EEATとは？コンテンツ評価を高める12のSEOポイント
成功確率アップ！BtoBのコンテンツマーケティング施策とは
YMYLとは？該当するジャンルとSEOにおける対策のポイント8つ
SEO内部施策の重要項目16選～損失評価の防止策～