1

このようなページでは、フェスティバルに出演するアーティストのリストを示しています。小さな画面サイズ (携帯電話など) では、アーティストの画像はメディア クエリ ルールで非表示になります。

@media (max-width: 480px) {
    .artistEntry img {
        display: none;
    }
}

ページのレンダリングを高速化し、ページ上のコンテンツの量を減らすため。ただし、私の知る限り、画像は引き続きダウンロードされるため、小さなデバイスではページの読み込み時間が非常に遅くなります. 小さな画面で画像がダウンロードされないようにする方法はありますか?

4

1 に答える 1

1

背景画像に関する @joe からの提案が気に入っています。それがあなたのサイトに適していない場合は、別のアプローチがアダプティブ イメージです。

ユーザーのビューポートと設定したブレークポイントに基づいて、画像のサイズが自動的に変更されます。それがうまくいく場合は、両方の長所を活用できます...モバイル ユーザー用の画像を保持し、ダウンロードを高速化できます

幸運を！

アップデート

あなたのページを詳しく見てみると、問題の主な原因は大量の画像があり、ページの HTML で画像サイズを定義していないため、ブラウザーはすべての画像サムネイルをダウンロードしてサイズを決定する必要があると思います。ページのレイアウトを開始できます。私のテストでは、ページのレンダリングが開始されるまでに約 12 秒かかりました。

高速化するためのアイデアが 2 つあります。

すべてのアーティストのサムネイルの画像サイズを含めます。これを行うと、ページのレンダリングが早く開始されます。

または、デフォルトですべてのアーティストを表示する代わりに、アイソトープに面倒な作業の一部を任せていただけないでしょうか。デフォルトでヘッドライン アーティストだけを表示した場合、知覚されるページ速度が約 50% 高速化されることは間違いありません。HTMLのこのセクションを変更することで確認できます 

<div class="spacer" id="lineup-filter">
<h4>Filter Lineup by Artist</h4>
<label class="lineup-toggle">
<input type="radio" name="lineup"  id="all-artists">Show All Artists</label>

<label class="lineup-toggle">
<input type="radio" name="lineup" checked="checked" id="headline-artists-only">Show Headline Artists Only</label>

</div>
于 2013-05-20T00:12:11.617 に答える