SpeedVitals - Website Speed Test & Monitoring
Select the HTTP Version to be used with this test. HTTP/2 is the default option and is recommended. Learn more Select this option if your website requires HTTP Authentication for access. The provided username & password will not be saved in our servers and you will need to enter it each time. Learn more Simulated throttling loads the page normally and later estimates the impact of throttling and a
エンジニア約100人が大集合し、チューニングバトルを展開 久々のリアル開催で絆も深まった「株式会社リクルート 社内ISUCON 2023」
「久しぶり！ 今、何してるの？」 「うわー、やっと会えたね。はじめまして」 ——2023年8月31日、「株式会社リクルート 社内ISUCON 2023」が開催されたリクルート本社の最上階の会場であるアカデミーホールでは、そんな会話が飛び交いました。 社内ISUCONは、Webサービスのチューニングバトル「ISUCON※」に触発され、リクルートグループ横断で行われているイベントです。1〜3名でチームを組み、コンテスト形式で、Webサービスの高速化に取り組みます。競うことでフロントエンドやデータベース、クラウドといったWebサービスを支える技術の学びを加速させるとともに、部署や世代の壁を越えて社内エンジニアの交流を図ることを目的にしています。 ※「ISUCON」は、LINEヤフー株式会社の商標または登録商標です 国内のエンジニアや学生が参加するISUCONは今年で13回目を数えますが、リクルー
詳解 システム・パフォーマンス 第2版
本書は、エンタープライズとクラウド環境を対象としたオペレーティングシステムとアプリケーションのパフォーマンス分析と向上について解説します。 主にLinuxベースのオペレーティングシステムに含まれるツールとその使用例を通じてシステムパフォーマンスを引き出す手法を説明します。システム評価のためのベンチマーク、キャパシティプランニング、ボトルネックの解消について解説しスケーラビリティを制限する要因を発見、分析し、解決する方法を学びます。 第2版では、perf、Ftrace、BPFの解説が加わり、Linuxとクラウドコンピューティングについての説明が充実しました。 システムのパフォーマンスを向上させ、コストを削減し、レイテンシの外れ値を減らすための方法を学ぶ本書はエンジニア必携の一冊です。 まえがき 1章 イントロダクション 1.1 システムパフォーマンス 1.2 職種 1.3 作業 1.4 分析
kintone フロントエンド刷新においての Web パフォーマンス方針 - Cybozu Inside Out | サイボウズエンジニアのブログ
kintone フロントエンド刷新プロジェクトリーダーの @koba04 です。この記事では kintone フロントエンド刷新プロジェクトにおける Web パフォーマンス方針について紹介します。 kintone フロントエンド刷新プロジェクト（フロリア）とは プロジェクトの現状 なぜ Web パフォーマンスに取り組むのか Web パフォーマンスと生産性 kintone においての Web パフォーマンス 誰もが利用可能にするための Web パフォーマンス Core Web Vitals をメトリクスの中心に Core Web Vitals とは ローディングのパフォーマンス インタラクティブ性 レイアウトの安定性 なぜ Core Web Vitals を計測するのか SpeedCurve を活用した計測 Web パフォーマンスに取り組みやすい状態を作る これから 参考 kintone フ
Web パフォーマンスとプロダクト KPI の相関を可視化する話 2022ver - ドクターズプライム Official Blog
@1000ch (id:hc0001) です。技術顧問業としては広報周りの戦略を考えていることが多いのですが、今日はエンジニアリングの話です。 ドクターズプライムのプロダクト開発の中でも、パフォーマンス上の課題を発見して改善に取り組むことがあります。今回は @oinume (id:oinume) さんから 「この辺りの実装が問題になっていそう…」 という相談があったので、私がアプリケーション全体を眺めてボトルネックになっている箇所をいくつかピックアップし修正方針を提案したのですが、 実装を修正する前に 「まずは継続的にモニタリングできる環境を準備してパフォーマンスの前後がわかるようにしましょう」 ということで原点回帰した話です。 Core Web Vitals でリアルユーザーモニタリング パフォーマンス指標とプロダクト KPI の選定 リアルユーザーモニタリングと合成モニタリング データ
Improving Core Web Vitals, A Smashing Magazine Case Study
At Smashing, we’ve struggled with amber Core Web Vitals score for a while. Then after 6 months we finally managed to fix it. Here’s a little case study on how we detected and fixed the bottlenecks, and how we ended up with green scores, all the way. “Why are my Core Web Vitals failing?” Many developers have been asking themselves that question lately. Sometimes it’s easy enough to find the answer
Web Performance Metrics Cheatsheet | bitsofcode
I recently gave a talk on “Making Sense of Performance Metrics” at the Web Unleashed Conference, and it was suggested that I turn the breakdown of all the performance metrics into a cheatsheet; so here it is! The full cheatsheet, including a downloadable PDF version, are at the bottom of the page so feel free to skip to that. Four Questions # In a web.dev article on "User-centric Performance Metri
Using Modern Image Formats: AVIF And WebP — Smashing Magazine
In this article, we’ll highlight how modern image formats (AVIF or WebP) can improve compression by up to 50% and deliver better quality per-byte while still looking visually appealing. We’ll compare what’s possible at high-quality, low-quality and file-size targets. We’ve recently published Addy’s Image Optimization book with everything you need to know about images, how to compress, serve and ma
パフォーマンスの文化を創る | POSTD
Webパフォーマンスの向上は、コンバージョンの改善と利益の増加につながります。これに関しては極めて多くのケーススタディが存在しており、テクノロジーの専門知識を持たないプロダクトマネージャーでさえこの事実を知っていることも珍しくありません。それでは一体なぜ、最後の差し迫った緊急事態に至るまで、場合によっては顧客のネガティブなフィードバックが殺到し、Webサイトのパフォーマンスの悪さが浮き彫りになるまで、パフォーマンスへの取り組みは後回しにされることが非常に多いのでしょうか？ 私は幸運にも、それぞれ独自の背景と課題を有する幅広いプロジェクトのパフォーマンス面に長年取り組むことができました。しかし、経験を積むにつれて、私はほとんどの時間をコードの最適化ではなくプロセスの最適化に費やすようになりました。私は元々ソフトウェア開発者なので、コードを精査してボトルネックを発見し、別の選択肢を提案・実装し
Improve the Performance of your React Forms
Forms are a huge part of the web. Literally every interaction the user takes to make changes to backend data should use a form. Some forms are pretty simple, but in a real world scenario they get complicated quickly. You need to submit the form data the user entered, respond to server errors, validate the user input as they're typing (but not before they've blurred the input please), and sometimes
Core Web Vitals によるビジネス インパクト
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
useCallbackはとにかく使え！ 特にカスタムフックでは - uhyo/blog
Reactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的にはReact.memo、useMemo、そしてuseCallbackです。 React.memoで囲まれた関数コンポーネントは、propsが以前と変わっていない場合に再レンダリングが抑制されます。 また、useMemoやuseCallbackは、関数コンポーネント内での値の再計算を抑制する効果を持ちます。 これらは最適化のためのツールなので、「過度な最適化」を避けるように啓蒙する言説がよく見られます。 すなわち、ちゃんと本当に最適化のために必要なところにだけこれらを使おうということです。 特に、React.memoはpropsが以前と変わっているかどうかを判定するためのオーバーヘッドがあるし、useMemoやuseCallbackもフック呼び出しのオーバーヘッドがあります。 意味がないところでReact.memo
【LINE証券 Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。この記事は【LINE証券 FrontEnd】シリーズの4番目の記事です。 最近のWeb Vitalsの隆盛を受けて、LINE証券のフロントエンドでもパフォーマンスの改善に取り組み始めました。およそ2週間ほど改善に取り組んだ結果として、開発環境での計測ではLighthouseのperformanceスコアが従来より30点ほど上昇しました。 パフォーマンス改善のためにさまざまな施策を行いましたが、この記事ではその中でも興味深かったものとして、requestIdleCallbackを活用してLazy Loadingされるコンポーネントの読み込みを遅延し、その結果初期レンダリングにかかる時間を約14%削減できた事例をご紹介します。 環境 以前の記事でご紹介したとおり、LINE証券のフロントエンドはTyp
Maximally optimizing image loading for the web
In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. I'll present them in the form of an annotated HTML example to make it easy for folks to reproduce the results. Some of these techniques are more established, while others are somewhat novel. Ideally, your favorite mechanism for pub
DevTools の起動時間の短縮 | Blog | Chrome for Developers
DevTools の起動が約 13% 高速化 🎉?（11.2 秒から 10 秒に） 要約: この結果は、冗長なシリアル化を削除することで実現します。 概要 DevTools の起動時に V8 JavaScript エンジンを呼び出す必要があります。 Chromium で DevTools コマンドを V8（および IPC 全般）に送信するために使用するメカニズムを、mojo と呼びます。同僚の Benedikt Meurer と Sigurd Schneider は別のタスクに取り組んでいるときに非効率なことを発見し、メッセージの送受信における 2 つの冗長なステップを取り除くことでプロセスを改善するためのアイデアを思いつきました。 mojo メカニズムの仕組みを詳しく見てみましょう。 mojo メカニズム JS コマンドを実行する mojo コマンド EvaluateScript があ
パフォーマンス改善ハッカソン「Web Speed Hackathon Online」を学生向け・社内向けの2回開催しました！ | CyberAgent Developers Blog
パフォーマンス改善ハッカソン「Web Speed Hackathon Online」を学生向け・社内向けの2回開催しました！ こんにちは，テレビ＆ビデオエンターテインメント「ABEMA」で Web エンジニアをしている野口 (@nodaguti) です． 今回は2020年の4月と7月に行ったパフォーマンス改善ハッカソン「Web Speed Hackathon Online」の開催記をお届けします．本イベントは 4/25 – 4/26 で採用イベントとして学生向けに開催されたのち，同じ問題を使って 7/21 – 7/22 に社内イベントとしても行われました．主催・作問を担当した筆者が開催までの流れと当日の様子をお伝えします． なお記事の最後では実際の問題と解説を公開していますのでお見逃しなく！😎（途中ネタバレがあるので，先に問題を解いてみたいという方はページ下部までスクロールすることをお勧
2020 Archives
Table of Contents Introduction What are Beacons? Beaconing Stages Sending Data at Startup Gathering Data through the Page Load Incrementally Gathering Telemetry throughout a Page’s Lifetime Gathering Data up to the End of the Page “Whenever” How Many Beacons? A Single Beacon Multiple Beacons Mechanisms Image XMLHttpRequest sendBeacon() Fetch API Fallback Strategies Payload Limits URL […] More and
ユーザー体験を向上！Yahoo!ニュースにおけるCore Web Vitals対応事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースを担当しているエンジニアの喜楽です。 2020年5月、GoogleよりWebでのユーザー体験を指標化したCore Web Vitalsが発表されました。本記事では、Yahoo!ニュースにおけるCore Web Vitals指標改善の取り組みとその効果についてご紹介します。 Core Web Vitalsとは Webページを閲覧しているときに、コンテンツの表示が遅かったり、スクロールやクリックなどの反応が悪い、レイアウトが読込中に変更され、クリックしたい要素の位置がずれてしまうなどといった経験はないでしょうか。これらはユーザー体験を低下させる一因となります。Core Web Vitalsは上記のような
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
バンドル最適化マニアクス at tfconf
GitHub - privatenumber/minification-benchmarks: 🏃♂️🏃♀️🏃 JS minification benchmarks: babel-minify, esbuild, terser, uglify-js, swc, google closure compiler, tdewolff/minify
