Bu polyfill kitaplığının eklenmesi, Performance Monitoring'nın diğer web uygulaması metriklerini raporlaması için gerekli değildir.
3. adım: İlk veri gösterimi için performans etkinlikleri oluşturun
SDK'yı uygulamanıza başarıyla eklediğinizde Firebase, etkinlikleri işlemeye başlar. Hâlâ yerel olarak geliştirme yapıyorsanız ilk veri toplama ve işleme için etkinlik oluşturmak üzere uygulamanızla etkileşimde bulunun.
Web uygulamanızı yerel bir ortamda yayınlayın ve görüntüleyin.
Sitenizin alt sayfalarını yükleyerek, uygulamanızla etkileşim kurarak ve/veya ağ isteklerini tetikleyerek etkinlik oluşturun. Sayfa yüklendikten sonra tarayıcı sekmesini en az 10 saniye açık tuttuğunuzdan emin olun.
Firebase konsolunun Performans kontrol paneline gidin. İlk verilerinizin birkaç dakika içinde gösterilmesi gerekir.
Günlük mesajlarınızda hata mesajı olup olmadığını kontrol edin.
Birkaç saniye sonra, tarayıcınızın geliştirici araçlarında firebaselogging.googleapis.com adresine yapılan bir ağ çağrısı olup olmadığını kontrol edin. Bu ağ çağrısının varlığı, tarayıcının Firebase'e performans verileri gönderdiğini gösterir.
5. adım: (İsteğe bağlı) Belirli bir kod için özel izleme ekleyin
Uygulamanızdaki belirli kodlarla ilişkili performans verilerini izlemek için özel kod izleri oluşturabilirsiniz.
Özel kod izleme ile uygulamanızın belirli bir görevi veya görev grubunu (ör. bir grup resmi yükleme ya da veritabanınıza sorgu gönderme) tamamlamasının ne kadar sürdüğünü ölçebilirsiniz. Özel kod izlemenin varsayılan metriği süresidir ancak önbellek isabetleri ve bellek uyarıları gibi özel metrikler de ekleyebilirsiniz.
Kodunuzda, Performance Monitoring SDK'sının sağladığı API'yi kullanarak özel kod izinin başlangıcını ve bitişini tanımlarsınız (ve istediğiniz özel metrikleri eklersiniz).
Bu özellikler ve bunları uygulamanıza nasıl ekleyeceğiniz hakkında daha fazla bilgi edinmek için Belirli kod için izleme ekleme başlıklı makaleyi inceleyin.
6. adım: Uygulamanızı dağıtın ve sonuçları inceleyin
Performance Monitoring öğesini doğruladıktan sonra uygulamanızın güncellenmiş sürümünü kullanıcılarınıza dağıtabilirsiniz.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2025-09-05 UTC."],[],[],null,["\u003cbr /\u003e\n\n| The Firebase JavaScript SDK for Performance Monitoring is a\n| **beta** release. \n|\n| This product might be changed in backward-incompatible ways and is not subject\n| to any SLA or deprecation policy.\n\nBefore you begin\n\nIf you haven't already, visit\n[Add Firebase to your JavaScript project](/docs/web/setup) to learn how to:\n\n- Create a Firebase project\n\n- Register your web app with Firebase\n\n | To use Performance Monitoring in a web app, you\n | *must* add your app as a Firebase Web App in the\n | Firebase console.\n |\n | If you already use Firebase products in your existing web app and you\n | want to start using the Performance Monitoring SDK, you must update your\n | [Firebase config object](/docs/web/setup#config-object) to\n | include your `appID`.\n\nNote that when you add Firebase to your app, you might complete some of the\nsteps described later on this page (for example, adding the SDK and initializing\nFirebase).\n\n**Step 1** : Add and initialize Performance Monitoring\n\n1. If you haven't already, [install the Firebase JS SDK and initialize Firebase](/docs/web/setup#add-sdk-and-initialize).\n\n2. Add the Performance Monitoring JS SDK and initialize Performance Monitoring:\n\nWeb\n\n\n| [Learn more](/docs/web/learn-more#modular-version) about the tree-shakeable modular web API and [upgrade](/docs/web/modular-upgrade) from the namespaced API.\n\n\u003cbr /\u003e\n\n```python\nimport { initializeApp } from \"firebase/app\";\nimport { getPerformance } from \"firebase/performance\";\n\n// TODO: Replace the following with your app's Firebase project configuration\n// See: https://firebase.google.com/docs/web/learn-more#config-object\nconst firebaseConfig = {\n // ...\n};\n\n// Initialize Firebase\nconst app = initializeApp(firebaseConfig);\n\n\n// Initialize Performance Monitoring and get a reference to the service\nconst perf = getPerformance(app);\n```\n\nWeb\n\n\n| [Learn more](/docs/web/learn-more#modular-version) about the tree-shakeable modular web API and [upgrade](/docs/web/modular-upgrade) from the namespaced API.\n\n\u003cbr /\u003e\n\n```python\nimport firebase from \"firebase/compat/app\";\nimport \"firebase/compat/performance\";\n\n// TODO: Replace the following with your app's Firebase project configuration\n// See: https://firebase.google.com/docs/web/learn-more#config-object\nconst firebaseConfig = {\n // ...\n};\n\n// Initialize Firebase\nfirebase.initializeApp(firebaseConfig);\n\n\n// Initialize Performance Monitoring and get a reference to the service\nconst perf = firebase.performance();\n```\n\n**Step 2**: Add the first input delay polyfill library\n\nTo measure the\n[first input delay metric](/docs/perf-mon/page-load-traces#input-delay),\nyou need to add the polyfill library for this metric. For installation\ninstructions, refer to the library's\n[documentation](//github.com/GoogleChromeLabs/first-input-delay).\n\nAdding this polyfill library is not required for Performance Monitoring to report the other\nweb app metrics.\n\n**Step 3**: Generate performance events for initial data display\n\nFirebase starts processing the events when you successfully add the SDK to your\napp. If you're still developing locally, interact with your app to generate\nevents for initial data collection and processing.\n| **Note:** The Performance Monitoring SDK batches events locally then sends them to Firebase periodically (every 10 seconds). So, there's a delay between an app interaction and when Firebase receives the event information from your app.\n\n1. Serve and view your web app in a local environment.\n\n2. Generate events by loading subpages for your site, interacting with your\n app, and/or triggering network requests. Make sure to keep the browser tab\n open for at least 10 seconds after the page loads.\n\n3. Go to the [*Performance* dashboard](//console.firebase.google.com/project/_/performance)\n of the Firebase console. You should see your initial data display within\n a few minutes.\n\n If you don't see a display of your initial data, review the [troubleshooting\n tips](/docs/perf-mon/troubleshooting?platform=ios#sdk-detected-no-data).\n\n**Step 4** : *(Optional)* View log messages for performance events\n\n1. Open your browser's developer tools (for example,\n [Network tab for Chrome Dev Tools](//developers.google.com/web/tools/chrome-devtools/network/)\n or in the [Network Monitor for Firefox](//developer.mozilla.org/en-US/docs/Tools/Network_Monitor)).\n\n2. Refresh your web app in the browser.\n\n3. Check your log messages for any error messages.\n\n4. After a few seconds, look for a network call to\n `firebaselogging.googleapis.com` in your browser's developer tools. The\n presence of that network call shows that the browser is sending performance\n data to Firebase.\n\nIf your app isn't logging performance events, review the [troubleshooting\ntips](/docs/perf-mon/troubleshooting?platform=web#app-not-logging-events).\n\n**Step 5** : *(Optional)* Add custom monitoring for specific code\n\nTo monitor performance data associated with specific code in your app, you can\ninstrument [**custom code traces**](/docs/perf-mon/custom-code-traces).\n\nWith a custom code trace, you can measure how long it takes your app to complete\na specific task or set of tasks, such as loading a set of images or querying\nyour database. The default metric for a custom code trace is its duration, but\nyou can also add custom metrics, such as cache hits and memory warnings.\n\nIn your code, you define the beginning and the end of a custom code trace (and\nadd any desired custom metrics) using the API provided by the Performance Monitoring SDK.\n\n\nVisit [Add monitoring for specific code](/docs/perf-mon/custom-code-traces)\nto learn more about these features and how to add them to your app.\n\n**Step 6**: Deploy your app then review results\n\nAfter you've validated Performance Monitoring, you can deploy the updated version of your\napp to your users.\n\nYou can monitor performance data in the [*Performance*\ndashboard](//console.firebase.google.com/project/_/performance) of\nthe Firebase console.\n\nNext steps\n\n- Get hands-on experience with the\n [Firebase Performance Monitoring for Web Codelab](//codelabs.developers.google.com/codelabs/firebase-perf-mon-web/).\n\n- Learn more about data automatically collected by Performance Monitoring:\n\n - Data for [page loading](/docs/perf-mon/page-load-traces) in your app\n - Data for [HTTP/S network requests](/docs/perf-mon/network-traces?platform=web) issued by your app\n- [View, track, and filter](/docs/perf-mon/console?platform=web) your\n performance data in the Firebase console\n\n- Add monitoring for specific tasks or workflows in your app by\n [instrumenting custom code traces](/docs/perf-mon/custom-code-traces?platform=web)\n\n- [Use attributes to filter performance data](/docs/perf-mon/attributes?platform=web)"]]
