タグ

ブックマーク / zenn.dev/sekapi (2)

  • 【Chrome DevTools】Performance Insightsでフロントエンドパフォーマンス改善

    はじめに 「サイト表示が 0.1 秒遅くなると、売り上げが 1%減少し、1 秒高速化すると 10%の売上が向上する。」こんな鉄板フレーズがある通り、サイトの表示速度はユーザー体験や売り上げに直結するもので、早ければ早いだけ嬉しいです。 パフォーマンスの問題は小さな問題が絡み合って大きな問題になっていたりして、特定が難しいですが、Performance Insightsを使うと、問題になりそうな部分を簡単に分析することができます。 今回はこの機能を使ってページ読み込みパフォーマンスの問題を計測、改善する方法について書いていきたいと思います。 Performance Insights とは ページ読み込みの分析に特化しているパフォーマンスパネルです。 分析したいページのFCPタイミングやLCPのタイミング、CLSがどこで起きたかなど、Lighthouseの指標に近い目線でページの読み込みを細か

    【Chrome DevTools】Performance Insightsでフロントエンドパフォーマンス改善
  • ChatGPTをぬるぬるにする🐌Server-Sent Eventsの基礎知識

    単方向通信であるということと、HTTP/1.1上で動作しているのが大きな特徴です。 また、HTTP上で動作することから、通信の互換性が高く、セキュリティモデルも使いまわせるので安心です。 どんな用途と相性がいいの? 双方向通信がしたいわけでなければ、相性の幅がとても広いです。 今回の ChatGPT のような、GPT がトークンを生成するごとに送るケースはもちろん、通知の未読件数バッジの更新、ニュース速報の表示など、サーバからイベントを送りたい時ならなんでも使えます。 HTTP/1.1で動くカラクリ SSEはHTTPのレスポンスヘッダにContent-Type: text/event-streamを指定した上で動作します。 SSEが動く流れ クライアントがサーバーに HTTP/1.1 リクエストを送信し、イベントストリームに接続します。 サーバーは、Keep-Alive 接続を使用して、T

    ChatGPTをぬるぬるにする🐌Server-Sent Eventsの基礎知識
  • 1