次のパフォーマンスを監視します.js

我々がパフォーマンスを測定する方法に飛び込む前に、私はそれが価値があることをあなたに納得させてください.
すでにあなたはパフォーマンスを測定する必要があります確信?以下の「研究室」実施セクションへジャンプしてください.

ホームページ負荷速度の各100 msの減少は、1.11 %

少なくとも、それはMobify . かなりの数のサイトが性能向上によって劇的な増加を見た.
Googleのチームは、パフォーマンスが重要である理由のリストを思いつきました.
https://web.dev/why-speed-matters
それらの推論は、これらの4つのカテゴリーに分けられる.

1 .お金

のパフォーマンスを向上させるあなたの変換率を1 %増加すると言う.どのように大きな影響のあなたの利益を持っている可能性がありますか?
広告の収益(roas)のリターンは非常に重要なメトリックは、任意の有料マーケティングを行うときです.それは基本的にどのように効率的に広告を過ごすの尺度です.
https://docs.google.com/spreadsheets/d/11UwZ3o55u_B-bjKZyc7XIz3otk0B7Cq6YzIKGW-jklA/edit?usp=sharing
あなたが4000ドルの予算と5 %の転換率を持っているならば、彼らの転換率が1 %であるならば、あなたは二重予算であなたの競争を追い払っています.
高い転換率は成功と失敗の間の違いです.

2 . UX

これまで、低速、ジャンピング、および肥大サイトをブラウズ?
楽しい時間はありましたか.
正確に.
コアWeb vitalsは、チーム間で視覚的、技術的なアクセシビリティを優先順位付けを奨励する.
ユーザーエクスペリエンスは、デザインとUXチームの責任ではありません.

SEO

それは、常にGoogleが検索ランクのためにどれくらいの性能を考えるかについての秘密のビットでした.
最近のコア・ウェブ・バイタルのリリースで、彼らは彼らのスタンスをより明確にしていると思います.パフォーマンスの問題と意志より多くの時間をかけて.
Googleは、これらの指標が非常に重要であるとシグナリングされています.
コアWeb vitalsは以下の通りです.

すべてのGoogleツールに組み込まれて

非常に徹底的にウェブ上で文書化.dev

Google検索コンソールで目立つように表示

Delayed launching Vitals COVID - 19による

最後のポイントには、遅れ:なぜそれが大きな影響を与えるつもりはなかったの打ち上げを遅らせる必要がありますか?
これは多くの憶測ですが、私は、シグナルは、Googleがvitalsに基づいて、ランキングを重ねることになっていることを示していると思います.

技術債務

私は、この聴衆が技術負債が何であるかについてかなり意識していると仮定しています.
良いパフォーマンスを持っている間、ハイテク債務の偉大な指標ではない、悪いパフォーマンスは通常、いくつかの形式の技術の負債がぶら下がっていることを意味します.
あなたは

あなたの開発者のどれも理解していない本当に奇妙な方法で画像を読み込み?

複雑なアーキテクチャを使用して、パフォーマンスについての測定と思考を使用すると、1つの開発者のためにトリッキーな考えですか?

古い技術に頼って新しい標準に更新しないか?

継続的にパフォーマンスを向上させる文化を構築することは、時間とともに最高のROIを持つでしょう.

監視コアWeb vitals次の。js

あなたがコアウェブvitalsに慣れていないならば、彼らは品質ウェブサイトが何を実行するかについて彼らのガイダンスを更新するためにリリースされるメトリックのGoogleの新しいセットです.
Intro to Core Web Vitals

インザラボ

フロントエンドのパフォーマンスの監視と灯台監査はかなりの間、分離できませんでした.
灯台は、パフォーマンスを監視し、サイトの機会の機会を見つけるためのオープンソースのツールです.
緑の円のスクリーンショットは、世界中の多くのエンジニアリングチームのゴールになりました.

これらの監査は、ラボテストの形式です.
実験室のテストはまさにそれがどのような音です:制御条件でテスト.
多くのチームがパフォーマンスの苦悩を解決するために取っているアプローチは、より多くの監査を実行することです.
一般的なオプションを以下に示します:

クロムの頻繁なローカル監査

SaaS監視ツールの支払い

CI/CDプロセスのステップとして

これらはすべて正しい方向へのステップです.私が以前に言ったように、最高のROIフィックスは単にパフォーマンスのまわりでエンジニアリング文化を変えることです.
私は、ほとんどのエンジニアリングチームのための低い絞首刑になる果物としてLabテストを見ます.
これは、開発者を考える

フロントエンド

ペイロードをより小さく保つ

バックエンドリクエスト応答時間

完璧ではないが、一貫した灯台の監査は、パフォーマーサイトへの道の80 %を得ることができます.

自動灯台監査の設定

あなたがVercelでホストしているならば、あなたのサイトに灯台統合を加えるのと同じくらい簡単です:

統合は自動的に各展開を監査します.

あなたがVercelでホストしていないならば、あなたはあなたのCIプロセス(Github行動)でステップを使用することができます.
このaction 設定のオプションを指定します.

プルリクエストコメント

スラック警告

失敗して低得点のビルド

単にあなたがテストしたいrepoにアクションを追加します.

あなたがすべてこれを管理したくない場合は、仕事を得る良い有料SaaSソリューションがあります.現在使用中Calibre 私の日の仕事で、我々はそれと成功してきた.

キャッチボールは何ですか。

以前に、私は灯台監査が完全でないと言いました.なぜ?
まあ、ラボデータは代表ではない.その地図は領土ではない.
“それは私のマシン上で動作します”ラボデータが最良の解決策ではないの完璧な例です.
あなたが選んだAWS地域から遠く離れた他の国に住んでいるあなたのサイトの訪問者を考慮してください.彼らの経験は、あなたの灯台監査で捕らえられますか?

インザフィールド

それで、あなたがあなたの灯台監査に関してかなりうまくやっていると言います.どのようにパフォーマンス監視ゲームをアップグレードするか?
フィールドデータ.
コアWeb vitalsは、我々はフィールドの具体的なパフォーマンスの監視について考える方法を変更します.
ここで書きました.
The Ripple of Web Vitals
実際のユーザーからのパフォーマンスデータを収集するラボ監査よりも代表的です.
ありがたいことに、次のフレームワークで直接コアWeb vitalsをフィールドに収集をサポートします.

次のコアウェブバイタルのフィールド追跡の設定

Google Analyticsは非常に簡単な場所コアWeb vitalsを送信することです.
パフォーマンスの影響を確認するには、追加のメトリクスを使用できます.

転換率

バウンスレート

現地時間

そして自分自身のパフォーマンスの重要性を確認してください.
あなたもあなたのパフォーマンスの予算を超えている場合は、毎日/週/月を警告するカスタムアラートを作成することができます.

Google Analyticsのプロパティを設定します

ヘッドトゥanalytics.google.com をクリックして下の“管理”ボタンを残しました.
「プロパティを作成」をクリックして起動します.
「Webプロパティー」を選択します.
あなたの生産URLを追加し、タイムゾーンを設定します.
あなたの財産を作成した後、それはあなたを与えるProperty Id .
それは何かのように見えるUA-73089861-6 .

解析論をインストール

我々の次のGoogle Analyticsと対話すること.私は好きなアプリanalytics , 分析プロバイダーのトンをサポートするオープンソースライブラリ.
https://getanalytics.io/
我々は、Google Analyticsプラグインと同様に我々のアプリにそれをインストールする必要があります.

npm install analytics @analytics/google-analytics --save

解析を構成する

ここで設定する必要がありますanalytics そして、我々のアプリにインポートします.
まず、ファイル名analytics.js そして、あなたの財産IDでそれを構成してください.
次のようになります.

import Analytics from 'analytics';
import googleAnalyticsPlugin from '@analytics/google-analytics';
import Router from 'next/router';

// Initialize analytics and plugins
// Documentation: https://getanalytics.io
const analytics = Analytics({
  debug: process.env.NODE_ENV === 'production',
  plugins: [
    googleAnalyticsPlugin({
      trackingId: 'UA-73089861-6', // use your trackingId
    }),
  ],
});

// Track initial pageview
if (typeof window !== 'undefined') {
  analytics.page();
}

// Track pageview on route change
Router.events.on('routeChangeComplete', (url) => {
  analytics.page();
});

export default analytics;

GitHub source link .
(P . S . -そのスニペットはDivJoyから購入されます)、完全に価値がある反応コードジェネレータin my opinion )

Countアプリの設定js

このスニペットをすべてのページに読み込むには、カスタムに追加する必要があります_app.js .
また、コアWeb重要なレポート機能を追加する必要があります.reportWebVitals .
それは、我々にこのようなものを残します:

import '../styles/globals.css';
import analytics from '../util/analytics';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export function reportWebVitals({ id, name, label, value }) {
  analytics.track(name, {
    category: label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric',
    value: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
    label: id, // id unique to current page load
    nonInteraction: true, // avoids affecting bounce rate.
  });
}

export default MyApp;

GitHub source link
あなたが使いたくないならばanalytics 図書館、次のチームグレートhas documentation そのために.

成功？

時間をテストする!
コードを展開するか、debug 値analytics.js to

debug: process.env.NODE_ENV !== 'production',

次に、ページを訪問するときにGoogle Analyticsにイベントを発火する必要があります.
ホップ、レポート、リアルタイム、およびイベントが動作しているかどうかを確認します.
歴史的なデータを表示するには、行動、イベント、トップイベントを選択し、イベントのアクションを選択してください.

自由選択

あなたがGoogle Analyticsであなたのvitalsのために毎日の電子メール警報をセットアップするならば、管理者への頭、カスタム警報.
以下のように設定します:

今、私のCLSが日常的に0.1より上に行くときはいつでも、私は警報を受けます.

結論

私はフィールドパフォーマンス監視のアプローチをお勧めしますが、私の究極の勧告は、単に起動することです.
完全に善の敵にさせてはいけない
両方のオプションは、今日のパフォーマンスを向上させるために十分な情報を提供します.

もっと学ぶ

あなたがコアWeb vitals、パフォーマンス監視、またはすべてに興味があるなら.あなたのinboxに届けられるこのもののような新しい記事を得るためにサインアップしてくださいhere
私もTwitterでつぶやきます.私にDMまたは私にメールしてください[email protected] .