レスポンシブデザインサイトでモバイルのコンテンツの読み込みを高速化する方法は？
そのため、レスポンシブデザインサイトがあります。調査によると、モバイルデバイスの場合、表示するコンテンツ（グラフィックなど）を少し少なくする必要があり、モバイルのサイトの読み込みを高速化する必要があります。
Cssの一部のページ要素をモバイル用にdisplay：noneに設定した場合、これらのブロックは表示されませんが、これらのブロックのコンテンツがダウンロードに時間がかからないという意味ではありません。だから私たちは隠れてしまいますが、それでも役立っています。
レスポンシブサイトで、ページの読み込み時間を短縮するために、ページ要素のブロックを非表示にし、モバイルユーザーにコンテンツを提供しないようにするにはどうすればよいですか？
コンテンツのブロックがCSSで非表示になっている場合でも、ブラウザーはその要素内のHTMLをダウンロードする必要があります。 Operaを除くすべてのブラウザーも画像をダウンロードします。 （実際、OperaはWebkitに切り替えたため、隠し画像をダウンロードする可能性があります。）
モバイルブラウザーの負荷を減らす最良の方法の1つは、可能な場合はCSS（スプライトなど）で背景画像を使用し、モバイルファーストのレスポンシブデザインを使用することです。これは、モバイルで標準CSSを機能させ、メディアクエリを使用して、逆ではなくlarger画面をターゲットにすることを意味します。標準のCSSに小さい画像を入れてから、大画面メディアクエリで大きい画像に切り替えます。
メディアクエリは、IE9 +を含む最新のすべてのブラウザーで機能します。 IE8以下は世界で6％未満のシェアしか持っていないため、これらのユーザーにモバイルサイトを見せることは私の意見では大きな問題ではありません。
古いIEのサポートが状況で重要である場合、画像のみに対してメディアクエリを使用できます。たとえば、デスクトップサイトを通常どおりに設計しますが、モバイルでの読み込みが速くなる低解像度の画像を使用します。次に、レスポンシブモバイルレイアウトに1つのメディアクエリを使用し、より大きな画面をターゲットにした別のメディアクエリを使用して、より良いバージョンの画像を交換します。
モバイル向けに最適化することは、可能な限り最小のサイズで可能な限り少ないサービスを提供することを簡単に目指すため、デスクトップとほぼ同じです。モバイルでは画面解像度が低いため、デスクトップ解像度の画像は不要であり、適応型画像を見ることができます。つまり、使用しているデバイスに応じて異なる解像度の画像を提供します。これは、適応イメージをサポートする cdn 、 JS Adaptive Images または Zurb Foundationなどのフレームワーク この。
他のすべてについては ページの読み込みを高速化するためのアイデア および他の多くの スピード関連の質問 Pro Webmasters。
サーバー側PHPを使用してモバイルブラウジングを検出し、横向きと縦向きのデバイスのCSS、画像、およびUIパターンを提供します...