モバイルサイトの読み込みを高速化するための6ステップガイド
ユーザーは、サイトの読み込みが速いことを期待しています。そうしないと、大量のトラフィックを失う可能性があります。
どれくらい速く、あなたは尋ねますか?
一部の調査によると、ページが文字通り瞬く間に読み込まれない場合、人々は興味を失う可能性があります。これは約400ミリ秒です。
わずか1秒の遅延により、顧客満足度が16%低下する可能性があり、読み込みに4秒以上かかる場合、訪問者の4人に1人がサイトを放棄します。
モバイルサイトの速度統計
強力なグーグルは言うまでもなく、サイトの速度はモバイルサイトのランキング要素です。
したがって、サイトが高速でない場合、オーディエンスとGoogleの両方がそれをよく考えません。視認性とトラフィックが失われます。
それで、あなたのサイトはどれくらい速いですか?
読み込みに1〜2秒以上かかる場合は、今すぐトラフィックが失われるためです。
あなたのサイトが遅い場合でも大丈夫です。 1人の訪問者が指をすり抜けないようにするために、より速くするための手順があります。方法は次のとおりです。
ステップ1:モバイルサイトの速度をテストする
他のことをする前に、モバイルサイトが実際にどれだけ速いかをテストする必要があります。
ニール・パテルとの協議
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください
SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する
読み込みは問題ないと思うかもしれませんが、思ったより遅くなる可能性があります。
最高のモバイルテストの1つは、Ubersuggestによるものです。仕組みは次のとおりです。
ステップ1:URLを入力し、[検索]をクリックします
ubersuggestはあなたのサイトの読み込みを速くします
ステップ2:左側のサイドバーの[サイト監査]をクリックします
ubersuggestは、サイトの読み込みを高速化するサイト監査
ステップ3:「サイト速度」まで下にスクロールします
ubersuggestは、サイトの読み込みを高速化するサイト速度テストを行います。
ここで、デスクトップデバイスとモバイルデバイスの両方の読み込み時間を確認できます。これは、私のサイトのモバイル読み込み時間が2秒であることを示しています。これは、「優れた」スコアです。
また、Webサイトの6つの主要な要素に関連する速度もテストします。
最初の満足のいくペイント
スピードインデックス
インタラクティブな時間
最初の意味のあるペイント
最初のCPUアイドル
推定入力レイテンシ
サイトの速度が優れている場合は、心配する必要はありません。ただし、改善の余地がある場合は、行動を起こすのを待つ必要はありません。サイトの読み込みに0.5秒かかるごとに、離れる訪問者の割合が増加します。
モバイルサイトの速度が低下する最も一般的な原因に対処し、サイトを改善するために何ができるかを説明します。
ステップ2:モバイルサイトのデザインを完成させる
サイトを設計したときのことを思い出してください。
モバイルデバイスを念頭に置いていましたか?
あなたはそうしなかったと思います。 (もしそうなら、背中を軽くたたいてください。)
今なら、モバイルファーストの考え方でデザインを再考するときです。
モバイルサイトはここ数年で大きく変化しました。
以前は、サイトには2つのバージョンがありました。1つはモバイル用、もう1つはデスクトップ用です。
モバイルサイトは「m」で簡単に識別できます。サブドメイン:
モバイルサブドメインを使用すると、サイトの読み込みが速くなります。
この状況では、モバイルサイトとデスクトップサイトは、互いに別々に動作する2つのまったく異なる動物です。
これはもはや当てはまりません。現在、ほとんどのサイトはレスポンシブデザインを使用しています。
レスポンシブデザインを使用すると、アクセス方法に応じて動的に変化する1つのサイトを作成できます。
そのため、モバイルユーザーとデスクトップユーザーは同じサイトを見ていますが、デバイスごとに表示が異なります。
これは実際にGoogleが好むものです。彼らはそれを非常に簡単に述べています:
「レスポンシブデザインは、Googleが推奨するデザインパターンです。」
あなたはおそらく、「わかりました、かっこいいですが、これは速度と何の関係があるのでしょうか?」と考えているでしょう。
レスポンシブデザインは通常、モバイル専用サイトよりも高速に読み込まれるため、SEOの大きなメリットが得られます。
レスポンシブデザインを使用すると、ソーシャルシェアの形でサイトの注目度が高まり、SEOも向上します。
サイトをレスポンシブにすることは、短期的にも長期的にも効果的です。レスポンシブサイトをまだお持ちでない場合は、できるだけ早く調査することをお勧めします。
ステップ3:サイトを軽量に保つ
そこにある最高で最も目を引くデザインを作ることに夢中になっているのは簡単です。
時々あなたはあまりにも巻き込まれ、その結果、あなたがどんどん追加し続けるのであなたのサイトはますます遅くなります。
これは、開発者がコードの膨張と呼ぶ条件です。
コードの膨張は、サイトが過剰なコードで圧迫されたときに発生します。
サイトの読み込みを高速化するコードの膨張
ほとんどの場合、コードの膨張は、設計者がサイトの視覚的表現に集中しすぎている場合に発生します。
誤解しないでください。サイトがどのように見えるかは非常に重要です。
しかし、パフォーマンスは見た目に後れを取ることはできません。
幸いなことに、そうする必要はありません。あなたはあなたのケーキを持ってそれを食べることもできます。サイトを設計する際に留意すべきいくつかのヒントを次に示します。
単純にする
レオナルド・ダ・ヴィンチは、単純さについて次のように述べています。
シンプルさは究極の洗練です。
さて、約500年後、彼の言葉は
病気のリングは本当です。
あなたの周りを見てください。過去の複雑なデザインは、未来のミニマリストデザインに置き換えられました。
これはウェブサイトにも当てはまります。特にモバイルサイト。
モバイル画面では、サイトが混雑しやすくなる可能性があるため、すべてを開いて整理しておくことが重要です。
経験則として、ページごとに1つのアクション呼び出しのみを使用する必要があります。これにより、使用するコードの量を減らすことができ、サイトのユーザーエクスペリエンスも向上します。
また、RugDoctorの次のようなより単純な設計を検討することもできます。
派手ではありませんが、なめらかなスタイルで注目を集めます。
サイトを目立たせるために、明るい色や写真をたくさん用意する必要はありません。モバイルデザインに関して言えば、多くの場合、少ないほうが多いです。
手順を削除する
ユーザーがしなければならないことが少なければ少ないほど良いです。
考えてみてください。 3つしかないのに、なぜ顧客と販売の間に7つのステップがある必要があるのでしょうか。
これにより、販売目標到達プロセスが効果的に短縮されますが、ユーザーエクスペリエンスもさらにシンプルになります。
多くのeコマースサイトは、この戦略を使用して売り上げを伸ばしています。
ボーデンのモバイルサイトでは、商品を購入するのはとても簡単です。カートに追加し、[チェックアウト]をクリックして、支払います。
それは簡単で要点です。不要な手順はありません。
これは当然、コードの膨張を和らげるのにも役立ちます。サイトに大量のページがない場合、コードを使いこなすのは困難です。
不要な手順を削除することは、訪問者のためにできる最善のことの1つです。モバイルユーザーは、それほど多くのことをする必要がなければ、サイトにとどまる可能性がはるかに高くなります。
ユーザーを数回クリックするだけで、莫大な報酬を得ることができます。
より少ない画像を使用する
これに入る前に、良い画像はどのサイトにとっても間違いなく重要であり、SEOのメリットもあると言いたいです。
しかし、あなたはあまりにも多くの良いことをすることができます。
この場合、画像に夢中になり、その過程でサイトの速度を低下させる可能性があります。
これは大したことではないと思われるかもしれませんが、画像はページの「重み」の約63%を占めています。
2011年から2015年にかけて、平均的なモバイルページのサイズは3倍になりました。
より少ない画像を使用してサイトの読み込みを高速化する
つまり、画像はサイトで最も要求の厳しい要素の一部です。それらは多くのスペースを占めるので、多すぎるのは良くありません。
1つの解決策は、単に画像を削減することです。
もう1つの(おそらくより実用的な)解決策は、画像を圧縮してファイルサイズを小さくすることです。
圧縮は基本的に、品質を低下させることなく画像を小さくします。これにより、サイトの読み込みにかかる時間が短縮されます。
ボーナスとして、検索エンジンボットがサイトをクロールしてインデックスに登録するのにかかる時間も短縮されます。
Compressor.ioのようなサイトは、これを簡単に行うことができます。
サイトの読み込みを高速化して画像を圧縮する
実際、これは、サイトがすでに猛威を振るっている場合でも採用すべきベストプラクティスです。
カスタムフォントを使用しないでください
私は他の誰よりも素敵なカスタムフォントが好きですが、それらのいくつかは本当に高度なメンテナンスです。
大量のCSSを使用するフォントもあれば、JavaScriptを多用するフォントもあります。いずれにせよ、あなたは大量のコードを見ています。
このテーマについて本当に深く読みたい場合は、GoogleのWebFundamentalsサイトのこの投稿を確認してください。
短いバージョンが必要な場合は、次のようになります。絶対に必要な場合にのみカスタムフォントを使用します。
ステップ4:コードを縮小する
縮小化は、コードを合理化するための非常に便利な手法です。
コードを「縮小」することの意味を簡単に定義します。
サイトの読み込みを高速化するコード定義を縮小する
基本的に、コードを縮小すると、冗長で不要なものがすべて削除されます。それはあなたのサイトがそれが必要とするコードだけを使用していることを確認します。
これは、サイトを軽量化するのに大いに役立ちます。
コードを手動で縮小することもできますが(手順はこちら)、コーディングの経験がない場合は、少し威圧的になる可能性があります。
ありがたいことに、コードをすぐに縮小するために使用できる無料のツールがいくつかあります。
Minifycode.comは、HTML、CSS、JavaScriptなどを簡素化するためのいくつかの縮小ツールを提供しています。
コードツールを縮小すると、サイトの読み込みが速くなります
サイトがWordPressで実行されている場合は、Better WordPressMinifyなどのプラグインのおかげでさらに多くのオプションがあります。
コードwpプラグインを縮小すると、サイトの読み込みが速くなります
これらのツールを使用することで、数回クリックするだけでコードを縮小でき、より高速なサイトにたどり着くことができます。
もちろん、不要なコードがないことを確認するためにできる限りのことを行う必要がありますが、間違いが発生します。これらのツールを使用すると、これらの間違いを修正し、同時にサイトを改善できます。
ステップ5:リダイレクトを削減する
リダイレクトが大好きです。それらはSEOとユーザーエクスペリエンスに本当に役立ちます。
ただし、コードと同様に、リダイレクトの用途は限られています。リダイレクトをあちこちで使用して、サイトのパフォーマンスを期待することはできません。
これは、リダイレクトによってサイトの速度が本質的に低下するためです。
通常のモバイルリンクをクリックすると、サーバーはそのリンクで見つかったドキュメントを提供します。
ただし、リダイレクトとは、その特定のリンクにドキュメントがないことを意味します。なぜなら
その中で、サーバーはドキュメントが存在するページに移動してそれを取得する必要があります。
サイトの読み込みを高速化し、リダイレクトを減らします。
このプロセスは、Webページ上の各ファイルで発生する必要があります。つまり、すべての画像、CSSファイル、およびJavaScriptファイルがリダイレクトされます。
その結果、適切なページが読み込まれるまでに数秒かかる場合があります。その時までに、あなたのユーザーはずっといなくなっているかもしれません。
ScreamingFrogを使用してリダイレクトを確認することをお勧めします。
次に、リダイレクトのルートを追跡し、完全に必要でないものを変更できます。
サイトの作業が少なければ少ないほど、サイトの処理速度は速くなります。リダイレクトには時間と場所がありますが、リダイレクトを使いすぎたり、依存したりしないでください。
ステップ6:最初に折り目の上にロードする
ユーザーが他の何かを見る前に、折り畳みコンテンツの上を見るのは明らかです。
では、なぜページ全体を一度にロードするのでしょうか。
最初に上記のフォールドコンテンツのみをロードしてから、必要に応じて残りをロードしてみませんか?
これは「遅延読み込み」と呼ばれる概念であり、サイトの速度に驚異的な効果をもたらします。
選択肢があれば、30ポンドよりも3ポンド持ち上げたほうがいいと思います。私は正しいですか?
遅延読み込みは、Webサイトに適用されるのとまったく同じ概念です。
遅延読み込みを実装することで、サイトに必要なだけの作業を実行し、それ以上の作業は行わないようにすることができます。
コードに慣れている場合は、このjQueryプラグインを使用できます。
WordPressサイトの場合、BJ LazyLoadのようなプラグインが役に立ちます。
遅延読み込みによりサイトの読み込みが速くなります
これらのオプションのどちらも当てはまらない場合は、開発者を雇って支援する必要があるかもしれません。
これはより高度な手法ですが、サイトで長期的に多くの作業を行う必要がなくなります。
結論
スピードはレースカーだけのものではありません。これは、優れたモバイルサイトの最も基本的な要素の1つです。
より高速なモバイルフレンドリーサイトは、トラフィックを増やし、新しい顧客とコンバージョンの洪水をもたらす可能性があります。
当然です。
モバイルはここにあり、それはここにとどまります。
デスクトップのパフォーマンスは依然として重要ですが、モバイルは現在と未来です。
要するに、あなたのサイトをできるだけ速くして、あなたのサイトが引っ張っている重量の量を減らしてください。
このThinkWith Googleの記事は、「スピードがスリルを味わうと、摩擦がなくなる」と完璧に表現しています。
モバイルサイトの速度を向上させることは、ユーザーと検索エンジンにとってサイトをより良くするための1対2のパンチです。
まだモバイルに焦点を当てていない場合は、今日から始めることをお勧めします。
モバイルサイトを高速化するために、これらの手法のどれを使用しますか?