TypeScript プロジェクトのコンパイル時間を改善してみた話
TypeScript プロジェクトのコンパイルのボトルネックを調査・解消してみた話 はじめに こんにちは。エンジニアの辻󠄀です。 私は社内のとある TypeScript プロジェクトで開発業務を行っていました。 ある日、新たに関数の実装を追加しようとしたその時、tsserver（TypeScript の language server）による補完候補がなかなか表示されないことに気づいたのです。 どうやら、コンパイルの時間が非常に長くなっていたことが原因のようです。 この記事では、tsc のコンパイルにおけるボトルネックを調査する方法と、そこで適用した２つの改善方法について紹介します。 コンパイル時間が低下する原因はプロジェクトの性質によって大きく異なるため、ここで述べる改善方法が任意のプロジェクトに有効だとは言えませんが、少なくとも調査方法については役に立つのではないかと思います。 ボト
Web パフォーマンスとプロダクト KPI の相関を可視化する話 2022ver - ドクターズプライム Official Blog
@1000ch (id:hc0001) です。技術顧問業としては広報周りの戦略を考えていることが多いのですが、今日はエンジニアリングの話です。 ドクターズプライムのプロダクト開発の中でも、パフォーマンス上の課題を発見して改善に取り組むことがあります。今回は @oinume (id:oinume) さんから 「この辺りの実装が問題になっていそう…」 という相談があったので、私がアプリケーション全体を眺めてボトルネックになっている箇所をいくつかピックアップし修正方針を提案したのですが、 実装を修正する前に 「まずは継続的にモニタリングできる環境を準備してパフォーマンスの前後がわかるようにしましょう」 ということで原点回帰した話です。 Core Web Vitals でリアルユーザーモニタリング パフォーマンス指標とプロダクト KPI の選定 リアルユーザーモニタリングと合成モニタリング データ
How Do Chrome Extensions Impact Browser Performance? | DebugBear
Key findings of the 2021 report: Popular extensions like Honey, Evernote Web Clipper, and Avira Browser Safety can have a significant negative impact on website speed On ad-heavy websites, ad blockers and privacy tools can greatly improve performance As the performance impact varies between different websites, five different pages were included in the test: a simple test page, apple.com, toyota.co
ChromeとFastlyのEarly Hintsの効果計測に貢献する — HACK The Nikkei
この記事は Nikkei Advent Calendar 2020 20 日目の記事です。 日経電子版 Web チームの阿部です。今回は HTTP/2 の目玉機能の 1 つであった Server Push の事実上の終焉と、現在 Chrome チームや Fastly 社が実験中の 103 Early Hints について、日経電子版 Web での取り組みを紹介させていただきます。 HTTP/2 Server Push HTTP/2 Server Pushは HTTP/2 で策定された、一言で言ってしまうと「必要なリソースがリクエストされる前にサーバーからクライアントに送ってしまおう」という技術です。 これによりクライアントがリクエストするリソースを先回りしてサーバーが送ることで、必要なリソースが揃うまでにかかる時間を短縮できるため、パフォーマンスの向上が期待されていました。 Server
特定の端末のみで起こる WebView プチフリーズを Tracing を利用して追った話 - SmartNews Engineering Blog
こんにちは、スマートニュース株式会社の紀平です。 SmartNews のアプリ内では、最近 WebView を使った機能を多数公開しております。そのうちの一つにショッピングチャンネルという機能があるのですが、今日はそのショッピングチャンネルのタイムセール枠で以前発生した、謎のプチフリーズ問題の調査手法をご紹介します。 tl;dr 特定の Android 端末でプチフリーズが発生した 再描画領域を減らすことで現象は改善した Chrome の Tracing 機能を利用し、ブラウザのソースコードまで参照して、ついに根本原因まで突き止めた タイムセールで起こった問題 タイムセールは、SmartNews のショッピングチャンネル内において WebView で提供されている、期間限定のお得な商品をアグリゲーションした機能です。EC サイト各社のご協力の上にご提供しております。内部は HTML5 で開
Chrome Dev Summit 2018に参加しました！ - 一休.com Developers Blog
この記事は一休.comアドベントカレンダー2018の1日目です。 こんにちは。レストラン事業本部の西村です。 11月12、13日にサンフランシスコで開催されたChrome Dev Summit 2018に参加しました。 今年はChromeが10周年ということで、この10年で変わったこと、これからについての話で始まりました。 2日に渡って行われた22のセッションの中で、特に注目した点について深掘りしていきます。 1日目のセッション 1日目は現在提供している技術について、具体的な事例を交えながら紹介されました。 VisBug VisBugは、hoveringとKeyboard shortcutsでブラウザ上でサイトの画像を差し替えたり、一部のコンテンツの内容やスタイルを変更できるChrome extensionです。 ブラウザ上でちょっとしたスタイル修正や画像の入れ替えをしてデザイン決め、とい
お前らのReactは遅い - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 煽りタイトルですみません。 最近、Reactのプロジェクトのページを動かしていて、 もっさりしてる（レンダリングの負荷が高いな）と思ったので どうやったら無駄なレンダリングを減らせるか思考錯誤したことをまとめました。 preactとか別ライブラリの話はしません。 よかったらこちらもどうぞ ReactJSで作る今時のSPA入門（基本編） 2019年07月06日追記： ブラウザのレンダリングの仕組みに関して良記事があったので先に一読しておくことをおすすめします。 良記事１：実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起
【Deprecated】フロントエンドパフォーマンス分析 はじめの一歩 - Qiita
【Deprecated】新しく Web パフォーマンス分析の概観という記事を書き直しました。 Webパフォーマンス Advent Calendar 2017 8日目です。 私がフロントエンドのパフォーマンスを始めて4ヶ月程経ちました。 フロントエンドにおけるパフォーマンス分析を行うにあたり、学んでおくべきことの概要としての記事を書いておきたいと思います。 尚、フロントエンドとは言うものの、どちらかというと「フロントエンドからわかること」を分析する、という方向性なので、改善策自体はバックエンドやインフラストラクチャーの部分になる場合もあります。 分析と計測の方法 ウォーターフォールチャート ウォーターフォールチャートというのは、Chrome DevTools の Network タブにあるアレです。開発手法のアレとは特に関係ありません。 ウォーターフォールチャートを確認することで、どのファイ
パフォーマンス計測に困らない！tracing活用術100 - Qiita
本記事ではChrome内蔵のプロファイリングツール、tracingの活用方法を紹介する。 本記事は私の個人的な意見に基づき書かれております。私の所属する組織、団体には一切の関係はありません。 はじめに Chromeは誕生以来、常に最速のブラウザを目指して開発されてきた。しかし処理速度を向上させようと頑張ると、うっかりメモリ使用量や電力消費量を犠牲にしてしまう可能性がある。特にAndroidのような携帯端末ではメモリや電池寿命の制約が強く、あらゆるデバイスで最高の使い心地のChromeを目指す上では、これらのトレードオフを実際のデータで深く理解した上で開発の意思決定をする必要がある。 このような背景から、処理速度・メモリ使用・電力消費をはじめ、あらゆるパフォーマンスデータを時系列で統合的に理解出来るように開発されたのがChrome内蔵プロファイリングツール、tracingである。 多機能が故
日本の新聞サイトから学ぶパフォーマンスの現在
パフォーマンスはすべてに関わる課題 パフォーマンスは利用者体験を向上するだけでなく、ビジネスにもプラスになります。コンテンツと同様、パフォーマンスはデザイン、エンジニアリング、ビジネスすべてに関わる重要な課題です。それを裏付ける事例をたくさん見つけることができます。 表示に 3 秒待たせることで 40% の利用者が離脱してしまう（Gomez） 表示速度を 68% 改善したことで、コンバージョン率が 7% 向上した（Ancestory.com） 4 秒遅くなったことでページビューが 11% 低下。20秒遅くなると 44% 低下した（Telegraph） サイトパフォーマンスを向上することで、ユーザープロフィールのインプレッションとスクロール率が上がった（Instagram） ショッピングサイトではパフォーマンスが 2 秒改善することで、離脱率が半分にまで減った（Radware） SEO にも
ブラウザの描画関連プロファイリングツールと利用方法 - Qiita
Developer Toolsの下部、ハンバーガーボタンから"Rendering"を選択すると表示される。 項目 Paint Flashing 表示中のDOM要素内でリペイントを行う必要がある要素を緑色のボックスのオーバーレイで示す Layer Borders Compositing Layerとtileを表示する Compositing Layer: オレンジ/オリーブ色 tile: シアン FPS Meter 現在のFrame RateとGPUラスタライズの有効状況、GPUメモリの状況を表示する Scrolling Performance Issues スクロールのレスポンスを阻害するようなEvent Listenerやスクロールの度に再描画される要素があれば画面内に表示する Emulate CSS Media CSSのMediaタイプをprint/screenと切り替える Layer
HTTP2 を前提とした HTML+CSS コンポーネントのレンダリングパス最適化について | blog.jxck.io
Intro Chrome が予定している <link rel=stylesheet> の挙動の変更について、 Google Chrome チームの Jake が、興味深いブログを上げている。 The future of loading CSS この内容は、単に Chrome に対する変更だけではなく、 HTTP2 によって変化する最適化手法と、それを最も活かすための HTML, CSS の構成についてのヒントがある。 今回は、この内容を意訳+補足解説し、本サイトに適用していく。 HTTP/1.1 時代の CSS HTML 自体がコンポーネントを意識した作りになっている場合は、自然と CSS も class などを使いコンポーネント単位に作ることができるだろう。 しかし、 HTTP/1.1 では、リクエストの数を減らすために全ての CSS を 1 つ(もしくは少数個)に結合する最適化が主流だ
Kazuho's Weblog: ウェブページの描画 (first-paint) までの時間を測定するツールを作った件、もしくはHTTP2時代のパフォーマンスチューニングの話
ウェブページの描画 (first-paint) までの時間を測定するツールを作った件、もしくはHTTP2時代のパフォーマンスチューニングの話 ウェブページの表示までにかかる時間をいかに短くするかってのは、儲かるウェブサイトを構築する上で避けて通れない、とても重要な要素です。 少し古いデータとしては、たとえば、ウェブページの表示が500ミリ秒遅くなると広告売上が1.2%低下するというBingの例なんかも知られているわけです。 「ウェブページの表示までにかかる時間」と言った場合、実際には以下のようないくつかのメトリックがあります。 イベント 意味
サイトの高速化を難しく考える前に – cat /dev/random > /dev/null &
ここ最近いくつかのサイトを見ていて、アレ？妙に重くない？とDevTools等を見てみたらいろいろな問題点を見つけました。 例えばベースページが重いというのもあるのですが、単純にリソースが大きすぎる、ヘッダがおかしい等少しの工夫で閲覧をする人たちは快適になるだろうというのを思いました。 正直なところ今回記述する内容はいろんなサイトや書籍では触れられてはいるのですが、サイトを見回って共通で考慮が漏れていて、余りサイトに変更を加えずに効果がでそうなのを纏めてみました。 そのページを見るのにどれだけのダウンロードが必要ですか？ 最近はPC環境もモバイル環境もより強力になり、リッチなコンテンツをストレスなく見ることが可能になりました。 マシンスペックやブラウザの高速化等いろいろありますが、ラストワンマイルのNW帯域が改善したのが大きいと個人的には感じています。 しかし、それに甘えて不必要なリソースを
Firefox 38の性能を検証 ゲーム・プラットフォームとしての優秀さを示す - Mozilla Flux
当ブログでは、延長サポート版（ESR）のメジャーアップデートが行われる時期をFirefoxの開発の区切りとみて、Web上で実行可能なベンチマークの測定結果を公開している。Firefox 38のリリースを目前に控え、今回はこれを中心に、Firefox 2431およびChrome 42と比較してみたい。 検証を行った具体的なバージョンを挙げると、32bit版のFirefox 31.6.0（ビルドID：20150325203137）およびFirefox 38.0 RC1（ビルドID：20150503173159）、それに64bit版のChrome 42（バージョン：42.0.2311.135m）である。Googleが一般ユーザー向けに64bit版Chromeを提供し、そこで性能の向上を謳っている以上、これに目をつぶって32bit版で揃えてもフェアではないだろうと判断した。 動作環境についてだが、
HTML5 Experts.jpはなぜこんなにパフォーマンスが悪いのか…全てお見せします！ーWebパフォーマンス改善企画（解析編）
ちなみに後日談…計測対象の個別記事ですが、計測のためのアクセスがかなりの頻度あるため、PVランキングでは常に1位を独占していました（笑）。また、Google Analyticsについても、計測開始前に除外設定しておかないと、正確なデータが得られなくなりますので、ご注意下さい。 計測して問題点を洗い出す ファーストバイトダウンロードタイムの遅延問題 ということで、竹洞さんに一定期間サイトのパフォーマンスデータを計測してもらいました。その結果を見ながら、早速現在のHTML5 Experts.jpの問題点を洗い出します。 竹洞：これがある日の、ブロードバンド回線でChromeを用いてアクセスした時の計測結果です。 見ての通り、ID1のhtmlの取得にすごく時間がかかっていることがわかります。この水色は、ファーストバイトダウンロードタイム（Time To First Byte、以下、TTFB）とい
DevTools: State Of The Union 2015
As the complexity of the web apps you build keeps moving, so do the Chrome DevTools. In DevTools State of the Union, Addy will give you the latest update on your favourite companion; exploring new features like paint profiling, animation inspection and updates to the JavaScript editing workflow with V8. * Note: these are annotated slides aimed at making it easy to read and follow along with what I
Shibu's Diary: JavaScriptのメモリリークを10倍速で発見する
渋日記@shibu.jp 渋川よしきの日記です。ソフトウェア開発とか、ライフハックを中心に記事を書いていきます。 メモリリーク。一言でプログラマを死に追いやる恐怖の言葉。C/C++の世界ではmallocしたのにfreeしないとかのケアレスミスでよく起きていた問題です。その後、ガベージコレクタが掃除してくれるプログラミング言語が増え、一部の言語で循環参照に気をつけるぐらいであまり気にしなくても良い的な風潮になっています。 というものの、そうとも言ってられなくない状況も増えてきています。クラウドのスケールアウトブームも一段落というかコモディティ化し、go言語で再び性能向上方面に関心が寄せられたり、日本でErlangの勉強会が満席になったり、スケールアウトから再びスケールアップ方面に話題が移りつつあるのを感じます。長時間稼働のサーバで、スケールアップしてさらに数多くのリクエストを大量に受けるよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
V8 Stats in Chrome
GitHub - paulirish/automated-chrome-profiling: Node.js recipes for automating javascript profiling in Chrome
