今や、minifyツールやpackerがありますが、
今は何かといってWebは肥大化の道を進んでしまっています。
それらのツールを使用したとしても、基本的な
手動圧縮方法を見直してみましょう。
1バイトでも圧縮するために
CSS
数字を見直す
1000 または 100 を 使用するなら、999、99 を使用して、問題なければ使用する
0.9 (.9) を使用するなら 1を使用してみて、問題なければ使用する
なお、辞書系の圧縮がかかる場合、逆に 999 等を使用せず、素直に 1000 を使用したほうが良い場合があります。
クラス名、ID名を短くする
今はわかりやすいように長い名前が使われることがありますが、クラス名やID名は短くしましょう
HTML で指定された深い要素を使用しない
section.contents h3 .item
を
.item でよければ、これだけで済ましてみます。
可能な限り要素名で使用する
要素名は、例えば
- h3
- div
- h6
特に、h で始まる見出しは2文字ですので、HTML側も効率よくなります。
圧縮がかかる場合、nth-child(?) を活用する
ただし、この場合はクラス名やIDを指定しない場合です。
<h4>test</h4>
<div>
<p>aaa</p><!-- p:nth-child(1) -->
<p>bbb</p><!-- p:nth-child(2) -->
<p>ccc</p><!-- p:nth-child(3) -->
</div>
等の場合、活用するとよいでしょう。
JavaScript
変数名、関数名を短めに
単なるループ程度なら、変数が重ならない程度に、1文字にしましょう。
for (var i = 0; i < 10; i++) {}
辞書圧縮がかかる場合、絶対 let は使用しない
ライブラリがletに統一されているなら、letを使用したほうがよいですが、
var がひとつでもあれば、var を使用しましょう。
辞書圧縮がかかる場合、極力 const は使用しない
値が書き換わってしますが、変数の管理をしっかりしてれば、十分に var に代替できます
forループや if 文で <= => を使用しない
for (i = 0; i <= 8; i++) {}
ではなく
for (i = 0; i < 9; i++) {}
にすると、１文字節約できます。
undefined の比較
今は、以下の記述で十分です。
辞書圧縮がかかる場合に有用です。
if(value === undefined) {}
if 文の { } を取り除く
if文の条件一致した中でひとつしか実行しないのであれば、{ } を省略できます。
if (test == 1)
alert("1");
else
alert("no");
うまくすると、; すら省略できる
各種JavaScript類のライブラリに散見されます。
if (test == 1) {
exec1()
exec2()
}
みんなが使ってるフレームワークを極力使用する
例えば、jquery です。
フレームワークを使用することで、みんなが使用しているので
ブラウザのキャッシュから読み出され、高速であるとともに、
文字数が全体的に短くなるので、新たな転送量も少なくなります。
ただし公開cdnを使用しないと意味がありません
packerを使用するとき、JavaScriptをすべて結合する
非常に利用されるcdnを除き、すべてのJavaScriptを順番通り結合しましょう
packerによって辞書化されますので、使用している同じJavaScriptのワードが大幅に圧縮されます。
copy a.js+b.js+c.js release.js
type a.js > release.js
type b.js >> release.js
type c.js >> release.js
cat a.js b.js c.js > release..js
等
さいごに
大した転送量の削減でなくとも、
MTU (1500,1492,1454等）に溢れないように
1 MTU を削減できただけでも、小さな転送速度の改善となります。
例えば、MTUが1500で、1501バイトを転送しようとすると、
最終的に 1500から1溢れたために、3000バイト転送せざるえなくなります。
同じように、1バイトでも節約できれば、利用者の携帯電話（スマホ）のちょっとした低減にもつながりますし、もちろん、小さくした分高速化します。