あなたのサイトのjpeg画像は過剰品質である。多分。 - Qiita
はじめに Webサイト掲載用のjpeg画像の品質設定を絞り込むためのツールを作りました。 imagemin-parameter-report また、ツールの動作イメージを掴むためにデモページを用意しました。とりあえず触ってみてください。 Demoページ この記事は、このツールとその使い方、そしてチェックシートを利用して、WEBサイト構築の初期段階でjpegの品質設定を絞り込む手法を共有するためのものです。 なお、このリポートツールで扱うのはあくまでWebサイトに掲載する一般的な画像です。また、作業の最終目的はサイトの高速化です。 jpegの品質問題 画像ファイルはWebサイトの総転送量と表示時間に非常に大きな影響を与えます。しかし、jpegの品質設定を詰める作業は以下の理由で難しくなります。 人手が足りない jpegの品質設定はプロジェクトのなるべく早いうちに決めるべきです。少なくともプロ
静的サイトをとにかく高速化する話
自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。 画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。 手法 適用しやすさを順に手法を並べると、以下のようになります。 遅延する 圧縮する キャッシュする まとめて削る 遅延する サイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。 まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
