サイトパフォーマンスの最適化、言い換えれば技術的に優れたウェブデザインは、今日のオンラインビジネスの成功を左右します。すぐに表示されないウェブサイトは訪問者に敬遠され、結果的に収益に影響します。ウェブブラウジングが日常の一部となった今、「待たされる」ことに耐えられない人が増えています。

つまり、ウェブサイトはスピードが命

このページでは、表示速度の高速化、軽量なウェブサイトを運営することがいかに重要であるかを示すため、全6章にわたってウェブサイトの高速化について徹底的に掘り下げます。サイトスピードの最適化への投資には最高の費用対効果があることを、数々の研究論文やベンチマークで裏付けていきます。

このページでご紹介する最適化のヒントの中には、今すぐ取り入れられるものもあります。手順も詳しくご説明しますので、ぜひ最後までご覧ください。

ページの読み込みが高速化されると、訪問者のエンゲージメント、リテンション(既存顧客維持率)、そして収益が向上します。最近のAberdeen Groupの調べによれば、ページの読み込みが1秒遅れるごとに、顧客満足度は16%、ページビューは11%、コンバージョン率は7%低下します。

サイト高速化にまつわる6つの重要な側面

第1章 サイト高速化入門

ページの読み込み時間とは

「ページの読み込み時間」とは、ウェブページやメディアコンテンツがサイトのホスティングサーバーからダウンロードされ、ブラウザに表示されるまでの時間の長さを意味します。つまり、リンクをクリックしてからウェブページの全コンテンツがブラウザに表示されるまでの時間です。

ページの読み込み時間
ページの読み込み時間

ページの読み込み時間を紐解くため、ユーザー体験とサイトパフォーマンスという観点から核となる3つの要素に注目します。

  • 要求されたリソースとそれに付随するHTMLコンテンツをブラウザに配信するのにかかる時間の見方
  • ページの読み込みリクエストに対するブラウザの反応
  • ページがブラウザ上でレンダリングされる際のエンドユーザー視点からの様子(究極の実証的指標)

ウェブサイトのパフォーマンスはその後、ページの表示速度、ユーザー体験、サイトの応答性、その他多くのパフォーマンス指標を含む重要な要素を組み込んだ、非公開の独自アルゴリズムの下で開発された検索エンジンでの表示順位に影響を及ぼします

サイトパフォーマンス最大化の重要な原則は、読み込み時間の最適化に振り出しから徹底的に注力すること。パフォーマンス最適化プラグイン、サーバーサイドスクリプト、最終調整によって、ページ表示速度に最小限の(とはいえ顕著な)改善を与えることはできますが、開発者やオンラインビジネス経営者の多くは、サイトの開発やウェブデザイン戦略を検討する段階で、ページの読み込み時間を見落としています。

「遅いサイト」の定義

瞬きよりも遅いサイト、具体的には400ミリ秒で表示されないウェブサイトは「遅い」と言えます。Googleのエンジニアは、人が知覚できる(人が感覚的に「遅れがある」と感じる)読み込み速度は0.4秒であり、これが検索回数が減るのに十分な長さであることを発見しました。
インターネット体験の向上において、この技術は大きな進歩を遂げています。1990年代には、インターネットの通信速度が遅く、度々待たされることから、皮肉を込めて「World Wide Wait」などと呼ばれていましたが、通信とネットワーク技術の革新により、デジタル情報がインターネット上で伝達される方法は大きく変化しています。コンテンツを瞬時に配信するのに必要なリソースをすべて備えた次世代のオンラインビジネスに必要になるのは、このリソースを活用し補完するために、最高のユーザー体験を実現する高速ウェブサイトです。

Microsoftのスピードスペシャリストでありコンピュータ科学者であるHarry Shum氏は、ページ表示速度の0.25秒の差(遅いか速いか)は、オンラインビジネスの競争力を左右する魔法の数字だと述べている。

「遅いサイト」に起こること

4人に1人の訪問者が、読み込みに4秒以上かかるとウェブサイトを離脱すると言われています。そして46%のユーザーは、低速なサイトに再訪することはありません。つまり、訪問者がサイトを離脱するまでのわずか5秒間で、潜在顧客を獲得できるかどうかが決まります。モバイルユーザーの74%は、読み込みに5秒以上かかるとサイトを離脱しており、Amazonのような大規模オンラインサイトあれば、ページの読み込み時間が1秒遅れるごとに、年間16億ドル(およそ2,400億円)の損失につながる可能性があります。

読み込みが遅い
読み込みが遅い

ECサイトを利用する消費者の47%は、ページの読み込み時間がおよそ2秒以内にサイトを離れることを検討すると回答。40%の人は、3秒待たされたら離脱すると答えています。コンバージョン獲得に許容される最大読み込み時間はわずか2秒。世界に存在する何百万ものサイトがこれをクリアできていません。

サイト高速化のメリット

Mozillaがページの表示速度を2.2秒向上するのに成功したところ、Firefoxのダウンロード数は15.4%、年間1,000万回も増加しました。米国の巨大スーパーマーケットチェーンWalmartでは、ページの読み込み時間が1秒向上するごとに、コンバージョン率が2%上昇。サイト高速化は、具体的な数字に表れます。

サイト速度の改善
サイト速度の改善

許容可能なサイトパフォーマンス─脳科学とリズム

人間の脳尾の後頭葉が視覚情報を感覚記憶として保存するのにかかる時間は、100ミリ秒。

Googleの研究者は、脳の視覚的な感覚記憶が100ミリ秒のバーストで動作することから、100ミリ秒未満の読み込み時間であれば、人は瞬時にウェブサイトが読み込まれたかのように錯覚すると述べています。この記憶は、0.1秒後に目の視細胞が後頭葉に情報を伝達する際に消去されます。

サイトパフォーマンスの許容範囲
サイトパフォーマンスの許容範囲

読み込みに1秒かかっても、人の思考の流れが停止することはなく、スムーズにサイトを閲覧できていると感じ、サイトが思い通りに反応すれば、基本的に精神的なストレスが生じることはないと言われています。

ところが、読み込みに10秒かかると話は別です。長い間待たされることで、訪問者には苛立ちや困惑などの感情が生まれ、「二度とこのサイトには訪れない」という結論にさえ至ります。

ウェブにおける心理的課題

しかしながら、ページの表示速度の遅さを理由にサイトを放棄することが、必ずしもウェブ上の目的の情報にアクセスするための最短経路とは限りません。一般に、関連性の高いサイトの反応が遅いのを数秒待つ代わりに、関連性は低いが高速なサイトを数分余計にブラウジングすることになります。

ウェブ上に溢れる膨大なリソースの量を考慮すれば、最終的には必要な情報にはたどり着けるものです。そのため、最終的な敗者は、求められている情報やサービスを提供しているにも関わらず、十分な速度で配信できていない企業ということになります。

冷静に考えれば、関連性の高いサイトが読み込まれるのを数秒待つ方が近道になる可能性が高いにも関わらず、人は待ちきれず他のサイトで情報を探すのに時間を費やす傾向にあります。これは、過去のヒューストン空港の問題点とよく似ており、ヒューストン空港は画期的な解決策を導き出しています。

人間の心理を利用する
人間の心理を利用する

ヒューストン空港では、歩いて1分ほどで到着する手荷物受取所で、手荷物を受け取るのに7分待たなければなりませんでした。カスタマーサポートには、この待ち時間に耐えかねた乗客からの苦情が殺到。

これに対し、空港当局はこの問題を「解決」するための巧妙な策を考え出します─到着ゲートを手荷物受取所から遠くに移し、一番奥にある手荷物カルーセルで荷物を引き渡すことにしました。

その結果、手荷物受取所まで6分歩かなければいけなくなりましたが、手荷物は2分後に受け取れるように。その後苦情はすっかりなくなり、不満を漏らす乗客はいなくなりました。

また、エレベーターに鏡が設置されていると、多くの人が身だしなみを整える傾向にあり、その間の待ち時間は気にならないというのも同じ事例です。これはウェブ上でのサイト訪問者の行動と重なるものがあり、待ち時間の長さが、待ち時間の経験を定義します。

ヒューストン空港のように人間の心理をうまく利用し、画期的な策を打ち出せればいいのですが、サイトの応答時間に訪問者が耐えられるようにするための実用的な方法は、事実上ありません。そのため、サイトをできる限り高速化し、要求されたコンテンツを素早く配信することで、客観的な待ち時間を短縮するのが最善です。

第2章 ビジネス成功の鍵を握るサイトパフォーマンス

パフォーマンスは売上に影響

サイトパフォーマンスは、ユーザー体験に反映されます。ページが高速配信されると、消費者のオンラインショッピング体験は向上し、収益が刺激され、最終的にはオンラインビジネスの成功につながります。業界のトップに君臨するGoogleは、サイトパフォーマンスの低下が売上に影響を与えるという事実を身をもって経験して以降、独自の検索アルゴリズムでページ速度を評価するようになりました。Googleは以前、ページの表示速度が0.5秒遅れたことで、20%のトラフィックを失うという経験をしています。

Googleは即座にこの問題に対処したため、市場シェアはほとんど落ちることはありませんでしたが、競争の激しいオンライン市場でこれからプレゼンスを確立する企業はどうなるかわかりません。

つまり、サイトパフォーマンスが収益を決めると言っても過言ではないわけです。

Forrester Consultingは、オンラインショッピングに対する消費者の期待を調査し、パフォーマンスの低いサイトがどれだけ収益を損なうか、そして高いパフォーマンスを発揮するサイトがどれほど急速に売上を伸ばすことができるかを明らかにしました。

この調査では、インターネット利用者の88%が高性能で利用しやすいサイトで買い物をし、およそ50%が3秒以内に読み込めなかったサイトを離脱することがわかっています。

当然ながら、このような行動パターンは売上に響きます。79%の消費者がパフォーマンスの低いサイトに再訪問することはないと回答しており、そのうちの46%が長期的に悪い印象を抱き、44%がその経験をウェブ上で他の人に共有しています。また、87%の消費者が実店舗とオンラインストアの両方を利用していることから、その影響はインターネット上だけにとどまりません。

低速なサイトは放棄される
低速なサイトは放棄される

ビジネスの売上に最も大きな影響を与えるのはサービスや製品の品質ですが、サイト訪問者を顧客に変えられるかどうかは、訪問者の満足度に大きく依存します。超高速でページが読み込まれたり、快適に決済を行うことができたりなど、ECサイトのパフォーマンスを高めてユーザーに好印象を与えることで、より多くの収益と顧客ロイヤルティを獲得できます。

パフォーマンスがコンバージョンに与える影響

オンラインビジネスにとって最も重要かつ強力な指標であるコンバージョン率は、オンライン小売プラットフォームの競争優位性を確立する上で、総合的にサイトのKPI(重要業績評価指標)に関係します。

オンラインでは、従来のマーケティングキャンペーンだけでは不十分。ページ速度やサイトの応答性など、サイトのユーザー体験を改善できなければ、コンバージョン率を高めることはできません。

2011年の大統領選挙でオバマ大統領が行った資金調達キャンペーンでは、ウェブサイト「Obama for America」の表示速度を5秒から2秒に短縮したところ、さらに3,400万ドルの寄付金が集まりました。

読み込み時間の短縮はコンバージョンの向上につながる
読み込み時間の短縮はコンバージョンの向上につながる

実店舗で見込み客を呼び込むには、綿密なマーケティングと広告キャンペーンが重要です。また一度入店した顧客のほとんどは、何かしらを購入して退店します。

買い物客をオンラインストアに呼び込むのは、実店舗よりもはるかに容易です。検索エンジン最適化(SEO)やSNS広告を活用するのが一般的で、またほとんどのユーザは、訪れたことのないサイトにアクセスするのに、数回クリックを繰り返す程度の手間は特に厭いません。

気になる情報を数秒以内に取得できない場合は、サイトから離脱すればいいだけ。

したがって、サイトのパフォーマンスと応答性という意味でのユーザー体験は、オンラインマーケットプレイスにおけるコンバージョン獲得の究極の要因になります。ECサイトは、第一に消費者の利便性を重視し、適切な情報、製品、サービスを適切なタイミングで効率的に提供することが重要です。

このいずれも、ユーザーがサイトを離脱する前にコンテンツを提供できなければ、実現不可能です。パフォーマンスがコンバージョン率に影響を及ぼしているかどうかがわからない場合は、GoogleのTest My Site(現在はサポート終了)などを使用してみてください。

コンバージョン速度の計算
コンバージョン速度の計算

パフォーマンスがユーザーエンゲージメントに与える影響

ユーザーエンゲージメントの統計は、オンラインストアの最適化戦略を練る際に活用できます。サイトパフォーマンス、そしてページ速度と収益を関連付ける次善の策を分析・予測するツールがいかに重要であるかを理解すれば、競争の激しいオンライン上でプレゼンスを確立することは可能です。

レスポンシブで高速なサイトにおけるユーザーエンゲージメントの強化は、高確率でオンラインビジネスの成功を意味します。ユーザーエンゲージメントは、人間の数秒を超える短期記憶、そしていかなる状況下でも自分の意のままに操作したいという潜在的な欲求に大きく依存します。

パフォーマンスの低いウェブサイト
パフォーマンスの低いウェブサイト

ユーザーからのリクエストを効率的かつ適切に処理し、レスポンスを返すことができなければ、「質の低いサイト」と認識されてしまいます。

パフォーマンスの高いウェブサイト
パフォーマンスの高いウェブサイト

一方、高パフォーマンスのサイトは、ユーザーエンゲージメントを決定する3つの指標、ユーザーの感情、精神状態、そしてインタラクションに良い影響を与えるため、訪問者とサイトとの間に感情的、認知的、行動的な結びつきを生み出します。

そして消費者からの注目、購買意欲、信頼といったユーザーエンゲージメントの特性を活かして、訪問者をリピーター、そしてSNSやインターネット以外でも口コミで宣伝してくれる、言うなれば「アンバサダー」的存在へと変えることができます。

パフォーマンスが運用コストと収益に与える影響

サイトのパフォーマンス最適化に投資すると、ページの読み込み時間を数秒短縮するために予算を割くことになりますが、その見返りは大きく、必然的に収益の増加、運用コストやハードウェア投資の削減という形で現れます。

大手ECサイトのShopzillaは、ページの読み込み時間を7秒から2秒に縮めたことで、運用コストを50%削減することに成功しました。サイトデザインの見直しによるパフォーマンスの向上により、同じハードウェアリソースを利用して、同じ量のリクエストを効率的に処理することができるように。そしてサイトの応答性が向上したことで、拡大するウェブトラフィックに対応し、ハードウェアリソースに追加投資することなく、12%の収益増を実現しました。

サイトのKPIが改善されると、Google 広告の品質スコアが向上し、クリック単価(CPC)が削減されます。品質スコアとページスピードが向上したオンラインビジネスは、広告予算を効率的に使用できるため、費用を追加投入することなく、見込み顧客獲得と集客を最大化できます。

その一方で、表示速度が低下すると、リソースが浪費されることになります。Bingは、収益に影響を与えるサイトパフォーマンスに関する独自の調査を行い、検索クエリの配信に2秒遅れが生じると、ユーザーあたり4.3%の収益損失が見られることを明らかにしました。

しかし、この遅れを解消しても、訪問者の行動は劇的に変化することはありません。Googleが検索結果を提供する際、0.4秒の遅延を解消した結果、ウェブページのパフォーマンスが最適化されていても、ユーザーの検索回数は0.21%に減少しました。

一時的に費用がかさむかも知れませんが、サイトパフォーマンスの改善に本格的に取り組むことで、最終的には収益の向上、収入源の増加、そして運用コストの削減を実現することができるため、投資価値は十分にあります。

パフォーマンスがユーザビリティに与える影響

操作が複雑であったり、コンテンツを閲覧しづらいサイトは、高い確率で潜在顧客が離れていきます。インターネット利用者は、スムーズに操作できないサイトを敬遠し、高性能なサイトに固執する傾向にあります。

サイトの使いやすさと顧客ロイヤルティの関係は、ページ速度、読み込み時間、要求に対するサイトの応答性など、サイトのKPIに結びつきます。これらの要素に加えて、信頼性、インタラクティブ性、情報の関連性などの特性もエンドユーザーの使いやすさの指標になります。

同様に、ウェブクローラーと検索エンジンは、検索順位に影響を与える要素として、ページ速度、優れたナビゲーション、ユーザー体験、応答性、グローバルオーディエンスへの到達可能性などを考慮して、パフォーマンスを評価しています。

ユーザビリティの特徴
ユーザビリティの特徴

エンドユーザーは、潜在的に以下のような使いやすさを求めているものです。

  • 操作、ナビゲート、理解しやすい
  • 求めている関連情報や操作方法が的確に提供される
  • あらゆるデバイス、マシン、オペレーティングシステム、ブラウザ、地理的な場所を問わずアクセスできる
  • 正当で信憑性のある質の高い情報、製品、サービスを最小限のクリックと要求で受け取ることができる

サイトパフォーマンス、ユーザビリティ、顧客ロイヤルティを最大化するために、上記のような期待を満たすことは必要不可欠。最終的にオンラインビジネスの成功に大きく影響する重要な要素でもあります。

第3章 モバイルサイトの最適化

今や時代はモバイル。2017年のスマートフォン契約数は23億2,000万台で、これは世界人口の約30%に相当します。この急激な普及は、近年モバイルマーケティング分野に参入した多くのオンラインビジネスを未だ困惑させています。

今日オンラインビジネスを成功させるためには、爆発的に増加するモバイル利用者を獲得するため、モバイルファーストのアプローチを採用も不可欠です。モバイルファーストを適切に導入すれば、想像絶するような効果が期待できます。

Mobile vs desktop
モバイルとデスクトップの比較

一方で、「デスクトップマーケティング」もこの10年ほどの間に注目されるようになりました。「ポストPC時代」「PC出荷急減」「デスクトップパソコン 時代遅れ」などで検索してみると、PC利用者のみを追いかける企業の暗い未来を予想する記事が多数散見されます。

時代に取り残されつつある企業でも、モバイルファースト戦略の導入にはまだ間に合います。ただし、モバイルユーザーへのリーチを最適化できない場合は、有益でないかもしれません。

これは、モバイル化の方向性が誤っているというよりは、重要なステップを見落とし、モバイル利用者に効果的にリーチするための隙間を埋められなかったことが原因です。そしてその理由は、レスポンシブでパフォーマンスの高いモバイルサイトの欠如にあります。

モバイルとPCの比較

今日、誰もがモバイルを利用している事実は揺らぎません。YahooのCEOは2014年にモバイルはインターネットの「転換点」と予想しましたが、これは正しく、2017年にStone TempleがSimilar Webから統計をとった結果、770億のウェブサイト訪問に基づくトラフィックの50%以上がモバイルからのアクセスを占めていました。

PCとモバイルの総訪問回数の集計(画像出典: Stone Temple)
PCとモバイルの総訪問回数の集計(画像出典: Stone Temple

他にも以下のような統計があります。

  • 米国市民の87%がモバイル端末を所有
  • そのうち45%がスマートフォンを所有
  • そのうち90%がモバイルでインターネットを利用している
  • モバイル利用者は、毎日平均1.4時間モバイルでインターネットを閲覧している
  • 74%が5秒以内に読み込まれないモバイルサイトを放棄すると回答

このような統計から、少なくともウェブデザインの観点からは、モバイルとPCを別物として扱うのが賢明であることがわかります。レスポンシブデザインを導入しなければ、ページの読み込み時間、ユーザビリティ、機能性の面で、PC版にアクセスするモバイルユーザーの体験に悪影響を与えます。モバイルサイトの最適化を怠れば、必ずや以下のような課題に直面します。

  • モバイルでの購買意欲の低下─モバイルでインターネットを利用する人は、PC利用者に比べて注意力が散漫で、忍耐力もない傾向にある。
  • 競争力の低下─米国に住む成人スマートフォン利用者1,000人以上を対象にした調査によると、回答者の約75%が、優れたモバイルユーザー体験を得られるECサイトを再訪することを好む。
  • ブランド価値の低下─PC版サイトのHTMLを縮小し、モバイル版を拡大・縮小できるようにしただけのモバイルサイトでは、訪問者に悪い印象を与え、将来的に顧客に変わる可能性が低くなる。

ひいては、モバイルユーザーへのリーチ拡大において、以下のような目標を達成できなくなります。

  • 顧客基盤の拡大
  • 新たな広告の選択肢
  • ユーザーの利便性を考慮し、効率的かつ質の高いサービスの提供
  • ビジネス拡大のためにモバイルファーストを生産的に導入することの必然性

PCとモバイルでは、技術リソース、フォームファクター(端末のサイズや形状)、ユーザーインターフェースなど、サイトパフォーマンス最適化の導入に関わるすべての面で違いがあります。モバイルサイトを個別に最適化し、最高のパフォーマンスを実現しなければ、KPIが低下し、モバイルユーザーの体験を損ないます。

また、モバイルテクノロジーによって、立ったまま、歩きながら、あるいはソファーに横になりながらでも、どこにいてもウェブ検索を行えるのが特徴です。サイトを快適に閲覧したいという欲求からくるユーザーの期待は、PCに適用されていた従来のそれを超えています。2秒という短い時間の中でモバイルサイトのコンテンツを素早く提供できるかどうかが、モバイルユーザーとの顧客ロイヤルティと長期的な関係性を獲得できるかどうかを決定します。

ウェブの目的
ウェブの目的

高性能なモバイルサイトと高コンバージョンの競争空間

モバイル端末からのECトラフィックが多いことを考慮すれば、オンライン販売を行う企業にとって、高性能なモバイルサイトの構築は明らかに重要です。最近のとある調査によれば、モバイル利用者のコンバージョンあたりの潜在的な売上高は、PC利用者による購入額の平均およそ80%であることが明らかになっており、EC企業は数百万人のモバイル潜在顧客を失う可能性があります。

また、パフォーマンスの低い小規模なモバイルECサイトにおけるコンバージョン率は、同じ規模のPC向けECサイトのコンバージョン率が1.6%であるのに対し、平均0.6%と言われています。

一方、タブレット端末の利用者も、PC利用者より20%多く商品を購入しています。このようなユーザーも取りこぼさないことで、いつかPC利用者に取って代わる可能性のある高い収入源を確立することができます。

Website revenue streams
ウェブサイトの収益源

とはいえ、今後も急速に増え続けると予想されるのは、モバイルユーザーです。モバイルサイトのSEOおよび速度の最適化は、以下のような要素で構成されており、今では独立した分野となっています。

  • 高速なページ配信
  • ページ読み込み時間の短縮
  • リッチメディアコンテンツの効率的な配信
  • ダウンロードの高速化
  • 適切なサイトフォーマット
  • サイト全体の簡単なナビゲーションとユーザビリティ
  • モバイル利用者を考慮し、入力操作を最小限に抑えた機能的なウェブサイト

このような課題に取り組むことで、モバイルマイクロサイトは、最大1.2%のコンバージョン率(PCサイトの2倍)、PCサイトの80%を超えるコンバージョンあたりの売上を実現し、大企業に太刀打ちできる可能性すらあります。

最高速度を実現して競合他社と差をつける

フォーチュン100企業のモバイルサイトの読み込み時間が平均5秒と聞くと驚くかもしれませんが、実は一般的な許容基準(最大7秒)よりも2秒高速です。

平均ページ読み込み時間
平均ページ読み込み時間

ECサイトにおいては、読み込みに5秒かかるのは命取りです。中にはGoogleのように速度と応答性を重視し、Google同等の速さでページを表示するECサイトもありますが、これを実現できているのはマルチチャネル小売企業の上位100社のうち16社のみ。これらの企業は超高速なモバイルサイトによって、モバイル利用者から数十億ドルの収益を得ていることになります。

Googleは、モバイル画面上でウェブページを1秒以内にレンダリングするのに役立つ、モバイルサイトのデザインに関する複数の変更点(こちらまたはこちらを参照)について説明しています。
モバイルウェブ開発関連の問題を自分で解決したい少数派向けには、非営利団体のWorld Wide Web Consortium(W3C)がベストプラクティスも紹介しています(こちらまたはこちらを参照)。モバイルサイトの最適化がいかに重要であるかを示す長尺コンテンツです。

そして、応答性と速度に最適化されたモバイルサイト設計のためにウェブ開発者を雇用している企業(おすすめウェブ開発ツールはこちら)は、以下3つの要素に注目することをお勧めします。

  • 流動的なグリッド
  • 画像のレスポンシブ対応
  • メディアクエリ

また、モバイルサイトにおける重要なデザイン要素には、以下のようなものが挙げられます。

  • マストヘッド広告
  • 画像ギャラリー
  • 製品説明
  • 補足情報
  • フッター

応答性と速度に優れたサイトは、ユーザーに高く評価されます。モバイルテクノロジーとスマートフォンやタブレット端末への依存度の高まりに伴う技術革新は、今後減速することはないでしょう。トップクラスのオンラインストアは、サーバーからモバイル画面の小さな領域に効率的にコンテンツを配信する必要性を理解しています。最適化されたモバイルサイトを適切に運営することで、消費者に迅速かつ的確な購買決定を促し、最終的に継続的な収入源を確立することができます。

モバイルでの購買
モバイルでの購買

消費者の60%は、素早く買い物を行うためにモバイル端末を選んで使用しています。インターネット利用者の42%がモバイルを好むのに対し、PC/ノートパソコンは43%。情報源としてモバイルとPCは現状同等に重視されていますが、モバイル端末の気軽にアクセスできる利便性は、モバイルインターネットの利用やビジネスチャンスを促進し続けています。

以上を踏まえると、もうモバイルサイトの最適化を見過ごすことはできないはず。今すぐ検討し、モバイルファーストのアプローチをとりましょう。

第4章 サイトパフォーマンスを損なうよくある誤解

オンラインマーケットプレイスは、言うなれば古代ギリシャの戦場のごとく、賢いものだけが生き残る、非常に競争率の高い領域です。当然ながら、人的要因(判断ミス、不手際、無知)は、オンラインビジネス競争の結果に大きな影響を与えます。

高性能かつ最適化されたサイトの保守管理を行う企業やウェブマスターは、サイトの読み込み時間を改善する重要なウェブデザイン要素を見落としがち。この見落としによって、トロイアの木馬が、その木馬軍の規模や支配力にもかかわらず、要塞化された防御を突破してトロイアの街を完全支配してしまうのと同じくらい、致命的な打撃を受ける可能性があります。

顧客の注目を集めるための戦いは、会社の規模や過去の実績に関係なく、要求されたコンテンツを最も効率的かつ正確に提供することに集約されます。人間の不注意や無知がトロイア戦争の結果を左右するように、サイトパフォーマンスを低下させるよくある誤解や、オンラインビジネスの競争力に影響します。

ウェブサイトの読み込み時間を最速に
ウェブサイトの読み込み時間を最速に

理想的な読み込み時間である2秒以下と平均的な読み込み時間の5秒の間の時間を、英語で「Gap od Death(死の隙間)」と呼ぶことがあります。この隙間は、軽視されがちなサイト最適化戦略やビジネス上の決定によって、広がったり狭まったりします。一般的な感覚とは異なり、速度最適化はサイト開発のすべての段階で実施するのが最善であり、サイト全体を構築した後に、サイトパフォーマンス最適化の必要性に気が付くのは理想的とは言えません。

サイトを構築した後に実施する最終的な微調整と速度最適化は、「死の隙間」に到達するまでの読み込み時間短縮にはつながりますが、それでも優れた読み込み時間の上限である2秒を超えると、1秒遅れるごとにコンバージョン率が7%低下します。

速度の最適化を重要視し、次のような致命的な誤りを避けることで、より良いパフォーマンスを目指すことができます。

質の低いホスティングサービス

ホスティングサービスの選択は、将来的なサイトの成長に多大な影響を及ぼします。2020年の時点で18億以上のウェブサイトが稼働しており、オンラインプレゼンスの確立を後押しするホスティングサービスは無限に存在します。しかし、費用対効果の高いサーバーに対する需要が急激に高まっていることから、より多くの顧客を獲得するため、サービスの質を妥協し、驚くほど安価なプランを提供するレンタルサーバーも多数あります。

費用対効果の高いサービスを提供するホスティング会社は、肥大化したApacheスタックのシングルインスタンスで数千のサイトをホストすることで、収益性を最大化し続けています。単一のサーバースタックで数千のサイトを実行する最適化されていないサーバーは、予測不可能なトラフィックの急増やマルチメディアコンテンツ、大きなサイトファイルなどを特徴とするECサイトには特に厄介です。

速度の最適化に関する懸念に対して、「最近では誰もがブロードバンドを利用している」という返答をする会社は、オンラインビジネスにおける金銭的損失やブランド評価の低下を引き起こす可能性が高いです。読み込みに3秒以上かかるサイトはトラフィックの40%を失うことを考えれば、優れたパフォーマンスはEC事業の成功に必要不可欠。不満を抱える訪問者の79%は、低速なECサイトに再訪しないと回答していることもお忘れなく。

ホスティングサービスの選択
ホスティングサービスの選択

業界トップクラスのホスティングへの投資は、効率的かつ正確に訪問者の気を引き、大きな収入源を確立するのに大きく貢献してくれます。

帯域幅の過剰消費

サイト速度の最適化は、継続的かつ発展的なプロセスであり、一流のホスティングサービスを契約すればそれで終わりというわけではありません。収益を最大化するため、良かれと思って加えるデザインや機能に変更は、かえってリソースを大量に消費することで、サイトパフォーマンスに悪影響を及ぼすことがあります。

ウィジェットやプラグインの多用

新たな機能を実装し、サイトをレベルアップさせるのは素晴らしいことです。機能の拡張に役立つウィジェットやプラグインは多数ありますが、実装するとパフォーマンスに若干の負担がかかります。Google+ボタンのような小さなウィジェットでも、時にページ読み込み時間を2秒程度遅らせることも。

例えば、Facebook(現Meta)のいいね!ボックスも、40以上のHTTPリクエストを追加することで知られています。これは、サイト速度を低下させる要因の典型例です(以下参照)。とあるサイトでは、このボックスを実装したことで、ページ全体のサイズが700KBも増加しました。

Facebookウィジェットのリクエスト
Facebookウィジェットのリクエスト

拡張機能の実装を必要最低限に抑えることは、サイトパフォーマンスの最適化に非常に重要です。サイトのコアにインストールされているプラグインでさえ、ブラウザのリクエストに対して最速でレスポンスを提供しようと、帯域幅を消耗します。

拡張機能はまさに「量より質」であり、インストールするプラグインの質と機能性は、数よりもはるかに重要です。大規模なデータストリームを照会して複雑な処理を行うプラグインは、WordPressなどのサイトのサーバー環境外で実行しなければなりません。

過剰な広告と外部サービス

収益の面で一見魅力的ですが、サードパーティの広告主に多くの広告スペースを提供することも、サイトパフォーマンスに大きな悪影響を与えます。多すぎる広告や読み込みの遅い広告は、訪問者の直帰率を高めます。直帰率が高くなれば、最終的に広告主にスペースを提供して得られる以上の収益を失いかねません。

Pingdomの外部サービス
Pingdomの外部サービス

外部サービスの利用には、以下のような2つの課題があります。

  • 外部サービスをたくさん利用すると、ページを読み込むたびにすべてのサービスを読み込み、外部サービスからの情報を待たなければならない。この呼び出しが多ければ多いほど、待ち時間がかかり、サーバーの負荷が高くなり、次の課題に直面する可能性が高くなる。
  • サイトと外部サービスとの間のデータ転送が完了するまで、ページの読み込みが保留されることもある。ヘッダーでサービスが呼び出され、サービスが中断された場合には、ページの読み込みが拒否されることに。

ある調査によれば、バナー広告で収益を上げるための代償といて、レイテンシがおよそ33%増加することがわかっています。訪問者にとって煩わしいだけのポップアップ広告は、悪い印象を与えてしまい、直帰率が高まります。
アフィリエイトコードも、たとえ数行であっても、サーバー環境上の貴重なメモリを占有し、エンドユーザーにコンテンツを配信する際に余計な処理が必要になります。

とはいえ、オンライン広告は多くのオンラインビジネスにとって貴重な収入源(GoogleやFacebookが良い例です)。レイテンシやページ読み込み遅延などのデメリットを最小限に抑えながら広告を取り入れ、長期的にサイトの収益の増加を目指すのが理想的です。

肥大化したテーマとマルチメディアの非互換性

魅力的なデザインテーマとマルチメディアコンテンツは、訪問者の気を引くのに重要な要素。ただし、これはせっかちな訪問者の目に届けばのお話です。高画質な画像や動画(大きなピクセル、大きなファイルサイズ)は、ダウンロードに時間がかかりますが、低画質で軽量なグラフィックを高速配信しても、ユーザーを惹きつけることはできません。

しかしながら、グラフィックを多用したコンテンツの提供が必ずしもコンバージョンや売上につながるとは限りません。特にECサイトでは、読み込みの速い商品画像や説明動画などは有益になり、常に見た目が重視されるわけではありません。

互換性の問題は、特定のブラウザや地域に対するマルチメディアやアプリのパフォーマンスにも影響します。例えば、Google ChromeとShockwave Flashは、うまく連動することはほぼありません。同様に、政府当局の規制によって、特定のユーザーに届かないマルチメディアコンテンツもあります。

機能しないマルチメディアコンテンツ持つサイトは、ブラウザに到達するまでのクライアントサーバーの通信サイクルが過剰になり、サイトパフォーマンスを低下させます。しかし、ほぼ予測不可能であるものの、政府当局の政策やブラウザの互換性は、時が経つにすれ変化する場合もあります。異なるブラウザ、デバイス、地域にまたがってどの程度合理的なサービス性を確保するかどうかは、各社に委ねられます。

コンテンツの効率化
コンテンツの効率化

EC企業がサイト訪問者を確保するには、高速で、完全に機能するマルチメディアコンテンツが欠かせません。ページの読み込みが1秒でも遅れると、訪問者は待てずにサイトを離脱し、コンバージョン率は7%、ページビューは11%、そして顧客満足度は16%低下する可能性があります。

会員登録フォームと分析コード

会員登録フォームや分析コードは、サイトのコアファイルに数行追加されるだけですが、1行のコードが長すぎると、サイトのバックエンドで、長いコードを含むアセットやプラグインが短い処理サイクルの中でわずかなメモリを奪い合うことに。その結果、各要素は予測不可能な動作をし、想定以上の処理サイクルを消費します。

過剰なサービスは、エンドユーザーにとって通常不要、あるいはコンテンツのおまけ程度にしか見られません。多くのサイトは80以上のアセット(画像、プラグイン、アドオン、その他のマルチメディアコンテンツ)をホストしており、必ずしもユーザーの好みに応じて配信されるわけではありません。エンドユーザー向けの肝心な情報が、余計な会員登録フォームや分析コードなどによって妨げられると、せっかくサイトに魅力的なメディアを豊富に取り入れても裏目に出てしまいます。

モバイルサイトとリダイレクトの誤解

世界のスマートフォン契約数は、2019年までに27億台を超え、インターネット利用者の83%がモバイル端末を使用することが予想されています。2016年のECサイトのトラフィックの30%はモバイルから来ており、この数値は急増するスマートフォン利用者数とともに伸びています。

スマートフォンの利用
スマートフォンの利用

ユーザーが許容できる読み込み時間は従来よりも短くなるため、モバイルユーザーを惹きつけるための競争はさらに激化しています。モバイルユーザーの60%は、潜在的にページが3秒以内に表示されることを期待しており、平均して4人に3人は、5秒以上かかるとサイトを離れると回答しています。これに対し、モバイルサイトの平均読み込み時間はなんと6〜10秒です。

モバイルサイトの読み込みに極端に時間がかかるのは、主にサイトがモバイル端末のインターフェースに最適化されていないことが原因です。また、スマートフォン向けに最適化されたページであっても、PCサイトのページからモバイルページに適切にリダイレクトされない可能性もあります。

リダイレクトとは、あるサイトのURLを探しているユーザーを求めている情報を正確に含んでいる(と推測される)別のサイトへ誘導する仕組みです。リダイレクトは、PCサイトのページを探すモバイルユーザーに特に効果的であり、優れたユーザー体験を提供するためには、同等のモバイル版へのマッピングが必要です。

リダイレクトが適切に行われていなければ、正しい情報にたどり着くまで、不要なサイトファイルを行き来しなければならなくなり、正しい情報の読み込みに不必要な遅延が生じてしまいます。

これを例えるなら、混雑した大型駐車場で空いている場所を見つけて、そこまで車を走らせると遠くからは見えなかった軽自動車が停まっていた、という状況。これは空きが見つかるまで続きます(すぐに見切りをつけて別の駐車場に向かわなければの話ですが)。

不適切なリダイレクト
不適切なリダイレクト

モバイルユーザーのために速度に最適化されたサイトを用意していても、PCサイトにリダイレクトされてしまえば、せっかく磨き上げたモバイルインターネットでの競争力も意味をなしません。

モバイルに最適化されていないサイトは、モバイルユーザー体験も低くなります。誤ったリダイレクト、再生できない動画、肥大化した画像やグラフィック、関連性の低い内部リンク、不要なアセットなどによってパフォーマンスが下がり、直帰率が高まります。

ブラウザのリクエストに対するHTMLの応答は、待ち時間のわずか10%で、残りの90%はページのレンダリング、HTMLの解析、コードスクリプトの実行、埋め込みアセットの取得に起因します。最適化ツールやスクリプトの調整によって、ページの読み込み時間を大幅に短縮することはできますが、適切なマーケティング戦略およびビジネス上の決断を下し、パフォーマンスを低下させる誤りを回避して、ゼロからサイトを速度に最適化して構築するほどの効果は得られません。

第5章 速度を測定してパフォーマンスのボトルネックを特定

トラフィックと検索エンジンの表示順位は、サイトパフォーマンスのあくまで上辺の指標です。確かに重要ではありますが、売上高やコンバージョン率ほど成功を表すものではありません。10万人のユニークビジターを抱えているにも関わらず、コンバージョン率が0.01%しかない検索順位上位のサイトよりも、直帰率ほぼ0%、コンバージョン率15%、1万人のユニークビジターを抱えるECサイトの方がはるかに良い結果を出しています。

コンバージョン率の最適化については常に議論されており、ビジネスのベストプラクティスを導入するには、コンバージョン率の大幅な改善が得られるまで、何ヶ月もかけて辛抱強く策を講じ、大量の投資を必要とする場合があります。

そして、消費者に製品やサービスを購入してもらうには、市場性を高めるための受動的なビジネス戦略よりも、サイトパフォーマンスが重要になります。パフォーマンスを改善できれば、すぐにコンバージョン率と収益の向上という形で結果を得られます。

特にページの高速化はユーザー体験を向上し、せっかちな消費者を惹きつけ、満足させることで、市場性を高めます。O’Reilly社による最近の調査では、ページの読み込み時間が短縮されることで、ユーザー体験が改善され、売上とコンバージョン率が大きく向上することが結論づけられています。また、以下のような驚くべき統計結果も。

  • 読み込み時間を15秒から7秒に短縮すると、1秒あたり3%コンバージョン率が向上
  • 読み込み時間を7秒から5秒に短縮すると、1秒あたり2%コンバージョン率が向上
  • 読み込み時間を4秒から2秒に短縮すると、1秒あたり1%コンバージョン率が向上

この統計は、競争の激しいオンラインビジネスの成功にどのような影響を与えるかを示しているに過ぎません。複雑に思えますが、適切に最適化を行えば、ページの読み込み時間を大幅に短縮することは比較的簡単です。ただし、パフォーマンスのボトルネックが不明であったり、複雑すぎたり、あるいは単に膨大すぎて特定できない場合は、一筋縄ではいきません。

サイト速度の最適化は、標準的なサイトパフォーマンス測定で、フロントエンドの重要な問題を見つけることから始まります。Googleのパフォーマンスエンジニア主任であるSteve Souders氏は、これについて「読み込み時間の80〜90%はフロントエンドに費やされていることから、フロントエンドの改善から取り組むのが得策」と述べています。

パフォーマンス指標

測定を開始する前に、まずは特に影響力のあるサイト速度のパフォーマンス指標について理解しておきましょう。サイトパフォーマンスのボトルネックを特定するのに役立ちます。

初回ページ読み込み速度

ブラウザがリクエストを送信してから、数ミリ秒以内に大量のメモリを消費するコンテンツをダウンロードするのは、サイトを徹底的に改善し、速度を最適化しない限りは不可能です。多くの場合、訪問者はウェブページに記載されたコンテンツや製品情報といった一次情報のみを求めています。そこに多くの補完的グラフィックや機能が加わると、ページのレンダリング時間は測り知れないほど長くなります。

初回ページ速度
初回ページ速度

ページが表示されるまでの時間を短縮するには、高速化が必須です。TTFB(Time to First Byte)やサーバーへのPingリクエストなどのパラメータを使用し、ページの初速を監視することで、読み込み時間や速度の統計情報を正確に取得できます。時間がかかりすぎている場合は、バックエンドでサーバーサイドとサイトのコアの最適化を行う必要があります。

フルページ読み込み速度

ページ全体のコンテンツを要求元のブラウザにレンダリングするのにかかる時間を監視することは、エンドユーザーのサイト体験のテストに欠かせません。この情報は、サイトパフォーマンスを最大化するためのハードウェアインフラの導入と最適化において、戦略的決定の決め手の1つになります。

定期的に監視することで、サイズやコンテンツの種類を増やすとサイトがどのように動作するかを把握できます。分析をもとにコンテンツデリバリネットワーク(CDN)などの別の場所に静的アセットをキャッシュしながら、専用のバックエンドサーバーで動的に負荷がかかるコンテンツを効率的に配信することができます。

地理的なサイトパフォーマンス

オンラインビジネスを経営するメリットの1つは、世界中にリーチを拡大できる点にあります。しかし、クライアントとサーバーの通信を制限するものがあれば、必ずしも世界各地で効果的な結果を得られるとは限りません。先ほども触れた政府当局の政策、帯域幅、技術の制限などにより、優れたサイトパフォーマンスを均一に提供できない可能性があるため、複数の場所でサイトの速度と可用性をテストし、世界進出に重要になるグローバルなサイトパフォーマンスの測定も必要です。

地理的なサイトパフォーマンス
地理的なサイトパフォーマンス

負荷耐性

サイトパフォーマンスは、トラフィックの変動によって変化します。利用するホスティングによっては、トラフィックの急増で過度の負荷がかかると、ページ速度が落ちることがあります。ストレステスト、ランプテスト、負荷テストなどを実施することで、パフォーマンスが低下したりサイトがダウンしたりする前に、サイトが処理できるトラフィックの上限を正確に把握できます。テスト結果をサイトの実際の使用パターンと比較し、ピーク時の負荷をできるだけ効率的に処理するためにハードウェアのアップグレードが必要かどうかを判断してください。

ウェブサーバーのCPU負荷

1台のApacheサーバーで何千ものサイトをホストしている共用サーバーは、サイトがどれほどクリーンで最適化されたコードで設計されていても、高いパフォーマンスを実現することはできません。サーバーの計算能力が不十分であるがゆえに、ダウンロードリクエストを効率的に処理できない場合は、負荷のピーク時にパフォーマンスの問題が深刻化します。サーバーのCPU負荷を監視することで、ホスティング会社やローカルでホストされるウェブサイトを実行するIT担当者は、予測不可能なトラフィックの洪水を処理するバックエンドのハードウェア能力を確認することができます。

データベースのパフォーマンス

データベースのパフォーマンスは、バックエンドのデータベースから取得した動的コンテンツを持つサイトにとって重要です。データ伝送の不正確さを検出し、警告するメカニズムが求められます。また、サイトをローカルにホストするサーバーのディスクの空き容量に注意を払うことで、リンク切れやパフォーマンス低下につながるエラーやデータ損失を回避することができます。

テスト方法

無料または有料のサイトパフォーマンス測定ツールを活用すれば、ウェブページを分析し、ページの読み込みを妨げているパフォーマンスの問題を解消する独自のソリューションを確立できます。

サイトのスピードテスト
サイトのスピードテスト

検索エンジンの王者であるGoogleが提供するページ速度測定ツール、サイト監視ツールのPingdomGTMetrixでは、サイトパフォーマンスの指標に関する貴重なインサイトを無料で得ることができます。また、サイト管理を始めたばかりの初心者でも理解しやすいスコアと推奨事項も表示されます。以下、速度測定ツールについて詳しくご説明します。

ページ速度測定ツールの仕組み

ページ速度測定ツールは、様々なブラウザを使用してサイトを読み込み、地理的に異なる場所でのエンドユーザーのサイト体験を再現します。ファイルサイズ、読み込み時間、応答時間、さまざまなアセット(JavaScript、CSSファイル、HTML、画像など)へのリクエストなど、測定対象のウェブページのあらゆる要素でパフォーマンスのボトルネックを検出します。

パフォーマンススコアは、ページパフォーマンスとユーザーの優先順位を考慮して開発された一連のルールに基づいて生成されます。リソースのキャッシュ、クライアントとサーバーの往復時間、データのダウンロードおよびアップロードサイズ、ページ速度などの観点から、ユーザー体験に影響を与える多数のルールが含まれます。

また、適切なパフォーマンス最適化ルールを実装することで、ページ速度が改善されることを見越した推奨事項が表示されます(大きな画像ファイルが圧縮されていなければ、圧縮を促すメッセージが表示されるなど)。このような問題は、人為的ミスや無知によって見落とされることが多く、どちらも完全に排除することはできません。ページ速度測定ツールは、隠されたサイトパフォーマンスのボトルネックを排除する方法を見つける手掛かりを与えてくれます。

ページ速度測定ツールの使用方法

無料のPingdomを使って、パフォーマンスを測定する方法をご紹介します。Pingdomにアクセスしたら「URL」にサイトのURLを貼り付け、「Test from」ドロップダウンからテストを実施したい場所を選択し、「Start Test」をクリックします。

Pingdom
Pingdom

すると、パフォーマンススコア、読み込み時間、ページサイズ、リクエスト数などを含むテスト結果が表示されます。

Pingdomのテスト結果表示例
Pingdomのテスト結果表示例

その下にある「Improve page performance」セクションには、パフォーマンス改善に役立つ有益な情報が表示されます。このスコアはすべてGoogle PageSpeed Insightのルールに基づいており、これらの推奨事項に従ってサイトを改善すると、読み込み時間が短縮されるはずです。

Pingdomのパフォーマンスに関する推奨事項
Pingdomのパフォーマンスに関する推奨事項

また、ウォーターフォールチャート形式でダウンロードされたすべてのファイルが一覧表示されます。読み込み順、読み込み時間、サイズ、タイプまたはURLで並べ替え可能です。

Pingdomのウォーターフォールチャート
Pingdomのウォーターフォールチャート

テスト結果ページで表示される主要チャートの内容を読み取ることで、各ファイルのダウンロードのパフォーマンスを分析できます。

Pingdomのチャート
Pingdomのチャート

Pingdomは、サイト速度を最適化するために、どのような戦略を講じればいいのかを確認するのに役立ちます。上のスクリーンショットのテスト例では、見つかっていないリクエストのエラーを複数修正する必要があります。しかしながら、このようなサイト設計要素の最適化は、サイト開発の初期段階から始まり、サイトの規模が拡大するにつれて作成するすべてのページで実施していく、継続的かつ発展的なプロセスであることは念頭に置いてください。

Pingdomを使ったトラブルシューティング方法についてはこちらでご紹介しています。

ページ速度測定ツールの選び方

GoogleのPage Speed Insights、Pingdom、GTMetrixなどのツールは、いずれも異なるブラウザや場所から、異なる方法でさまざまな問題を特定し、異なるパフォーマンスパラメータと指標を測定します。したがって、パフォーマンスの評価とテスト結果はそれぞれに異なります。単一のツールでサイトデザインのパフォーマンスに関するすべてのボトルネックを特定できるわけではありませんが、改善の成果をより正確に把握するためには、1つのツールに絞って使用することをお勧めします。

複数のツールでテストを実施し、さまざまなデザイン要素を分析し、複数のテスト結果を比較することでも、サイト速度の最適化戦略に有用なインサイトを得ることができます。

第6章 サイト速度を改善するには

優れたサイトの構築には、多大な労力が求められるもの。一流のオンラインビジネスは、業界で実証済みの経験、卓越したウェブ開発技術、そして優れたホスティングサービスを利用して、最高クラスのパフォーマンスとユーザー体験を誇るサイトを開発しています。この最終章では、これからサイト速度を最適化を実施しようとしている方のために、低速なサイトを(ほぼ)十分に修正できる、簡単な最適化の方法をご紹介していきます。

なお、サイトパフォーマンスを最大化するには、速度最適化ソリューション、サイト管理、場合によってはより高度なコーディングスキルなどに投資する必要性を理解しなければなりません。その理解に基づいて下す決定は、より良いオンライン販売、見込み顧客、コンバージョン、そして最終的にビジネスの成功につながるサイトパフォーマンス改善につながります。

サイト速度の最適化
サイト速度の最適化

ウェブは、惑星、星、銀河のような物理的な世界と同様、それ自体が流動的で、絶えず変化し発展しています。実際、現実とデジタル世界の両方において、この「変遷」は共通したプロセス。そんな現実で生き残るには、いかに多様な資源や環境状況に適応できるかが鍵となります。

そして、市場動向の変化、訪問者の行動の変化、ムーアの法則によるサイバーテクノロジーの急激な進歩、巨大検索エンジンが定めるサイトパフォーマンス基準の変化の中で、オンラインビジネスの成功を目指す企業にも同じことが言えます。

今すぐ実践できるサイト速度の最適化

オンラインビジネス経営者やウェブマスターは、ページスピードを左右するウェブサイトデザインの主要要素を改良・最適化することで、常に変化する印象の中で最適な結果を維持するためにウェブサイトを適応させています。

画像の最適化

一般的に、大きなファイルは小さなファイルよりもダウンロードに時間がかかります。ウェブページのダウンロード時間(ページの読み込み時間)は、ホスティングサーバーから要求元のブラウザにダウンロードされるコンテンツの合計サイズに依存します。高画質でかさばる画像は、ウェブページのサイズを大きくし、ページ速度を低下させ、コンテンツを待つ訪問者を不安にさせる要因になります。

HTTP Archiveによると、2017年12月時点で、画像はウェブページ全体の重さの平均66%を占めています。以下のベストプラクティスを取り入れれば、画像が速度に与える影響を効果的に軽減することができます。

  • 適切なファイル形式─画質を重視し、アップロード前に画像の修正が必要ない場合は、JPGまたはWEBPを使用する。JPGは画質が極端に低下する前に、最低限の修正を行うことができる。アイコン、ロゴ、イラスト、サイン、テキストを含む画像には、PNG推奨。GIFは小さい画像やシンプルな画像にのみ使用し、BMPやTIFFは避ける。
  • 適切なサイズ─貴重な画像ペイロードのバイト数を削減し、ページテンプレートの寸法(幅)に合わせる。ブラウザのリサイズ機能を利用し、固定幅や高さを設定することで、画像をレスポンシブに対応させることができる。
  • 圧縮─画像のサイズと画質のバランスを見ながら画像を圧縮する。JPGの場合は60〜70%の圧縮が適切。Retinaディスプレイの場合は150〜200%サイズを大きくし、30〜40%圧縮して、必要なサイズに縮小する。
  • 画像の点数を減らす─使用する画像の数は最小限にとどめる。

WordPressサイトの場合

ImagifyOptimus WordPress Image OptimizerWP SmushTinyPNGEWWW Image Optimizer Cloudなどの画像最適化プラグインがお勧めです。画像を外部で圧縮・最適化し、サイトに負荷がかからないものを選びましょう。

画像最適化に関する詳細はこちらをご覧ください。

CSSコードと配信の最適化

少し前までは、画像、コンテンツ、グラフィック、ページ全体を構成するコードを含め、30KBが理想的なウェブページのサイズとされていました。しかしCSSとJavaScriptが普及して以降は、30KBという上限を超えて優れたユーザー体験を提供できるようになっています。

CSSでコーディングされたサイトは、ホスティングサーバーからブラウザに効率的かつ正確にコンテンツをダウンロードすることに優れています。そのため、最適化の方法は、ファイルサイズを小さくすることだけではありません。CSSの配信を最適化するには、以下のような手法が効果的です。

Optimized CSS delivery
CSSの配信を最適化する
  • ショートハンド(短縮記法)─宣言や演算子を少なくすることで、コードサイズを縮小。行数が少なくなるほど、処理サイクルを減らし、ブラウザにサイトファイルを効率的に配信できる。
  • ブラウザ固有のCSSハックを排除する─ブラウザ固有の複雑なハック(バグ修正)は、CSSスクリプトファイルに不必要に重するため厄介になることがある。速度に最適化されたCSSコードは、サーバーが効率的に処理できるよう軽量かつシンプル。
  • 圧縮─CSSコードの軽量化はほぼすべてのサイト速度測定ツールで推奨されている。軽量でコンパクトなコードは、ダウンロード、パース、実行を高速化し、ページの読み込み時間を大幅に短縮する。
  • コードの配置─CSSのコードは<head>の中に、JavaScriptはbodyの中に記述する。
  • CSS配信のベストプラクティス
    • @importを使用しない
    • 未使用のCSSは削除する
    • H1やDIVタグなどのHTML内でCSSを使用しない
    • インラインの小さなCSSを使用する

WordPressサイトの場合

AutoptimizeWP RocketCache EnablerCloudFlare CDNW3 Total Cacheなどは、JavaScriptとCSSの圧縮に便利です。

Kinstaをご利用の場合は、MyKinstaに組み込まれたコード圧縮機能を使用してください。ワンクリックで簡単にCSSとJavaScriptの自動圧縮を設定することができます。

JavaScript、CSS、HTMLの圧縮

速度の最適化は、ページサイズの縮小だけではありません。サイトのコンテンツをブラウザに配信する際のクライアントサーバーへのリクエスト数を減らすことは、高速化に必要不可欠。これはCSS、HTML、JavaScriptのリクエストを最小限に抑えることで実現可能です(HTTP/2の改善のおかげで、リクエストの数はこれまでより重要ではないが)。したがって、不要で圧縮できるものはすべて圧縮してしまいましょう。

特にインラインJavaScriptとキャッシュされない外部ファイルについては、圧縮必須です。Googleは、4,096バイトを超えるすべてのJavaScriptファイルを圧縮し、ページの読み込み時間に顕著な違いをもたらすには、最低でも25バイトを削減することを推奨しています。

圧縮
圧縮

速度に最適化されたサイトを設計する際には、コードから不要なバイトをすべて削除することが重要です。コードの可読性を維持しながら、余分な空白、インデント、行間を削除し、効率的にコーディングを行うと、サイトのコアとフロントエンドのファイルサイズを全体的に小さくすることができます。このようなことが考慮されていない既存のサイトでは、複数のサーバーリクエスト(HTML、JavaScript、CSS)を1つにまとめることで、ページの読み込み時間を大幅に短縮可能です。

ただし、HTMLの圧縮は、過度に行うとサイトのコードの整合性が失われるため、ユーザーエージェントがHTMLファイルの解析に必要なリソースを「推測」するためにメモリサイクルとCPUを過剰に消費する恐れがあります。各プロセスに伴うパフォーマンスの変化を個別に監視しながら、不要なコードと空白だけが削除されていることを確認しましょう。

さらにCSS、JavaScript、HTMLの圧縮には、ネットワークレイテンシの減少、HTMLリクエストの減少、圧縮の強化、ブラウザのダウンロードと実行の高速化、最終的にはページの高速化とサイト速度測定ツールでの高スコアというメリットも。

使用中のプラグインの見直し

プラグインを使った機能の拡張には、パフォーマンスの低下という代償が伴います。Gravatarやプロフィールツール、ウェブサイト統計、フォントツールなど、魅力的だが不要な機能を実装するために無数のプラグインを導入しているサイトは多く、中にはSNS統合のためにプラグインを10種類もインストールしているものも。この利点は、コーディング作業を省略できることのみです。

多くの人気サイトでは、80ものプラグインを実装していますが、複雑な動作や高度なサーバー処理を回避するようにうまく回避されているプラグインであれば、このように多数実装しても問題ありません。

プラグインの数
プラグインの数

プラグインをインストールする前に、以下4つの点に注目してみてください。

  • 複雑な処理を行うかどうか
  • 多くのアセットやスクリプトを読み込むかどうか
  • 各ページのリクエストに対してデータベースクエリの数が増えないか
  • 外部APIへのリクエストを行うかどうか

これらすべての項目に該当する場合、そのプラグインは使用しないのが賢明です。

適切なプラグイン数は、サイトと使用するプラグインによって異なります。WordPressの有識者は、あまり多くのプラグインを使用しないように推奨していますが、先にも触れた通り、80以上のプラグインを実装しながらパフォーマンスに優れたサイトも多数あります。その一方で、1つでも質の悪いプラグインをインストールすれば、ページの読み込みが0.5秒も遅くなる可能性があります。

同様に、シンプルなタスクのために10のプラグインを使用することは、複雑なタスクのすべてを1つのプラグインで解決するよりもはるかに優れています。Yoast SEO、All In One SEO Pack(無料のWordPress SEOプラグイン)のような、信頼できる開発者による優れたSEOプラグインは例外です。

WordPressサイトの場合

WordPressプラグインのパフォーマンス測定には、以下のソリューションがお勧めです。

  • Kinsta APM─Kinstaの専用コントロールパネル「MyKinsta」内蔵のアプリケーションパフォーマンス監視ツール
  • Query Monitor

WordPressのリビジョンを制限または無効にする

リビジョンはWordPressの便利な機能です。自動的に作成されたコンテンツを追跡し、将来の変更のために利用できるように保存します。コンテンツの編集時には便利である反面、余計なデータベースエントリを要します。したがって、保存されるリビジョンの数を制限することで、サイトコアの無駄な負担を排除することができます。

WordPressのリビジョン
WordPressのリビジョン

目的に応じて、wp-config.phpに次のいずれかのコードを貼り付けてください。

リビジョンを無効にする場合

define( 'WP_POST_REVISIONS', false );

リビジョンの数を制限する場合(「10」を任意の数に置き換え)

define( 'WP_POST_REVISIONS', 10 ); // limited to 10 revisions

WordPressのリビジョンを最適化してパフォーマンスを改善する方法はこちらをご覧ください。

データベースの最適化

WordPressの投稿、コメント、固定ページ、その他の形式のテキストデータや暗号化されたデータは、1つのデータベース内に保存されます(画像や動画が「wp_content」フォルダに保存される場合は除く)。このデータベースには、不要なコンテンツや投稿の修正だけでなく、不要なデータも蓄積されていきます。

不要なデータには、以下のようなものが挙げられます。

  • スパム判定されたコメント
  • 未承認のコメント
  • 投稿のリビジョン
  • ゴミ箱に移動した投稿や固定ページ

データベースの最適化は、乱雑なデータベースから不要なデータやコンテンツを取り除いてサイズを縮小し、サーバーが最小限の処理サイクルで、要求されたコンテンツを効率的に取得できるようにすることを意味します。また、MySQLのデータベーステーブルをMyISAMではなくInnoDBで使用するようにすることもその1つ(myISAMをInnoDBに変換する方法はこちら)。

WordPressサイトとデータベースの全体的なパフォーマンスにおいて、wp_optionsテーブルも見落とされがちです。特に長年運営しているサイトや大規模なサイトでは、サードパーティのプラグインやテーマによって自動読み込みされたデータによって、サイトのクエリ時間が長くなっているかもしれません。wp_optionsテーブルをクリーンアップする方法はこちらをご覧ください。

WordPressサイトの場合

  • 投稿リビジョンを制限、無効、または削除する
  • wp-config.phpファイルに以下のコードを貼り付けて、ゴミ箱に移動したデータを自動的にパージする
    define('EMPTY_TRASH_DAYS', 10 );

    ※「10」は自動的に削除されるまでの日数(必要に応じて変更可)

圧縮

Googleによれば、日々圧縮されていないコンテンツのためになんと99年分の歳月が浪費されています。また、最新ブラウザのほとんどでコンテンツ圧縮機能がサポートされているにもかかわらず、多くのサイトは圧縮されていないコンテンツを配信しています。このような帯域幅を消費するサイトのウェブページの動作は極端に遅くなります。この主な原因は、サーバー設定の誤り、プロキシ、古いまたはバグのあるブラウザ、ウイルス対策ソフトなどが挙げられます。

圧縮されていないコンテンツは、コンテンツを受信する帯域幅に制限のあるデバイスでの読み込み時間が非常に長くなります。

HTMLの圧縮
HTMLの圧縮

問題の多くは、HTMLのクライアントサーバー通信のあり方にあり、コンテンツのほとんどを占めるHTMLファイルには、冗長なコードが多く含まれ、<Tags>、<Alts>、<HTML>などが繰り返されています。

サイトコンテンツの配信を効率化するため、Googleは次のような圧縮方法を推奨しています。

  • JavaScript、HTML、CSSを圧縮する
  • 次の手法でCSSとHTMLのコードの一貫性を保つ
    • 大文字と小文字の統一(小文字推奨)
    • HTMLタグの属性の引用を統一
    • HTML属性を同じ順序で指定する
    • CSSのkey-valueペアをアルファベット順で指定する
  • GZIP圧縮を有効にする─類似した文字列やコードインスタンスを見つけて一時的に短い文字に置き換える。その後ブラウザがGZIP圧縮されたファイルを解凍し、元の形状に戻す。

ただし、これには以下のような注意事項があります。

  • 画像、PDF、その他のバイナリデータはGZIP圧縮を適用しない(すでに圧縮されているため)
  • GZIP圧縮は、150〜1,000バイトのデータのみに適用する(圧縮速度は、コンテンツをそのまま配信するのにかかる時間よりも速くなければ意味がない)
  • 古いブラウザのためにコンテンツを圧縮しない

これらに従わない場合、圧縮と解凍のオーバーヘッドにより、ファイルサイズとページの読み込み時間がかえって増えてしまいます。

WordPressソリューション

キャッシュ

サイトデザインのコードはできる限りシンプルにしたいものです。作成、読み取り、保守管理しやすいコードは、効率的なサイト開発につながります。これには、コードを再利用しながら、特定の機能に対するコード量を削減することも含まれます。

余計なループや不要なコードが増えすぎると、ページのレンダリング時間が数ミリ秒単位で長くなります。そしてアクセスが殺到すると、ページ速度はすぐに許容できないほど低速に。

サーバーにアクセスしたユーザーのリクエストに応じて繰り返しレンダリングする代わりに、リクエストされたコンテンツのキャッシュコピーを配信することで、読み込み時間を短縮することができます。ウェブキャッシュは、特定の条件が満たされたときにキャッシュデータベースから後続のリクエストを満たすために、コンテンツのコピーを一時的に保存します。この仕組みによって、ブラウザに(静的な)サイトコンテンツを配信する際には、クライアントとサーバの往復回数を減らすことができます。

WordPressキャッシュ
WordPressキャッシュ

ホスティングサービスでサーバーサイドキャッシュが提供されていない場合は、以下のアドオンを使ってキャッシュを有効にできます。

サイトでは、キャッシュ可能な静的コンテンツに加え、エンドユーザーごとに定期的に変化する一意の属性を含む動的なデータもホストしています。レンダリングに時間がかかるが再利用できない動的コンテンツは、キャッシュしても意味がありません。

フラグメントキャッシュ

フラグメントキャッシュは、キャッシュ不可能な動的コンテンツを小さな要素としてキャッシュする技術。静的および動的コンテンツを含むページが読み込まれると、ホスティングサーバーはPHPコードを処理し、要求されたコンテンツを取得するためにMySQLデータベースに問い合わせます。キャッシュされたデータを配信することで、時間とリソースを削減することができます。

フラグメントキャッシュでは、動的コンテンツのさまざまなバージョンにわたって変更されないコードブロックの出力を保存します。コードが実行され、事前に決められた時間にキャッシュされたコードブロックに達すると、制限時間に達するまで繰り返し実行する代わりに、サーバーがコードのキャッシュを提供します。

キャッシュに最適化されたコンテンツは、高度に動的なコンテンツを扱うECサイトや会員制サイトでも、読み込み時間を大幅に短縮します。Kinstaでは、4種類のキャッシュを提供しており、すべてソフトウェアまたはサーバーレベルで自動的に実行されます。サードパーティのプラグインを実装する必要はありません。

コンテンツデリバリネットワーク(CDN)

CDNは、キャッシュ最適化の拡張機能。主にグローバルに分散するトラフィックを対象として、サイトパフォーマンスが向上するように設計されています。キャッシュされたページをホストするサーバーのネットワークで構成されており、訪問者の地理的な位置に基づいて、最も近いサーバーからキャッシュコンテンツが提供されます。

パフォーマンス向上、高可用性、表示順位などのメリットがあり、ビジネスの成長を後押ししてくれます。CDNを使用したい理由はこちらでご紹介しています。KinstaのWordPress専用マネージドホスティングプランには、HTTP/2とIPv6対応のWordPress CDNが無料で付帯しています。

WordPress CDN
WordPress CDN

マネージドホスティングへの乗り換え

WordPressは、最小限の投資でブログを構築し、誰でも簡単にオンラインで製品やサービスを販売できる画期的なコンテンツ管理システム(CMS)です。ウェブサイトは、以下のいずれかを利用して稼働するのが一般的です。

  • 無料サーバー:趣味のサイト向け
  • 共用サーバー:予算が限られた小規模なオンラインビジネス向け
  • 専用サーバーまたはマネージドホスティング:本格的にオンラインプレゼンスを確立したい個人または中小企業向け
  • コロケーション:サイトを管理するIT部門が社内にある大企業や政府機関向け

これらのうち、エンドツーエンドのサイト開発と管理サービスを提供するマネージドWordPressホスティングは、超高性能サイトを運営するための最も費用効果の高い選択肢と言えます。ページ速度とパフォーマンスにおいて以下のような利点をもたらしてくれます。

  • パフォーマンスの最適化─コード圧縮、サーバーサイドキャッシュなど
  • キャッシュの最適化
  • パフォーマンスのためのコンテンツ最適化─画像の最適化、ガベージデータの制御など
  • 検索エンジン最適化(SEO)
  • ソフトウェアの定期的な更新
  • プラグインの互換性と導入によるパフォーマンスの向上
  • データベースの最適化
  • コンテンツデリバリネットワーク(CDN)
  • パフォーマンステストと監視
  • 軽量化・高速化されたサーバー
  • クライアントとサーバーの往復を最小限に抑えるサーバーとサイトの設定とメンテナンス
  • 最新バージョンのPHPとMariaDB

WordPressサイトはPHP 7でさらに高速に

PHP 7のリリースに伴い、WordPressのパフォーマンスが大幅に向上しました。PHPのバージョンは細かな最適化よりも重要です。以下のベンチマークで、PHP 7が以前のバージョンと比べて劇的にパフォーマンスが高いことがすぐに見て取れます。PHP 5.6と比較して、1秒間に2倍のリクエストを実行でき、レイテンシはほぼ半分になっています。

PHPベンチマーク(Rasmus Lerdorf, PHP Fluent Talk)
PHPベンチマーク(Rasmus Lerdorf, PHP Fluent Talk)

Kinstaでも独自にPHPのベンチマークを実行したところ、上記のベンチマーク同様、PHP 7.3はPHP 5.6と比較して、1秒間に約3倍のトランザクション(リクエスト)を実行できることが分かりました。また、PHP 7.2よりも平均して9%高速になります。

WordPress 5.0のPHPベンチマーク
WordPress 5.0のPHPベンチマーク
  • WordPress 5.0 PHP 5.6:1秒あたり91.64リクエスト
  • WordPress 5.0 PHP 7.0:1秒あたり206.71リクエスト
  • WordPress 5.0 PHP 7.1:1秒あたり210.98リクエスト
  • WordPress 5.0 PHP 7.2:1秒あたり229.18リクエスト
  • WordPress 5.0 PHP 7.3:1秒あたり253.20リクエスト🏆

結果

PHP 5.6とそれ以降のバージョンの性能差は著しいことから、Kinstaでは常に最新の安定版PHPバージョンをサポートしています。2021年11月25日に正式リリースされ、さらに高速化されたPHP 8.1は、現在すべてのお客様にご利用いただけます。

ウェブサイトの高速化は必要不可欠

ここまでお読みいただき、ありがとうございました。長くなってしまいましたが、参考になる情報や今すぐ実践できるヒントなどがありましたら幸いです。Kinstaでは、超高速WordPress専用マネージドホスティングを提供しており、サーバーサイドの最適化が徹底されたインフラストラクチャで安全にWordPressサイトを運営できます。詳しい情報についてはこちらをご覧ください。

この記事が参考になりましたら、ぜひ他の人にも共有をお願いいたします。