search

kagomen / libraku

📚 リブラク | 図書館でのリクエストカード記入をラクにする書籍検索アプリ
https://libraku.pages.dev
1 stars 0 forks source link

画像の読み込み速度の改善 #15

Closed kagomen closed 5 months ago

kagomen commented 5 months ago

ちょっと遅い、気になる Cloudflareの画像配信サービスを使ってみるか？

kagomen commented 5 months ago

画像の読み込み速度を改善するためには、いくつかの方法があります。以下の方法を検討してみてください：

  1. 画像の最適化 圧縮：画像のファイルサイズを小さくするために、圧縮ツール（例えば、TinyPNG、ImageOptim、JPEGmini）を使用します。 フォーマット：適切な画像フォーマットを選択します。例えば、JPEGは写真に適しており、PNGは透明な背景が必要な画像に適しています。WebPは両方の用途で圧縮率が高いフォーマットです。 レスポンシブ画像：srcset属性を使って、異なるデバイスや画面サイズに応じた適切な画像を提供します。
  2. ローディングの工夫 遅延読み込み（Lazy Loading）：画像が表示される直前まで読み込みを遅らせる技術です。Reactでは、react-lazyloadやreact-intersection-observerなどのライブラリを使用できます。 プレースホルダー：画像が読み込まれるまでの間、ぼかし効果のある低解像度の画像や、プレースホルダーの色を表示することができます。
  3. コンテンツ配信ネットワーク（CDN）の使用 CDN：CDNを使用することで、ユーザーに最も近いサーバーから画像を提供し、読み込み速度を向上させることができます。例えば、Cloudflare、AWS CloudFront、Akamaiなどのサービスがあります。
  4. キャッシュの活用 ブラウザキャッシュ：適切なキャッシュヘッダーを設定して、ブラウザに画像をキャッシュさせます。これにより、同じ画像が再度読み込まれる場合の速度が向上します。
  5. 画像のスプライト化 スプライトシート：複数の小さな画像を一つの大きな画像にまとめ、CSSで表示する部分を制御します。これにより、HTTPリクエストの数を減らすことができます。
  6. 次世代フォーマットの利用 次世代フォーマット：WebPやAVIFなどの次世代フォーマットを利用することで、より高い圧縮率と品質を実現します。対応していないブラウザにはフォールバックの画像を提供します。
kagomen commented 5 months ago

書籍のサムネ画像に loading="lazy"をつけてみてもいいかも

kagomen commented 5 months ago

遅延読み込みの欠点とは？ 予想以上に速くリソースが要求される可能性：例えば、ユーザーがページを素早くスクロールした場合、画像が読み込まれるまで待たされる場合があります。これは、ユーザーエクスペリエンスにマイナスの影響を与える可能性があります。

うーん

kagomen commented 5 months ago

Cloudflare Pagesは静的なウェブサイトやWebアプリケーションのデプロイメントに適していますが、Cloudflare R2はエッジコンピューティングやAPIプラットフォームとして使用されます。画像のデプロイメントについては、Cloudflare Pagesが適していますが、動的なコンテンツやAPIエンドポイントの提供にはCloudflare R2が適しています。

kagomen commented 5 months ago

https://qiita.com/teradonburi/items/5b8f79d26e1b319ac44f

kagomen commented 5 months ago

amazon観察してみたら、プレースホルダ使ってた トップ画像に採用してみる

kagomen commented 5 months ago

結果

色々試したけど、簡単で効果が高いpreloadを採用した