Web パフォーマンスとプロダクト KPI の相関を可視化する話 2022ver - ドクターズプライム Official Blog
@1000ch (id:hc0001) です。技術顧問業としては広報周りの戦略を考えていることが多いのですが、今日はエンジニアリングの話です。 ドクターズプライムのプロダクト開発の中でも、パフォーマンス上の課題を発見して改善に取り組むことがあります。今回は @oinume (id:oinume) さんから 「この辺りの実装が問題になっていそう…」 という相談があったので、私がアプリケーション全体を眺めてボトルネックになっている箇所をいくつかピックアップし修正方針を提案したのですが、 実装を修正する前に 「まずは継続的にモニタリングできる環境を準備してパフォーマンスの前後がわかるようにしましょう」 ということで原点回帰した話です。 Core Web Vitals でリアルユーザーモニタリング パフォーマンス指標とプロダクト KPI の選定 リアルユーザーモニタリングと合成モニタリング データ
npm trends: Compare NPM package downloads
Sick of boring JavaScript newsletters?Bytes is a JavaScript newsletter you'll actually enjoy reading. Delivered every Monday, for free.
Experiment types - Optimize Help
Google Optimize and Optimize 360 are no longer available as of September 30, 2023. Any experiments and personalizations still active on that date have ended. Frequently asked questions Why was Optimize sunsetted? We remain committed to enabling businesses of all sizes to improve your user experiences and are investing in third-party A/B testing integrations for Google Analytics 4. We are focused o
CSPレポート(Mixed Contentの問題)をGoogle Analyticsに集約する
Content Security Policy(CSP) ではHTTPヘッダや<meta>要素に定義を記述し、さまざまな条件でコンテンツに制約をかけることができます。 そのCSPの中でも実際に制約をかけずにテストして、その結果を特定のURLにPOSTする Content-Security-Policy-Report-Only という仕組みがあります。 CSPにはHTTPSではない画像やJavaScriptを読み込めなくする制約も設定できるので、HTTPからHTTPSに移行する際などに役立ちます。 例えば、リソースはすべてHTTPSから読み込まないと行けないというCSPの設定は次のようにかけます。 実際にこのCSPをHTTPレスポンスヘッダに設定するとCSPに対応しているブラウザは、HTTPSではない画像やJavaScriptなどをブロックします。 実際にブロックされると使えなくなって困るの
Foreign Fetch による Micro Service Workers | blog.jxck.io
Update Foreign Fetch は削除される方向で進んでいる。 別途エントリを上げたのでそちらを参照。 Foreign Fetch が削除されそうな理由と Cookie の double keying | blog.jxck.io Intro Service Worker に Foreign Fetch という機能が提案されている。 この機能があるとクロスオリジンへの fetch をフックできる Service Worker を、その対象オリジンから提供できるようになる。 一体どういう仕組みなのか、これによって何が可能になるのかについて、デモを交えて記す。 1st Party と 3rd Party 例えばこのブログであれば、筆者自身が Service Worker を登録することで、Push などの機能を提供することができる。 ここではこれを、1st Party の Servi
【メモ】React.js meetup #4 2016/9/27 @サイボウズ株式会社 - nabeliwo note(旧)
これに行ってきたのでそのメモ。 React.js meetup #4 Reactですよ まさかSPAを語り尽くす会から引き続いてこちらも抽選当たるとは思ってなかったけれどラッキーなことに当たったので行ってきました。 そして全力でメモしてきました。 目次 Graph API: GraphQL and Falcor 複雑なJavaScriptアプリケーションを考えながら作る話 Should I use redux-saga or not? Real World React2 ReactコンポーネントとCSSコンポーネントは1対1なのか問題について ReactとGoogle Analytics reduxを使わずにreact+railsする Jest 本編 残しといたメモを貼りつつ感想を付け加えていくスタイルで。 Graph API: GraphQL and Falcor @Quramyさん G
Resemble.js : Image analysis
Compare two images? Drop two images on the boxes to the left. The box below will show a generated 'diff' image, pink areas show mismatch. This example best works with two very similar but slightly different images. Try for yourself! Don't have any images to compare? Use example images Why? Resemble.js can be used for any image analysis and comparison requirement you might have in the browser. Howe
Crossfilter
Fast Multidimensional Filtering for Coordinated Views Status Crossfilter is not under active development, maintenance or support by Square, its original author Mike Bostock, or the recent contributors (Jason Davies, Tom Carden). We still welcome genuine bug-fixes and PRs but consider the current API and feature-set (~1.3.12) essentially complete. A new Crossfilter Organization has been created on
GAのクッキー情報を手軽にJS変数として使う「ga.utils.js」 - Web Analytics Latte
GAのクッキーって結構複雑で扱いにくいんですが、それをJSから簡単に取得できるようにしてみました。GAを使っているサイトのユーザーで、GAのクッキーを持っていればだいたい使えます。 ga.utils.jsです。 これは何 以下の情報を取得できます： ・ユーザーがリピーターか否か ・何回目の訪問か(セッション数) ・前回の訪問から何日経ったか ・今回のセッションで何ページ閲覧しているか ・cookie内のトラフィックキャンペーン ・cookie内のトラフィックメディア ・cookie内のトラフィックソース 使い方 使い方は簡単です。上記リンクからJSをダウンロードして、サイトで読み込んでください(headでもbodyでも)。その後、取得したい情報に応じてJSを呼び出します。 <script type="text/javascript"src="ga.utils.js" charset="ut
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
rrweb.io | Open source web session replay library
JavaScript Error Monitoring
https://www.debuggify.net/
最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた | ゆっくりと…