Service Flow

The Service Flow page shows a waterfall view of all the third parties that load on your site. By default, the services appear in the order in which they load. Use this page to determine which resources are having the biggest impact on your site performance and which resources to sequence based on that information.

To open the Service Flow page, click Inventory > Service Flow.

The image shows the list you see when you first open the page.

A

Filter the list based on the percent of pages that the services load on.

B

Filter the list by whether or not the services impact onload time.

C

Use the search bar to find a specific third party.

D

Resource clusters, or groups of resources (images, videos, scripts, and so on) that the third party loads. These can load before or after the average first byte time.

E

The time it takes the third party to load, from start time to last byte.

F

The vertical lines correspond to the timing metrics of the same color. The blue line is onloadClosed the time it takes for the initial HTML document to load with all stylesheets, images, and subframes. At this point, the page is usually interactive to users. time. The following metrics are available: 

First Contentful Paint

When the browser renders the first bit of content from the DOM, which signals to the user that the page is loading. This content can include text, image (including background images), non-white canvas or SVG.

DOMContentLoaded The initial HTML document is loaded and parsed, without waiting for stylesheets, JavaScript, and other resources.
Onload

The initial HTML document has loaded with all stylesheets, images, and subframes, and all event handlers for window.onload have been called. At this point, the page is interactive to users. Throughout the Yottaa portal, "onload time" is used interchangeably with "page load time." 

Largest Contentful Paint The time it takes for the largest piece of visible content on a page to load.
Time to Interactive Measures the time when the page becomes reliably interactive to users by searching for a five-second pause in network activity after the last long task following the first contentful paint. TTI is the moment when that long task ends. If there is no long task after first contentful paint, TTI is the moment that first contentful paint is complete.

Details View

Click the arrow next to any third party to see additional metrics, including the number of page delay violations the third party and its resources are causing.

The details view shows a variety of metrics, including: 

Example

Metric

Description

Performance Index Rating (PIR)

PIR, or Performance Index Rating, uses Yottaa-exclusive data to evaluate the performance of a third party across the industry. The rating does not necessarily represent the third party's impact on your site. PIR ratings include: 

PIR red Consistent negative impact on performance
Inconsistent negative impact on performance
PIR green Little to no impact on performance.

Third Party Details

Opens the Third-party Details page.

Compare vs. Community

Opens the Third Party Community Dashboard for the third party.

Resources per Page

The number of resourcesClosed Any request initiated by the browser, including HTML, CSS, JS, photos, videos, and so on. that the third party loads on each page it runs on.

Page Delay Violations

The total number of page delay violations that the third party has caused during the specified period.

Page Delay Violations Per Page

The average number of page delay violationsClosed When a resource that loads before onload takes longer than a set number of milliseconds to load. the third party causes per page.

Page Delay Violations Per Resource

The average number of page delay violations the third party causes per resource.

Impact on Metrics

Shows the third party's impact on Page Load TimeClosed the time it takes for the initial HTML document to load with all stylesheets, images, and subframes. At this point, the page is usually interactive to users., DOM Content LoadedClosed When the initial HTML document is completely loaded and parsed., Largest Contentful Paint, and Time to Interactive.

The details view also shows how much time you can save by delaying the third party's loading until after onload -- both on the pages on which it is installed and on your overall site.

To see what the third party's loading would look like if delayed until after onload, click Show Impact Scenario. This option only displays for third parties that take more than 0 seconds to load. The waterfall view changes to reflect the impact scenario.

A table displays detailed information about the third party. Use the drop-down menu to select the information that you want to view. The following options are available: 

Determining What to Sequence

The Service Flow page gives you access to a variety of metrics that help you determine how to optimize your site performance. When determining which third parties to sequence, take into account these considerations: 

Waterfall

The order in which third parties load has a big impact on your site performance. As you look at the Service Flow list, pay attention to which third parties load first -- are these services the most important to your site's loading? If not, consider delaying them until after onload.

Page %

As you consider which third parties to apply rules to, also take note of the Page % column. A third party that has a moderate impact, but only loads on a small percent of your pages is likely not the most important candidate for a new rule.

Impact

To get a better idea of which third parties are causing the biggest delay, you can sort the list by Impact by clicking twice on the Impact column heading. Click the arrow to see what impact the third party has on your overall site and to test impact scenarios.

Resources

There might be cases where a third party is having a high impact but you can't, or don't want to, delay it. In this case, you can look at the Top Contributing Resources of the third party to see which resource is having the biggest impact, and then potentially set a rule to control that resource.