私達と接続する

SaaSの

モバイルサイトの読み込みを高速化するための6ステップガイド

アバター

公開済み

on

モバイルサイトの読み込みを高速化する方法。

ユーザーは、サイトの読み込みが速いことを期待しています。 そうでない場合は、大量のトラフィックを失う可能性があります。

どれくらい速く、あなたは尋ねますか?

いくつかの調査によると、ページが読み込まれない場合 文字通り瞬く間に、人々は興味を失う可能性があります。 これは約400ミリ秒です。

わずか16秒の遅延により、顧客満足度がXNUMX%低下する可能性があり、訪問者のXNUMX人にXNUMX人は、それ以上の時間がかかるとサイトを放棄します。 ロードするのにXNUMX秒.

モバイルサイトの速度統計

強大なことは言うまでもありません グーグルは、サイトの速度がモバイルサイトのランキング要素であると言います。

したがって、サイトが高速でない場合、オーディエンスとGoogleの両方がそれをよく考えません。 視認性とトラフィックが失われます。

それで、あなたのサイトはどれくらい速いですか?

ロードにXNUMX〜XNUMX秒以上かかる場合は、この瞬間にトラフィックが失われるためです。

あなたのサイトが遅い場合でも大丈夫です。 XNUMX人の訪問者が指をすり抜けないようにするために、より速くするための手順があります。 方法は次のとおりです。

ステップ1:モバイルサイトの速度をテストする

他のことをする前に、モバイルサイトが実際にどれだけ速いかをテストする必要があります。

正常に読み込まれると思うかもしれませんが、思ったよりも遅くなる可能性があります。

最高のモバイルテストのXNUMXつは Ubersuggest。 それはどのように動作するのです:

#1ステップ: URLを入力して「検索」をクリックします

ubersuggestはあなたのサイトの読み込みを速くします

#2ステップ: 左側のサイドバーの「サイト監査」をクリックします

ubersuggestはサイトの読み込みを高速化するサイト監査

#3ステップ: 「サイト速度」まで下にスクロールします

ubersuggestは、サイトの読み込みを高速化するサイト速度テストを行います。

ここで、デスクトップデバイスとモバイルデバイスの両方の読み込み時間を確認できます。 これは、私のサイトのモバイル読み込み時間が2秒であることを示しています。これは、「優れた」スコアです。

また、WebサイトのXNUMXつの重要な要素に関連する速度もテストします。

  • 最初の満足のいくペイント
  • 速度指数
  • インタラクティブへの時間
  • 最初の意味のあるペイント
  • 最初のCPUアイドル
  • 推定入力レイテンシ

サイトの速度が優れている場合は、心配する必要はありません。 しかし、改善の余地がある場合は、行動を起こすのを待つ必要はありません。 サイトの読み込みに0.5秒かかるごとに、離れる訪問者の割合が増加します。

モバイルサイトの速度が遅い最も一般的な原因に対処し、サイトを改善するために何ができるかを説明します。

ステップ2:モバイルサイトのデザインを完成させる

サイトを設計したときのことを思い出してください。

モバイルデバイスを念頭に置いていましたか?

私はあなたがそうしなかったと思います。 (もしそうなら、背中を軽くたたいてください。)

もしあなたが今しなかったのなら、モバイルファーストの考え方であなたのデザインを再考する時です。

モバイルサイトはここ数年で大きく変化しました。

以前は、サイトにはXNUMXつのバージョンがありました。XNUMXつはモバイル用、もうXNUMXつはデスクトップ用です。

モバイルサイトは「m」で簡単に識別できます。 サブドメイン:

モバイルサブドメインを使用すると、サイトの読み込みが速くなります。

この状況では、モバイルサイトとデスクトップサイトは、互いに別々に動作するXNUMXつのまったく異なる動物です。

これはもはや当てはまりません。 現在、ほとんどのサイトはレスポンシブデザインを使用しています。

レスポンシブデザインを使用すると、アクセス方法に応じて動的に変化するXNUMXつのサイトを作成できます。

そのため、モバイルユーザーとデスクトップユーザーは同じサイトを見ていますが、デバイスごとに表示が異なります。

これは実際にGoogleが好むものです。 彼らはそれを非常に簡単に述べています:

「レスポンシブデザインは、Googleが推奨するデザインパターンです。」

あなたはおそらく「わかりました、かっこいいですが、これは速度と何の関係があるのでしょうか?」と考えているでしょう。

レスポンシブデザイン 通常、読み込みが速くなります モバイル専用サイトよりも優れているため、SEOの大きなアドバンテージを得ることができます。

レスポンシブデザインを使用すると、ソーシャルシェアの形でサイトの注目度が高まり、SEOも向上します。

サイトをレスポンシブにすることは、短期的にも長期的にも役立ちます。 レスポンシブサイトをまだお持ちでない場合は、できるだけ早く調査することをお勧めします。

ステップ3:サイトを軽量に保つ

そこにある最高で最も目を引くデザインを作ることに巻き込まれるのは簡単です。

時々あなたはあまりにも巻き込まれ、その結果、あなたがどんどん追加し続けるのであなたのサイトはますます遅くなります。

これは開発者が呼ぶ条件です コードの膨張.

コードの膨張は、サイトが過剰なコードで圧迫されたときに発生します。

あなたのサイトがより速くコードの膨張をロードするようにする

ほとんどの場合、コードの膨張は、デザイナーがサイトの視覚的表現に集中しすぎている場合に発生します。

誤解しないでください。 サイトがどのように見えるかは非常に重要です。

しかし、パフォーマンスは見た目に後部座席を取ることはできません。

幸いなことに、そうする必要はありません。 あなたはあなたのケーキを持ってそれを食べることもできます。 サイトを設計する際に留意すべきいくつかのヒントを次に示します。

複雑にしないでおく

レオナルドダヴィンチは、単純さについて次のように述べています。

シンプルさは究極の洗練です。

さて、約XNUMX年後、 彼の言葉は今でも真実である.

あなたの周りを見てください。 過去の複雑なデザインは、未来のミニマリストデザインに置き換えられました。

これはウェブサイトにも当てはまります。 特に モバイルサイト。

モバイル画面では、サイトが混雑しすぎる可能性があるため、すべてを開いて整理しておくことが重要です。

経験則として、ページごとに行動を促すフレーズはXNUMXつだけにする必要があります。 これにより、使用するコードの量を減らすことができ、サイトのユーザーエクスペリエンスも向上します。

RugDoctorのこのようなより単純なデザインを検討することもできます。:

派手ではありませんが、なめらかなスタイルで注目を集めます。

あなたのサイトを目立たせるためにたくさんの明るい色や写真は必要ありません。 モバイルデザインに関して言えば、多くの場合、少ないほうが多いです。

ステップを削除する

ユーザーが行う必要が少ないほど、 良い.

考えてみてください。 3つしかないのに、なぜ顧客と販売の間にXNUMXつのステップがある必要があるのでしょうか。

これにより、販売の目標到達プロセスが効果的に短縮されますが、ユーザーエクスペリエンスもさらにシンプルになります。

多くのeコマースサイトは、この戦略を使用して売り上げを伸ばしています。

On ボーデンの モバイルサイトでは、商品を購入するのはとても簡単です。 カートに追加し、[チェックアウト]をクリックして、支払います。

それは簡単で要点です。 不要な手順はありません。

これは当然、コードの膨張を緩和するのにも役立ちます。 サイトに大量のページがない場合、コードを使いこなすのは困難です。

不要な手順を削除することは、訪問者のためにできる最善のことのXNUMXつです。 モバイルユーザーは、それほど多くのことをする必要がなければ、サイトにとどまる可能性がはるかに高くなります。

ユーザーを数回クリックするだけで、莫大な報酬を得ることができます。

より少ない画像を使用する 

これに入る前に、良い画像はどのサイトにとっても間違いなく重要だと言いたいです。 また、SEOのメリットもあります.

しかし、あなたはあまりにも多くの良いことをすることができます。

この場合、画像に夢中になり、その過程でサイトの速度が低下する可能性があります。

これは大したことではないと思うかもしれませんが、画像 ページの「重み」の約63%を占めます。

2011年から2015年にかけて、平均的なモバイルページのサイズはXNUMX倍になりました。

より少ない画像を使用してサイトの読み込みを高速化する

つまり、画像はサイトで最も要求の厳しい要素のXNUMXつです。 それらは多くのスペースを占めるので、多すぎるのは良くありません。

XNUMXつの解決策は、単に画像を削減することです。

別の(おそらくより実用的な)解決策は、画像を圧縮してファイルサイズを小さくすることです。

圧縮は基本的に、品質を低下させることなく画像を小さくします。 これにより、サイトの読み込みにかかる時間が短縮されます。

ボーナスとして、検索エンジンボットが サイトをクロールしてインデックスに登録する.

似ているサイト Compressor.io これを簡単に行うことができます。

サイトの読み込みを高速化して画像を圧縮する

実際、これは、サイトがすでに猛威を振るっている場合でも採用すべきベストプラクティスです。

カスタムフォントを使用しないでください

 私は他の誰よりも素敵なカスタムフォントが好きですが、それらのいくつかは本当に高度なメンテナンスです。

大量のCSSを使用するフォントもあれば、JavaScriptを多用するフォントもあります。 いずれにせよ、あなたは大量のコードを見ています。

このテーマについて本当に深く読みたい場合は、チェックしてください この記事 GoogleのWebFundamentalsサイトにあります。

短いバージョンが必要な場合は、次のようになります。絶対に必要な場合にのみカスタムフォントを使用します。

ステップ4: コードを縮小する

縮小化は、コードを合理化するための非常に便利な手法です。

これが簡単な定義です コードを「縮小」することの意味:

サイトの読み込みを高速化するコード定義を縮小する

基本的に、コードを縮小すると、冗長で不要なものがすべて削除されます。 それはあなたのサイトがそれが必要とするコードだけを使用していることを確認します。

これは、サイトを軽量化するのに大いに役立ちます。

You できる コードを手動で縮小します(ここでの指示)、ただし、コーディングの経験がない場合は、少し威圧的になる可能性があります。

ありがたいことに、コードをすぐに縮小するために使用できる無料のツールがいくつかあります。

Minifycode.com HTML、CSS、JavaScriptなどを簡素化するためのいくつかの縮小ツールを提供しています。

コードツールを縮小すると、サイトの読み込みが速くなります

あなたのサイトがWordPressで実行されている場合、次のようなプラグインのおかげでさらに多くのオプションがあります より良いWordPress Minify:

コードの縮小wpプラグインにより、サイトの読み込みが速くなります

これらのツールを使用することで、数回クリックするだけでコードを縮小でき、より高速なサイトにたどり着くことができます。

もちろん、不要なコードがないことを確認するためにできる限りのことをする必要がありますが、間違いが発生します。 これらのツールを使用すると、これらの間違いを修正し、同時にサイトを改善できます。

ステップ5:リダイレクトを削減する

わたしは愛しています リダイレクト。 これらは、SEOとユーザーエクスペリエンスに非常に役立ちます。

ただし、コードと同様に、リダイレクトの用途は限られています。 リダイレクトをあちこちで使用して、サイトのパフォーマンスを期待することはできません。

これは、リダイレクトによって本質的にサイトの速度が低下するためです。

通常のモバイルリンクをクリックすると、サーバーはそのリンクで見つかったドキュメントを提供します。

ただし、リダイレクトとは、その特定のリンクにドキュメントがないことを意味します。 そのため、サーバーはドキュメントが存在するページに移動して取得する必要があります。

サイトの読み込みを高速化し、リダイレクトを減らします。

このプロセスは、Webページ上の各ファイルで発生する必要があります。 つまり、すべての画像、CSSファイル、およびJavaScriptファイルがリダイレクトされます。

その結果、適切なページが読み込まれるまでに数秒かかる場合があります。 その時までに、あなたのユーザーはずっといなくなっているかもしれません。

私が使用することをお勧めします リダイレクトをチェックするためにカエルを叫ぶ。

次に、リダイレクトのルートを追跡し、完全に必要でないものを変更できます。

あなたのサイトがしなければならない仕事が少なければ少ないほど、それは速く進みます。 リダイレクトには時間と場所がありますが、リダイレクトを使いすぎたり、依存したりしないでください。

ステップ6:スクロールせずに見える範囲に最初にロードする

ユーザーがスクロールせずに見える範囲のコンテンツを他のコンテンツよりも先に表示することは明らかです。

では、なぜページ全体を一度にロードするのでしょうか。

最初はスクロールせずに見える範囲のコンテンツのみを読み込んでから、必要に応じて残りを読み込んでみませんか?

これは「遅延読み込み」と呼ばれる概念であり、サイトの速度に驚異的な効果をもたらします。

もしあなたに選択肢があれば、30ポンドよりもXNUMXポンド持ち上げたほうがいいと思います。私は正しいですか?

遅延読み込みは、Webサイトに適用されるのとまったく同じ概念です。

遅延読み込みを実装することで、サイトに必要なだけの作業を実行するように要求し、それ以上は実行しないようにします。

コードに慣れている場合は、次を使用できます このjQueryプラグイン.

WordPressサイトには、次のようなプラグインがあります BJレイジーロード 救助に来るために。

遅延読み込みによりサイトの読み込みが速くなります

これらのオプションのどちらも当てはまらない場合は、開発者を雇って支援する必要があるかもしれません。

これはより高度な手法ですが、サイトが長期的に多くの作業を行うのを防ぐことができます。

結論

スピードはレースカーだけのものではありません。 これは、優れたモバイルサイトの最も基本的な要素のXNUMXつです。

より高速なモバイルフレンドリーサイトは、トラフィックを増やし、新しい顧客とコンバージョンの洪水をもたらす可能性があります。

当然のことです。

モバイルはこちら、そしてそれはここにとどまります。

デスクトップのパフォーマンスは依然として重要ですが、モバイルは現在と未来です。

要するに、あなたのサイトをできるだけ速くして、あなたのサイトが引っ張っている重量の量を減らしてください。

このThinkWithGoogleの記事 完璧に言えば、「スピードがスリル満点なら、摩擦は死にます。」

あなたのモバイルサイトの速度を改善することは、 あなたのサイトをあなたのユーザーにとってより良いものにする と検索エンジン用。

まだモバイルに焦点を当てていない場合は、今日から始めることをお勧めします。

これらのテクニックのうち、モバイルサイトを高速化するために使用するのはどれですか。

NeilPatelとのコンサルティング

私の代理店がどのように推進できるかをご覧ください 大規模な あなたのウェブサイトへのトラフィックの量

  • SEO –大量のSEOトラフィックのロックを解除します。 実際の結果をご覧ください。
  • コンテンツマーケティング –私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
  • 有料メディア –明確なROIを備えた効果的な有料戦略。

通話を予約

コインスマート。 BesteBitcoin-ヨーロッパのBörse
出典:https://neilpatel.com/blog/mobile-site-load-faster/

SaaSの

...

アバター

公開済み

on

続きを読む

SaaSの

...

アバター

公開済み

on

続きを読む

SaaSの

...

アバター

公開済み

on

続きを読む

SaaSの

...

アバター

公開済み

on

続きを読む
PRニュースワイヤー5日前

32.2年までに2026億ドル相当のポリスチレンフォーム市場–MarketsandMarkets™による独占レポート

航空4日前

ルフトハンザのボーイング707航空機はどうなりましたか?

Blockchain4日前

ゴールドマンサックスによる暗号取引チームの立ち上げ

サイバーセキュリティ4日前

暗号学者になる方法:完全なキャリアガイド

AR / VR5日前

Appleは、AR技術の一部を構築するレーザー会社に410億XNUMX万ドルを提供している

航空3日前

JetBlueがエクアドルのフライトでイースタン航空に反撃

サイバーセキュリティ3日前

マサチューセッツ州のサイバーセキュリティの学位—学校選択のガイド

サイバーセキュリティ5日前

ギャンブルのウェブサイトのブロックを解除する方法は?

航空4日前

ユナイテッド航空は危機を利用してラテンアメリカのネットワークを多様化

リップルのXRP価格
Blockchain5日前

チャート:リップル(XRP)が緑色に変わる、これがブルズが2ドルを目指すことができる理由です

Blockchain4日前

OdotettavissaのMitentekoälyäkäytetäänvideopeleissäjamitätulevaisuudessa

Blockchain4日前

DOGEの共同創設者が価格上昇の背後にある理由を明らかにする

Blockchain5日前

南米最大のEコマース企業が7.8万ドル相当のビットコインを貸借対照表に追加

Blockchain5日前

ビットコインには実存的な脅威はない、とマイケル・セイラーは言います

サイバーセキュリティ4日前

米国と英国がIT管理会社SolarWindsに対する攻撃を発表

Blockchain5日前

カルダノ(ADA)が米国を拠点とするKrakenExchangeでライブステーキング

未公開株式4日前

この夢の仕事は、会社のダイムでラスベガスでギャンブルをするためにあなたにお金を払うでしょう

Fintech4日前

スペインのフィンテックPecunpayは、企業プログラムの発行におけるリーダーとしての地位を強化します

Blockchain3日前

「プライバシーは、ユーザーが大切にしなければならない「特権」です」:Elena Nadoliksi

Blockchain4日前

SEC会長は、暗号市場は詐欺を防ぐための規制が必要であると述べています

トレンド