私は世界で最も才能のあるコーダーではありません。 真実は。 それで、私はできるだけ少ないコードを書くようにします。 私が書くコードが少なければ少ないほど、解読、保守、および説明が必要なコードが少なくなります。

そして、私は怠け者です-ハチミツ、さらにはスプーン（私は記事で食べ物との類推を使うことにしました）。

しかし、Webパフォーマンスを改善する唯一の保証された方法は、より少ないコードを書くことであることがわかります。 縮小しますか？ わかった 絞る？ はい、そうです。 キャッシュするには？ いいですね。 一般的に、最初に他の誰かのコードをコーディングしたり使用したりすることを拒否しますか？ そして今-ブルズアイで！ 入口にあるもの-コレクターが胃液で溶解して消化できたかどうかに関係なく、出口で何らかの形で行く必要があります（おそらく、食べ物の類推を拒否します）。

それだけではありません。 目に見えるパフォーマンスの改善に加えて、同じ量のコードが必要ですが、最初に噛む必要がある（抵抗できませんでした）こともできます。 たくさんの小さな手紙を送っても、大きな手紙を送っても、プロバイダーにとっては問題ではありません。すべてがうまくいっています。

削減したいという願いで、私はこれについて最も気に入っています。最終的には本当に必要なものだけがあり、ユーザーが本当に必要なものだけがあります。 ラテを飲む男の巨大な写真？ 捨てて 左利きのコードを大量に吸い込み、ページのデザインを壊してしまうソーシャルネットワークのボタン？ それらにケツで蹴ります。 右クリックをインターセプトし、カスタムモーダルウィンドウを表示するJavaScriptのこのがらくたですか？ 寒さを入れて！

インターフェイスを壊すのは、ピースを接続するだけではありません。 独自のコードを記述する方法は、コードを削減するための取り組みでも大きな役割を果たします。 ここにいくつかのヒントとアイデアがあります。 以前にそれらについて書いたが、利便性とレスポンシブデザインのコンテキストで。 たまたま、柔軟でユーザーフレンドリーなウェブでは、私たちの側での制御が少なくて済み、壊れにくくなっています。

ワイアリア

まず、WAI-ARIA！= Webアクセシビリティ。 これは、ナレーターのようないくつかの支援技術との互換性を改善するための単なるツールです。 したがって、ARIAの最初のルールは、必要でない限り使用しないことです。

笑：

<div role="heading" aria-level="2">Subheading</div> 

はい：

 <h2>Subheading</h2> 

ネイティブ要素を使用する利点は、多くの場合、独自の動作をコーディングする必要がないことです。 チェックボックスの次の実装は冗長すぎるだけでなく、状態の変更を制御し、属性とGETメソッドを操作するための標準をオーバーライドするJavaScriptにも依存します。 コードは大きく、信頼性が低くなります。 美人！

 <div role="checkbox" aria-checked="false" tabindex="0" id="checkbox1" aria-labelledby="label-for-checkbox1"></div> <div class="label" id="label-for-checkbox1">My checkbox label</div> 

スタイル？ 心配しないで、すべてが制御されています。 もちろん、カスタムスタイルが本当に必要な場合。

 <input type="checkbox" id="checkbox1" name="checkbox1"> <label for="checkbox1">My checkbox label</label> 

メッシュ

3列以上のWebサイトを使用したり読んだりしたことがありますか？ 注意が必要な情報が多すぎます。 「これらのナビゲーションのような部分のどれが実際に必要なナビゲーションだろうか？」 これは修辞的な質問です。次に何をしてサイトを離れるのかわかりません。

もちろん、時には何かを別のものの隣に置きたいことがあります。 たとえば、検索結果などです。 しかし、なぜここにたくさんのライブラリを持ち込むのでしょうか？ Flexboxは、文字通り2つの定義ブロックでこれを行うことができます。

 .grid { display: flex; flex-flow: row wrap; } .grid > * { flex-basis: 10em; flex-grow: 1; } 

これで、すべてが約10em幅に拡大されます。 列の数は、ビューポートに収まるサイズが約10emのセルの数によって異なります。 できた どうぞ ところで、このことについて議論しましょう。

 width: 57.98363527356473782736464546373337373737%; 

この数字は神秘的な割合に基づいていることを知っていますか？ 落ち着きとre敬の念を呼び起こすべきプロポーションは？ いいえ、私はそれについて知りませんでしたし、気にしません。 「ポルノ」ボタンを十分に大きくして、見えるようにします。

くぼみ

私たちはそれを行う方法を知っています。 ユニバーサルセレクターを使用してすべての要素をインデントします。 必要に応じて再定義します。 多くは必要ありません。

 body * + * { margin-top: 1.5rem; } 

いいえ、ユニバーサルセレクタはパフォーマンスを低下させません。 これは異端です。

表示する

単純なページを「ビュー」に分割するために、AngularまたはMeteor全体は必要ありません。 ビューは、他の人が表示されない瞬間に表示されるページの一部です。 これはCSSで実行できます。

 .view { display: none; } .view:target { display: block; } 

「しかし、ビューをロードするとき、単一ページのアプリケーションはコードを実行します！」とあなたは言います。 わかった。 これにはonhashchangeイベントがあります。 ライブラリは必要ありません。リンクは通常の標準であり、ブックマークに追加できます。 これはクールです。 興味があれば、これについてもっと読むことができます 。

フォントサイズ

フォントサイズを微調整すると、 メディアブロックが大幅に膨張する可能性があります。 したがって、これをCSSの手に委ねる必要があります。 1行のコード。

 font-size: calc(1em + 1vw); 

ええと...それだけです。 最小サイズもありますので、モバイルデバイスで読めない小さな文字はありません。

10k離れて

私が言ったように、私は世界で最高のエンコーダーではありません。 私はいくつかのトリックを知っています。 しかし、少し知識があれば多くのことができます。 これが10k Apart競争の本質です。10kb以下で何が達成できるかを見つけ出すことです。 素晴らしい賞品があります。 裁判官として、私は自分で思いつくすべてのクールなアプリケーション、アイデア、および実装の研究を始めるのを待つことができません。 あなたはどう思いますか？