frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

パフォーマンス向上のためのデザイン設計まとめてみた(画像編)

スポンサードリンク


スポンサードリンク


パフォーマンス向上のためのデザイン設計

パフォーマンス向上のためのデザイン設計

この記事は「パフォーマンス向上のためのデザイン設計」を読んで特に目から鱗系〜今すぐ実践できるものをまとめてみました(画像編)です。

サイトパフォーマンスはユーザエクスペリエンス

まずはじめにページ速度を早くすることがいかに重要かが記されています。

  • ユーザがページ表示に期待する時間は2秒以内
  • 3秒以上になると40%以上が離脱
  • 85%のモバイルユーザがデスクトップと同等かそれ以上の速度で表示してほしい

Webページ応答までの時間
100ms未満:即反応と判断
100~300ms:遅れに気づく
300~1000ms:まだ正常に動作していると判断
1000ms以上:他サイトに切り替えたい

表示遅延をユーザが体験するとGoogleの検索順位が低下する。
高速なサイトは順位も上

画像の最適化

画像は、ページ総容量の大部分を構成する要素である。
HTTPArchive.orgの調査では1701kbのうち1030kbを画像が占める。

  • ファイルサイズと画質の最適なバランスを知る
  • 画像のリクエスト数を減らす
  • サイトの画像作成ワークフローを最適化する
JPEG 写真、色数の多い画像 画質の低下、プログレッシブJPEGとして書き出す、ノイズの軽減
GIF アニメーション ディザリングを減らす、パターンを増やす
PNG-8 色数の少ない画像 ディザリングを減らす、パターンを増やす
PNG-24 半透明 ノイズの軽減、色数を減らす

JPEG

色々なファイルサイズを試してどの圧縮レベルまで下げると劣化が目立つかを知ることは重要。
ベースラインJPEGは上から下へ描画され、プログレッシブJPEGは低解像度で描画され徐々に画質をあげて表示される。
プログレッシブJPEGの方が全体を早く表示するがsafariでは徐々に表示してくれない。

GIF

GIFを採用する判断点

  • 作成した画像のファイルサイズがPNG-8よりGIFの方が小さい時
  • CSS3に置き換えられないアニメーション

ディザリング値を大きくした場合滑らかになるが、容量も増える

PNG

  • 画像に透過性が必要な場合
  • 色数が多い場合はJPEG

WebP、JPEG XR、JPEG2000はパフォーマンスをより最適させるための形式です。

画像圧縮

画像には必ず圧縮ツールをかけよう。
ImageOptim — better Save for Web

スプライト

スプライトの欠点:

  • 修正はファイル全体のキャッシュに影響
  • 不要画像までまとめてダウンロードしてしまう

3.2.2 CSS3
画像をCSSにおきかえ

3.2.3 データURIとBase64エンコード
画像をhtml内にテキストに変換して参照する
データURIの欠点:

  • ファイルのキャッシュ機能が使用できなくなり、CSSが拡大してしまう

3.2.4 SVG
retina、非retinaにも対応。
icoMoonなどのツールはカスタムフォントを作るのに役立ちます。

画像ディレクトリやページを重くしてる装飾をチェックする時間を定期的に儲けることや、スタイルガイドの作成、他の制作者に対し画像の最適化の重要性について助言すること

画像チェック表

  • スプライト内に削除可能な古いアイコンはないか?スプライト可能な新しい画像が追加されてるか?
  • CSS3、SVG、Picturefillなどの最新技術に置き換えられないか?
  • ファイルは出来るだけシンプルで追加で圧縮ツールにかけた状態になってるか。
  • どの画像も適切な高さと幅になっていますか?書き出した時より小さく表示されてないか?