- 訪問者がサイトに滞在する時間。
- そのうち何人が有料顧客に転換するか。
- 有料検索で CPC ベースで支払う金額。
- オーガニック検索での順位。
残念ながら、ほとんどのウェブサイトはページ速度に関してパフォーマンスが低く、それが収益に直接的な悪影響を及ぼしています。
デジタルマーケターとして日々こなすべきことはほぼ無限にあり、すべてをこなすには時間が足りません。その結果、後回しにされてしまう仕事も出てきます。
最も後回しにされがちなことの一つが、ページ速度の最適化です。多くの人がこの見落とされがちな細部の重要性を真に理解していないため、数秒かそれ以下の速度向上に時間と費用を投資する価値を見出せないのも無理はありません。
検索エンジン最適化のみに焦点を当てているマーケティング担当者を含む一部のマーケティング担当者にとっては取るに足らない時間と思われるかもしれませんが、業界の大手企業のデータから当社独自の分析データに至るまで、膨大な時間であることが証明されています。
あなたも私と同じように、成果、そしてもちろん収益を最大化したいとお考えですよね？それでは、ウェブサイトを油まみれの鼻水よりも速くする作業を始めましょう！（なかなか視覚的に分かりやすいと思いませんか？）
1. 格安ウェブホスティングはやめよう
私たちは皆、最近お金を節約しようとしています。Raven、SEMrush、Moz、その他毎日使うツールのサブスクリプション料金はあっという間に膨れ上がります。まるで子供が一人増えたような気分です。
多くの人がお金を節約する方法の一つは、安いシェアハウスを選ぶことです。 ホスティング ピエロの群れが一台の車に詰め込まれるように、サーバーに収まる限りのウェブサイトを詰め込む。パフォーマンスなんてどうでもいい！
確かに、ほとんどのウェブホストと同様に、ウェブサイトはほとんどの場合利用できますが、読み込みが非常に遅いため、訪問者は購入者に変わることなくイライラして去ってしまいます。
「でも、ほとんど気づかないよ！」とバーゲンショッピングをする人たちは主張します。
問題は、それがあなたの赤ちゃんであり、あなたがそれを愛しているから、あなたにはほとんど気づかれないかもしれないということです。
しかし、他のすべての人は、できるだけ早くあなたのウェブサイトにアクセスして、そこから出たいだけなのです。
ユーザーは、答えを得るため、商品を購入するため、あるいはその他の具体的な目的のためなど、目的を達成するために必要な時間だけサイトに滞在したいと考えています。少しでもユーザーの行動を遅らせると、満足できずに離脱してしまう可能性が高くなります。
次のように考えてください。
ほとんどの人は自分の子供を無条件に愛します。でも、他人の子供が大声で叫んだり、物を投げたり、レストランでの夜遊びを邪魔したりしたら？彼らはその子供を憎みます。あなたのウェブサイトも同じです。
実際にどれくらいの違いがあるのでしょうか?
によって行われた研究によると Amazon人間が認識できない時間単位であるわずか 100 ミリ秒の違いが、売上を 1% 減少させるのに十分でした。 Walmart 同様の結果が見つかりました。
そのほんのわずかな時間が売上にそれほど直接的な影響を与えるのであれば、さらに 1 秒以上かかるとどのような影響があると思いますか?
しかし、それだけではありません。Web サイトの読み込み速度 (または読み込み速度) も、オーガニック検索のランキングやクリック課金のコストに影響します。
言い換えれば、Web サイトの読み込みが遅い場合、この重要な領域に投資している競合他社に先を越されてしまうことを覚悟しておく必要があります。
結論：格安ウェブホスティングは避けましょう。もし彼らが（主に価格に基づいて）それを商品のように売っているなら、顧客も商品のように扱うはずです。
特に WordPress ウェブサイト向けに速度が最適化されたウェブ ホストは数多くあり、その一部は予算重視のオプションと同程度の価格です。
したがって、周囲に尋ねたり、テストを行ったりして、訪問者と Google の両方を満足させるパフォーマンスを提供する Web ホストに投資してください。
2. HTTP呼び出しを減らす
HTML、CSS、JavaScript、画像、フォントなど、ウェブページのレンダリングと動作に必要なすべてのファイルは、個別のHTTPリクエストを必要とします。リクエストの数が増えるほど、ページの読み込み速度は遅くなります。
もしあなたが、私が話したほとんどの人と同じなら、おそらくこう思っているでしょう。「ああ、ジェレミー、そんなこと心配する必要はない。私は自分が何をしているか分かっているし、ウェブサイトに無駄な情報を詰め込んだりはしない！」
それは部分的には真実かもしれません。ウェブサイトに膨大な量のゴミコンテンツを追加する必要はないかもしれませんが、私が目にするウェブサイトの90%以上では、いずれにしてもゴミコンテンツはそのまま残っています。
その肥大化は、あなたが寝ている間に「ブロートフェアリー」が忍び込ませたからではありません。スキルや経験に関わらず、多くのウェブデザイナーがページスピードを最優先事項としていないからです。悲しいことに、ほとんどのデザイナーはページスピードをどうすべきかさえ分かっていません。
問題はここから始まる:
ほとんどのテーマは、1つ以上のCSSファイルと複数のJavaScriptファイルを読み込みます。jQueryやFontAwesomeなど、一部のテーマは通常、別のサーバーからリモートで読み込まれるため、ページの読み込み時間が大幅に長くなります。
プラグインによって追加されるCSSファイルやJavaScriptファイルを考慮すると、問題はさらに深刻になります。CSSファイルやJavaScriptファイルだけでも、6件以上のHTTPリクエストが発生することも珍しくありません。
ページ上のすべての画像を考慮すると、それぞれに個別の HTTP リクエストが必要になるため、すぐに手に負えなくなります。
- JavaScript ファイルを 1 つのファイルに結合します。
- CSS ファイルを 1 つのファイルに結合します。
- 独自のJavaScriptファイルやCSSファイルを読み込むプラグインを減らすか、削除してください。Gravity Formsのように、読み込みを無効にするオプションが用意されている場合もあります。
- 頻繁に使用する画像にはスプライトを使用します。
- 可能な限り、画像ファイルの代わりに FontAwesome や Ionic Icons などのフォントを使用してください。そうすれば、読み込む必要があるファイルは 1 つだけになります。
3. 末尾のスラッシュを含める
外部ソース（リンク構築の取り組み）からであっても、独自の Web サイト内からであっても、Web サイトを指すリンクの末尾のスラッシュを省略すると、速度に悪影響を及ぼします。
方法は次のとおりです。
末尾のスラッシュのないURLにアクセスすると、ウェブサーバーはその名前のファイルを探します。その名前のファイルが見つからない場合は、そのURLをディレクトリとして扱い、そのディレクトリ内のデフォルトファイルを探します。
つまり、末尾のスラッシュを省略することで、サーバーに不要な301リダイレクトを実行させていることになります。一瞬で終わるように見えるかもしれませんが、実際には少し時間がかかります。そして、既に述べたように、少しでも時間がかかってしまうと、大きな影響が出てしまいます。
https://example.com (this is bad)
or
https://example.com/services (this is also bad)
対
https://example.com/ (this is good)
or
https://example.com/services/ (this is also good)
4.圧縮を有効にする
GZIP 圧縮を有効にすると、HTML、CSS、JavaScript ファイルが非常に小さい圧縮ファイルとしてダウンロードされ、ブラウザに到達した時点で解凍されるため、ダウンロードにかかる時間が大幅に短縮されます。
心配しないでください。すべての最新ブラウザは GZIP をサポートしており、すべての HTTP リクエストに対して GZIP を自動的に処理するため、訪問者は特別な操作を行う必要はありません。
5. ブラウザキャッシュを有効にする
ブラウザ キャッシュを有効にすると、Web ページの要素が訪問者のブラウザに保存されるため、訪問者が次にサイトにアクセスしたときや別のページにアクセスしたときに、キャッシュされた要素を求めてサーバーに別の HTTP 要求を送信しなくても、ブラウザはページを読み込むことができます。
最初のページが読み込まれ、その要素がユーザーのキャッシュに保存されると、後続のページでダウンロードする必要があるのは新しい要素のみです。これにより、通常のブラウジングセッション中にダウンロードする必要があるファイルの数を大幅に削減できます。
6. リソースの縮小
CSS ファイルと JavaScript ファイルを縮小すると、不要な空白やコメントが削除され、ファイル サイズが縮小され、ダウンロードにかかる時間が短縮されます。
幸いなことに、ファイルをより小さな縮小バージョンに変換するためのオンライン ツールがいくつかあるため、これを手動で行う必要はありません。
また、WordPress には、ウェブサイトのヘッダーにある通常の CSS ファイルと JavaScript ファイルのリンクを、元のファイルを変更せずに縮小版に置き換えるプラグインもいくつかあります。次のような人気のキャッシュ プラグインもその 1 つです。
- W3合計キャッシュ
- WPスーパーキャッシュ
- WP Rocket
縮小によって CSS や JavaScript が壊れることが多いため、設定を適切に行うには多少手間がかかる可能性があります。そのため、すべてを縮小したら、Web サイトを徹底的にテストしてください。
7. スクロールせずに見えるコンテンツを優先する
スクロールせずに見えるコンテンツ、つまり訪問者がスクロールする前に表示されるコンテンツを優先するようにコーディングすると、Web サイトがより速く読み込まれるように訪問者に見せることができます。
これは、ブラウザが最初にダウンロードしてレンダリングできるように、スクロールせずに表示されるすべての要素が HTML コードの先頭にできるだけ近くなるようにすることを意味します。
また、その領域をレンダリングするために必要な CSS と JavaScript を外部 CSS ファイルではなくインラインで含めることも重要です。
8. メディアファイルを最適化する
高品質のカメラを搭載したモバイル デバイスが普及し、WordPress などの最新のコンテンツ管理システムにより画像のアップロードが簡単に行えるようになったため、多くの人は写真を撮影してそのままアップロードしますが、画像のサイズが必要なサイズの 4 倍以上になることがよくあります。
これにより、特にモバイル ユーザーの場合、Web サイトの速度が大幅に低下します。
ウェブサイト上のメディア ファイルを最適化すると、ページ速度が大幅に向上する可能性があります。また、最適化は比較的簡単なので、時間を有効に活用できます。
画像の最適化
- 最適な形式を選択してください。JPGは写真画像に最適で、GIFまたはPNGは単色の領域が広い画像に最適です。8ビットPNGファイルはアルファチャンネル（透明な背景）のない画像に、24ビットファイルはアルファチャンネルのある画像に適しています。
- 画像のサイズが適切であることを確認してください。ウェブサイトで画像が幅800ピクセルで表示される場合、幅1600ピクセルの画像を使用してもメリットはありません。
- 画像ファイルを圧縮しましょう。Adobe Photoshopはトップクラスの画像編集ソフトであるだけでなく、優れた画像圧縮機能を備えており、月額9.99ドルから利用できます。また、無料のWordPressプラグイン（例えば、 WWW 画像オプティマイザー, Imsanity、TinyJPG など、アップロードされた画像を自動的に圧縮するツールがあります。
ビデオの最適化
- 最適な形式を選択してください。MP4 はファイルサイズが最も小さいため、ほとんどの場合に最適です。
- 訪問者の画面サイズに基づいて最適なサイズ（寸法）を提供します。
- ビデオをデザイン要素として背景で使用する場合は、オーディオ トラックを削除します。
- ビデオファイルを圧縮します。私は主にAdobe Premiereを使用していますが、Camtasiaも優れた選択肢です。
- ビデオの長さを短くします。
- 動画をローカルで配信するのではなく、YouTube や Vimeo にアップロードして、iframe 埋め込みコードを使用することを検討してください。
しかし、それは表面をなぞっただけなので、そこで止まるべきではありません。
ウェブサイト上のメディアを真に最適化するには、単にサイズを変更するのではなく、画面サイズに基づいて適切なサイズの画像を提供する必要があります。
これを処理するには、イメージの実装に基づいて 2 つの方法があります。
- ウェブサイトの HTML 内の画像は src セットを使用して提供できます。これにより、ブラウザは訪問者が使用しているデバイスの画面サイズに基づいて適切な画像を選択し、ダウンロードして表示できるようになります。
- CSS で配置された画像（通常は背景画像）は、メディア クエリを使用して提供され、訪問者が使用しているデバイスの画面サイズに基づいて適切な画像を選択できます。
9. キャッシュとCDNを活用する
キャッシュは、ウェブサーバーにウェブページの静的コピーを保存することで、訪問者のブラウザにページをより速く配信することを可能にします。一方、CDNは、これらのコピーを世界中のサーバーに分散することで、訪問者のブラウザが最も近いサーバーからページをダウンロードできるようにします。これにより、ページ速度が劇的に向上します。
___
by ジェレミー・クナウフ
ソース： SEJ
