レスポンシブモバイルウェブ開発の読み込み速度。

Question

私はウェブサイトを利用して完全に応答性のあるものにするためにここに準備を進めています。ウェブサイト私はおそらくブートストラップを利用しています。

私はいくつかの研究をしており、素晴らしいリソースを見つけました。しかし、私は負荷の速度とモバイルデバイスに興味があります。例については

---

：

は、2秒転送データの3メガバイトの私のウェブサイトの負荷のデスクトップバージョンを言うことができます。

今私は私の電話に行き、私のウェブサイトに行く。モバイルブレークポイントのバージョンは、3MBのデータをすべて転送してページをロードしますか？

デベロッパーがモバイルであるかどうかによってリクエストサイズを減らし、読み込み時間を改善する方法についてはわかりません。

ブラウザをロードしてモバイルブレークポイントにサイズを変更しても、デスクトップと同じリソースが引き続き使用されると想定します。

私の質問が意味をなさないことを願っています。私はそれをどのように言いたいのか分からない。

私に教えてください！ ありがとうございます。

Answer 1

特に指定しない限り、モバイルブラウザはデスクトップブラウザとまったく同じコンテンツをプルダウンします。

携帯電話で小さい画像をプルダウンするなど、モバイルのページサイズを減らすことができます。これを行う1つの方法は、画面の幅に応じて異なるイメージサイズを指定するHTMLピクチャタグです。 https://www.w3schools.com/tags/tag_picture.asp

<picture> 
    <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> 
    <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> 
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> 
</picture> 

また、迅速にロードするように見えるプルダウンまたは帯域幅のフットプリントを削減するか、ページを作るために、異なるイベントに反応し、画面の大きさに反応するのjavascriptを有することができます。これの例は遅延ロードです。遅延ロードは、DOMがロードされた後でオフスクリーンイメージをプルダウンするjavascriptです。

はここで最後に、ウェブはキャッシュコンテンツをブラウザページ画像https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/

のための怠惰な負荷に大きなガイドです。したがって、スタイルシート、javascriptファイル、またはページ間で共有される画像はすべてデバイスキャッシュに保存する必要があります。これにより、ブラウザが各ページの読み込み時に何度も同じファイルをプルダウンする必要がなくなります。