Googleの最新のモバイルページ速度ベンチマークレポートによると：
ページの読み込み時間が1秒から7秒になると、モバイルサイトの訪問者がバウンスする確率は113％増加します。
同じGoogleのレポートによると、平均的なWebサイトが完全に読み込まれるまでに最大22秒かかることがわかっているため（この重要な7秒のマークの2倍以上）、これらの数値は厳しいものです。
このニュースは、モバイルファーストのインデックスが間近に迫っているという事実に加えて、ウェブサイトの所有者の背筋を冷やすはずです。
ありがたいことに、しかし、あなたには選択肢があります。
以下は、ページビュー、お金、および睡眠を節約するための最も差し迫った問題に対するいくつかの一般的な修正です。
ただし、最初に、Webサイトの速度をテストして、主なボトルネックが発生している場所を確認しましょう。
Googleの「TestMySite」でウェブサイトをテストすることから始めます
Googleのデータは、今日のほとんどのWebサイトが遅すぎることを示しています。
彼らは126か国の900,000のランディングページを分析し、「モバイルサイトの大部分は低速で、要素が多すぎて肥大化している」ことを発見しました。
彼らはどれだけ遅くて肥大化したのでしょうか？
分析したページの70％で、折り目の上のビジュアルコンテンツが画面に表示されるまでに7秒近くかかり、折り目の上下にあるすべてのビジュアルコンテンツが完全に読み込まれるまでに10秒以上かかりました。
ニール・パテルとの協議
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください
SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する
理想的には、ページは最大で3秒以内に読み込まれるはずです。したがって、調査したほとんどのページが完全にマークを外したという事実は、良い兆候ではありません。
たとえば、自分のサイトが遅すぎることを意味している可能性があります。
ただし、Googleはいくつかの良いニュースをもたらしたので、ストレスを感じないでください。
彼らは、サイトを苦しめている原因（およびその修正方法）を正確に把握するのに役立つ新しい無料ツールを発表しました。
GoogleのPageSpeedツールから生まれたTestMySiteは、モバイルサイトを無料で評価するプログラムです。
頭を上にして、提供されたスペースにWebサイトのURLを入力するだけです。これを行うと、次のような画面が表示されます。
Picture2
すぐに、いくつかの簡単なヒントが得られます。
最初の指標は、ホームページの平均読み込み時間です。この場合、Dictionary.comは5秒で到着します。これは、1秒前に聞いたことと比べるとかなり良いです。
次に、Googleは、読み込み時間にかかるトラフィックの量を見積もるのに役立ちます。
この場合、彼らのデータは、Dictionary.comが5秒以内にページをロードしていても、トラフィックの最大19％を失う可能性があると予測しています。 （何百万人もの訪問者が1トンになる可能性があります！）
次のステップは、「GetMyFreeReport」を押すことです。このページの1つではなく、2つではなく、3つの場所（右上隅、メインテキストボックスのすぐ下の領域、およびスクロールし続ける場合はページの一番下）にあります。
このボタンをクリックすると、Googleはあなたのメールアドレスとその利用規約への同意を要求します。連絡先情報を入力すると、次のような結果が表示されるまで1時間ほど待つように求められます。
Picture3
レポートは、前に見たティーザー情報から始まります。そのすぐ下で、Googleは、これらの間違いを修正することで、読み込み時間を短縮できる秒数を見積もります（ミッションを受け入れることを選択した場合）。
このシナリオでは、その数は3です。
ほんの数秒で、これらの推奨される修正について詳しく説明します。これにより、ページの読み込みが遅れる最大の原因を確認できます。ただし、一般的に、これらは次のカテゴリに分類できます。
ページの重みを減らす：「肥大化した」ページには多くのものがあります。余分なコード、ファイル、大量の画像などが多すぎます。ページの重みを減らすことは、負荷を軽減するために不要なもの（または過剰なもの）を削除することを意味します。
リクエスト数の削減：ページリクエストは、誰かがあなたのサイトにアクセスしようとしたときに発生します。サーバーにアクセスするたびに、サーバーからデータを「呼び出し」ます。最初のステップは、リクエストの数を減らすことです（送受信されるデータを制限することによって）。次に、各訪問者が訪問するたびにデータを「再取得」する必要がないように、できるだけ多くのデータを保持できるようにします。
第一印象をすばやく作成する：最後に、ページの下に時間がかかるものを強制することで、ページがすばやく読み込まれているように見せるために使用できるいくつかのトリックがあります。そうすれば、誰かがサイトにアクセスし、読み始めたときにすべてが正常に見えます。その間に、以下の他の詳細をロードするために、サイトを数秒余分に購入します。
Googleの無料レポートは徹底的です。正直に言うと、ほとんど徹底的すぎます。これらの修正および変更の一部は、修正に多くの時間、エネルギー、および技術的ノウハウを要する可能性があります。
ありがたいことに、それはまた、少し長く延期できる問題から、どの問題にすぐに注意を払う必要があるかを優先するのに役立つように色分けされています。
スキャンを続けると
結果として、「サイトを高速化する」ヘッダーが表示されます。このヘッダーの下に、「修正する必要がある」サイトの特定の要素、「修正を検討する」必要のある要素、「見栄えのする」要素が示されます。
各カテゴリの下には、これらの領域で赤から緑に移行する方法を示すリンクもあります。
Test My Siteレポートは、モバイルサイトを圧迫しているすべての潜在的な問題を特定するための非常に貴重なツールです。
それでは、これらの懸念のいくつかに対処する方法について詳しく説明します。
前述のように、これらの修正には数週間かかる場合があります。おそらくそのような時間はないでしょう。
その代わりに、（1）最も一般的で、（2）最大の影響があり、（3）ロケット科学者（またはプログラマー）が修正する必要がないことに焦点を当てます。
始めましょう。
ファイルを圧縮して「重量」を減らす方法
サイトの読み込みに時間がかかる主な理由の1つは、ページを飾るすべての画像とかさばるファイルです。
見栄えは良いかもしれませんが、収益への影響は確かにそうではありません。
ただし、朗報です。お気に入りの写真をカットする必要はありません。 （画像から始めて）ファイルを圧縮することで、ファイルサイズを縮小し、訪問者がサイトにアクセスしたときにそれらのファイルをすばやくポップアップできるようにします。
さまざまなプラットフォームすべてに使用できるさまざまな圧縮ツールがあります。 WordPress狂信者？ WPスーパーミニファイとWPスマッシュそれはあなたにぴったりかもしれません。
特に、WP SmushItは、バックグラウンドでシームレスに動作するため、サイトに最適なプラグインの1つとして評価されています。新しい画像ファイルをアップロードすると、メディアライブラリに到達する前にスキャンして削減します。
WordPress以外のユーザー向けにプラットフォームに依存しない他の圧縮ツールもいくつかあります。
たとえば、GZIP圧縮を使用した圧縮監査から開始したり、Gzipを使用してzipファイルを作成したり、Compressor.ioを使用して画像を圧縮したりできます。
後者は、この次の例で使用するものであり、5分以内に画像を圧縮する方法を学習します（サインアップや電子メールは必要ありません）。
開始するには、Compressor.ioにアクセスし、大きな「Try It！」をクリックします。ボタン。
スキッチ
圧縮タイプの選択を求めるページにリダイレクトされます。
「ロスレス」を選択すると、画像がデータを失うことはなく、必要に応じてファイルを元の形式に解凍できるようになります。
これは、元のバージョンの何分の1かを「重く」したとしても、ほとんどの人にとって画像は同じように見えることを意味します。
スキッチ1
次に、画面中央の「ファイル選択」をクリックし、圧縮したい画像を選択します。画像はすでにコンピュータのどこかにJPEGまたはPNGファイルとして保存されているはずです。
あとは、圧縮した画像をダウンロードしてWebページに組み込むだけです。
上で述べたように、Compressor.ioは利用可能な多くの圧縮プラットフォームの1つにすぎません。
これらのアプリケーションは、モバイルサイトを改善するための取り組みを支援します。最良の部分は、下のCompressor.ioの写真に示されているように、圧縮された画像が元の画像と同じに見えることです。
Picture4
画像を組み合わせてページリクエストを減らす方法
誰かがあなたのサイトにアクセスしようとするたびに、そのブラウザはあなたのサーバーに情報を求めるリクエストを送信します。 Googleは、すべての業界のほとんどのWebサイトで、平均リクエスト数が本来の2倍近くあることを発見しました。
画像46
当然、ブラウザとの間で送受信する必要のあるリクエストが少ないほど、顧客のページの読み込みが速くなります。
したがって、問題は次のようになります。送信されるリクエストの数をどのように減らすのですか？
1つの解決策は、Yoastで詳細に説明されているように、CSSスプライトを使用して背景画像を結合することです。
この手法を使用すると、大量の画像リクエストをもう少し管理しやすいものに切り詰めることができますが、ここでも、ページの外観を変更するために何もしません。
必要なのは、無料の午後と、リクエスト数を減らすためのSpriteMeのようなアプリケーションだけです。これは、TestMySiteレポートの主な関心事でした。
組み合わせる画像がわかりませんか？心配しないで！
SpriteMeがすべてを処理します。あなたがしなければならないのは、ホームページで彼らのデモに従うことだけです。
この便利な小さなチュートリアルでは、インストールからスプライトの作成、ページの更新、アプリケーションのトラブルシューティングに至るまで、SpriteMeのエクスペリエンスをすべてのステップで説明します。
背景画像を組み合わせることも、飛び回るリクエストの数を最小限に抑える唯一の方法ではありません。次に、リクエストの過負荷すべてに対する別の修正方法を見ていきます。
コンテンツ配信ネットワークの使用を開始して、サーバーから作業を削除します
コンテンツ配信ネットワーク（CDN）は、グローバルネットワークを介して配信することにより、サーバーから大きな画像ファイルを配信する負担を軽減します。
次に、CDNが大きな画像をホストし、それらのリクエストを処理している間、サイトはレマの他のリクエストを同時に処理できます
あなたのコンテンツのインダー。
さらに良いニュースは、CDNがプロセスを促進するためにいくつかのトリックを持っていることです。
たとえば、最適な場所からデータを送信して、画像が移動する必要のある距離を短縮し、その結果、ファイルが目的の宛先に到着するまでにかかる時間を短縮する戦略を立てているものもあります。
つまり、誰かがアルゼンチンからサイトにアクセスしようとすると、ブラジルのサーバー（近くにない場合）が要求を実行しようとします。
幸いなことに、そこから選択できる無料のCDNがたくさんあります。
CloudFlareとBootstrapCDNは、これらの余分なリクエストを完全に取り除くための旅を始めることができるカップルです。
WP Engineのような多くのホスティング会社も、独自のCDNサービスを持っています。
したがって、多くの場合、プラグアンドプレイするだけで済みます。毎月の請求書に数ドル追加すれば、すべての汚い仕事を彼らがやってくれます。
画像43
試してみる準備はできましたか？
選択したCDNプロバイダーにアクセスし（StackPack、以前のMaxCDNは別の一般的な選択肢です）、アカウントを作成し、指定されたフィールドにWebサイトのドメイン名を入力します。
その後、ウェブサイト自体が、リクエストトーチをCDN自身のサーバーに渡すための最後のいくつかの手順を案内します。
それが解決されたもう1つの問題です。これで問題が解決したので、次はもう1つの一般的な問題であるJavaScriptに取り組みます。
JavaScriptファイルをHTMLの低い位置に再配置します
TTFB（最初のバイトまでの時間）は、訪問者がサーバーに要求を送信し、サーバーがデータをコンパイルして送り返すのを待ち、そのデータの最初のバイトを受信するのにかかる時間を測定します。
ttfbを待っています
Googleのレポートによると、健全なサイトは約1.3秒のTTFBを見ています。バイトが訪問者に到達するのにそれより長くかかる場合、おそらく、彼らは他の場所を訪問します。
それが起こらないようにするにはどうすればよいですか？答えは、コピーして貼り付けるのと同じくらい簡単です。
具体的には、JavaScriptファイルをHTMLドキュメントの上部から取得し、ページの下部に再配置する必要があります。
これにより、実際にはページ上のデータが薄くなることはありませんが、これらの要素が読み込まれる順序に違いが生じます。
たとえば、サイトの実際のコンテンツの前にこれらを最初に読み込もうとすると、訪問者は待機し、待機し、完了するまで待機する必要があります。
代わりに、サイトコンテンツの下に配置すると、テキストをすばやく読み込むことができます。そうすれば、ページデータがまだバックグラウンドで読み込まれていることに気付かずに、通常のように読み始めることができます。
つまり、訪問者がページに到着してからわずか1秒以内に最初のバイトを受信できるため、TTFBは削減されます。
基本的なコンテンツが顧客のためにできるだけ早く読み込まれるようにするための最後の簡単なヒントを次に示します。
これは、あなたが読んでいるこのページで、気付かないうちに起こっていることをすでに見たものです。
画像を「遅延読み込み」して、ページの読み込み時間を短縮します
本当に素早く何かを試してください：
このブログ投稿をリロードして、本当に速く下にスクロールし始めてください。このような：
2017 07 12 at 145750のスクリーンキャプチャ
画像について何か奇妙なことに気づきましたか？フェードインするまでに0.5秒ほどの遅延がありますよね？
あなたは物事を想像していません。読み込みが遅れているだけです。
秘訣は、ユーザーが画像までスクロールダウンするまで画像が読み込まれないようにする方法にあります。
つまり、記事の最後まで画像が表示されない場合、顧客がページの最後に到達するまで画像は読み込まれません。
上で説明したJavaScriptの手法と同様に、これにより、ページ上部のコンテンツの競合がなくなり、サイトの基本（テキストコンテンツなど）をより早く、より速くロードできるようになります。
では、まともな遅延読み込みプラグインはどこにありますか？
遅延読み込みは、開始するのに悪い場所ではありません。また、WordPress用のWPMUの上位6つの遅延読み込みプラグインを確認することもできます。
さらに、心ゆくまで遅延読み込みについて読んだり、最新の遅延読み込みスクリプトにアクセスしたりできます。
結論
Googleは、ページの70％以上が1MBを超えていると報告しました。
安定した3G接続でロードするのに1.49MBのページが約7秒かかるので、これは悪いことです。
ページの読み込みに7秒かかると、他に何が起こるか覚えていますか？
「モバイルサイトの訪問者がバウンスする確率は113％増加します。」
しかし、すべての希望が失われるわけではありません。
まず、Google独自のTest My Siteを実行して、何が妨げになっているのかを正確に把握します。最大の問題を特定し、どの修正を最優先すべきかについて明確な方向性を示します。
画像を圧縮して結合し、JavaScriptファイルを再配置し、CDNと遅延読み込みプラグインの素晴らしさに依存することで、モバイルサイトに顧客を引き付けて滞在させることがどのように感じられるかを知ることもできます。
ページの読み込み時間を最小限に抑えてサイトを高速化するための最善のヒントは何ですか？