React v18 には多くの改善や新機能が盛り込まれる予定だが、そのなかでも特に注目を集めると思われるのが、Concurrent Features と呼ばれる一連の機能。 これらの機能を使うことで、コンポーネントのレンダリングについてより柔軟な設定が可能になり、上手く…

エッジサーバからのレスポンスは速い。 コンテンツを CDN のエッジサーバにキャッシュしてそれを返すようにするだけで、ウェブサイトの速度は目に見えて改善される。 特に、リクエストの度にサーバで動的に生成されるコンテンツの場合、キャッシュを利用する…

去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった…

JavaScript は基本的にシングルスレッドであり、並列処理を行うことはできない。 そのため何か重たい処理があると、それによってメインスレッドが専有されてしまい、後続の処理が遅延してしまう。 その結果、ウェブアプリの速度や操作性に悪影響を与えてしま…

先日 Deno のv1.9がリリースされ、HTTP/2 に対応したサーバを立てられるようになった。 deno.com zenn.dev この記事では Deno で実際にサーバを立てながら、HTTP/2 の特徴を見ていく。 動作確認は以下の環境で行った。 Deno1.9.0 Google Chrome90.0.4430.72 …

この記事の内容は、React のv17.0.2で動作確認している。 React コンポーネントが入れ子になっているとき、親のコンポーネントが再レンダリングされると、子のコンポーネントも再レンダリングされる。stateの受け渡し等があるかどうかは関係ない。 そのため…

Lighthouse の Performance スコアを52から94に上げた。 Before。 After。 施策として具体的に何を行ったのか、書いていく。 経緯 以前、Shape Painter という SPA を作った。 構成はシンプルで、エントリポイントはひとつだけ。そしてそこで、ライブラリの…

JavaScript や TypeScript を使ってウェブアプリを提供する場合、開発時はimportやexportなどの ES Modules を使い、公開時はファイルをバンドルして公開することが多い。 以下の記事に書いたように、現在の主要なブラウザは ES Modules に対応してものの、…

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

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

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

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

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

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

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

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

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