--- title: "How to use the Performance add-on" date: "2025-02-14T10:53:39+00:00" summary: "Learn how to use the Performance add-on to analyze and improve your website's speed, user experience, and SEO with detailed diagnostics and recommendations." image: type: "page" url: "/web-governance/how-use-performance-add" id: "4b2962a9-9428-4868-9597-0e5a08d1ca5f" --- Introduction ------------ This article provides instructions on how to find and use the data provided in the Performance add-on. Performance dashboard --------------------- This section provides information about the functions and information on the performance landing page. The pages that are available in the _Performance_ module are displayed in a list. * **Search**: Click in the dialog box and type a search parameter. * **URL** list: Click a page URL. The _Page Details_ page opens. * **Open in**: At the top of the pane just below the heading, select a method to open the page in (default is the tool view): ![The location of the Open In buttons; on the top left side of the Details pane.](https://acquia.widen.net/content/1adbd2af-f795-4555-961a-2fc5f0c8e59b/web/Mon_Performance-URL-OpenIn.png) * **CMS** (if used, the name of the CMS shows here): Click to view the page via the CMS. * **Redirect to Page** (magnifying glass icon): Click to navigate to the page URL and view the page as an external visitor. _Tip_: If it is installed, use the Web Governance Web Browser Extension to identify the placement of the errors on the page, repair the errors, and more. For more information, visit [Web browser extension](/node/58711). * **Re-scan this page** (refresh icon): Click to rescan the current page at any time. * The page is divided into sections: * The top section gives information on the selected profile: * **Viewing as profile**: This shows the profile that is being used. For more information, see the _Add profile_ section of this document. * **Device**: The type of device used. * **Measure from**: Distance from the server location. * **Network speed**: The speed of the network. * **Check frequency**: The frequency of the check. The Dashboard always shows data with the default profile selected. To change this, select a new profile (click the drop-down arrow to see the available profiles). Please be aware that changing the profile causes the numbers on all 3 sections in the Performance module to update accordingly. * **Performance score**: On the same row as a URL, this score is a quick visual of site performance. * **Score donut**: This chart shows the percentage of performance criteria that the page meets. * **Timeline**: Displays a graph of the last 8 scans. * **Opportunities by priority**: Shows the number of checks done/remaining and the total number of checks, sorted from high to low priority. See also the difficulty level of the issues. * **User loading experience**: This section contains: ![The User Loading Experience section of the Performance landing page.](https://acquia.widen.net/content/1aae31b0-2373-480c-9210-b7032c43b45c/web/Mon_Performance-UserLoadingExperienceSection.png) * Graph that shows user loading experience. The data is arranged per date and shows metrics for: * First contentful paint (FCP) * Largest contentful paint (LCP) * Speed Index (SI) * Total Blocking Time (TBT) * Cumulative Layout Shift (CLS). For more information about these metrics scores, visit [Chrome Performance Audits (Metrics)](https://developer.chrome.com/docs/lighthouse/performance/). * **Load times trend**: A chart shows the user loading experience on a visual performance timeline that identifies when FCP, FMP, and TTI occur. Also provided is a breakdown of load time trends, detailing the average FMP, FCP, and TTI. Note If the graph on your results page has an orange line, this signifies a jump in statistics due to upgrades or changes to the module. Click the label on the orange line to view the reasons for the discrepancy. Opportunities ------------- From the menu on the left, select **Opportunities**: This section shows areas on the page that can be improved to boost the load speed and improve performance. The suggestions provided are highly targeted and include examples. See recommendations for improvement, as well as documentation from Google resources. * The top section provides information on the profile that is used: * **Viewing as Profile**: This shows the profile that is being used. For more information, see the _Add profile_ section of this document. * **Device**: The type of device used. * **Measure from**: Distance from the server location. * **Network speed**: The speed of the network. * **Check frequency**: The frequency of the check. The Dashboard always shows data with the default profile selected. To change this, select a new profile (click the drop-down arrow to see the available profiles). Please be aware that when you change the profile, the numbers on all three sections inside the Performance module update accordingly. * **Sort between**: Select the criteria for the list to show: * **Errors**: Sort the list to show only errors that can be remedied to improve performance. * **Passed**: Sort the list for Passed opportunities. * **Export**: Click Export. The current page is downloaded locally in CSV format. * **Search**: Begin typing to search the list of opportunities. The list results have the following columns: * **Audit**: The name of the opportunity and a short description of improvements. * **Learn More**: Click to redirect to the Google Lighthouse external page with advanced information and details about the opportunity, as well as instructions and methods that can help improve performance scores. * **Difficulty**: Level of difficulty to implement the improvement. * **Priority:** Priority level of the issue. * **Details**: Each row has this button. Click to view the audit details for the opportunity. Provides a list of highly specific suggestions that can help improve site performance and speed. Click **Learn More** to navigate to external internet resources for advanced help. * **URL**: The URL where the issue is located. * **Size**: The size of the image/file. * **Potential savings**: The savings that can be achieved if the suggested fix is done. **Opportunities that can appear**: Follow the external links below for the definition of each opportunity, as provided by Google Lighthouse. Information and links to each opportunity definition, as well as suggested fixes, are available in Web Governance for each opportunity that is flagged. * [Eliminate render-blocking resources](https://web.dev/render-blocking-resources/) * [Properly size images](https://web.dev/uses-responsive-images/) * [Defer offscreen images](https://web.dev/offscreen-images/) * [Minify CSS](https://web.dev/unminified-css/) * [Minify JavaScript](https://web.dev/unminified-javascript/) * [Remove unused CSS](https://web.dev/unused-css-rules/) * [Efficiently encode images](https://web.dev/uses-optimized-images/) * [Serve images in modern formats](https://web.dev/uses-webp-images/) * [Enable text compression](https://web.dev/uses-text-compression/) * [Preconnect to required origins](https://web.dev/uses-rel-preconnect/) * [Reduce server response times (TTFB)](https://web.dev/time-to-first-byte/) * [Avoid multiple page redirects](https://web.dev/redirects/) * [Preload key requests](https://web.dev/uses-rel-preload/) * [Use video formats for animated content](https://web.dev/efficient-animated-content/) * [Reduce the impact of third-party code](https://web.dev/third-party-summary/) * [Avoid non-composited animations](https://web.dev/non-composited-animations/) * [Lazy load third-party resources with facades](https://web.dev/third-party-facades/). Diagnostics ----------- From the menu on the left, select **Diagnostics**. This feature flags particular issues that can potentially slow the loading times. View the exact problem, how it impacts the webpage, and why the fix is needed. * The top section gives information on the profile that is being used for the results shown: * **Viewing as Profile**: This shows the profile that is being used. For more information, see the _Add profile_ section in this document. * **Device**: The type of device used. * **Measure from**: Distance from the server location. * **Network speed**: The speed of the network. * **Check frequency**: The frequency of the check. The Dashboard always shows data with the default profile selected. To change this, select a new profile (click the drop-down arrow to see the available profiles). Please be aware that when you change the profile, the numbers on all three sections inside the Performance module update accordingly. * **Sort for**: * Errors * Passed. * **Export**: Click **Export.** The current page is downloaded locally in CSV format. * **Search**: Begin typing to search the list of opportunities. The list results have the following columns: * **Audit:** The name of the audit check that needs improvement. * **Difficulty**: Level of difficulty to implement the improvement. * **Priority:** Priority level of the issue. * **Details**: Click to view the audit details for diagnostics. * **Diagnostics that can appear**: Follow the external links below for information from Google Lighthouse on the definition of each diagnostic. Information and links to each definition, as well as suggested fixes, are also available in Web Governance for each diagnostics check that is flagged. * [Avoid enormous network payloads](https://web.dev/total-byte-weight/) * [Serve static assets with an efficient cache policy](https://web.dev/uses-long-cache-ttl/) * [Avoid an excessive DOM size](https://web.dev/dom-size/) * [Avoid chaining critical requests](https://web.dev/critical-request-chains/) * [User Timing marks and measures](https://web.dev/user-timings/) * [Reduce JavaScript execution time](https://web.dev/bootup-time/) * [Minimize main thread work](https://web.dev/mainthread-work-breakdown/) * [Ensure text remains visible during webfont load](https://web.dev/font-display/) * [Keep request counts low and transfer sizes small](https://web.dev/resource-summary/). History ------- From the menu on the left, select **History**. This page shows the historical status of website performance. Scores from all past scans are available to help you analyze and view trends. * The topmost section gives information on the profile that is being used for the results shown. * **Viewing as Profile**: This shows the profile that is being used. * For more information, see the _Add profile_ section in this document. * **Device**: The type of device used. * **Measure from**: Distance from the server location. * **Network speed**: The speed of the network. * **Check frequency**: The frequency of the check. The Dashboard always shows data with the default profile selected. To change this, select a new profile (click the drop-down arrow to see the available profiles). Please be aware that when you change the profile, the numbers on all three sections inside the Performance module will update accordingly. * Graph with performance speed and date as well as a donut chart showing the average performance score. * **Scan history results**: This table shows valuable scan data from previous scans. * **Scanned at**: Date and time of scan. * **Performance Pages**: Number of pages scanned for performance issues. * **Avg. Performance Score**: The average of the overall performance score percentage. This is a weighted average of the _metric scores_, which means that some metrics have more impact on your overall Performance score. This figure is calculated in the background, it is not an average of the statistics in the shown categories. * **Avg. First contentful paint (FCP)**: Milliseconds with diff since the last scan. **First content paint** marks the time at which the first text or image is painted by measuring how long it takes the browser to render the first piece of DOM content after a user navigates to your page. * **Avg. Largest contentful paint (LCP)**: This metric represents the time duration between the user initiating the page load and the page rendering its primary content. * **Avg. Speed Index (SI)**: This metric shows the speed at which the content on a page is visibly populated. * **Avg. Total Blocking Time (TBT)**: This is the sum of all time periods between **FCP** and **Time to Interactive** when the task length exceeds 50ms, expressed in milliseconds. * **Avg. Cumulative Layout Shift (CLS)**: This is the measurement of the movement of visible elements within the viewport. For more information, visit [History center](/web-governance/history-center-introduction "History Center introduction"). Additional resources -------------------- For instructions on how to add and configure the Performance add-on, visit [Performance setup](/node/58971).