Introduction¶

This document provides instructions on how to add and configure the Performance add-on in Acquia Web Governance.

Contact the Support Team to activate the Performance add-on.

Google Lighthouse¶

The Performance add-on does a scan on a single page with Google Lighthouse, which is an open-source API and a powerful tool to help you improve the quality, performance, and accuracy of web pages. You can input a URL and receive a score along with suggestions and instructions on how to make website performance improvements.

The Google online service software assesses website Performance, PWA (Progressive Web Apps), Best Practices, Accessibility, and SEO. In the first version, Web Governance has integrated the Performance part of Google Lighthouse.

With the Google service, you must enter each URL every time you want to see a score. The Performance add-on improves upon this with the possibility to set up score result sequences, for example, Web Governance can automatically scan the selected page up to 4 times a day.

For more information on how Google Lighthouse calculates performance, visit:

• Google WebDev Performance Audits
• Lighthouse performance scoring
• Lighthouse scoring calculator

For a list of the IP addresses used for the Performance add-on, visit Data hosting and security.

Navigation¶

This section provides information on how to navigate to the Performance add-on.

1. Navigate to the Domain Overview and select your domain.
2. Click Performance (the gauge icon) on the domain toolbar.

The system displays the Performance dashboard and a list of added pages. If no pages are present or if a page is missing, click Add New Page. The instructions for how to add a new page are below.

Video walkthrough¶

For a video walkthrough of the Performance add-on setup, visit Performance setup walkthrough.

Performance dashboard¶

This is the landing page for the Web Governance Performance add-on. The page contains a list of pages with the performance score for each page, and the the following action buttons:

• Add New Page: Click to enter the dialog to add a page to the scan for performance statistics.
• Search: Click in the dialog box and type a search parameter to search for a specific page that you have added.
• Quick page overview: Get a quick overview of the performance score. On the row for each page, the following actions are possible:
  • Open Page Details (the page icon): Provides an itemization of all performance details gathered, as described below.
  • Actions: Click to Edit or Delete the page.
  • Expand (the arrows icon): Click for more details about the performance score for the page.
  • Rescan: Start a new scan to detect performance issues on the page.
• Left menu: The menu on the left provides the following navigational options, these options are further explained in the sections below:
  • Dashboard: Select this option to return to the Performance dashboard.
  • Opportunities: Select this option to view areas for improvement that can boost the page load speed of your site and improve its performance.
  • Diagnostics: Select this option to view page diagnostics for information about flagged issues on your page.
  • History: Select this option to view performance measurements over time.

Open Page Details¶

Click Open Page Details (the page icon) on the same row as the page on the dashboard view all performance statistics gathered by the most recent scan.

Performance Score section¶

• Overall percentage: The overall percentage is displayed with a numerical value in the center of the graph. Hover over the colored sections for a breakdown of score types included in this graph.
• Timeline: The timeline provides a visual overview of how the performance score has changed between the most recent 8 scans.

• Opportunities by Priority: This bar graph further breaks down the performance checks and sorts the findings according to priority:

  • Checks done
  • Checks to fix
    • Low
    • Medium
    • High

  For information about how the priority of issues is determined, visit Issue priority.

User Loading Experience section¶

View the loading experience for visitors on each profile.

• Thumbnail images: Thumbnail images represent the elements on the web page in the order that they load as the web page renders in the browser.
• Loading times key: Color coding indicates the different speeds at which the pages load.
  • Short (blue)
  • Medium (yellow)
  • Long (red)
• Load Times Trend: The load time results presented in milliseconds.
  • First contentful paint (FCP)
  • Largest contentful paint (LCP)
  • Speed Index (SI)
  • Total Blocking Time (TBT)
  • Cumulative Layout Shift (CLS)

The line graph displays the measurements over time.

Expand¶

Click the arrow on the same row as the page on the dashboard view to expand an overview of the details for the page. The system displays the overall score in a ring graph. 

• Overall percentage: The ring graph displays a numerical value in the center of the graph that reflects the performance score, as measured on the most recent check. Hover over the colored sections for a breakdown of score types included in this graph.
• Load time results for the page in milliseconds, as measured by the most recent check for the following:
  • First contentful paint (FCP)
  • Largest contentful paint (LCP)
  • Speed Index (SI)
  • Total Blocking Time (TBT)
  • Cumulative Layout Shift (CLS)
• At the bottom of the expanded view, the following details about the profile used are displayed:
  • Measurement Settings
  • Device
  • Measure from
  • Network speed
  • Check frequency

Opportunities¶

Click Opportunities from the menu on the left. View areas for improvement that can boost the page load speed of your site and improve its performance. The suggestions provided are highly targeted with examples that include how to enable text compression and identify render-blocking resources. 

The recommendations are presented in an easy-to-understand way with links to documentation from Google resources.

This page contains a table with the following column headers:

• Audit: The name and description of the check with a link to learn more about it
• Difficulty: The level of difficulty to improve the criteria
• Priority: The priority level to consider when you plan the work
• Relevant for: The load time trend specifications
• Details button: Click to view a table with the following column headers:
  • URL: The URL for the item or page
  • Resource Size: The size of the item or page
  • Est Savings: The estimated savings presented in kilobytes

Diagnostics¶

Click Diagnostics from the menu on the left. View page diagnostics for information about flagged issues on your page. This list provides information about each issue, how it impacts your site, why it needs to be fixed, and a link to instructions on how to fix it.

This page contains a table with the following column headers:

• Audit: The name and description of the check with a link to learn more about it.
• Difficulty: The level of difficulty to improve the criteria.
• Priority: The priority level to consider when you plan the work.
• Relevant for: The load time trends that this issue affects, if any.
• Details: Click to expand the criteria. The system displays audit details for each page or resource where this criteria can be improved.
  • FCP
    • Failure reason
    • Failure type
  • LCP
    • URL
    • Est Savings (in milliseconds)
  • SI: The Speed Index
  • TBT
    • Third-party
    • Transfer size
    • Main-thread blocking time
  • CLS
    • Image name
    • Image URL

History¶

Click History from the menu on the left for a view of performance status over time.

This page contains the following:

• A line graph that displays the measurements over time.
• A table with the headers:
  • Scanned at: The date of the most recent scan.
  • Performance score: The overall percentage presented in a ring graph.
  • First Contentful Paint (FCP): The indication of how much time in milliseconds that the performance for this measurement has changed since the last scan. A red (down) arrow indicates a decrease in FCP, a green (up) arrow indicates an increase in FCP.
  • Largest contentful paint (LCP): The indication of how much time in milliseconds that the performance for this measurement has changed since the last scan. A red (down) arrow indicates a decrease in LCP, a green (up) arrow indicates an increase in LCP.
  • Speed Index (SI): The indication on how much time in milliseconds that the performance for this measurement has changed since the last scan. A red (down) arrow indicates a decrease in SI, a green (up) arrow indicates an increase in SI.
  • Total Blocking Time (TBT): The indication of how much time in milliseconds that the performance for this measurement has changed since the last scan. A red (down) arrow indicates a decrease in TBT, a green (up) arrow indicates an increase in TBT.
  • Cumulative Layout Shift (CLS): The indication of how much time in milliseconds that the performance for this measurement has changed since the last scan. A red (down) arrow indicates a decrease in CLS, a green (up) arrow indicates an increase in CLS.

Add new performance page¶

1. Navigate to your domain.

2. Click Performance (the gauge icon) on the domain toolbar. 

   The system displays the Performance dashboard. 

3. Click Add New Page.

The system displays the New Performance Page.

4. Select page to scan: Click in the search box and begin to type the name of the page. The list of available pages expands. Select the page that you want to add.
5. Scan frequency: Select the frequency for the performance check.
   • Once a day
   • Once a week

6. Visitor Profile: Click in the field and select a visitor profile from the expanded list. Choose as many as needed. For instructions on how to add a new visitor profile, see the corresponding section of this document.

   The system updates the Summary page with the following details about the selections:

   • URL: The URL to the page.
   • Scan Frequency: The frequency of the Performance scan
   • Visitor Profile (if selected): The specific visitor profile selected
7. Click Save on the bottom right.

Edit a Performance page¶

This section provides instructions on how to edit a Performance page.

1. Navigate to your domain.

2. Click Performance (the gauge icon) on the domain toolbar. 

   The system displays the Performance dashboard. 

3. On the same row as the page you want to edit, click Actions and select Edit.

The system displays the Edit Performance Page.

4. Edit the fields as needed.
5. Click Save on the bottom right.

Remove a profile from a page¶

This section provides instructions on how to edit an existing Performance page.

1. Navigate to your domain.

2. Click Performance (the gauge icon) on the domain toolbar. 

   The system displays the Performance dashboard. 

3. On the same row as the page you want to edit, click Actions and select Edit.

The system displays the Edit Performance Page.

4. In the Visitor Profile field, use the drop-down arrow to expand the options and select an existing visitor profile.

5. In the Summary section, click the kebab menu on the profile that you want to remove and select Remove Profile.

   The system displays a confirmation dialog box.

6. Click OK to confirm.
7. Click Save on the bottom right.

Remove a Performance page¶

1. Navigate to your domain.

2. Click Performance (the gauge icon) on the domain toolbar. 

   The system displays the Performance dashboard. 

3. On the same row as the page you want to remove, click Actions and select Delete. 

   The system displays a confirmation dialog box.

4. Type “Delete” in the dialog box and then click OK to confirm.

Visitor profiles¶

This section provides instructions on how to add, edit, and remove a visitor profile.

Create a visitor profile¶

This section provides instructions for admin users on how to add a new profile to the list during new page creation.

1. Click Admin Settings (the gear icon) on the main toolbar.

   The system displays the Admin dashboard.

2. Click Configuration on the left menu and select Performance Profiles from the expanded list.

3. Click +Add profile.

   The system displays the Add Performance profile dialog box.

4. Fill in the details for the new user profile:
   • Name: Enter a name for the profile.
   • Description: Enter a description for the profile.
   • Device: Select the device from the selection: Desktop or Mobile.
   • Connection Profile: Click the drop-down arrow and select from the list:
     • Cable
     • 3G Regular
     • 4G Slow
     • DSL
     • LTE
   • Measure from: Click the drop-down arrow and select a geographical location to measure the connection from.

5. Click Save.

   The system saves the profile and closes the dialog box.

Add a visitor profile to an existing page¶

This section provides instructions on how to add a new profile to the list from an existing page.

1. Navigate to your domain.

2. Click Performance (the gauge icon) on the domain toolbar.

   The system displays the Performance dashboard. 

3. On the same row as the page you want to add the profile to, click Actions and select Edit from the expanded menu.
4. The system displays the Edit Performance Page.
5. In the Visitor profile section, click Select a profile to expand the list and then select the profile to add.
6. Click Save to apply the visitor profile to the scan for performance issues on the page.

Edit a visitor profile¶

This section provides instructions on how to edit a profile.

1. Click Admin Settings (the gear icon) on the main toolbar.

   The system displays the Admin dashboard.

2. Click Configuration on the left menu and select Performance Profiles from the expanded list.

3. On the same row as the page you want to edit, click Actions and select Edit from the expanded menu.

   The system displays the Edit Performance profile page.

4. Edit as needed.
5. Click Save.

Archive a visitor profile¶

This section provides instructions on how to archive a visitor profile.

1. Click Admin Settings (the gear icon) on the main toolbar.

   The system displays the Admin dashboard.

2. Click Configuration on the left menu and select Performance Profiles from the expanded list.

3. On the same row as the profile you want to archive, click Actions and select Archive from the expanded list.

   The system displays a dialog box with information about the pages that use the profile.

4. Click Save.

Additional resources¶

For a list of the IP addresses used for the Performance add-on, visit Data hosting and security.

For more information on how performance scores are calculated, visit:

• Google WebDev Performance Audits
• Lighthouse performance scoring
• Lighthouse scoring calculator
• Chrome Performance Audits (Metrics)