読了: 約 24 分
フロントの技術について英語の記事をシェアされていて、気になったので理解を深めるために翻訳してみました。
英語の記事では、28から始まるのですがややこしいので、1はHTMLからはじめていきたいと思います。
DANGER!!!WARNING!!!はじめに
元記事はこちら
※間違った意図や誤訳をしている箇所が多々あると思いますが、その点ご了承くださいませ…。
初めてということでしょっぱい訳で、すみません…。
概要
- 1 1. avoid inline code / インラインコードを避ける
- 2 2. styles up top, scripts down bottom(styleは上でscriptは下に)
- 3 3. minify your html / HTMLの縮小
- 4 4. try out async and defer / 非同期や遅延を試す
- 5 5. minify your stylesheets / stylesheetの圧縮
- 6 6. combining multiple css files / 複数のCSSファイルを結合する
- 7 7. don’t use the universal selector / ユニバーサルセレクタは使用してはいけない
- 8 8. preferover @import/
- 9 9. think about (and rethink) your key selector / キーセレクタを考える・再考
- 10 10. load 3rd party content asynchronously / 非同期にサードパーティをロードする
- 11 11. cache array lengths / キャッシュ配列の長さ
- 12 12. avoid document.write/ document.writeを避ける
- 13 13. minimize repaints and reflows / 再描画と反復を最小限に抑える
- 14 14. minify your script / scriptを圧縮する
- 15 15. combine multiple js files into one/ 複数のファイルを一つに統合
- 16 16.always use the latest version of jquery / 常にjQueryの最新バージョンを使用
- 17 17. selectors
- 18 18. take advantage of method chaining / メソッドチェーンを利用する
- 19 19. use for instead of each/ eachの代わりにforを使う
- 20 20. don’t use jquery…/ jqueryを使用しない…
- 21 21. use css sprites/ css spriteを使用
- 22 22. data uri
- 23 23. don’t scale images in markup / マークアップで画像を拡大しない
- 24 24. optimize your images/ イメージの最適化
- 25 25. enable smart caching / スマートキャッシュを有効にする
- 26 26. gzip
- 27 27. diagnosis tools: your best friend / 診断ツール：あなたの親友
- 28 28. that’s it for today!
1. avoid inline code / インラインコードを避ける
1.
<style></style>
や
<script></script>
をHTMLに直接書く
2.
<link rel="stylesheet" href="" /> <script src=""></script>
として外部から呼び出す。
最初のオプションはインライン化してHTTPリクエスト数は削減されるが、
実際にはHTMLのドキュメントサイズが大きくなる。
しかし、あなたが小さいアセットやリクエストするコストをより良くしたい場合この方法は有効です。
この場合、実際にスピードに本当に有益かを評価するためテストを実行する。(した方がよい)
作成するページやそのページのユーザーの目的に応じて使い分けていただきたい。
例えば一時的なキャンペーンでユーザーが一度しかこない事が予想される場合は、
インラインコード化は、HTTPリクエスト数を減らすのに役立つ。
2. styles up top, scripts down bottom(styleは上でscriptは下に)
stylesheetsをhead内に入れる時、ユーザーのロードを速くして、レンダリングが徐々にされている。
それらをページの最後に入れる時、CSSがダウンロードされて適用されるまでスタイルなしでレンダリングされる。
一方では、JavaScriptを扱うとき、CSSがロードされ、実行されている間、
彼らはレンダリングブロックとしてページの下部にスクリプトを配置することが重要。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Browser Diet</title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head> <body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body> </html>
3. minify your html / HTMLの縮小
読み取り可能なコードを維持するためには、コメントを記述し、インデントを使用することをお勧めする。
<p>Lorem ipsum dolor sit amet.</p> <!-- My List --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
しかし、ブラウザにとってはどれも実際に重要ではない。
このような理由から、それは自動化されたツールを使ってHTMLを縮小化することが有用。
>便利なツール:HTML Compressor.
4. try out async and defer / 非同期や遅延を試す
これらの属性は、パフォーマンス向上のための有用な方法を説明するために、
それらを使用しないときに何が起こるかを理解する方が良いでしょう。
<script src="example.js"></script>
この方法では、ページが完全に任意の次のHTMLを解析してレンダリングできるようになる前に、ダウンロードした解析および実行されるスクリプトを待たなければならない。これは大幅にあなたのページのロード時間を増やしてしまう。
時にはこの動作が望まれるかもしれないが、一般的ではない。
<script async src="example.js"></script>
ページの残りの部分は解析ために続けている間にスクリプトが非同期でダウンロードされる。
スクリプトはできるだけ早くダウンロードが完了したように実行されることが保証される。
<script defer src="example.js"></script>
上記の例のように、スクリプトが非同期でダウンロードされる。
しかし、ページが完全に解析されたときにのみ実行される。
5. minify your stylesheets / stylesheetの圧縮
読み取り可能なコードを維持するためには、コメントを記述し、インデントを使用することをお勧めする。
しかし、ブラウザにとってはどれも実際に重要ではない。
このような理由から、それは自動化されたツールを使ってCSSを縮小化することが有用。
これは高速ダウンロード、解析と実行、その結果ファイルサイズ、からバイトを削る事ができるでしょう。
Sass、stylusのようなプリプロセッサを使用している方については、
コンパイルされたCSSの出力が縮小されるように設定することが可能です。
> 便利なツール: YUI Compressor, CSS Minifier e cssmin.js.
6. combining multiple css files / 複数のCSSファイルを結合する
スタイルを維持するためのもう1つのベストプラクティスは、モジュラー·コンポーネントにそれらを分離すること。
<link rel="stylesheet" href="structure.css" media="all"> <link rel="stylesheet" href="banner.css" media="all"> <link rel="stylesheet" href="layout.css" media="all"> <link rel="stylesheet" href="component.css" media="all"> <link rel="stylesheet" href="plugin.css" media="all">
しかし、HTTPリクエストは、これらのファイル（ブラウザが並列に限られた数のリソースだけをダウンロードできる）のそれぞれに必要。
<link rel="stylesheet" href="main.css" media="all">
ファイル数が少ないと、リクエストの数が少なく、より速いローディングページになる。
両方の長所を知ってしたいですか？ビルドツールを使用してこのプロセスを自動化します。
> 便利なツール: Grunt.
7. don’t use the universal selector / ユニバーサルセレクタは使用してはいけない
ページ内のすべてのHTML要素、それぞれにルールを適用した後に
ブラウザを強制的にユニバーサルセレクタを使用することは避けてください。
* {
margin: 0;
padding: 0;
border: none;
text-decoration: none;
outline: 0;
}
特定の属性だけには何の影響も与えない、そんな要素が多くあるでしょう。
このような理由から、我々はあなたがCSSのリセットを使用したり、独自のルールを用いる事をお勧めする。
> 便利なツール: Yahoo! Reset, Normalize and Eric Meyer’s Reset.
8. preferover @import/
stylesheetsの外部呼び出しの方法は２つある
<link rel="stylesheet" href="style.css">
もう一つは@importを使用する方法
@import url('style.css');
外部スタイルシートを二番目のオプションを使用すると、ブラウザは他のアセットのダウンロードをブロックすることができます。またそれらの資産を、ダウンロードすることができなくなる。
9. think about (and rethink) your key selector / キーセレクタを考える・再考
キーセレクタはCSSの鍵となります。彼らが実際にどのように動くのかわからないので、
一般的に、開発者はこれに焦点を当てていない。
header nav ul li * { /* Bad */ }
header nav ul li a { /* Worse */ }
nav a { /* Bad */ }
nav a.nav-link { /* Better */ }
nav .nav-link { /* Better */ }
.nav-link { /* Better */ }
10. load 3rd party content asynchronously / 非同期にサードパーティをロードする
今までyoutube videoやtweet/likeボタンを埋め込まなかった人はいますか？
大きな問題は、これらのコードは、常にユーザーの接続、またはそれらがホストされているサーバーへの接続のいずれかによって、効率的に配信されないということです。またはこのサービスが一時的にダウンしたり、
ユーザーや、これらの会社のファイアウォールによってブロックされている可能性があります
サイトのロードが悪化し、それが重要な課題となることを避けるために、
ページ全体の読み込みをロック常に非同期でこれらのコードをロードする（またはフレンドリーiFrameを使用）。
var script = document.createElement('script'),
scripts = document.getElementsByTagName('script')[0];
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);
> 参考ビデオ: comparison of a normal page vs a page where an inaccessible 3rd party content is loaded.
11. cache array lengths / キャッシュ配列の長さ
ループは間違いなく、JavaScriptのパフォーマンスに関連する最も重要な部分の1つ。
各反復が効率的に行われるように、ループ内のロジックを最適化する。
これを行う一つの方法は、カバーされる配列のサイズを格納することなので、
ループが繰り返されるたびに再計算する必要はない。
var arr = new Array(1000);
for (var i = 0; i < arr.length; i++) {
// Bad - size needs to be recalculated 1000 times
}
for (var i = 0, len = arr.length; i < len; i++) {
// Good - size is calculated only 1 time and then stored
}
>注意：モダンブラウザエンジンが自動的にこのプロセスを最適化するものの、
依然として残るレガシーブラウザに合わせて、調整していくこと。
document.getElementsByTagName（ ‘a’）とすることにより、
例えば生成されたノード（ノード·リスト）のリストなどのHTML内のコレクションに対する反復処理では、
特に重要。
これらのコレクションは”live”とみなされ、すなわち、
それらは自動的に彼らが所属する要素の変化があるときに更新される。
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
// Bad - each iteration the list of links will be recalculated to see if there was a change
}
for (var i = 0, len = links.length; i < len; i++) {
// Good - the list size is first obtained and stored, then compared each iteration
}
// Terrible: infinite loop example
for (var i = 0; i < links.length; i++) {
document.body.appendChild(document.createElement('a'));
// each iteration the list of links increases, never satisfying the termination condition of the loop
// this would not happen if the size of the list was stored and used as a condition
}
12. avoid document.write/ document.writeを避ける
document.writeの使用は、戻りのページへの依存関係が完全にロードされる。
この（悪い）練習は、開発者が何年も廃止しているが、
しかし、いくつかのJavaScriptファイルの同期フォールバックのように、使用が依然として必要な場合がまだある
HTML5 Boilerplateは、例えば、GoogleのCDNが応答しない場合、
ローカルでjQueryをロードするとき、この手法を使用しています。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"></script>')</script>
>注意：window.onloadイベント中または完了後に実行するdocument.writeは、現在のページの全ての内容を置き換えます。
<span>foo</span>
<script>
window.onload = function() {
document.write('<span>bar</span>');
};
</script>
最後のページの結果は予想通りバーだけではなく、foobarになるだろう。
window.onloadイベントの後に実行されたときにも同じことが起こる。
<span>foo</span>
<script>
setTimeout(function() {
document.write('<span>bar</span>');
}, 1000);
window.onload = function() {
// ...
};
</script>
setTimeoutメソッドによってwindow.onloadイベントの後に実行された場合の結果は、
前の例と同じになります。
13. minimize repaints and reflows / 再描画と反復を最小限に抑える
特定のプロパティまたはエレメントが変更されたときにDOMを再レンダリングする
のいずれかのプロセスがあるときに再描画や再フローが引き起こされます。
再描画は、要素の外観は、そのレイアウトを変えずに変更されたときにトリガされます。
ニコール·サリバンは、background-colorを変更するようなスタイルの変化としてこれを説明しています。
彼らはそのような要素の幅を変更する際に、
ページレイアウトを変更することによって引き起こされるので、リフローは、最もコストがかかる。
両方のリフローとリペイントは避けるべきであることに疑いの余地はない。
var myList = document.getElementById("myList");
for (var i = 0; i < 100; i++) {
myList.innerHTML += "<span>" + i + "</span>";
}
var myList = "";
for (var i = 0; i < 100; i++) {
myList += "<span>" + i + "</span>";
}
document.getElementById("myList").innerHTML = myList;
つまり、あなたは一度だけこれを行うと、DOMのループの反復ごとの操作を避けることができる。
14. minify your script / scriptを圧縮する
CSSのように、読みやすいコードを維持するためには、コメントを記述し、インデントを使用することをお勧めします
BrowserDiet.app = function() {
var foo = true;
return {
bar: function() {
// do something
}
};
};
ブラウザにとっては重要ではない。
このため、常に自動化ツールを通して、JavaScriptを縮小化すること。
これはファイルサイズからバイトを剃り、高速なダウンロード、解析と実行をもたらす
> 便利なツール: YUI Compressor, Google Closure Compiler and UglifyJS.
15. combine multiple js files into one/ 複数のファイルを一つに統合
スクリプトのメンテナンスのためのベストプラクティスは、
モジュラー·コンポーネントにそれらを分離すること
<script src="navbar.js"></script> <script src="component.js"></script> <script src="page.js"></script> <script src="framework.js"></script> <script src="plugin.js"></script>
HTTPリクエストは、これらのファイル（ブラウザが並列に限られた数のリソースだけをダウンロードできる）のそれぞれに必要
<script src="main.js"></script>
だからあなたのJSを組み合わせる。ファイル数が少ないと、リクエストの数が少なく、
より速いローディングページになる
両方の長所を持ってしたい？ビルドツールを使用してこのプロセスを自動化する
> 便利なツール: Grunt.
16.always use the latest version of jquery / 常にjQueryの最新バージョンを使用
コアjQueryチームは、常に既存のアルゴリズムより良いコードの読みやすさ、
新しい機能と最適化により、ライブラリに改善をもたらしている
このため、常にローカル·ファイルにコピーしたい場合は、ここで常に利用可能であるjQueryの最新バージョンを使用するsuru
http://code.jquery.com/jquery-latest.js
あなたは、テストする機会があった前に新しいバージョンが自動的にあなたのサイトに提供されるようにしてしまうと
それが将来的に問題を起こす事がある。
代わりに、あなたが具体的に必要とするjQueryの最新バージョンにリンクする
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
>バーニースティンソンが言うのと同じように、”新規は常に優れている”：P
17. selectors
セレクタはjQueryの使用されている最も重要な課題の一つ。
DOMから要素を選択するための多くの方法がありますが、それはその方法が同じパフォーマンスを出すという意味ではない、
children（）、find（）を同じようにclass、IDやメソッドを使って要素を選択できる。
それらのすべての中で、ネイティブのDOM操作に基づいているためIDは、最速の一つ
$("#foo");
18. take advantage of method chaining / メソッドチェーンを利用する
セレクタを再指定する必要がなく、右にjQueryのメソッドを実行できることを意味。
ほぼすべてのjQueryのメソッドはjQueryオブジェクトを返すことによって、チェーンを実現。
$("#object").addClass("foo").css("border-color", "#ccc").width(200);
テストでは、連鎖が遅くなる可能性があります.
$("#object").addClass("foo");
$("#object").css("border-color","#f0f");
$("#object").width(200);
19. use for instead of each/ eachの代わりにforを使う
ネイティブJavaScript関数の使用は、ほぼ常にjQueryでのものよりも実行速度が速いという結果になる。
このような理由から、代わりにjQuery.each法を使用するのではなく、forループJavaScriptの独自のものを使用。
しかし、多くの場合それはjQuery.eachより悪い動きをするのでネイティブであっても、注意を払う。
ループのテストでは、繰り返しを行なっているコレクションの長さをキャッシュすることで、
スピードアップするためことができる
for ( var i = 0, len = a.length; i < len; i++ ) {
e = a[i];
}
forループの反復whileと反復の使用は、コミュニティ内のホットな話題であり、頻繁に繰り返しの最速形として引用される。
しかし一般的に少ない事例であるため、判断を避けている
※先ほどまでこちらの訳が【eachの代わりにforを使うではなく、forの代わりにeachを使う】になっていました…恥ずかしい…
20. don’t use jquery…/ jqueryを使用しない…
ない…それは絶対に必要だ。 🙂
時々、vanilla JavaScriptはjQueryよりも簡単である
なぜIDを検索するATTR（）メソッドを使用するのか？
$('a').on('click', function() {
console.log( $(this).attr('id') );
});
あなたはこれを通して、ネイティブにこの属性を得ることができる場合：
$('a').on('click', function() {
console.log( this.id );
});
And it’s faster.
21. use css sprites/ css spriteを使用
画像をグルーピングしてファイルを単一にする方法
結果として、あなたは劇的にHTTPリクエストの数を減らし、ページ上の他のソースの潜在的な遅延を回避できた。
スプライトを使用する場合は、画像の間にあまりにも多くの空白を残さない。これは、ファイルのサイズには影響しませんが、メモリの消費量に影響を与える
スプライトを知っておくと、ほぼ全員にもかかわらず、この技術は広く使われている、
おそらくされていないスプライトを生成する自動化ツールを使用していない開発者のために。私たちは、これであなたを助けることができるいくつかを強調してきました。
スプライトを自動生成するツールが開発者の間であまり知られていませんが、これは非常に助かるでしょう。
> 便利なツール: SpritePad, Compass, SpriteMe and Sprite Cow.
22. data uri
データURIは、通常を指すことになりURIのコンテンツをインライン化する方法。
この例では、ページをロードするために必要なHTTPリクエストの数を減らすために、
CSSの背景画像の内容をインライン化するように使用している
before
.icon-foo {
background-image: url('foo.png');
}
after
.icon-foo {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D');
}
IE8から、すべてのブラウザでは、このbase64でエンコードされた技術をサポートしている
CSS spritingメソッドの両方は保守であることが時のツールを構築する必要がある
このメソッドは開発時に個々のファイルに画像を保持しているため、
手動spritingの配置を必要としないという利点を持っている
しかし、あなたは大きな画像があればかなりのHTML/ CSSのサイズが大きくなる欠点がある
それはサイズのオーバーヘッドは、HTTPリクエストの数を最小限に抑えることから,得る速度の向上を否定するかもしれないように、HTTP要求時には、HTML/ CSSをgzippingされていない場合、このメソッドを使用することは推奨しない
> 便利なツール: mod_pagespeed and data: URI Generator.
23. don’t scale images in markup / マークアップで画像を拡大しない
常にイメージの幅と高さの属性を定義する。
これは、レンダリング時に不要な再描画や再フローを回避するために役立つ
<img width="100" height="100" src="logo.jpg" alt="Logo">
開発者が気付いていないと、不必要なキロバイト数十がネットワーク経由で送信されるということ
なかれ心を保つ：HTMLで画像の幅と高さで定義することができるが、大きな画像を縮小するために、これを行うべきであるという意味ではありません。
24. optimize your images/ イメージの最適化
Web上で画像ファイルに対しての役に立たない情報が多くある。
たとえば、JPEG写真はカメラ（日付、カメラのモデル、場所など）からExifメタデータを持つことができる
PNGは色、メタデータ、および時にはミニチュア埋め込まれたサムネイルに関する情報が含まれている
ブラウザで使用されなければ、ファイルサイズの肥大化を引き起こすことはない
> 便利なオンラインツール: Kraken.io, Smush.it, TinyPNG, JPEGmini.
> 便利なデスクトップツール: ImageOptim (Mac), RIOT (Windows), ImageAlpha (Mac).
pngout、jpegtranの、gifsicleの、imgoptおよび多くのような様々なコマンドラインツールも用意されている
25. enable smart caching / スマートキャッシュを有効にする
あなたのページからの要求を最適化するための最良の方法は、要求を行うことがないこと
不必要なリクエストを避けるために最も有用な方法の一つは、ブラウザのキャッシュの使用できるようにすること
デフォルトでは、ブラウザがファイルをキャッシュするにはどのくらいの期間を決定するために残される
しかし、ファイルがキャッシュに保持される正確な時間を制御することができる
このタイプの構成は、サーバー上で行われる（そして、あなたが持っているサーバーの設定に依存する）
Apacheで、たとえば、htaccessファイルに以下の設定を追加することができる
false">ExpiresActive On ExpiresByType image/gif "access plus 6 months" ExpiresByType image/jpeg "access plus 6 months" ExpiresByType image/png "access plus 6 months" ExpiresByType text/css "access plus 6 months" ExpiresByType text/javascript "access plus 6 months" ExpiresByType application/javascript "access plus 6 months"
CSS、JS、画像それを少なくとも1ヶ月はそれらをキャッシュすることをお勧めする
他のサーバも同様に設定することができる
覚えておきたい重要なことは、一度キャッシュすること、ブラウザがもはや新しいファイルを要求しないこと
ファイルの内容を変更する必要がある場合は、期待する方法では動作かもしれません
新しいバージョンを送信するために、我々はファイルの名前を変更する必要がある
これを行う一つの方法は、ファイル名にバージョン管理やタイムスタンプのいくつかのフォームを追加する
たとえば、代わりにhome.jsのあなたは家庭v1.jsを使用することができるし、ファイルを更新する必要がある場合など、家庭v2.jsに名前を変更する
キャッシュの無効化のもう一つの一般的な形式は、URLにGETパラメータを使用すること：
？home.jsをV = 1とhome.js vは= 2。この方法は、インターネット上でいくつかのプロキシはGETパラメータを無視するが、必要なときにそれらのキャッシュをバストすることができないとなるキャッシュ·ルールに準拠しているファイルの名前を変更するという欠点がある
26. gzip
GZIPは、ユーザのブラウザにネットワーク経由で送信する前に、サーバー上のデータを圧縮し、それはユーザーのために、その場でデコードしている。
それを小さくして、送信する前にファイルを圧縮する。
すべてのモダンブラウザとサーバーは、GZIPをサポートしている。
AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/javascript
多くの一般的なサーバーでは、シンプルな設定でセットアップできる(自分のドキュメントを調べてください)、
これは、ページのパフォーマンスを向上させるための最も効果的なヒントの一つ
27. diagnosis tools: your best friend / 診断ツール：あなたの親友
あなたがWebパフォーマンスの世界に進出したいなら、
YSlowととPageSpeed拡張機能をあなたのブラウザにインストールする事が重要
それは今からあなたの親友になるだろう
あなたがオンラインツールを好む場合は、HTTP ArchiveまたはPageSpeedサイトをWebPageTestを見ると良い
一般に、各サイトのパフォーマンスを分析し、
あなたのサイトにあなたが潜在的な問題を解決するために非常に貴重なアドバイスをすると同時に、
質の高いレポートを作成する
28. that’s it for today!
このガイドを読んだ後、あなたのサイトがシェイプされている事を願っています
また、アプリケーションのパフォーマンス·チューニングはやりがいのある挑戦ですが、
すべての開発の唯一の根拠であってはならない – 費用と便益を比較検討する必要がある
→ 答えは毎回変化しているという意味(補足)
もっとお知りになりたいですか？
このガイドを書くのに使用した参考資料を公開します
提案がありますか？ @ zenorochaにtweetするか、またはGithubにpull requestを送ってください。
お友達と共有することを忘れないでください
皆さん高速なWebを作っていきましょう O /