SEOの秘密を解き明かす：ウェブサイトのスピードへの究極のガイドの紹介

公開: 2018-08-07

ユーザーとSEOの両方にとって速度は重要です。ウェブサイトが読み込まれるまで数秒待つ必要はありません。 ユーザーは、時間をかけて待つよりも、サイトを離れて競合他社に行くほうがよいでしょう。 「時は金なり」という言葉は、ベンジャミン・フランクリンが何世紀も前に言ったときと同じように真実です。 Googleにとって時間も重要です。 速度はGoogleのランキング要素の1つです。 すべてが同じであれば、ウェブサイトが高速であるほど、ランクが高くなります。 そして、スピーディーなウェブサイトを持つことは今日必要ではないと主張する人は誰もいません。 問題は、Webサイトを高速化する方法です。 この「SEOの秘密を解き明かす」のゲスト著者は、2018 EuropeanSearchAwardsの「BestSmallSEOAgency」を受賞した、Elephateの研究開発チームの責任者であるTomekRudzkiです。 Rudziはあなたのウェブサイトをスピードアップして勝つためのアドバイスを提供します。

この包括的なWebサイト速度ガイドには、3つの記事があります。 ここで次の投稿を読んでください：ウェブサイトの速度への究極のガイド–パート2とウェブサイトの速度への究極のガイド–パート3。

フリーページ速度調査

1.時は金なり

より速いウェブサイトがより多くの収入に等しいという事実を指摘する多くの研究があります。

  • Pinterestは、知覚される待ち時間を短縮すると、登録数が15％増加することに気づきました。
  • BBCは、Webサイトが読み込まれるたびに、ユーザーの10％が離れることに気づきました。
  • DoubleClick by Googleは、ページの読み込みを19秒（極端に！）から5秒に短縮すると、バウンス率が35％低下し、セッションが70％長くなることを調査しました。
  • アマゾンの調査によると、ウェブサイトの読み込みがわずか1秒遅くなると、毎年16億の売り上げが減少する可能性があります。

「わかりました。でも、Pinterest、BBC、Amazonは気にしません。 私のビジネスについて話してください。」」Googleは、潜在的な収益への速度の影響を計算する優れたツールを作成しました。 ツールにサンプルデータを入力しました。平均月間訪問者数は1,000,000、コンバージョン率は3.26％、平均注文額は$82です。

「Tomek、なぜこのデータを選んだのですか：3.26のコンバージョン率ですが、1％、4％、さらには10％ではありませんか？」 はい、Statistaからデータを取得しました。 彼らの報告によると、2017年第4四半期の米国でのオンラインショッピング注文の平均値（米ドル）は82でした。さらに、平均コンバージョン率は3.26でした。

ページの読み込み速度を5秒から2.8秒に下げると、年間197万ドルの収益が増える可能性があります。 いいですね！

もちろん、それは単なる計算機です。 しかし、計算機は実際のデータに基づいています。 グーグルが計算値の最後にいくつかのゼロを追加して、それを深刻に見せているとは思わない。

2.常にモバイルユーザーについて考える

Statcounterによると、2018年2月には、55％以上のユーザーがモバイルまたはタブレットを介してインターネットに接続していました。これは印象的な統計です。

現在、モバイルユーザーを満足させたい場合は、次のことを行う必要があります。

  • ウェブサイトがモバイルで正常に機能することを確認します（つまり、レスポンシブな場合）
  • ウェブサイトを本当に速くします。

モバイルユーザーは接続が不十分でローエンドのデバイスを使用することが多いため、「有線」で送信されるすべてのキロバイトが非常に重要であることに注意する必要があります。 あなたのウェブサイトは、すべての追加機能を備えたパーソナルコンピュータでは高速に動作する可能性がありますが、モバイルデバイスでは非常に低速である可能性があります。 そして、前者を取得する可能性は、もはやあなたに有利ではありません。

3.GTMetrixを使用します

あなたのウェブサイトをより速くするためにあなたが何を改善できるかをあなたに教える素晴らしいツールがあります。 あなたは無料でどんなウェブサイトも監査することができます。 監査を開始するためにWebサイトの所有者である必要はありません（つまり、私はGiphy.comを監査しました）。 このツールは、GooglePageSpeedInsightsとYahooSlowのデータとヒントの両方を組み合わせたものです。

https://gtmetrix.com/にアクセスして、WebサイトのURLを入力することをお勧めします。

「PageSpeed」または「YSlow」タブをクリックすると、Webサイトの速度を向上させるための推奨事項のリストが表示されます。

今のところ、これらのタブの情報の多くは、技術的すぎるため理解できない可能性があります。 それはいいです。 ローマは一日にして成らず。 私はあなたが始めるために最善を尽くします。 リソース（JSおよびCSSファイル、画像ファイル）がいつダウンロードおよびロードされたかを正確に示す「ウォーターフォール」と呼ばれる興味深いセクションがあります。

GTMetrixアカウントを取得することを強くお勧めします（無料です！）。 登録ユーザーは、テストをカスタマイズし、ブラウザーとサーバーの場所を変更できます。 さらに、ログインすると、「ビデオの作成」オプションを有効にできます。 ビデオオプションは素晴らしいです。 これは、ユーザーがWebサイトの視覚的な変化を確認できるようになるまでの待機時間を示します。

しかし、GTMetrixに夢中になるな

GTMetrixは優れたツールですが、その推奨事項によって、ガチョウを追いかけることができる場合があります。 GTMetrixには何の問題もありません。 速度を最適化する際に「万能」ルールがないというだけです。GTMetrixがよく知っていることは次のとおりです。

たとえば、GTMetrixでは、GoogleAnalyticsまたはFacebookサーバーに保存されているリソースのブラウザキャッシュを設定することをお勧めします。 正直なところ、これらのリソースは制御不能です。何もできません。 GoogleとFacebookの開発者は、何らかの理由で、これらのリソースを長期間キャッシュしないようにすることを決定しました。

もちろん、WebPageTest（GTMetrixよりもはるかに強力）など、GTMetrixに似たツールはたくさんあります。 ただし、2つの理由からGTMetrixを紹介することにしました。

  1. GTMetrixはよりユーザーフレンドリーです
  2. WebPageTestは、何をすべきかについて明確な推奨事項を提供しません。

もう1つの興味深いツールであるGoogleLighthouseについて説明します（Chromeを使用している場合は、既にインストールされています）。 ElephateのKamilaSpodymekは、 SEOがGoogleLighthouseのパフォーマンス指標からどのように利益を得ることができるかについてのすばらしい記事を書きました。 間違いなく良い読み物です！

4.GZIP圧縮を使用する

知っておくべきルールが1つあります。リソースの重量が少ない場合、ブラウザはそれをはるかに高速にダウンロードできるため、ページの読み込みが速くなります。 あなたのモバイルユーザーは本当にそれから利益を得るでしょう。

GZIP圧縮を実装することで、テキストファイル（HTML、SVG、CSS、JSなど）のサイズを小さくすることができます。 GZIP圧縮により、情報が失われることなく、リソースサイズが70〜80％節約されることはよくあることです。 それは本当に大したことです！

https://checkgzipcompression.com/にアクセスして、GZIPを実装することで節約できる（またはすでに保存されている）キロバイト数を確認してください。 Searchmetrics.comの場合、GZIPが有効になっています（ページサイズの83％を節約できます）。 いいですね！

ただし、注意してください。 時々、ウェブマスターは間違いを犯して、JPEG、PNG画像、PDFを含むすべての静的ファイルを圧縮します。 Yahoo Developer Networkのドキュメントを引用させてください。「画像ファイルとPDFファイルはすでに圧縮されているため、gzipで圧縮しないでください。 それらをgzipで圧縮しようとすると、CPUが浪費されるだけでなく、ファイルサイズが大きくなる可能性があります。」

追加のキロバイトを節約したい場合は、HTML、JS、およびCSSファイルを縮小することもお勧めします。

5.拡大縮小された画像を提供する

画像の数が多いため、Webサイトの読み込みが非常に遅くなるのは事実です（特に携帯電話の場合）。

したがって、画像の数を減らすことをお勧めする場合があります。 ただし、それらを制限するのではなく、既存のものを最適化することをお勧めします。 そうは言っても、ユーザーに提供される画像は、拡大縮小および圧縮（可逆または非可逆）する必要があります。

まず、画像のスケーリングについて説明しましょう。 1ページに220×220のサムネイルが10個あるが、サーバーに800×800の画像をアップロードしたとします。 すでに拡大縮小された画像をユーザーに提供する必要がありますか、それともブラウザに「オンザフライ」で拡大縮小させる必要がありますか？

答えは簡単です。 サーバー側で画像を拡大縮小しない場合、ブラウザは必要以上に多くのキロバイトをダウンロードする必要があります。 とにかく画像が拡大縮小されるので、無料です。 また、これはクライアント側のGPUの追加の仕事です。 言うまでもなく、ページの読み込み速度が低下します。

6.画像を圧縮します

それでは、画像の圧縮についてお話ししましょう。 これは、現代のWebになくてはならないもう1つの手法です。

一般に、画像圧縮には2つのタイプがあります。

  • ロスレス（本当に良い仕事をします、あなたは品質が損なわれないことを確信することができます）。
  • 非可逆（通常、画像はより軽量になりますが、名前が示すように、品質の一部が失われます）。
https://www.geckoandfly.com/23620/jpeg-compression-tool-batch-lossy-lossless-optimization

疑問が生じます：どのタイプの圧縮が優れているか：可逆または非可逆？

  • それは本当に状況に依存します。 あなたのウェブサイトが宇宙の画像を提供しているなら、すべての詳細が重要です。 ただし、個人のブログを作成する場合は、圧縮率が高くても、非可逆圧縮で問題ない可能性があります。 どの設定がWebサイトに最適かを確認するために、実験することをお勧めします。

7.モバイル訪問者にフルHD写真のダウンロードを強制しないでください。

モバイルユーザーの画面ははるかに小さく、HD写真の恩恵を受けることはできません。 代わりに、大きな画像をダウンロードするように強制すると、彼らは怒ります。

Elephate.comの例を見てみましょう。 ホームページの上部に会社員のかなり大きな写真（2600×1463ピクセル）があります（522kb）

デスクトップにはまったく問題ありません。ダウンロードは非常に高速です。 ただし、モバイルユーザーの場合は、HTMLの「srcset」パラメーターを使用します。 これを実装したおかげで、モバイルユーザーははるかに小さい画像をダウンロードするだけで（大きな画像は必要ありません）、ページの読み込み時間にプラスの影響を与えます。

デスクトップユーザーはフルHD写真を見ることができるので苦しむことはありません。 しかし、モバイルユーザーはそれから本当に恩恵を受けるでしょう。