ウェブサイトやウェブアプリの表示の最適化を求められている昨今。Google の検索エンジンもウェブページの表示の高速化を考慮に入れたり、ウェブサイトのパフォーマンス如何でアクセス数やコンバージョン率、売上に影響を与えつつあり、パフォーマンス向上のため、最適化の必要性が高まっている。

スタイルシートは、HTML5 の普及につれて表現が豊かになりつつあるが、その反面スタイルシートの記述が複雑になり、ファイルサイズも大きくなりつつある。

まず、スタイルシートの最適化に大きく期待できる、2つのポイントを押さえておきたい。

• 複数の外部ファイルをまとめて HTTP リクエスト数を減らす
• スタイルシートファイルを圧縮してダウンロードサイズを減らす

ということで、スタイルシートを圧縮するツールをつくってみた。ファイルをアップロードするか、ソースを貼り付けるだけでスタイルシートを圧縮してくれます。ファイルは複数アップロード可能。

続きを読む "[提供終了]スタイルシートを圧縮するツール「Minify CSS」"

Google のウェブ検索結果でウェブページのスクリーンショットに使われている data URI scheme。

data:[<mediatype>][;base64],<data> 形式のデータ (data URI scheme) を生成してウェブページに埋め込むことで HTTP リクエストを減らせるメリットがある。ただ、バイナリデータより3割ほどデータサイズが増える。

ファイルサイズが小さいアイコンを直接埋め込んだり、ブラウザが PC より対応しているスマートフォンでも使われ出している。ということで、画像のバイナリデータを Base64 にエンコードするツールをつくった。出力形式も HTML の img、CSS、JavaScript、生データに対応。

続きを読む "[提供終了]画像をBase64に変換するツール (data URI scheme)"