HTTP/2.0にするとWEBサイトが速くなるというのはまやかしだとわかった。
ただ、デモを見るとたしかに早くなっている・・・。
そもそもHTTP/1.1は６ファイルのブロッキング制御が仕様になっている事が原因でHTTP/2.0はそれを任意個数まで引き上げることができる。
たしかに、ヘッダ情報が減っていて無駄は無くなっているので転送容量は少なくなっているはずなのだが、サーバーに問い合わせする個数が変わるわけではないので、実際のサーバー負荷は変わらないと考えてもいいだろう。
そんな矛盾を解消するには、HTMLページ内の「サーバー問い合わせファイル数を減らす」、「データ転送容量を減らす」という事をするのが効果的だろう。
画像ファイル数を減らす方法
とりあえず、そうした時のターゲットは画像ファイルと思われる。 出来る限りHTML１ファイル内で記述できる、またはJSのソースコードで出力できる形が望ましいので、今回はCSSでアイコンを書いて細かなファイル数を減らしてみたいと考えた。 ピクトグラムのような画像は、ドット絵のようなピクセル単位の画像よりは、ベジェ曲線のような、ライン描画の方が圧倒的に軽いはず。 SVGでもいいのだが、出来る限りファイル数を減らすという事が今回の目的だ。Closeボタン
ページ内で動的なコンテンツなどのサイトの場合、エレメントやオブジェクトを非表示にする時によく使われる「閉じるアイコン」のCSSを作ってみたので、サンプルとしてソースコードを掲載しておく。ソースコード
<style>
.close{
position:absolute;
display:inline-block;
top:0px;
left:0px;
width:32px;
height:32px;
border:0;
background-color:black;
border-radius:32px;
margin:0;
padding:0;
transform:scale(0.5);
cursor:pointer;
}
.close:before{
content:"";
position:absolute;
display:inline-block;
top:4px;
left:13px;
width:6px;
height:24px;
border:0;
margin:0;
padding:0;
background-color:white;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.close:after{
content:"";
position:absolute;
display:inline-block;
top:4px;
left:13px;
width:6px;
height:24px;
border:0;
margin:0;
padding:0;
background-color:white;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.close:hover{
background-color:red;
}
</style>
サンプル
・・・おわりです・・・
0 件のコメント:
コメントを投稿