ブラウザのレンダリングとスタイルシートについて

パフォーマンス CSS HTML

スタイルシートのダウンロードや実行が終わるまで、ブラウザはレンダリングをブロックする。そのため、スタイルシートの配信やダウンロードを最適化することは、ウェブサイトのパフォーマンス向上につながる。この記事では、スタイルシートのダウンロード…

requestIdleCallback を使って優先度の低い処理を後回しにする

ブラウザ内部で行われる処理は、基本的にシングルスレッドで行われる。そのため、処理に時間がかかるタスクがひとつあると、後続のタスクの処理がその分だけ遅れることになる。この「タスク」には、JavaScript の実行も含まれるし、画面の描画、ユーザーの…

パフォーマンス HTTP

ウェブサーバが配信するリソースのサイズは、ウェブサイトのパフォーマンスを左右する重要な要素。画像や動画を最適化するのと同様に、テキストリソースのファイルサイズも削減することで、パフォーマンスによい影響を与える。圧縮したテキストリソースを…

HTTP Deno パフォーマンス

ウェブサーバは、キャッシュに関する情報をレスポンスヘッダに含めることで、そのレスポンスで返したリソースをどのようにキャッシュすべきかをウェブクライアントに指示することができる。ウェブクライアントはその指示に基づいた処理を行う。この記事では…

ES2015+ HTML パフォーマンス

現代の主要なブラウザでは、ES Modules（以下、ESM）を利用することができる。つまり、import文やexport文を使った JavaScript ファイルを、トランスパイルすることなくそのまま使えるということである。モジュールシステムをそのまま使えるので、複数のフ…

パフォーマンス JavaScript HTML

ウェブベージで JavaScript ファイルを読み込むためには<script>タグを使うが、その際にasync属性やdefer属性を設定することができる。そして、これらの属性を使うかどうかで、ウェブベージの表示速度や JavaScript ファイルの実行順序に違いが生まれる。この記事…

読書パフォーマンス

ウェブに関するネットワーク技術について網羅的に扱った書籍。 TCP や UDP のようなトランスポートプロトコルの話から、WebSocket や WebRTC のようなブラウザで使える API まで、幅広く扱っている。 www.oreilly.co.jp 読書メモは Gist に置いた。『ハイパ…

React Redux パフォーマンス

コンポーネントの再レンダリングを適切に抑制していくことが、React アプリのパフォーマンス改善の基本。コンポーネントの再レンダリングが発生する要因はいくつかあるが、「親の再レンダリングによって発生する子の再レンダリング」については、以下の記事…

React パフォーマンス

パフォーマンス・チューニングには、「こうすれば必ず上手くいく」という方法論や銀の弾丸はなく、地道に試行と計測を繰り返すしかない。しかしだからこそ、基本的な考え方や仕組みを理解することが大切であり、それがなければ、どのように対処していけばい…