初心者のためのウェブサイト読み込み速度最適化ガイド

2章：ウェブサイトパフォーマンスがビジネスの成功を左右する

パフォーマンスが売上に与える影響

ウェブサイトパフォーマンスはユーザーエクスペリエンスに直結します。ページ速度の高速化は魅力的なオンラインショッピングエクスペリエンスを意味し、売上を後押しし、最終的にオンラインビジネスの成功を左右します。業界の中心的存在であるGoogleは、ウェブサイトのパフォーマンス低下が売上減少へとつながるという説得力のある相関を経験して以来、自社の検索アルゴリズムにページ速度という要素を取り入れました。この検索エンジン大手はかつて、ページ読み込み時間の0.5秒の遅延が原因で、トラフィックの20％の落ち込みを経験済みです。

Googleは問題を迅速に解決し市場シェアをほとんど失わずに済みましたが、同じことが、競争の激しいオンライン市場で存在感を確立できていないオンラインビジネスには当てはまりません。

Q: それでは、ウェブサイトのパフォーマンスは、平均的なオンラインビジネスの売上にどのような影響を及ぼすのでしょうか？

A: 驚くほど大きな変化。これが唯一の答えです！

コンサルティング会社Forresterは最近、消費者のオンラインショッピングに対する期待の現状を調査。高水準のパフォーマンスを誇るウェブサイトが急速に売上を伸ばす一方で、低水準のウェブサイトが収益面で圧倒されているという事実を確認しています。

調査によると、インターネットユーザーの88％が、高性能で使いやすいウェブサイトエクスペリエンスを提供するオンラインストアを好んで選択しており、約50％が3秒以内に読み込まないウェブサイトから離脱しています。

このような違いは結果として売上に影響を及ぼします。不満を抱く顧客の79％は（あなたのサイトがGoogleやAmazonである場合を除いて）パフォーマンスの低いサイトに再びアクセスすることはありません。不満を抱いた顧客の46％はずっと否定的な印象を持ち続け、44％は他の人にそのような評価を共有します。消費者の87％が実店舗とオンラインの両方で買い物をするため、その影響はインターネットの世界に限定されません。

明らかにサービスと製品の質がビジネスの売上に最大の影響を与える一方で、サイト訪問者をオンライン上で購入者に変えるには、肯定的な印象を醸成することが重要です。eコマースサイトで素早いページ表示やスムーズな決済プロセスといった特徴が機能することで、好印象が与えられ、最終的に顧客による販売を促進し、ロイヤルティを獲得できるのです。

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

あらゆるビジネスにとって最も重要かつ強力な指標であり、オンラインで優位に戦うために必要とされるコンバージョン率は、総体的にウェブサイトのKPIで決まります。

オンラインで戦う上で、昔からあるマーケティング手法だけではコンバージョン率は向上しません。ページ速度とウェブサイトの応答性といったウェブサイトにおけるユーザーエクスペリエンスを高める必要があります。

2011年の大統領選挙の際、オバマ氏の募金キャンペーンで、 Obama for America（同氏のキャンペーン運営組織）のサイトがページの読み込み時間を5秒から2秒に短縮することで、獲得額が3,400万ドル増加しました。これは、ウェブサイトのパフォーマンスがわずか3秒向上しただけで、寄付のコンバージョン率が14％増加したことを意味します。

潜在顧客を実店舗の玄関口に導くには、徹底的に練り上げたマーケティング計画と広告キャンペーンが必要になるものです。また、消費者がひとたび店に入ると、通常、購入せずに店を出ることはあまりありません。

オンラインでは、ユーザーをeコマースサイトに呼び寄せるのにかかる労力は、はるかに少なくなります。インターネット利用者は、以前に訪問したことがないウェブページのリンクであってもクリックすることを躊躇しません。多くの場合、検索エンジン最適化（SEO）とソーシャルメディアを使った広告出稿が効果的です。

必要な情報が許容できる数秒以内に提供されないと、（訪問者にとっては便利なことに）簡単にサイトを離れることができます。待ち切れないユーザーは、待機に比べると数回の（面倒なはずの）クリックも苦に思わないのです！

つまり、ウェブサイトのパフォーマンスと応答性という文脈でのユーザーエクスペリエンスは、オンライン小売市場におけるコンバージョン率を左右する重要な要因になります。eコマースは、何よりも、消費者の利便性と、適切な情報、製品、サービスを適切なタイミングで効率的に潜在顧客に届けることに注力すべきです。

ウェブサイトのパフォーマンスの問題でユーザーがサイトを離れてしまわないように、ページ速度を保つこと。これを怠ると、上記のどちらも実現不可能です。コンバージョン率に影響を与えている、あなたのサイトのパフォーマンスはちゃんと把握できていますか？GoogleのTest My Siteツールなどが便利です（下の例を参照）。

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

ユーザーエンゲージメントに関するデータは、オンラインでの販売最適化戦略を考案する際に、大事な役割を担います。競争の激しいオンライン市場で成功するビジネスたるもの、ウェブサイトのパフォーマンス、そして、ページ速度と収益の橋渡しになるアクションを分析・予測するツールの重要性をよく理解しているものです。

レスポンシブで高速に読み込まれるウェブサイトを用いたユーザーエンゲージメントの強化は、多くの場合、オンラインビジネスの成功を意味します。ユーザーエンゲージメントの在り方は、数秒を超える短期記憶を保存する際に人間が直面する制限、そして、あらゆる状況下でマシンを制御したいと思う人間の願望に大きく依存しています。

パフォーマンスの低い（相対的な意味で）ウェブサイトの場合、ページ読み込み時間が人間の我慢の限度を超え、ユーザーからの要求の処理に失敗した際には、効率的かつ正確に目的の応答を提供できないという印象や無能さを感じさせてしまいます。

一方、パフォーマンスの高いウェブサイト（これも相対的な見方）であれば、ユーザーエンゲージメントを決定する3つのパラメーターである、ユーザーの感情、精神状態、ユインタラクションに違いが出ます。これら3つが、人間の訪問者（ボットはまた別の話です！）とウェブサイトの間に、感情的、認知的、行動的なつながりを生み出します。

このつながりが確立されると、オンラインビジネスでは、注目、モチベーション、信頼などのユーザーエンゲージメントの特性を利用し、訪問者を顧客、リピーター、さらにはブランドアンバサダー（ソーシャルメディアやインターネット外での顧客獲得に貢献）へと変えることができます。

パフォーマンスは運営費と収益に影響を与える

サイトのパフォーマンス最適化には投資が必要です。ページの読み込み時間を数秒短縮するために、資本的支出が発生します。しかし、結果として、必然的に収益の増加と運用コストとハードウェア投資の減少が見られます。

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

ウェブサイトKPIの改善により、AdWordsの品質スコアも向上し、クリック単価（CPC）が削減できます。高品質のスコアとページ速度を備えたオンラインビジネスは、広告予算を効率的かつ効果的に費やすことができるため、追加の資本的支出を必要とすることなくリーチを最大化し、より多くの顧客にアプローチできます。

一方で、サイトの速度が遅いと、リソースの使用率が最小になります。Bingは収益に影響を与えるウェブサイトのパフォーマンスについて独立した調査を実施。その結果、検索クエリ配信に2秒の遅延があるごとに、ユーザーあたり4.3％の収益の損失が発生することが判明しました。

また、遅延が解消されても、消費者の行動は劇的には変わりません。Googleが検索結果を提供する際の0.4秒の遅延を取り除いたとき、ウェブページが最適に機能していても、ユーザーの検索は0.21％減りました。

ウェブサイトのパフォーマンスを向上させるための特別な業務により、資本的支出が一時的に拡大する可能性がありますが、この投資が収益の増加、運用コストの削減につながるため、最終的には折り合いがつきます。

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

学習曲線の勾配が急であるウェブサイトは、効率よく顧客を維持できます。インターネットユーザーは通常、代替のサイトの使い方を把握（学習）するのにかかる時間を、重大な切り替えのコストと見なします。だからこそ、高性能のウェブサイトで提供されるオンラインサービスにユーザーが固執するメカニズムが成立するのです。

ユーザビリティと顧客のロイヤルティを支えるのが、ウェブサイトのKPI（ページ速度、読み込み時間、ユーザーのリクエストに対するウェブサイトの応答性など）です。ウェブサイト速度最適化を構想する際には、これらの要素を考慮し、サイトの信頼性、インタラクティブ性、情報の関連性などの特性がエンドユーザーによるウェブサイトのユーザビリティのサブセットと見なされます。

同様に、ウェブクローラーと検索エンジンは、検索結果表示順位に影響を与える検索エンジン最適化のサブセットとして、ページ速度、操作性、ユーザーエクスペリエンス、応答性、そして、全世界の訪問者によるサイト到達可能性の観点からウェブサイトのパフォーマンスを測定します。

エンドユーザーは、ウェブサイトのユーザビリティに影響を与える次のような特性を求めるものです。

• 操作、ナビゲート、理解が簡単
• 目的の情報と制御機能が直接提供される
• すべてのデバイス、マシン、OS、ブラウザ、地域や国からアクセスできる
• 最小限のクリックとブラウザリクエストで、正当で信頼でき、質の高い情報、製品、サービスが手に入る

これらの期待に応えることは、ウェブサイトのパフォーマンス、ユーザービリティ、顧客ロイヤルティを最大化するために不可欠です。このすべてが、オンラインビジネス成功への道筋を作る要素となります。

3章：速度の最適化されたモバイルサイトがデスクトップを凌駕する

モバイルは言うなれば、デジタル業界の未来。モバイルデバイスが人類全体へと到達する猛進を見せています。スマートフォンの登録台数は23億2000万件。これは、2017年の世界人口の約30％です。そして、この潮流は、モバイルインターネットマーケティング分野への進出に出遅れたオンラインビジネスを苦しめています。

インターネットでの成功は、急増を続けるモバイルユーザーにリーチするためのモバイルファーストアプローチを採用できるかどうかにかかっています。そして、大量のモバイル利用者人口に効果的に狙いを定める組織は、想像を絶する成果を目にすることになるでしょう。

一方で、デスクトップインターネットマーケティングは、いかにも過去10年間の流行りという様相を呈します。「ポスト PC 時代」、「PC 売上 低迷」、「デスクトップ 時代遅れ」といった用語をGoogleで検索すればわかることです。デスクトップユーザーだけに固執する組織は、幾分暗い未来に直面することになるはずです。

業界で遅れを取っている人であっても、今からモバイルファースト戦略を採用することはできます。ただし、このアプローチは、モバイルユーザーに対する最適化があってこそのもの。これを怠ると、将来を見据えた挑戦であっても、好ましい結果にはつながらないでしょう。

モバイルへの移行において方向性を誤り、重要なステップを見落とすと、モバイルユーザーに効率的かつ効果的にリーチすることができません。レスポンシブでパフォーマンスの高いモバイルウェブサイトが欠如すると、そのような事態が発生してしまいます。

モバイル VS デスクトップ–なぜこれが重要な意味を持つのか？

モバイルを気にすべき最初の理由は…「他の皆が注目」しているから。モバイルにおける競争は激しく、2014年にはYahooのCEOがこれをインターネットの「転換点」だとしました。そして、彼女の洞察は的を射ていました！Stone Templeは2017年にSimilar Webを用い統計情報をまとめましたが、その結果は特に驚くべきものではありません。モバイルは770億のウェブサイト訪問数のうち50％以上を占めていたとのことです。

他にもこんなデータがあります。

• アメリカ人87％がモバイルデバイスを所有
• そのうち45％がスマートフォンを所有
• そのうち90％がモバイルでインターネットを利用
• そのモバイルユーザーは、毎日平均4時間モバイルでインターネットブラウジングをしている
• 74％は、5秒以内に読み込まれないモバイルウェブサイトから離れる

意識すべきは、少なくともサイトデザインの観点から、モバイルとデスクトップを別々に扱うことです。この考え方を無視すると、ウェブサイトのデスクトップバージョンにアクセスするモバイルユーザーエクスペリエンスは、通常、ページ読み込み時間、使いやすさ、機能という面で、よろしくない状態になります。モバイルウェブサイトのこのような中核となるポイントを見落とした先にあるのは、次のような問題です。

• モバイルからの購入減少：スマートフォンを利用した買い物客は、デスクトップ利用のユーザーよりも注意が散漫で、忍耐力も低い傾向にあります。
• 競合他社に負ける：アメリカの1000人以上の成人スマートフォンユーザーに対する調査によると、回答者の約75％が、質の高いモバイルユーザーエクスペリエンスを提供するモバイルeコマースサイトの再訪を優先すると答えています。
• ブランド価値を失う：完全にデスクトップ用ウェブサイトのHTMLを縮小しただけの、訪問者がズームインやズームアウトをしてページを閲覧する必要があるモバイルサイトを利用していると、ユーザーはその後、関わりをもたなくなる可能性があります。

このような事態により、モバイルインターネットでの顧客へのリーチという意味で次の目的が果たせなくなります。

• 顧客基盤の拡大
• 新しい広告オプション
• ユーザーの利便性を鑑みた質の高いサービスを効率的に提供する
• （最も懸念されること）ビジネス開発のためにモバイルウェブを生産的に採用する

デスクトップとモバイルでは、テクノロジーリソース、フォームファクタ、ユーザーインターフェース（ウェブサイトのパフォーマンス最適化実装を担うあらゆる側面）が異なります。モバイルウェブサイトを個別に最適化し最高のモバイルウェブサイトパフォーマンスを提供しないと、様々なウェブサイトKPIが低下し、モバイルユーザーエクスペリエンスに悪影響が出ます。

モバイルテクノロジーのおかげで、外出先でも、ソファーで寝転がっても、歩いていても、快適にネットが使える世の中です。ウェブサイトの操作を制御したいと思う欲求は、 デスクトップにおけるそれを上回ります。約2秒という短い時間内に、モバイルウェブサイトのコンテンツを配信することで、顧客からのロイヤルティを獲得し、モバイルインターネットユーザーとの長期的なビジネス関係に大きな違いをもたらすことができます。

高性能モバイルウェブサイトと高いコンバージョン率

モバイルデバイスを使用してオンラインストアで買い物をする人が大量にいることを考慮すると、eコマース運営者にとって、モバイルサイトのパフォーマンスを引き上げることは、明らかな優先事項です。最近の調査によると、eコマースビジネスは何百万ものモバイルユーザーをみすみす逃している可能性があるとのこと。モバイルデバイスを利用した買い物客のコンバージョン率は、デスクトップユーザーの平均のおよそ80％となっています。

低パフォーマンスのモバイルウェブサイトを持つ小規模なeコマースビジネスのコンバージョン率は平均0.6％であり、一方で、同じ規模のデスクトップeコマースプロバイダーのコンバージョン率は1.6％です。

一方、タブレットユーザーは、デスクトップユーザーよりも20パーセント多く支出するという結果が見られます。モバイルインターネットマーケティングにこれから着手する場合には、このオーディエンスに狙いを定めることで（いつの日か—遠い未来ではあるものの—デスクトップオーディエンスに取って代わる）収益源を獲得できます。

完全なる転換には時間がかかろうとも、モバイルユーザーへの注目は指数関数的に増加し続けることでしょう。モバイルサイトの検索エンジン最適化は、それ単独の分野に昇格するほどで、モバイルサイトの速度最適化も同様です。これを構成する要素は以下の通りです。

• ページ速度の向上
• ページ読み込み時間の短縮
• メディアリッチコンテンツの効率的な配信
• ダウンロード速度
• 最適なサイト形式の使用
• ウェブサイト全体のナビゲーションと使いやすさ
• モバイルインターネットという本来的に複雑なシステムでユーザーからの操作を最小限に抑える仕組み

これらをクリアすることで、モバイル向けの最適化に奔走する小規模サイトでも、最大1.2％のコンバージョン率（デスクトップサイトのコンバージョン率の2倍）、そして、デスクトップバージョンサイトでコンバージョン毎80%の収益を誇る大規模サイトと競合できます。

最も速い者が表彰台の頂点に立つ

フォーチュン100企業がモバイルウェブサイトのページ読み込み時間を平均5秒—平均許容基準である最大7秒より2秒速い—でこなしているのは不思議ではありません。

ただし、eコマースサイトであれば、ページ読み込みに5秒かかるだけで、十分に離脱を生み出す可能性があります。また、小売業のサイトの一部は、最低1秒というGoogleと同程度の速度を実現しています！

驚くほど速く、おそらくGoogleのようにページ速度とウェブサイトの応答性に重点を置いているのでしょう。ただし、これは、非常に高速なモバイルウェブサイトのメリットを享受して、モバイルユーザーから数十億ドルの収益を獲得している、上位100のマルチチャネル小売業者のうち16社の平均ページ読み込み時間です。

Googleは、モバイルウェブサイトのデザインにおける多くの変更点（こちらとこちら）を説明しています。これは、1秒以内にモバイル画面にウェブページを表示するためのものです。ちなみに、あなたがフォーチュン100企業やトップ100のeコマースサイト所有者でなくてもです。モバイルウェブ開発を日々行なっている方にはこちら—非営利団体ワールドワイドウェブコンソーシアム（W3C）は、ベストプラクティス（こちらとこちら）を公開しています。長い分量がありますが、モバイルウェブサイトの最適化が本当に重要で意味あるトピックであることがわかります。

また、ウェブデベロッパーを雇用し応答性が高く速度の最適化されたモバイルウェブサイトを設計するビジネスオーナー向けにはこちら—モバイルウェブサイトの次の3つの要素を改善する必要があります。

• なめらかなグリッド
• 柔軟な画像
• メディアクエリ

また、デザインとしては、次の要素に焦点を当てる必要があります。

• マストヘッド
• イメージギャラリー
• 製品説明
• 補足情報
• フッター

顧客は、応答の速いウェブサイト、非常に短いページ読み込み時間を高く評価します。スマートフォンやタブレットへの依存度の高まりに伴いモバイル技術が進化を続け、減速の「げ」の字も見えません。業界トップのeコマースサイトは、サイトのコンテンツをウェブサーバーからモバイル画面の小さな画面に効率的に配信することの重要性をよく理解しています。徹底的に設計されたモバイルプラットフォーム専用のウェブサイトでそれを正しく実践することにより、サイト利用者は素早く、迷わず購入を済ませることができ、最終的にはこれが、オンラインビジネスの終わりなき収入源の創出へとつながります。

消費者の60％がモバイルデバイスのみを使用して素早く購入に踏み切っています。モバイルデバイスとデスクトップコンピューターならびにラップトップは、情報収集の手段として同様に重要であると見なされています—ユーザーの42％はモバイルを、43%はパソコンを選んでいます。しかし、モバイルデバイスを介してウェブにアクセスする際の利便性は、モバイルインターネットの利用とビジネスチャンスの可能性を広げています。

依然としてモバイルウェブサイトのパフォーマンスに興味が湧かないという方は、速度最適化の施されたモバイルウェブサイトで達成できる可能性を検討してみるべきです。

4章：サイトパフォーマンスを低下させる典型的なビジネスのミス

オンラインマーケットプレイス—言うなれば古代ギリシャの戦場—は、最も熱意溢れる者のみが生き残る、勝つか負けるかのプラットフォームです。そして、すべての過酷な戦場と同様に、人的要因（判断ミス、誤解、無知）が競争の結果に大きく貢献します。

しかし、高性能で完全に最適化されたウェブサイトの維持を担当するオンラインビジネスやウェブ管理者は、サイトの読み込み時間を妨げる重要なウェブデザインの要素を見落としている傾向にあります。そして、その結果は通常、要塞を突破してトロイの町を制圧したトロイの木馬（軍の規模と支配力にもかかわらず大打撃を受けた）と同じくらいに危険なものになります。

オンラインビジネスの成功をめぐる競争もこれと同じくらいに激しいもの—違いと言えば暴力がやや少ないくらいです。消費者の注目を集めるためには、会社の規模や過去の栄誉に関係なく、要求されたコンテンツを最も効率的かつ正確に提供する必要があります。また、トロイア戦争の結果を左右した人間の過ちや無知と同様に、ウェブサイトのパフォーマンスを損なう典型的な過ちは、オンラインビジネスの競争における結果をいくらでも変えてしまいます。

「死の境目」（何とも的を射たネーミングですが）—期待されるページ読み込み時間2秒未満と、平均サイト読み込み時間5秒との間の隔たり—は、驚くほど軽率なウェブサイトの最適化戦術やビジネス上の決定により、拡大することも縮小することもあります。一般的な意見に反し、速度の最適化は、サイト構築後（多くのサイト所有者がこの段階で必要性に気づくもの）ではなく、理想的にはウェブサイト開発のすべての段階で実装すべきです。

ウェブサイト開発後に実装する最終的な微調整や速度最適化の技が、ページ速度を向上させ、最低でも「死の境目」に到達することは可能です。しかし、このゾーン内でも、期待されるページ読み込み時間である2秒以降については、1秒毎の遅延でコンバージョン率が7％低下します。

一方で、速度の最適化戦術を真剣に捉えるウェブサイト所有者は、以下にある致命的なミスを回避することで、ウェブサイトのパフォーマンスを向上させることができます。

平凡なウェブホスティングサービス

平凡なウェブホスティングサービスを選ぶという過ちは永遠に続く可能性があります。2017年の時点で13億を超えるウェブサイトがオンラインに存在し、ホスティングスペースは混雑し、そして分裂しています。さまざまなホスティングオプションが世界規模で利用できるようになったことで、企業も個人もサイトを保有可能です。費用対効果の高いウェブホスティングサービスに対する需要は飛躍的に高まっています。これに呼応するようにして、ホスティングプロバイダーは、低コスト層で市場シェアを獲得するために、サービスの質においては妥協以上のことをしています。

費用対効果の高いサービスを販売する、平凡なウェブホストは、何千ものウェブサイトを肥大化したApacheスタックの単一のインスタンスでホストすることにより、収益性を最大化し続けています。単一のサーバースタックで何千ものパブリックウェブサイトを扱う最適化されていないサーバーは、ウェブトラフィックの急増、マルチメディアコンテンツ、サイズの大きなファイルへ対処しきれず、サイトにとってはマイナスポイント（特にeコマースに害あり）となります。

「最近では、誰もが高速通信を手にしているから」とスピード最適化を軽んずるウェブホスティングや開発会社は、金銭的損失とオンラインビジネスのブランドの評判低下を経験することになるでしょう。魅力的なウェブサイトパフォーマンスはeコマースビジネスの成功に不可欠です。ウェブサイトの読み込みに3秒以上かかるだけで、トラフィックの40％が失われます。不満を感じた訪問者の79％が、そのような遅いeコマースサイトに舞い戻ることはほとんどありません！

最高品質のウェブホスティングサービスを追求するために時間とお金を投資することは、訪問者の注意を効率的かつ正確に引き付けることによって膨大な収益を生み出す高性能ウェブサイトを確保するための鍵となり得ます。

“帯域幅泥棒”がすぐそこに

ウェブサイトの速度最適化には継続的な作業が必要となり、世界最高のウェブホスティングサービスを利用するだけでは不十分です。収益を最大化することを目的としたウェブサイトのデザインや機能の変更は、個々の訪問者に割り当てられた帯域幅を圧迫し、ウェブサイトのパフォーマンスに悪影響を及ぼすことがあります。

ウィジェットやプラグインが多すぎる

ウェブサイト所有者や開発者は機能をどんどん追加したくなるもの。ウィジェットとプラグインは、サイトに便利な機能を加えることができますが、パフォーマンスへの負担も増します。Google+ボタンボックスなどの最小限のウィジェットであっても、ページの読み込み時間に関するサイトパフォーマンスへの負担は、場合によっては2秒も増加する可能性があります。

Facebookのいいね!ボックスは、40以上のHTTPリクエストを追加します。遅延を引き起こす要素です（以下の画像を参照）。クライアントのサイトでは、全体のウェイトに700 KBが追加されています。これは宜しくないですね。

アドオンを最小限に制限することは、最適なサイトパフォーマンスを維持するために不可欠な作業です。サイトコアにインストールされたプラグインでさえ、ブラウザのリクエストに対して最速の応答を提供し、最終的に帯域幅を消費します。

インストールされているプラグインの質と機能は、その数よりもはるかに重要になり得ます。大量のデータをクエリして複雑な操作を実行するプラグインは、WordPressなどのウェブサイトホスティング環境内ではなく、サーバー外でこれを実行する必要があるものです。

広告と外部サービスが多すぎる

一見すると魅力的ですが、サードパーティの広告主にあまりにも多くのスペースを売り渡すと、ウェブサイトのパフォーマンスが大幅に低下します。広告が多すぎるせいで、読み込みが遅いと、直帰率が高くなり、サイト全体のパフォーマンスに悪影響を及ぼします。直帰率が高いときの経済的損失は、広大なウェブサイトスペースを広告主に引き渡すことによる金銭的利益を上回ります。

外部サービスには通常、2つの問題があります。1つはシンプルに膨大な量によるもので、もう1つは読み込みされるまで待機する必要があるということです。

• 外部サービスが多数ある場合は、それらをすべて読み込み、ページ読み込みのたびに、そこからの情報を待つ必要があります。呼び出しが多く、待機時間が長くなるほど、サーバーの負荷が大きくなりなり、2番目の問題に遭遇する可能性が高くなります。
• 場合によっては、サイトと外部サービス間のデータ転送が完了するまで、ページの読み込みが待機することがあります。ヘッダーでサービスが呼び出され、サービスの中断があると、ページの読み込みそのものが拒否されます。

ある調査によると、バナー広告で収益を生み出すコストとして、およそ33％のレイテンシが追加されてしまうとのこと。煩わしいポップアップ広告により、訪問者はさらに高い割合でウェブサイトを去ります。アフィリエイトのためのコードは、わずか数行のスクリプトでもホスティング環境の貴重なメモリ領域を使うことになり、コンテンツをエンドユーザーに配信する際に、より多くの処理サイクルが必要となります。

それにもかかわらず、オンライン広告は多くのオンラインビジネスにとり貴重な収入源です（GoogleやFacebookがいい例です）。最適なウェブサイト広告モデルこそが、待機時間とページ読み込み遅延という代償を最小限に抑えながら、ウェブサイトの収益を増やすことに貢献します。

膨らみすぎたテーマデザインと互換性のないマルチメディア

魅力的なデザインのテーマやマルチメディアコンテンツは、訪問者の注意を引きます。ただし、コンテンツがせっかちな訪問者の目にも十分速く届いた場合の話です。質の高い画像やビデオ（肥大化したピクセルやファイルサイズ）は、要求元のブラウザへのダウンロードに時間がかかりますが、かといって質が低い（軽量ではありますが）グラフィックスは、読み込み時間が短くても、ほとんどユーザーの注意を引きません。

ただし、グラフィックスを多用するコンテンツが、コンバージョンと販売の決定的な要素とは限りません。これは、eコマースウェブサイトに特に当てはまり（商品の価値を説明する、そして、読み込みの速い商品画像と動画が必要）、必ずしも視覚的な美しさが全てではありません。

互換性の問題は、特定のブラウザや地域における、マルチメディアやアプリケーションのパフォーマンスにも影響します。例として、Google ChromeとShockwave Flashを取り上げると、この2つが見事に調和することは滅多にありません。同様に、政府の制限により、特定のマルチメディアコンテンツが該当地域のユーザーに届かないようにされていることもあります。

機能しないマルチメディアコンテンツがサイトにあると、要求元のブラウザに到達するために過度のクライアント/サーバー通信サイクルが必要となります。これは、最終的にウェブサイトのパフォーマンス低下につながります。ただし、政府のポリシーやブラウザの互換性は時間の経過とともに変化する可能性があり、ほとんどの場合は予測不能です。そのため、すべてのブラウザ、デバイスのフォームファクタ、地域を考慮して合理的なメンテナンスを実行することがサイト所有者の課題となります。

eコマースサイトにとって、サイト訪問者を引き止めるには、読み込みの素早さと完全に機能するマルチメディアコンテンツが必要不可欠です。ページ読み込み時間の1秒の遅延毎に、訪問者は苛立ちを感じ、遅いサイトからは離れ、コンバージョン率が7％低下し、ページビューが11％減少し、顧客満足度が16％低下します。

ちょっとしたその他のコードも然り – サインアップフォームや分析ツール

サインアップフォームや分析ツールを使用しても、ウェブサイトのコアファイルには数行しか追加されません。しかし、このコードがウェブサイトのバックエンドで多くのスペースを占めるようになると、短い処理サイクルの中で限られたメモリスペースを奪い合う要素になります。その結果、滑らかな動きができず、各コンポーネントは予測不能な動作を始め、通常、期待されるより多くの処理サイクルが消費されることになります。

エンドユーザーの観点から言えば、過度のサービスは多くの場合不要であるか、せいぜい、ウェブサイトのメインコンテンツに次ぐものです。多くのウェブサイトは80を超えるアセット（画像、プラグイン、アドオン、その他マルチメディアコンテンツ）をホストしており、このコンテンツのすべてが、ユーザー設定に従って要求元のブラウザに配信されるとは限りません。エンドユーザーから要求された情報が無関係なサインアップフォーム、分析コード（またはサイトに不必要な重みを加えるその他コンテンツ）により妨げられた場合、メディア特化型の開発のための投資は、最終的には逆効果になります。

モバイル最適化の怠りやリダイレクトの問題

世界のスマートフォン契約台数は、2019年までに27億を超えると予想されています。その時には、ユーザーの83％がモバイルデバイス経由でインターネットにアクセスすることになります。2016年のeコマースサイトのトラフィックの30％はモバイルからのものであり、この数はスマートフォン利用者の爆発的拡大とともに急激に増加しています。

モバイルウェブサイトの読み込みが遅く、訪問者の忍耐力が低くなったため、モバイルユーザーの注意を引くための競争はさらに激化しています。モバイルユーザーの60％は、モバイルサイトが3秒以内に読み込まれることを期待しています。また、平均で、読み込みに5秒以上かかる場合、4人に3人がモバイルサイトから離れますが、平均的なモバイルサイトの読み込みは6〜10秒かかっています。

モバイルページの読み込み時間の過度の遅延は、ほとんどの場合、ウェブサイトがモバイルデバイスで高いパフォーマンスを発揮するように最適化、設計されていない場合に発生します。スマートフォン向けに最適化した専用ページを使用しても、モバイルユーザーが（デスクトップウェブサイトのページから）意図されるモバイルバージョンへと常にリダイレクトされるとは限りません。

リダイレクトとは、あるURLの表示を希望したユーザーを、（理論上は）正確な情報を含む別のURLへと導く操作です。リダイレクトは、例えば、デスクトップバージョンのページをリクエストしたモバイルユーザーに（最高のモバイルウェブサイトエクスペリエンスを提供するために）同等のモバイルバージョンを表示するために使えます。

この実装に誤りがあると、正しいページに到達するまでに不要なファイル間での移動が発生することになります。これにより、エンドユーザーが実際にリクエストした情報の読み込みまでに不要な遅延が発生します。

これは、混雑した巨大な駐車場で空きを探す状況に似ています。遠くからは空きスペースのように見えても、いざそこまで移動したら小さな車が停まっていたという具合で…本当の空きが見つかるまで、これの繰り返しです。運転手がいつまでもスペースを見つけられずにイライラして、その場を去ってしまう可能性は当然あります。

モバイルユーザーに速度の最適化されたモバイルソリューションを提供することなく、モバイルウェブトラフィックを関連性のないデスクトップウェブサイトバージョンにリダイレクトしてしまうと、モバイルサイト所有者は、モバイルユーザー向けの市場で競争力を失うことになります。

モバイルデバイス用に速度の最適化されていないサイトは、モバイルユーザーエクスペリエンスの問題に悩まされることでしょう。リダイレクトの欠陥、再生できないビデオ、肥大化した画像やグラフィックス、無関係なリンク、モバイルユーザーに不要なアセットの配信といった問題は、サイトパフォーマンスを低下させ、直帰率を高めます。

待機期間の10％のみがブラウザリクエストに対するHTMLの応答で、残りの90％の遅延は、ページのレンダリング、HTMLの解析、コードスクリプトの実行、埋め込みアセットの取得が原因です。最適化ツールの使用、スクリプトの微調整によるサイトパフォーマンス見直しで、ページの読み込み時間を削り取ることはできますが、最適化を考えたサイトを最初から開発するのに比べると効果は限定的です。後者は、サイトパフォーマンス低下によりオンラインビジネスを台無しにする可能性を回避する行為であり、大事なマーケティング戦略、ビジネス上の意思決定です。

5章：ウェブサイトのスピードテスト–パフォーマンスを下げている原因を突き止める！

ウェブトラフィックと検索エンジンのランキングは、サイトパフォーマンスの中でも目玉の指標です。重要なものですが、どちらもオンラインビジネスの成功度を直接語るものではなく、売上とコンバージョン率が最終的な目標です。直帰率（ほぼ）0％、コンバージョン率15％、検索エンジンのランキングが低いユニーク訪問者数10,000のeコマースサイトは、コンバージョン率が0.01％しかないユニーク訪問者数100,000のランキング上位サイトをはるかに凌ぎます。

コンバージョン率最適化についての議論を書き始めると百科事典並みの分量になり得ます。フランケンシュタインのような“ノロマ”サイトにベストプラクティスを実装しようとすると、大幅なコンバージョン率の改善が見られるまで、数か月にわたって忍耐強く投資を続ける必要があります。

そして、市場性を高める受動的なビジネス戦略を実装することよりも、オンラインの忍耐力のない消費者に製品やサービスを売り込むことの方が、多くの作業を伴います。サイトパフォーマンス向上に焦点を当てたオンラインビジネスは、コンバージョン率の向上と売上の急増という形で即座に効果を実感することでしょう。

中でもページ速度は、サイトのユーザーエクスペリエンスを改善し、せっかちなオンラインユーザーの関心をつなぎとめ、市場での存在感を高めてくれます。O’Reillyが公開した最近の調査レポートでは、ページ読み込み時間を短縮することで、ウェブサイトのエンドユーザーエクスペリエンスが改善され、売上とコンバージョン率が大幅に向上するとされています。その驚異的な統計は次のとおりです。

• ページの読み込み時間を15秒から7秒に改善→1秒あたり3％のコンバージョン上昇
• ページの読み込み時間を7秒から5秒に改善→1秒あたり2％のコンバージョン上昇
• ページの読み込み時間を4秒から2秒に改善→1秒あたり1％のコンバージョン上昇

この数字は、競争の激しいオンラインでページ速度がどのような役割を果たすかを説明しています。単純な話ではありませんが、読み込み速度の遅いサイトを高速化するのは比較的実現可能な狙い目でしょう。速度の最適化戦略を正しく実行しさえすればいいのです。ただし、当然、この「しさえすればいい」の部分が曲者で、パフォーマンスのベンチマークが不正確、複雑、または広範囲すぎる場合には成し遂げることはできません。

速度最適化の道のりは、標準的なサイトパフォーマンステストプロセスで最も明白かつ重要であるフロントエンドの問題を特定することから始まります。GoogleのヘッドパフォーマンスエンジニアであるSteve Souders氏は、この点についてこう助言しています—「エンドユーザーの応答時間の80〜90％がフロントエンドに費やされています。ここから着手してみてください」とのことです。

何をテストすべきか

ページ速度低下の問題を調査する前にやるべきこと。それが、最も影響の大きいサイト速度パフォーマンスインジケーターの中身を理解することです。これは、サイトパフォーマンスの欠陥を正確に特定するのに役立ちます。

初動ページ速度

ブラウザがリクエストを開始してから数ミリ秒以内に大量のメモリを消費するコンテンツをダウンロードすることはほぼ不可能であり、遅いウェブサイトについては徹底的な改良と速度の最適化が必要になります。多くの場合、訪問者は、主要なコンテンツや製品情報をまず閲覧したがるものです。補足的なグラフィックスや機能を多く追加すると、ページのレンダリング時間が伸びてしまいます。

とっかかりのページ速度を速く保つことで（かさばるグラフィックスなどコンテンツ全体のレンダリングに時間がかかる場合でも）訪問者を引き止められます。Time to First Byte（TTFB）を追跡したり、サーバーのpingを実行したりすることで初動速度を監視すると、状況が正確に把握できます。その結果、時間がかかりすぎていることが判明したら、バックエンド、サーバー側そしてウェブサイトコア最適化という形で改善を加える必要があります。

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

要求元のブラウザにページコンテンツ全体をレンダリングするのにかかる時間を監視することは、エンドユーザーのサイトエクスペリエンスを知るために不可欠です。この情報をもとにして、サイトパフォーマンス最大化のためのハードウェアインフラストラクチャ展開、最適化という決定が下せるようになります。

このパフォーマンスインジケーターを定期的に監視することで、サイズとコンテンツタイプの観点からスケーリングをする中でサイトのパフォーマンスを把握できます。そして、この情報を使用すると、静的コンテンツをコンテンツデリバリネットワーク（CDN）などの別の場所にキャッシュし、専用のバックエンドサーバーを維持し動的に読み込まれるコンテンツを効率的に配信できます。

地域に基づいたパフォーマンス

オンラインビジネス運営の強みの1つは、グローバル市場でリーチを拡大できること。しかし、クライアントとサーバー間の通信を制限する要因があるため、このリーチは、世界中で常に同等に効率的であるとは限らず、したがって効果的でもありません。政府のポリシー、帯域幅、テクノロジーの制限により、各地域におけるサイトの最適なパフォーマンスが妨げられる可能性があります。だからこそ、ウェブサイトの速度と可用性のテストをさまざまな場所で実施し、世界中のビジネスに影響する範囲でサイトのパフォーマンスを確認する必要があります。

負荷耐性

ウェブサイトのパフォーマンスは、ウェブトラフィックの変動によって異なります。通常量の負荷を処理するホスティングサーバーであっても、過剰な負荷がかかるとページ速度を保証できない可能性があります。ウェブサイトでストレステスト、ランプテスト、負荷テスト、その他のパフォーマンステストを実施すると、パフォーマンスが低下したりサイトがダウンしたりする前に、ウェブサイトが処理できるウェブトラフィックの量を正確に把握できます。結果をサイトの実際の使用パターンと比較し、ピーク時の負荷をできるだけ効率的に処理するためにハードウェアのアップグレードが必要かどうかを判断しましょう。

ウェブサーバーのCPU負荷

ウェブサイトがクリーンで、尚且つ、速度の最適化を考えたコードで適切に設計されている場合でも、単一のApacheサーバーで何千ものウェブサイトを処理する共有型ホスティングを利用していると、高いパフォーマンスを発揮することはできません。負荷がピークに達した時（サーバーのコンピューティング能力が不十分で、ウェブサイトのダウンロードリクエストを効率的に処理できない）に、パフォーマンスの問題が深刻化します。ホスティング会社やローカルでサイトをホストしている運営者は、サーバーのCPU負荷を監視することで、予期せぬウェブトラフィックの急増に対処することになるバックエンドハードウェアの機能がチェックできます。

ウェブサイトデータベースのパフォーマンス

データベースのパフォーマンスは、バックエンドデータベースから取得した動的コンテンツを扱うサイトにとって重要です。そのような意味で、データ送信の問題を検出し警告するメカニズムが必要になります。ウェブサイトをホストするサーバーの空きディスク容量を注視することで、リンク切れにつながり最終的にサイトパフォーマンスを低下させるエラーやデータ損失を回避できます。

テストの実施方法

サイト所有者は、 無料、有料のウェブサイトパフォーマンステストサービスを利用することで、ウェブページを分析し、ページ速度を妨げるパフォーマンスの問題を埋めるために実行すべきソリューションを発見できます。

検索エンジン大手GoogleとYahoo、ウェブサイト監視を専門に行うPingdomとGTMetrixの提供するページ速度テストツールでは、無料で、サイトのパフォーマンスインジケーターについての貴重な洞察が得られます。スコアや改善案が表示されるので、この分野に詳しくないサイト所有者であっても学びを得ることができます。詳細ガイドをチェックして、活用してみてください。

上記ツールのしくみ

これらのツールは、様々なブラウザを使用してウェブサイトを読み込み、エンドユーザーのサイトエクスペリエンスをあらゆる地域毎に再現します。ファイルサイズ、読み込み時間、応答時間、さまざまなウェブサイトのパーツ（JavaScript、CSSファイル、HTML、画像など）に関連するリクエストなど、パフォーマンスのボトルネックが広範囲にわたり監視できます。

ウェブページパフォーマンス、ユーザーによる使い心地という観点で考案された一連のルールに基づいて、パフォーマンススコアが生成されます。リソースのキャッシュ、RTT（クライアント—サーバー間を行き来するのにかかる時間）、データのダウンロード/アップロードサイズ、その他のページ速度に影響を与える点が考慮対象です。

ページ速度の向上を見込んで、各種パフォーマンス最適化の提案が表示されます。たとえば、大きな画像ファイルが圧縮されずに提供されている場合、圧縮手段の実装が推奨されます。人為的エラーや無知が原因でこのような問題が発生することがあり、どちらも人間の力だけで完全に排除することは困難です。ページ速度監視ツールは、少なくとも、サイト所有者による問題の特定を助け、隠れたウェブサイトパフォーマンスのボトルネックを根絶するための適切な手順を実行できるようにします。

テストチュートリアル

次のテストは、無料のウェブサイト速度テストツールであるPingdomを使用したものです。Pingdomにアクセスし、画面表示に従い地域（国）を選択、テストを実施し、最終結果を比較します。ウェブサイトのURLを入力して「Start Test」ボタンをクリックしましょう。

すると、パフォーマンススコア、合計読み込み時間、合計ページサイズ、ウェブサイトでのリクエスト数といった、サイトに関するデータが確認できます。

Pingdom速度テストツールのパフォーマンスインサイトセクションは非常に便利です。ここに表示される情報はすべて、Google PageSpeed Insightのルールに基づいています。一般に、サイトでその内容を改善すれば、全体的な読み込み時間減少が見込めるはずです。

さらに、ダウンロードしたすべてのファイルをウォーターフォールチャート形式で一覧表示してくれます。読み込み順序、読み込み時間、サイズ、タイプ、URLでのソートにも対応しています。

同ツールにあるチャートと結果を読み取ることで、各ファイルのダウンロードパフォーマンスを分析しましょう。

このツールは、ウェブサイトの速度最適化を行う上での次善策発見に力を発揮します。上記のサンプルテストの例では、リクエストが見つからないことによるエラーを修正する必要があります。ただし、サイトのデザイン要素最適化は、サイト開発段階から始まり、ウェブサイトが拡大するにつれてすべての新しいページに実装すべきものである、という点を理解することが重要です。

Pingdomを使ったサイトのパフォーマンストラブルシューティングについてさらに詳しい説明が必要な場合は、こちらの詳細ガイドをご覧ください。

どのツールを選ぶべきなのか

各ツール（GoogleのPage Speed Insights、Pingdom、GTMetrixなど）は、各種ブラウザや地域（国）からそれぞれの問題を特定し、あらゆる方法でパフォーマンスパラメータとインジケータをテストします。したがって、パフォーマンスの評価とテスト結果には違いがあり、ウェブサイト設計におけるパフォーマンスのボトルネックを余すことなく特定できる完璧なツールは1つもありません。ただし、進捗状況を適切に監視するためには、とりあえず1つのツールに限定して使用することをお勧めします。

一方で、複数のツールを使用してテストし、さまざまなウェブサイトの設計要素を分析、それぞれのテスト結果を比較することにより、ウェブサイトの速度最適化戦略を考案するための合理的な洞察を得ることができます。

6章：ウェブサイトの速度を向上させる方法

優れたウェブサイトの開発には多大な労力が必要になります。大手オンラインビジネスは、業界で培った経験、圧倒的なウェブ開発スキル、一流ウェブホスティングサービスを利用し、優れたパフォーマンスとユーザーエクスペリエンスのサイトを開発しています。しかし、速度の最適化されたサイト追求に際しこの出発点を逃した人もいることでしょう。そんな場合には、シンプルな自作ページの速度最適化戦術実行時に物事を最小限にとどめるというアプローチが採用できます。これが（ほとんどの場合）遅いウェブサイトに対する応急処置になり得ます。

最適なサイト速度最適化ソリューションとサービスに投資するための予備知識、ウェブサイトの管理、そして、ともするとコーディングの技術が、ウェブサイトのパフォーマンスを最大化するために不可欠となります。これらに基づいた戦略的なビジネスの意識決定こそが、ウェブサイトのパフォーマンス向上に直接貢献し、ひいてはオンラインでの売上、潜在顧客の獲得、コンバージョン、最終的にはビジネスの成功へとつながります。

最適化は、ネット上での成功に欠かせないキーワードです。惑星、星、銀河という実世界と同様に、インターネットの世界は流動的であり、継続的な変化と進化が必要とされます。実際「変化」こそが実世界とインターネットの両方で一貫した唯一のプロセスでしょう。これらの空間での生存は、資源や環境にどれだけ適応できるか次第です。

オンラインビジネスでの成功を目指すサイト所有者にも同じことが言えます。さまざまな市場動向、訪問者の行動の変化、ムーアの法則のもとで画期的な速度で続くITテクノロジーの進歩、検索エンジン大手によって定められる各種サイトパフォーマンス基準を考慮する必要があります。

自力での速度最適化

オンラインビジネス経営者やサイト運営者は、サイトを調整して、ページ速度を左右するウェブサイトデザインの要素をテストしたり最適化したりすることで、絶え間ない状況の変化の中で一貫した結果を維持しています。

画像の最適化

一般的な経験則として、大きいファイルは小さいファイルよりもダウンロードに時間がかかります。ウェブページのダウンロード時間は、ページ読み込み時間とも呼ばれ、ホスティングサーバーからリクエスト元のブラウザにダウンロードされるコンテンツアセットの合計サイズにより長くも短くもなります。高解像度でサイズの大きい画像は、ウェブページサイズ肥大化の最大の原因であり、ページ速度を低下させ、ページ読み込みを待つ訪問者を苛立たせる要因になります。

HTTP Archiveによると、2017年12月の時点で、画像はウェブページ総重量の平均66％を占めているとのこと。以下の画像最適化のベストプラクティスに従えば、画像がウェブサイトの速度に与える悪影響を減らすことができます。

• フォーマットの選択：画質の優先度が高い場合には、JPGを使用しましょう。JPGでは、画質を大幅に下げることなく、ある程度の処理を行うことができます。アイコン、ロゴ、イラスト、サイン、テキストを含む画像には、PNG形式を使用します。GIFは小さい画像または単純な画像にのみ使用し、BMPまたはTIFFは使用しないようにしましょう。
• 適切なサイズ設定：ペイロードデータサイズを調整しながら、ウェブページテンプレートのサイズ（幅）に画像のサイズを合わせましょう。ブラウザのサイズ変更機能を使用し、幅を固定し高さを自動に設定することにより、画像を柔軟に使用できます。
• 圧縮：画像の圧縮は、サイズと画質のバランスを考え実施するものです。JPGの場合、60〜70％の圧縮で適切なバランスが得られます。レティーナスクリーン用には、画像サイズ（JPG）を150〜200パーセント増やし、30〜40パーセントの圧縮にし、必要なサイズに応じて再度縮小を行うようにしてください。
• 画像を減らす：画像の数は最小限に抑えましょう。

WordPress向けのソリューション

Imagify、ShortPixel Image Optimizer、Optimus WordPress Image Optimizer、WP Smush、TinyPNG、EWWW Image Optimizer Cloudなどの画像最適化プラグインが活用できます。さらに、画像をサイト外で圧縮、最適化するツールと併用すると、サイトにおける負荷を軽減できます。

その他のヒントについては、詳細な画像最適化ガイドをご覧ください。

CSSコードと配信を最適化する

少し前までは、30 KBが理想的なページサイズとされていました。これには、ページ全体を構成する画像、コンテンツ、グラフィックス、コードが含まれます。そして、CSSとJavaScriptの発展により、充実したユーザーエクスペリエンスを確保しつつも30 KBの上限が破られました。

それでも、CSSでコーディングされた最新のウェブサイトは、ホスティングサーバーからリクエスト元のブラウザにコンテンツを効率的かつ正確にダウンロードする上でより高性能です。つまり、最適化とは、ファイルサイズを縮小することだけではありません。以下のベストプラクティスにより、CSS配信の速度最適化が確保できます。

• 簡略なコード：宣言と演算子を少なくして、コードのサイズを削減できます。コードの行数が少ないほど、処理サイクルが少なくなり、ブラウザに対してウェブサイトのファイルを効率的に配信できます。
• ブラウザ固有のCSSのハッキングに対処：CSSは、ブラウザ固有の複雑なハッキング（宣言の矯正であり、CSSスクリプトファイルに不要な重みが加わるもの）という危険性に常にさらされています。そんな中で、速度の最適化されたCSSコードは、軽くてシンプルで、サーバーが効率的に処理することができます。
• CSSの縮小：ほとんどすべてのサイト速度監視ツールで、CSSコードの重みを減らし速度を向上させるよう提案されます。 軽量でコンパクトなコードは、ダウンロード、解析、実行を加速し、ページ読み込み時間を大幅に削減してくれます。
• コードの位置：<head>内でCSSコードを読み込み<body>内でJavaScriptを読み込みましょう—というのもこのセクション外でCSSを参照すると、ブラウザがダウンロード直後にCSSコンテンツを表示できなくなってしまいます。
• CSS配信のベストプラクティス
  • @importの呼び出しは使用しない
  • 未使用のCSSを削除する
  • H1やDIVタグなどのHTMLではCSSを使用しない
  • インラインの小さなCSSを使用する

WordPress向けのソリューション

Autoptimize、WP Rocket、Cache Enabler、CloudFlare CDN、W3 Total Cacheは、JavaScriptとCSSを小型化するために利用できる人気のツールです。

JavaScript、CSS、HTMLの圧縮

実際、速度最適化はページサイズの縮小だけでは実現できません。サイトコンテンツのブラウザへの配信時にリクエストの数を減らすことも、最適化に不可欠です。CSS、HTML、JavaScriptリクエストを少なくすることでこれを実現できます。リクエスト数は、HTTP/2の改善により、以前ほどは重要ではなくなりました。つまるところ、すべてのコードを（可能な限り）最適化、縮小、圧縮しましょう。

圧縮は、キャッシュされていない外部ファイル、インラインのJavaScriptに対して特に重要です。Googleでは、4096バイトを超えるすべてのJavaScriptファイルの圧縮を推奨しており、最低25バイトを削るだけでページの読み込み時間に顕著な違いを生じさせることができます。

速度の最適化されたサイトを設計するには、コードから不要なバイトを徹底的に排除するというスタンスが必要です。利用できるすべてのコーディングスペースを利用し、コードの読みやすさを維持しながら余分なスペース、インデント、行間のスペースを削除すると、コアファイルとフロントエンドファイルの全体的なサイズが小さくなります。そして、この戦略を考慮することなく既に開発したサイトの場合は、複数のサーバーリクエスト（HTML、JavaScript、CSS）を1つにまとめると、ページの読み込み時間を効率的に削減できます。

ただし、HTML圧縮に過度に没頭すると、ウェブサイトコードの忠実度が失われる可能性が—ユーザーエージェントがHTMLファイルの解析に必要な不足しているリソースを「推測」するために過度のメモリサイクルとCPUパワーを消費します。圧縮実装の際には、都度、ページの読み込みパフォーマンスの変化を監視して、不要なコードとスペースのみが削除されるようにしましょう。

CSS、JavaScript、HTMLの縮小には、共通のメリットが—ネットワークレイテンシの削減、HTMLリクエストの削減、圧縮の強化、ブラウザによるダウンロードと実行の高速化、最終的にページ速度の向上とサイト速度測定ツールでのスコアの向上です。

プラグインは少ないほどいい！

プラグインを使用した機能の追加には、パフォーマンスの低下という代償が伴います。残念なことに、サイト運営者の多くが、Gravatar、プロフィール、サイト統計情報、フォントツールなど魅力的ではあるものの実際にはなくてもいい機能を追加しています。中にはSNS関係のプラグインだけで10個ものプラグインを使用している人も。これの唯一のメリットは、手動でのコーディングを完全に回避できるということくらいでしょう。

多くの人気サイトで80程のプラグインが実装されています。ただし、インストールしたプラグインが複雑なアクションや高価なサーバー処理を回避するよう適切に開発されている場合に限って、この数は問題ではありません。

質の高いプラグインを選択するために、都度、自分に問いかけたい4つの質問をご紹介します。

• 複雑な操作を実行するか？
• 多くのコンテンツアセットやスクリプトを読み込むか？
• 各ページリクエストにおけるデータベースクエリの数は増加するか？
• 外部APIのリクエストが実行されるか？

この全ての質問に対する答えが「はい」なら、そのプラグインの採用は完全に「いいえ」です！

非常に大雑把な質問ですが、こんなことも気になるでしょう—プラグインは「いくつから」が「多すぎ」なの？

この質問に対する「こちら」という答えはありません。個別のウェブサイトとプラグイン次第です。多くのWordPressに精通するプロは、あまり多くのプラグインを使用しないことを推奨しています。しかし、パフォーマンスの高いウェブサイトの中でも多数が（ページの読み込み時間を0.5秒長くする低品質のプラグインはたとえ1つでも避けつつ）80個を超えるプラグインを利用していたりします。

同様に、単純かつ固有の複数タスクをこなすために、10個のプラグインを使用することは、1つのプラグインですべての複雑なタスクを実行するよりもはるかに好ましいやり方です。ただし例外として、Yoast SEO WordPress SEO、All In One SEO Packなどの信頼できる開発元による優秀なプラグインもあります。

WordPress向けのソリューション

以下のツールを使用して、WordPressプラグインのパフォーマンスをチェックすることができます。

• NewRelic – アプリケーションパフォーマンスのプロファイリングに使えるツール
• Query Monitor

WordPressリビジョンの制限/無効化

リビジョン管理は、WordPressが提供する強みの1つです。 CMSによりコンテンツの変更内容が自動的に追跡され、後から利用できる状態になります。これはサーバーにとっては、そもそも実際には必要ではない不必要な処理となります。保存するリビジョンの数を制御することで、ウェブサイトの中核となる無駄な負担が軽減できます。

次のコードスニペットをwp-config.phpファイルに書き込むだけでこの問題を回避できます。

リビジョンの無効化はこちら。

define( 'WP_POST_REVISIONS', false );

リビジョンの数の制限はこちら。

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

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

データベースの最適化

WordPress CMSは、投稿、コメント、ページ、その他の形式のテキストや暗号化したデータを単一のデータベースに保存します。ただし、「wp_content」フォルダに保存される画像と動画は例外です。このデータベースは時間の経過とともに煩雑になりがちです。不要なコンテンツ、リビジョンデータ、そして、使い道のないデータも含まれます。

本来必要のないデータは以下の通りです。

• スパムコメント
• 未承認のコメント
• 投稿のリビジョン
• ゴミ箱に入れた投稿やページ

データベースの最適化は、雑然としたデータベースから不要なデータやコンテンツを取り除き、サイズを縮小して、ウェブサイトのホスティングサーバーが要求されたコンテンツを最小の処理サイクルで効率的に取得することに重点を置きます。これには、MySQLデータベーステーブルに（MyISAMではなく）InnoDBを使用することも含まれます。myISAMをInnoDBに変換する方法もご確認ください。

WordPress全体とデータベースのパフォーマンスについて言えば、wp_optionsテーブルも見落とされがちです。特に古いサイトや大規模なサイトでは、サードパーティのプラグインやテーマから残されたデータの自動読み込みが、サイトでのクエリ時間が遅れる原因となる可能性があります。wp_optionsテーブルをクリーンアップする方法はこちら。

WordPress向けのソリューション

• 投稿のリビジョンを制限/無効化/削除する
• wp-config.phpファイルに次のコードを追加して、ゴミ箱の中身を自動的に削除する：

  define('EMPTY_TRASH_DAYS', 10 );

  「10」は、ゴミ箱のデータが自動的に削除されるまでの日数です。必要に応じて変更してください。

圧縮

Googleによれば、インターネットでは毎日、圧縮されていないウェブコンテンツのせいで「人間で言うと99年」という年月が浪費されています。最新のウェブブラウザのほとんどがコンテンツ圧縮機能をサポートしていますが、すべてのサイトが圧縮してコンテンツを提供しているわけではありません。そんな、帯域幅を大量に消費するサイトの訪問者は、ウェブページとのやり取りに膨大な時間がかかることになります。この好ましくない（そしてほとんどの場合、意図的ではない）サイトの動作の主な理由は、ホスティングサーバーの設定の誤り、ウェブプロキシ、古いまたはバグのあるブラウザ、ウイルス対策ソフトウェアです。

圧縮されていないコンテンツは、ページの読み込み時間が非常に長くなり、ウェブコンテンツを受信する帯域幅に制約のあるユーザーに悪影響を与えます。非圧縮コンテンツの配信の際には、一般的に、ブラウザとサーバーの通信の様子は以下のようになります。

ブラウザ：ねえ、/HeavyWeightChampion.htmlをGETしてちょうだい！

サーバー：了解！（サーバーがその中でファイルを探す）

サーバー：はいどうぞ、こちらが250 KBのレスポンスコードです。

ブラウザ：嘘だろ…。（エンドユーザーはゲンナリ…リクエストしたコンテンツを数十秒後かかって受信）（注：クライアント—サーバー間の実際の通信は、ともすると上の台詞よりももうちょっと形式的です）

問題のほとんどは、クライアント—サーバー間のHTMLのやり取りに依拠しています。HTMLファイル（ほぼすべてのウェブコンテンツを形成）には、いくつかの冗長なコードインスタンスがあります。<Tags>、<Alts>、<HTML>などはすべて同じものの繰り返しです。

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

• JavaScript、HTML、CSSを縮小する
• 次の手法を使用して、CSSとHTMLコードの一貫性を確保する：
  • 一貫した大文字小文字の区別（概ね小文字）
  • Consistent quoting of HTML tag attributes. HTMLタグの属性に一貫した引用符を使う
  • 同じ順序でHTMLの属性を指定する
  • CSSのキーと値のペアをアルファベット順に並べて、同じ順序で指定する
• gzip圧縮を有効にする（gzipは類似の文字列とコードインスタンスを見つけ、一時的に短い文字に置き換えるものです。そして、ブラウザはgzip圧縮のファイルを解凍し、元の形に戻します）

ただし、いくつかの注意点があります。

• （圧縮済みの）画像、PDF、その他のバイナリデータをgzip圧縮しないこと
• サイズが150〜1000バイトのデータのみをgzip圧縮する（圧縮速度は、圧縮されていないコンテンツの配信にかかる時間よりも速くなければ意味がありません）
• 古いブラウザ向けにはコンテンツを圧縮しない

上記の推奨事項に従わないと、圧縮と解凍のオーバーヘッドにより、実際にファイルサイズが大きくなり、ページの読み込み時間が長くなります。

WordPress向けのソリューション

• W3 Total Cacheプラグインを使用してgzip圧縮を有効にする
• gzip圧縮を有効にする最良の方法は、ApacheまたはNginxのサーバーレベルで行うこと（gzip圧縮ガイドはこちら）

キャッシュ

開発者は、ウェブサイトデザインにおけるコードのシンプルさを切望するもの。作成、読み取り、保守が簡単なコードは、効率的なウェブサイト開発プロセスへとつながります。具体的には、利用可能な関数を頻繁に使った、特定の機能向けの長いコードの切り分けなどができます。

ただし、余分なループや不要なコードを追加すると、ページのレンダリング時間が数ミリ秒増加します。ウェブサイトトラフィック急増時には、ミリ秒の遅れが積み重なり、ページ速度は許容される基準を大幅に下回ります。

この応答時間を短縮するには、サーバーに送られるユーザーからのリクエストに対し毎回レンダリングを実行する代わりに、コンテンツのキャッシュを配信できます。ウェブキャッシュは、ウェブコンテンツのコピーを一時的に保存し、特定の条件が満たされたときにキャッシュデータベースから後続のリクエストを満たすメカニズムです。このプロセスにより（静的な）サイトコンテンツを要求元のブラウザに配信する際に行われるクライアント—サーバー間のやり取りの数が減少します。

ホスティングサービスプロバイダーにサーバー側でのキャッシュが用意されていない場合には、次のアドオンと構成でキャッシュを有効にできます。

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

静的な（キャッシュ可能な）コンテンツに加えて、ウェブサイトには、各エンドユーザー次第で属性の変化する動的な情報もあります。ですので、再利用のできない動的コンテンツのキャッシュを保存しても（キャッシュなしでのコンテンツのレンダリングが非常に遅いプロセスであっても）意味がありません。

フラグメントキャッシュ

これは、キャッシュ不可の動的サイトコンテンツの小さな要素をキャッシュするための技術です。静的、動的コンテンツを含むウェブページが読み込まれると、ホスティングサーバーがPHPコードを処理し、MySQLデータベースにクエリを実行して、要求されたコンテンツを取得します。この「時間もリソースも消費する」流れは、キャッシュとして保存したデータを配信することで回避できます。

フラグメントキャッシュでは、動的コンテンツのさまざまなバージョンを通して一定であるコードブロックの出力が格納されます。コードが実行され、所定の時間だけキャッシュの保存された部位に到達すると、サーバーは制限時間に達するまで、繰り返し実行するのではなく、このキャッシュとして保存された出力をクエリして配信します。

これの結果、キャッシュによる最適化の施されたコンテンツが確保でき、eコマースや非常に動的なコンテンツを処理するメンバーシップベースのサイトでも、ページ速度を最大化できます。Kinstaでは実際には4種類のキャッシュが利用できます。これらはすべて、ソフトウェアレベルまたはサーバーレベルで自動的に実行されます。そのため、サードパーティのプラグインを利用する必要はありません。

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

CDNは言うなればキャッシュ最適化の拡張版で、特に世界各地に分散したウェブトラフィックを対象としてサイトパフォーマンスを強化します。CDNは、ウェブページのキャッシュデータをホストする各サーバーが集まり形成されるネットワークを誇ります。該当する情報を要求した訪問者は、その人の位置する場所（国や地域）に基づいて、ネットワーク内の最も近いサーバーへと転送されます。

パフォーマンスの向上、高可用性、ページランク向上といったCDNのメリットにより、収益の全体的な増加が見込めます。CDNを利用すべき理由はこちらをご参照ください。Kinstaでは、すべてのお客様に無料で（追加料金なしで）HTTP/2とIPv6対応のCDNをご提供しています。

マネージドホスティングに切り替える！

WordPressはウェブの民主化に貢献しています。これのおかげで、誰でも独自のブログを作成し、最小限の投資にて、オンラインで製品やサービスを公開できます。一般に、サイト所有者は、次のホスティングサービスのいずれかを利用して、ウェブサイトを運営することになります。

• 無料ホスティング：趣味レベルの人に人気
• 共有型ホスティング：最低のコストでオンラインビジネスにおけるプレゼンスを確立したい個人に人気
• 専用/マネージドホスティング：オンラインプレゼンスを真面目に捉える個人や中小企業に人気
• 併置型ホスティング：ウェブサイトを管理する社内ITチームを抱える大企業や政府機関に人気

これらの中でも、エンドツーエンドのウェブサイト開発と管理サービスにマネージドホスティングを採用することは、超高性能サイトを維持するための最も費用効果が高く生産的なオプションとなります。ページ速度とサイトパフォーマンスに影響を与えるマネージドホスティングサービスの機能を挙げると、次の通りです。

• パフォーマンスの最適化–圧縮、コードの縮小、サーバー側でのキャッシュなど
• キャッシュの最適化
• パフォーマンスのためのコンテンツ最適化–画像の最適化、不要なデータの制御など
• 検索エンジン最適化
• 定期的なソフトウェア更新
• 最高のパフォーマンスを得るためのプラグインの互換性とデプロイメント
• データベースの最適化
• コンテンツデリバリネットワーク
• パフォーマンスのテストと監視
• 軽量で速度の最適化されたサーバー
• サーバーとサイトの構成、メンテナンスによる、クライアントとサーバーの往復の最小化
• PHPとMariaDBの最新バージョンの利用

WordPressはPHP 7でもっと高速に

PHP 7のリリースにより、パフォーマンスが大幅に向上しました。あまりにもその違いは大きく、WordPressサイトで小さな最適化をあれこれ実装するよりも、こちらを優先すべきです。以下のベンチマークからは、PHP 7が従来のバージョンよりも大幅なパフォーマンス向上に成功していることがわかります。PHP 5.6と比較して、PHP 7ではシステムは1秒あたり2倍のリクエストを実行し、レイテンシはおよそ半分となっています。

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

• WordPress 5.0 PHP 5.6：64リクエスト/秒
• WordPress 5.0 PHP 7.0：71リクエスト/秒
• WordPress 5.0 PHP 7.1：98リクエスト/秒
• WordPress 5.0 PHP 7.2：18リクエスト/秒
• WordPress 5.0 PHP 7.3：20リクエスト/秒🏆