「パフォーマンスチューニングのために普段からできること」〜なぜ突然システムが遅くなるのか？ISUCON優勝者が語る計測と推測のリアリティ 〜 - KAKEHASHI Tech Blog
カケハシでの社内講演に、さくらインターネット株式会社の藤原俊一郎氏（@fujiwara）をお招きしました。「パフォーマンスチューニングのために普段からできること」というタイトルで、具体的な失敗談や現場の思考プロセス、そしてチューニングの本質についてお話しいただきました。 社内向けの場ではありましたが、貴重なお話をお伺いできたため、ご本人の許可を得て外部向けにまとめました。 当日は、前半を講演編、後半を対談編として構成し、対談パートにはカケハシのテックリードである松山も参加しました。 講演編：「パフォーマンスチューニングのために普段からできること」 なぜパフォーマンス問題は突然「死」を呼ぶのか グラフが改善したりISUCONで勝ったりする瞬間は「ものすごく楽しい」ものですが、一方で現在進行形でサービスが死んでいる状況は「めっちゃ楽しくない」ものです。長年育てたサービスが落ちることは、「自分の
Largest Contentful Paint（LCP） | Articles | web.dev
Largest Contentful Paint（LCP） コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Largest Contentful Paint（LCP）は、知覚される読み込み速度を測定するための重要な、安定した Core Web Vitals 指標です。ページの読み込みタイムライン上で、ページのメイン コンテンツが読み込まれた可能性が高いポイントをマークします。LCP が速いほど、ページが有用であることをユーザーに安心していただけます。 これまで、ウェブページの主なコンテンツが読み込まれてユーザーに表示されるまでの時間の測定は、ウェブ デベロッパーにとって課題でした。load や DOMContentLoaded などの古い指標は、ユーザーが画面に表示される内容と必ずしも一致しないため、適切に機能しません。また、First Contentfu
パフォーマンス モニター パネル | Chrome DevTools | Chrome for Developers
パフォーマンス モニターを使用すると、サイトの読み込みとランタイムのパフォーマンスをすばやく把握できます。 概要 [パフォーマンス モニタ] パネルには、パフォーマンス指標をリアルタイムでグラフ化するタイムラインが表示されます。指標をクリックして、表示または非表示にします。次に、アプリの操作に応じてグラフがどのように変化するかを確認します。 パフォーマンス モニターは、次の指標を追跡します。 CPU 使用率。 JavaScript ヒープサイズ。 ページ上の DOM ノード、JavaScript イベント リスナー、ドキュメント、フレームの合計数。 1 秒あたりのレイアウトとスタイルの再計算。 パフォーマンス モニタ パネルを開く [パフォーマンス モニタ] パネルを開くには: DevTools を開きます。 次のキーを押してコマンド メニューを開きます。 macOS: Command+S
ウェブサイトのパフォーマンスを測定するときに平均値ではなくパーセンタイル値を採用するべき理由
ウェブサイトやAPIの応答時間を短くすることはユーザー体験につながるだけでなく、Google検索で上位に表示されやすくなるなど多数のメリットをもたらします。そうした「速度」の改善活動を始める際に目標にすべき指標として、応答時間の平均値ではなくパーセンタイル値を採用するべき理由について時系列データベースの「TimescaleDB」の開発者であるデビット・コーンさんがブログにまとめています。 How percentile approximation works (and why it's more useful than averages) https://blog.timescale.com/blog/how-percentile-approximation-works-and-why-its-more-useful-than-averages/ 多数のデータを集めた時に、そのデータの特徴を
ウェブサイトのパフォーマンスを劇的に改善した詳細な方法が公開中
ウェブサイトのユーザー体験を表す指標「コアウェブバイタル」がGoogleの検索結果ランキングに反映されることから、ウェブサイトは内容の充実とともにパフォーマンスもますます重視されるようになっています。ウェブ関連の情報を扱うSmashing Magazineのヴィタリー・フリードマン氏は、低下していたSmashing Magazineのパフォーマンスをどのように改善したかを詳細に語っています。 How We Improved SmashingMag Performance — Smashing Magazine https://www.smashingmagazine.com/2021/01/smashingmag-performance-case-study/ Smashing Magazineがウェブサイトを改善する前の、Google製ウェブサイト監査ツール「Lighthouse」による
社内でフロントエンドのパフォーマンスチューニングコンテストを開催した
フロントエンド/Node.js エンジニアの mizchi です。plaid では新しい分析エンジンのフロントエンド側の技術的な仕様を考えたり、それを実装したりしています。趣味として社内の他のプロダクトのパフォーマンスを勝手に測って、貼り付けていくこともあります。 plaid のエンジニア組織には「組」という制度があって、メインとなるプロダクト以外にも、そのテーマで会社横断で活動するグループがあり、最低一つ所属することが奨励されています。例えばセキュリティ組、バグトリアージ組、Tech 勉強会組などがあります。 最近になって パフォーマンス組を新設しました。これは主にフロントエンドのパフォーマンスを調査して、各プロダクトにその改善を促すグループです。 plaid のフロントエンドは PaaS としての外向けのサードパーティスクリプトと、その管理画面があるのですが、サードパーティの方はパフォ
JavaScriptのexport defaultアンチパターンについて、検証してみた - Qiita
この記事はFringe81 アドベントカレンダー2017の16日目です。 始めに ES6のimport/exportについては ・基本的にexport defaultを使う ・exportする対象が複数あれば、exportを使う ・exportされたモジュールはimportで受け取る ぐらいの雑な理解をしてました。 「基本的にexport defaultを使う」については、Design goals for ES6 modulesにて、以下のように言及されてます。 16.8 Design goals for ES6 modules If you want to make sense of ECMAScript 6 modules, it helps to understand what goals influenced their design. The major ones are: ・D
Strategies for service worker caching | Workbox | Chrome for Developers
Until now, there have only been mentions and tiny code snippets of the Cache interface. To use service workers effectively, it's necessary to adopt one or more caching strategies, which requires a bit of familiarity with the Cache interface. A caching strategy is an interaction between a service worker's fetch event and the Cache interface. How a caching strategy is written depends; for example, i
Image and Video Upload, Storage, Optimization and CDN
Image and Video APIs for Fast, Scalable Media Management Store, transform, optimize, and deliver all your media assets with easy-to-use APIs, widgets, or user interface. CLOUDINARY IMAGE → CLOUDINARY VIDEO → AI-Powered Image & Video Transformation at Scale Transform your image and video workflows with Cloudinary’s Generative, LLM, and Content-Aware AI features. LEARN MORE → TRY OUR GENERATIVE AI D
WebAssemblyはなぜ速いのか | POSTD
本記事はWebAssemblyに関するシリーズの第5回目で、今回のテーマはWebAssemblyが高速な理由です。前の記事をお読みでない方は、 初めから目を通される (訳注:原文リンク)ことをお勧めします。 前回の記事 (訳注:原文リンク)では、プログラミングに WebAssembly あるいはJavaScriptを使うかは二者択一の選択ではないことを説明しました。私たちは、WebAssemblyのみのコードベースを書く開発者が膨大な数になるとは思っていません。 ですので、アプリケーションにWebAssemblyとJavaScriptのどちらを使うか選ぶ必要はありません。しかし私たちとしては、開発者がJavaScriptコードの一部をWebAssemblyに置き換えることを期待しています。 例えば、Reactで開発しているチームは、リコンサイラコード（言い換えれば仮想DOM）をWebAss
リニューアルした日経電子版が高速すぎてヤバイ件｜konpyu
日本経済新聞は国内を代表する経済誌だ。その電子版はwebでの継続課金を大成功させ、いまや50万以上の有料会員を擁するモンスターサイトだ。 その日経電子版が11月6日に全面リニューアルしたのだが、公開後、web業界がにわかにざわついた。表示速度が爆速だったのだ。日経公式もモバイルで2倍の表示速度を達成したと堂々と宣言していた。 webサービスは継続率こそ神KPIで、その継続率には速度が大きく影響する。 これはチェキらないとヤバイと感じ、友人のkitakさんとスピードの秘密を調査してみた。 Fastlyをコンテンツキャッシュに使う殆どのデータはFastlyを経由して取得されていた。Fastlyは最近注目を集めているCDN（世界中にエッジサーバーを配置し、高速にコンテンツを配信するサービス）で、非常に高機能でユニークなサービスだ。 一般に、CDNはいったん世界中にコンテンツをばらまくと、それを無
SpeedCurve by Embrace | Website Performance Monitoring
SpeedCurve is now part of the Embrace family! There are no changes to how you use our products. Our founder Mark shares what this means...
Aerotwist - The Anatomy of a Frame
15 February 2016 I'm often asked by other developers about parts of the pixel workflow, and what fires when and why, so I figured it might be worth putting up a little reference for what's involved in shipping pixels to screen. 10 min Read Time #pixels Share Caveat: this is a Blink / Chrome view of the world. Most of the main thread tasks are "shared" in some form by all vendors, like layout or st
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A Unified Theory of Web Performance
Front End Web Developer | Online Course | Udacity
GitHub - webpack-contrib/cache-loader: [DEPRECATED] Caches the result of following loaders on disk![GitHub - webpack-contrib/cache-loader: [DEPRECATED] Caches the result of following loaders on disk](https://cdn-ak-scissors.b.st-hatena.com/image/square/0d754321a3b9ad3848088385475d55963d26bd2f/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2Fa822ad14dac4b24c5d3d07c86f07396f5eec9f96233d80bf08e5744661aefd81%2Fwebpack-contrib%2Fcache-loader)
GitHub - webpack/thread-loader: Runs the following loaders in a worker pool
How speeding up your mobile site can improve your bottom line
Effective web performance tuning for smartphone
Nik Voss - Three.js simple grass rendering