kamanobeのブックマーク - はてなブックマーク

gzip圧縮でCSSやJSなどの転送量を減らす方法

ブラウザに表示するためのデータ転送の際、その内容を圧縮することで転送量を減らし、表示速度を高めるための手法としてgzip圧縮があります。今回はこの方法を解説します。例えば、当ブログの各ページはgzip圧縮に対応していて、本来なら25kbほどのファイルサイズが4kbほどにまで軽量化されています。﹁gzip﹂とは、ファイルを﹁圧縮﹂する方法の1つです。圧縮というのは、独自のデータ形式でファイルサイズを一時的に小さくすること。つまり、ウェブページのサーバーとユーザーのパソコン間で通信しているデータサイズを少なくするのが、今回設定する﹁gzip圧縮﹂の効果なんです。サイズが小さくなることで、ページの表示がより高速になることはもちろん、転送量が減るので利用しているサーバによっては、料金の節約にも繋がります。技術的・専門的な内容については、下記の、t32kさんのページが分かりやすいので、興味のある

kamanobe 2018/06/01

web制作

リンク

Lazy Load(画像の遅延読み込み)を実装する方法

レイジーロード(遅延読み込み)とは、その名の通り、画像を遅れて読み込ませるテクニックのことです。具体的には、ユーザーがスクロールをして、目的の画像が画面内に映るタイミングで、初めて読み込みを実行します。﹁遅れて﹂というよりは、﹁適切なタイミングで﹂と言った方が正確でしょうか。さて、このことはどのような意味を持つでしょうか？転送量の節約ユーザーは訪れたページの全てを見るわけではありません。あなたにも、あるページを訪問して﹁やっぱ止めた﹂とすぐに戻るボタンをクリックして帰った経験はありますよね。基本的に、ブラウザは訪れた時点で、ページの全ての画像を読み込みます。このページに、仮に100枚の画像が掲載されていたとしたらどうでしょうか。ちょこっと訪問されるだけで、毎回、見られてもいない大量の画像の転送が発生してしまいます。余計な転送が発生することで、運営者側にとってはサーバーコストが増える、閲