CSSやJavaScriptの手動最小化方法 #JavaScript

今や、minifyツールやpackerがありますが、
今は何かといってWebは肥大化の道を進んでしまっています。

それらのツールを使用したとしても、基本的な
手動圧縮方法を見直してみましょう。

1バイトでも圧縮するために

CSS

数字を見直す

1000 または 100 を使用するなら、999、99 を使用して、問題なければ使用する

0.9 (.9) を使用するなら 1を使用してみて、問題なければ使用する

なお、辞書系の圧縮がかかる場合、逆に 999 等を使用せず、素直に 1000 を使用したほうが良い場合があります。

クラス名、ID名を短くする

今はわかりやすいように長い名前が使われることがありますが、クラス名やID名は短くしましょう

HTML で指定された深い要素を使用しない

section.contents h3 .item

を

.item でよければ、これだけで済ましてみます。

可能な限り要素名で使用する

要素名は、例えば

特に、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バイトでも節約できれば、利用者の携帯電話（スマホ）のちょっとした低減にもつながりますし、もちろん、小さくした分高速化します。

CSSやJavaScriptの手動最小化方法

CSS