Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #12983 from newrelic/browser-pro-lab-migration
migrated browser pro lab from developer site
- Loading branch information
Showing
53 changed files
with
1,432 additions
and
0 deletions.
There are no files selected for viewing
607 changes: 607 additions & 0 deletions
607
src/content/docs/browser/new-relic-browser/lab/debug-errors.mdx
Large diffs are not rendered by default.
Oops, something went wrong.
353 changes: 353 additions & 0 deletions
353
src/content/docs/browser/new-relic-browser/lab/debug-slowness.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,353 @@ | ||
| --- | ||
| title: 'Lab part 4: Debug frontend slowness in your application' | ||
| metaDescription: 'Part 4 of a multi-part lab on using New Relic browser monitoring to troubleshoot your site: Debug your frontend' | ||
| --- | ||
|
|
||
| import tweet from 'images/browser-lab-screenshot-tweet.webp' | ||
|
|
||
| import viewRelicstraunts from 'images/browser-lab-screenshot-view-relicstaurants.webp' | ||
|
|
||
| import viewRelicstrauntsBrowser from 'images/browser-lab-screenshot-relicstaurants-browser-app.webp' | ||
|
|
||
| import LCP from 'images/browser-lab-screenshot-LCP.webp' | ||
|
|
||
| import frontendVsBackend from 'images/browser-lab-screenshot-frontend-vs-backend.webp' | ||
|
|
||
| import backend from 'images/browser-lab-screenshot-backend.webp' | ||
|
|
||
| import frontend from 'images/browser-lab-screenshot-frontend.webp' | ||
|
|
||
| import pageLoadGraph from 'images/browser-lab-screenshot-page-load-graph.webp' | ||
|
|
||
| import initialPageLoad from 'images/browser-lab-screenshot-initial-page-load.webp' | ||
|
|
||
| import pageLoadDetail from 'images/browser-lab-screenshot-page-load-detail.webp' | ||
|
|
||
| import pageViews from 'images/browser-lab-screenshot-page-views.webp' | ||
|
|
||
| import sortPages from 'images/browser-lab-screenshot-sort-pages.webp' | ||
|
|
||
| import mostTimeConsumingPage from 'images/browser-lab-screenshot-most-time-consuming-page.webp' | ||
|
|
||
| import mostTimeConsumingPageDetail from 'images/browser-lab-screenshot-most-time-consuming-page-detail.webp' | ||
|
|
||
| import pageRendering from 'images/browser-lab-screenshot-page-rendering.webp' | ||
|
|
||
| import sessionTraces from 'images/browser-lab-screenshot-session-traces.webp' | ||
|
|
||
| import sortedSessionTraces from 'images/browser-lab-screenshot-sorted-session-traces.webp' | ||
|
|
||
| import navigatetoTraceDetail from 'images/browser-lab-screenshot-navigate-to-trace-detail.webp' | ||
|
|
||
| import trace from 'images/browser-lab-screenshot-trace.webp' | ||
|
|
||
| import adjustTimeline from 'images/browser-lab-screenshot-adjust-timeline.webp' | ||
|
|
||
| import traceTimeWindow from 'images/browser-lab-screenshot-trace-time-window-detail.webp' | ||
|
|
||
| import imageTrace from 'images/browser-lab-screenshot-image-trace.webp' | ||
|
|
||
| import imageTraceDetail from 'images/browser-lab-screenshot-image-trace-detail.webp' | ||
|
|
||
| <Callout variant="course" title="lab"> | ||
|
|
||
| This procedure is part of a lab that teaches you how to troubleshoot your web app with New Relic browser monitoring. | ||
|
|
||
| Each procedure in the lab builds upon the last, so make sure you've completed the last procedure, [_Debug errors in your application_](/docs/browser/new-relic-browser/lab/debug-errors), before starting this one. | ||
|
|
||
| </Callout> | ||
|
|
||
| After fixing JavaScript errors in your application, you and your team are feeling confident. Ready for your down time, you head over to social media but you check Twitter and see some confused customers: | ||
|
|
||
| <img | ||
| title="unhappy customers" | ||
| alt="unhappy customers" | ||
| src={tweet} | ||
| /> | ||
|
|
||
| Uh oh! You customers don't look happy. It's time to use New Relic browser monitoring to discover the source of delay. | ||
|
|
||
| <Callout variant='important'> | ||
|
|
||
| In order to see your data in New Relic, you need to enable browser monitoring for this procedure. | ||
|
|
||
| If you haven't already, [instrument your app with our browser agent](/docs/browser/new-relic-browser/lab/install-browser-agent). | ||
|
|
||
| </Callout> | ||
|
|
||
| ## Debug slowness in your application | ||
|
|
||
| <Steps> | ||
|
|
||
| <Step> | ||
|
|
||
| From the New Relic homepage, navigate to **Browser** and choose your **Relicstaurants** application. | ||
|
|
||
| <img | ||
| title="view relicstaurants" | ||
| alt="view relicstaurants" | ||
| src={viewRelicstraunts} | ||
| /> | ||
|
|
||
| </Step> | ||
|
|
||
| <Step> | ||
|
|
||
| Here, you see all the data related to your browser application including **Page views with JavaScript errors**, **Core web vitals**, **User time on the site**, **Initial page load and route changes**, and others. | ||
|
|
||
| <img | ||
| title="Relicstaurants summary" | ||
| alt="Relicstaurants summary" | ||
| src={viewRelicstrauntsBrowser} | ||
| /> | ||
|
|
||
| </Step> | ||
|
|
||
| Notice the **Largest Contentful Paint (LCP)**. | ||
|
|
||
| <img | ||
| title="LCP" | ||
| alt="LCP" | ||
| src={LCP} | ||
| /> | ||
|
|
||
| Largest Contentful Paint (LCP) represents how quickly the main content of a web page is loaded. Ideally, the content should not take more than a second or two to load. | ||
| Here, you see that your site is loading in more than 5 seconds. No wonder your users are complaining! | ||
|
|
||
| But what's causing this delay? back end? | ||
|
|
||
| <Step> | ||
|
|
||
| Scroll down and notice the **Front end vs. back end** graph. | ||
|
|
||
| <img | ||
| title="frontend vs backend graph" | ||
| alt="frontend vs backend graph" | ||
| src={frontendVsBackend} | ||
| /> | ||
|
|
||
| Click on **Back end (time to first byte) (50%)** to filter the graph and see how long backend takes to load. | ||
|
|
||
| <img | ||
| title="backend time consumption" | ||
| alt="backend time consumption" | ||
| src={backend} | ||
| /> | ||
|
|
||
| The graph indicates that the back end took maximum 140 mili seconds to process the request in worst case. Does this mean your front end is causing delay? | ||
|
|
||
| Click on **Front end (Window load + AJAX) (50%)**. | ||
|
|
||
| <img | ||
| title="frontend time consumption" | ||
| alt="frontend time consumption" | ||
| src={frontend} | ||
| /> | ||
|
|
||
| There's the problem! The graph indicates that the delay is happening on front end. | ||
|
|
||
| </Step> | ||
|
|
||
| <Step> | ||
|
|
||
| To narrow down what might be causing the delat on front end, take a closer look at **Initial page load and route change** graph. | ||
|
|
||
| <img | ||
| title="page load graph" | ||
| alt="page load graph" | ||
| src={pageLoadGraph} | ||
| /> | ||
|
|
||
| </Step> | ||
|
|
||
| <Step> | ||
|
|
||
| Click on **Initial page load (Window load + AJAX)**. | ||
|
|
||
| <img | ||
| title="initial page load" | ||
| alt="initial page load" | ||
| src={initialPageLoad} | ||
| /> | ||
|
|
||
| The graph indicates that **Initial page load (Window load + AJAX)** is taking 5-6 seconds which is alarming. | ||
|
|
||
| </Step> | ||
|
|
||
| <Step> | ||
|
|
||
| Click **Initial page load and route change** to see more details. | ||
|
|
||
| <img | ||
| title="page load details" | ||
| alt="page load details" | ||
| src={pageLoadDetail} | ||
| /> | ||
|
|
||
| This takes you to **Page views**. | ||
|
|
||
| <img | ||
| title="page views" | ||
| alt="page views" | ||
| src={pageViews} | ||
| /> | ||
|
|
||
| </Step> | ||
|
|
||
| <Step> | ||
|
|
||
| Sort the pages by **Most time-consuming**. | ||
|
|
||
| <img | ||
| title="sort page" | ||
| alt="sort page" | ||
| src={sortPages} | ||
| /> | ||
|
|
||
| Notice that the initial page is taking almost 90% of time to load. | ||
|
|
||
| <img | ||
| title="most time consuming pages" | ||
| alt="most time consuming pages" | ||
| src={mostTimeConsumingPage} | ||
| /> | ||
|
|
||
| Click on it to view it's details. | ||
|
|
||
| <img | ||
| title="most time consuming page detail" | ||
| alt="most time consuming page detail" | ||
| src={mostTimeConsumingPageDetail} | ||
| /> | ||
|
|
||
| This page shows you **Page view breakdown**, **Median initial page load time**, and other important details. **Page view breakdown** graph is especially important here since it helps you narrow down why and where your page is taking longer. | ||
| Upon taking a closer look into this graph, you see that **Page rendering** is taking as long as 5000 miliseconds. | ||
|
|
||
| <img | ||
| title="page rendering" | ||
| alt="page rendering" | ||
| src={pageRendering} | ||
| /> | ||
|
|
||
| </Step> | ||
|
|
||
| You now know that initial page is taking quite long to render making your application slow. Next, we observe the **Session traces** to figure out what is slowing down the rendering process. | ||
|
|
||
| Exit this view by clicking the **X** in the top right hand corner. | ||
|
|
||
| <Step> | ||
|
|
||
| From left hand navigation, navigate to **Session traces** and sort them in the decending order of **Page load**. | ||
|
|
||
| <img | ||
| title="most time consuming pages" | ||
| alt="most time consuming pages" | ||
| src={sessionTraces} | ||
| /> | ||
|
|
||
| </Step> | ||
|
|
||
| <Step> | ||
|
|
||
| Here, you see the session traces sorted in the order of **Page load** time. | ||
|
|
||
| <img | ||
| title="sorted session traces" | ||
| alt="sorted session traces" | ||
| src={sortedSessionTraces} | ||
| /> | ||
|
|
||
| </Step> | ||
|
|
||
| <Step> | ||
|
|
||
| From the list, click the first one. | ||
|
|
||
| <img | ||
| title="navigate to trace detail" | ||
| alt="trace detail" | ||
| src={navigatetoTraceDetail} | ||
| /> | ||
|
|
||
|  | ||
|
|
||
| This takes you to **Session traces** detail page. | ||
|
|
||
| Here, you see the complete trace for that particular session. This page also shows you **Backend**, **Dom Processing**, **Page Load**, and other trace related information. | ||
|
|
||
| <img | ||
| title="full trace" | ||
| alt="full trace" | ||
| src={trace} | ||
| /> | ||
|
|
||
| </Step> | ||
|
|
||
| <Step> | ||
|
|
||
| Note that **Page load** is taking longer than expected. You're need a detailed timeline of the load. Scroll the pointer on the left and right to adjust the timeline. | ||
|
|
||
| <img | ||
| title="adjust trace timeline" | ||
| alt="adjust trace timeline" | ||
| src={adjustTimeline} | ||
| /> | ||
|
|
||
| </Step> | ||
|
|
||
| <Step> | ||
|
|
||
| Scroll through the trace to move through the time window and see the details of individual events during this session. | ||
|
|
||
| <img | ||
| title="adjust time window" | ||
| alt="adjust time window" | ||
| src={traceTimeWindow} | ||
| /> | ||
|
|
||
| </Step> | ||
|
|
||
| <Step> | ||
|
|
||
| Notice that a particular event is taking more than 5 seconds. | ||
|
|
||
| <img | ||
| title="image trace" | ||
| alt="image trace" | ||
| src={imageTrace} | ||
| /> | ||
|
|
||
| </Step> | ||
|
|
||
| <Step> | ||
|
|
||
| Click on the event to see its details. | ||
|
|
||
| <img | ||
| title="image trace detail" | ||
| alt="image trace detail" | ||
| src={imageTraceDetail} | ||
| /> | ||
|
|
||
| Notice that it's an image. Particularly, it's the background image of your application which is taking 5 - 6 seconds to load and causing the delay. | ||
|
|
||
| </Step> | ||
|
|
||
| </Steps> | ||
|
|
||
| Based on these findings, you hypothesize that the background image is the culprit here. High-resolution, unoptimized images are the most common reason behind the website slowness. | ||
| Good news! now that you know the reason, you can fix the problem. | ||
|
|
||
| ## Summary | ||
|
|
||
| To recap, you observed slowness in your application and used New Relic browser monitoring to: | ||
|
|
||
| 1. Observe Core web vitals of your site | ||
| 2. Narrow down the sources of slowness | ||
|
|
||
| ## Homework | ||
|
|
||
| Well done! Now that you've gotten a jump start with our monitoring, here are some docs that will help you take the next steps on your journey. | ||
|
|
||
| - [Introduction to browser monitoring](/docs/browser/browser-monitoring/getting-started/introduction-browser-monitoring/) | ||
| - [Browser monitoring features](/docs/browser/new-relic-browser/browser-pro-features/intro-to-browser-pro-features) |
Oops, something went wrong.