Define a timer with Resource Groups

Capture performance data of critical resources on your site by group.

Like Resource Timing, this method is based on existing Resource Timing API methods that specifically target the time it takes for a resource on a page to load such as objects, images, and CSS files. For each resource in the group, you can define the time by capturing the resource in the page with either a CSS selector, an XPath, or a specific name or name pattern (Resource URL).

How to

  1. If the timer that you want to capture applies only to certain pages on your site, enter the URL pattern to match those pages.
    You can use an asterisk as a wildcard to replace one or more characters (for example, */example/example-abc/*). mPulse looks for the first matching query string parameter for the page that has a URL pattern match.
    Note: For the best results, avoid using a regular expression in the URL pattern.
  2. At the mid section of the dialog, in the URL Pattern field, enter the absolute URL of the resource. To collect the first resource found in the page that matches, use an asterisk as a wildcard.

    For example, to collect a specific resource, the Resource URL might look like this:

    http://www.example.com/images/image4.gif

    If you include a wildcard at the end of the Resource URL, like this:

    http://www.example.com/images/image*

    then, mPulse collects the first resource found that matches, such as:

    http://www.example.com/images/image1.gif

  3. From the Measure from menu, choose the starting point for the measurement:
    • Navigation Start captures the time just before a new page is requested. It’s initiated when a visitor clicks a link on your site or presses Enter after entering a URL in the browser bar.
    • First Resource captures the time when the first resource on the page is encountered (for example, http://www.example.com/images/image1.gif).
  4. From the Include on menu, choose the navigation that you want the resource collected on.
    • SPA Soft: All of the interactions on the page that occur after the initial page load such as an address bar change.
    • SPA Hard: The first page load, which includes; all static HTML, JavaScript, CSS, and the SPA framework itself (for example angular.js).
    • Onload (for non-SPA sites): The browser downloads all of the resources on the page.
    • XHR: An XMLHttpRequest that indicates network activity. For example, the page’s view is being updated or it could be a periodic poll like a scoreboard update.
  5. From the Selection type menu, choose a method to locate the resource.
    • To use a CSS Selector or XPath, go to the page, copy the selector or XPath, and paste it in the Selection value field.

      For details, see Capture a CSS Selector or XPath.

    • To use Resource URL, enter the absolute URL of the resource in the Selection value field, or use a wildcard to collect the first resource found in the page that matches.

      For example, to collect a specific resource, the Resource URL might look like this:

      http://www.example.com/images/image4.gif

      If you include a wildcard at the end of the Resource URL, like this:

      http://www.example.com/images/image*

      then, mPulse collects the first resource found that matches, such as:

      http://www.example.com/images/image1.gif

  6. Click the plus sign to capture more resources in the page for this group.
    Note: mPulse only captures the resource in the first URL pattern that matches the current page.