ウェブサイトの高速化入門

第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%に相当します。この急激な普及は、近年モバイルマーケティング分野に参入した多くのオンラインビジネスを未だ困惑させています。

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

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

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

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

モバイルとPCの比較

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

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

• 米国市民の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利用者に取って代わる可能性のある高い収入源を確立することができます。

とはいえ、今後も急速に増え続けると予想されるのは、モバイルユーザーです。モバイルサイトの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も増加しました。

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

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

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

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

外部サービスの利用には、以下のような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が提供するページ速度測定ツール、サイト監視ツールのPingdomとGTMetrixでは、サイトパフォーマンスの指標に関する貴重なインサイトを無料で得ることができます。また、サイト管理を始めたばかりの初心者でも理解しやすいスコアと推奨事項も表示されます。以下、速度測定ツールについて詳しくご説明します。

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

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

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

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

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

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

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

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

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

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

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サイトの場合

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

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

CSSコードと配信の最適化

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

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

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

WordPressサイトの場合

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

目的に応じて、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ファイルには、冗長なコードが多く含まれ、<Tags>、<Alts>、<HTML>などが繰り返されています。

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

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

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

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

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

WordPressソリューション

• W3 Total Cacheを使ってGZIP圧縮を有効にする
• GZIP圧縮は、ApacheまたはNginxのサーバーレベルで有効にするのが最善（GZIP圧縮の詳細はこちら）

キャッシュ

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

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

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

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

• W3 Total Cache
• Cache Enabler
• WP Rocket
• FastCGI Cache（NginxとDrupalサーバー用）

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

フラグメントキャッシュ

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

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

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

コンテンツデリバリネットワーク（CDN）

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

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

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

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

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

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

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

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

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

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

• 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サイトを運営できます。詳しい情報についてはこちらをご覧ください。

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