これら6つのテクニックを適用して、ビジネスサイトのモバイル読み込み速度を向上させましょう

• 2人に1人は、ページが2秒以内にロードされると予想しています。
• ページがモバイルデバイスにロードされるまでに3秒以上かかると、訪問の53％が放棄される可能性が高くなります。
• 46％の人が、モバイルデバイスでWebを閲覧している間にページが読み込まれるのを待つのに不快感を示しています。

モバイルインターネット上のサイトを減速させる3つの主な要因は、サーバー要求の数、ファイルサイズ、およびページ読み込み要素の順番です。それで今我々は原因を強調しました。解決策を見てみましょう。

モバイルサイトの速度を上げる方法

サーバーの応答時間を測定して最小化する

モバイルページの速度はコードに依存するだけでなく、サーバーと呼ばれる重要な技術ツールにも依存しています。

サーバーがブラウザ要求への応答を待つ時間が長いほど、デバイスへのページの読み込みが遅くなります。 Googleのほとんどの専門家はあなたのサーバーが送信を開始することをお勧めします1^セント より最適な結果を得るための要求から200ミリ秒以内に1バイトのリソース。

通常、サーバーの応答時間の短縮には、主に3つの方法があります。

• Webサーバーの設定やソフトウェアを改善する。
• ホスティングサービスの範囲と質の向上、特に十分なメモリとCPUリソースの確保。
• Webページに必要なリソースの数を減らします。

CSSを使用して画像を読み込む

モバイルユーザー用にコンテンツ画像を非表示にする場合は、CSSを介してそれらを背景画像として読み込み、メディアクエリを使用して条件付きで非表示にします。

この手法の変形は、条件付きでデバイス固有のイメージをロードするためにAmazonによって使用されます。

モバイルページの速度を向上させるためにリダイレクト数を最小限に抑える

リダイレクトは、Webサイトの訪問者をあるページから別のページに自動的に移動させることができる指示に他なりません。

各リダイレクトは貴重なミリ秒を使い果たす可能性があり、その結果ページの読み込みが遅くなります。モバイルデバイスはデスクトップユーザーよりも信頼性の低いネットワークに依存していることが多いため、これはモバイルデバイスにとって特に問題となります。

この問題を解決するための最初のステップは、リダイレクトマッパーなどのツールを使用して、サイト上のリダイレクト数を調査することです。この数が大きすぎる場合は、最小化するか、理想的には最良の結果を得るためにゼロまで減らします。

JSファイルとCSSファイルの縮小

データが多いほど、ページの重さが増えます。これにより、モバイルデバイスにページが読み込まれるまでに時間がかかります。

そのため、精巧な価値のあるほとんどのWeb開発者は、ページの読み込み速度を上げるためにアセットを最適化および最小化する必要性を知っています。

「縮小」は、ページの表示に影響を与えずに冗長性を排除します。 Googleのさまざまなツールを使用すると、次のようなものを含むこのような冗長性を排除できます。

• CSSNano（CSS用）
• UglifyJS（JS用）

画像の代わりにCSS3を使う

影を落としたり、角を丸めたり、グラデーションを塗りつぶす - これらの機能はすべて、画像ではなくCSSを使って実行できます。

これはHTTPリクエストの数を減らすのに非常に役立ち、同時にロード時間をスピードアップします。

JPEGの代わりにインラインSVGを使う

データURIと同様に、SVG（スケーラブルベクトルグラフィック）をページに埋め込んでHTTP要求の数を減らすことができます。

これらのファイルは、Inkscape、Adobe Illustratorなどのベクトルグラフィックエディタで作成できます。作成したら、テキストエディタで開いてコードにドロップできます。

注：スタイルシートにSVGを埋め込むには、まずそれをデータURIに変換してから次のステップに進む必要があります。

多かれ少なかれ物事をまとめるように。あなたが良い、そして啓発的な読みを持っていることを願います。

Shutterstockによる写真