画像ファイルのキャッシュ有効化と最適化

公開日: 2015/02/18 SEO WEB制作

前回のJavaScript広告表示の非同期読み込みや遅延処理に続きPageSpeed Insightsでの評価を良い点数にしておこうと作業中です

PageSpeed Insightsで分析するとMobile Friendly Test(モバイルフレンドリーテスト)の分析結果も同時に教えてくれるのはいいですね

さて、今回は画像のブラウザキャッシュと最適化(リサイズ・縮小)です



画像のキャッシュ有効化

画像キャッシュの有効化については多くの方が対応済みなのではないでしょうか
僕は8割はやってませんでしたので今さらながら、画像のキャッシュ有効化を進めて行きたいと思います

画像のキャッシュ有効化1 .htaccess
ExpiresActive On
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/ico "access plus 1 months"
ExpiresByType image/x-icon "access plus 1 months"
画像のキャッシュ有効化2 .htaccess
<ifmodule mod_expires.c>  
<filesmatch ".(jpg|gif|png|ico)$">  
ExpiresActive on  
ExpiresDefault "access plus 1 months"  
</filesmatch>  
</ifmodule>

どちらかを指定しています
.icoはなんかわかんないからimage/icoとimage/x-icon両方…


画像の最適化、リサイズ・縮小処理

サーバー負荷の事もあり割と気にしてコンテンツを作ってきたのですが
まー、ひっかかる事、ひっかかる事…

分析すると『画像を最適化!』『画像を最適化!』連呼されます

画像処理のほとんどはサーバーへのアップロード時にPHP GD libraryを使ってリサイズしていますが、PageSpeed Insightsの分析結果では実際に表示する時の画像ピクセルサイズより元画像のピクセルサイズの方が大きい時点で『画像を最適化!』と言われ減点対象となってしまいます

理解は出来るのですが、それではブラウザやCPUが性能向上してきた意味、高画質動画ファイルでもへっちゃらという時代に今さらサムネイル画像ごときに何を…とも思ってしまいます

とわいえ、分析結果を見る限り結構な減点対象となっているようですのでね
サムネイル画像が並ぶ仕組みで枚数的にも一度ダウンロードして処理できそうなコンテンツを手始めに画像の最適化を試してみました

1ページ20枚ほどのサムネイル画像の表示ですが改めて確認してみると確かに微妙に遅い気がしました
平均、20KBほどのサムネイル達ですが画像ピクセルサイズは実際に表示しているサイズの縦横それぞれ倍近くあります
面積でいうと4倍ですかね、確かに削り幅はありそうです

『Caesium Portable』という良さげな画像圧縮フリーソフトがあったので使ってみました
http://www.fosshub.com/Caesium-Image-Compressor.html

インターフェースは設定なくとも日本語になります
ただ、languageフォルダ内の59.日本語.qmというファイル名が文字化けしていて日本語に変換されませんでした
59.から始まるファイル名を59.日本語.qmにリネームすればOKでした

インターフェイスはこんな感じです


対象ファイルはフォルダごと一括リストアップでき、リサイズ後は同じファイル名で元フォルダに上書き、同じファイル名で指定フォルダに保存、違うファイル名で保存など
リサイズするサイズも個別・一括で指定でき、Jpeg品質調整、ファイル形式・拡張子変更なども可能です

※PNGファイルやBMPファイルなのに拡張子だけJPEGファイルにして使っている場合など(多くの画像表示ソフトやブラウザはそれでも表示できる)は、そのファイルだけエラーを吐きます
拡張子を戻してから放り込みましょう、僕みたいなおっちょこちょいさんは注意です

操作は説明が必要ないほどに簡単

さて、このソフトを使って一気にリサイズしました
平均20KBあったファイルサイズも3KBまで減りました

サーバーにアップしてPageSpeed Insightsで再分析
見事に『画像を最適化!』の一覧から対象ファイルが消えて大幅に評価点もアップしました

まあ、2ページ目を見たら4KBまで削ったサムネイル画像が1枚だけ『画像を最適化!』言われてましたけど…
まだ言うかwww

あとは、Google Adsence様の広告が『画像を最適化!』言われてますね
お前ほんとブーメランwww



とりま
画像ファイルのキャッシュ有効化と最適化、他のコンテンツも処理していかないとですねー
  • ?±??G???g???[?d????u?b?N?}?[?N???A

0 件のコメント :

コメントを投稿