Here are some of my favorite performance data collection tools that we use to be more performance conscious when developing Narrative: google beacon In about 15 seconds, Google Lighthouse completes a high-level performance audit of any web page. Like PageSpeed Insights, Lighthouse has a bit of a learning curve because it displays results in plain text. There are no graphs, waterfall charts, or pie charts, just easy-to-read text metrics with links to documentation for more information. Google Lighthouse was our go-to tool when we ran quick performance experiments related to improving our theme’s SpeedIndex. It allowed us to quickly validate how much improvement we could see in a solution, before spending too much time implementing it across the entire project.
Even cooler, Lighthouse was recently announced to be integrated with Chrome DevTools and is currently available for use in Chrome Canary 60. SpeedCurve Narrative Web Performance: SpeedCurve Have you ever audited your website with a service like WebPageTest and found that you get different results from each test, even though Cambodia B2B List nothing has changed? There are tons of variations in performance auditing that result in a margin of error. SpeedCurve overcomes test variability by saving WebPageTest data and displaying it over time. This allows you to spot outliers in test results, giving you more accurate metrics. Since SpeedCurve tests and displays performance results at least once a day, you’ll always have an up-to-date history of your project’s performance.
Chrome Developer Tools
SpeedCurve proved incredibly valuable to us throughout Narrative’s development and served as a constant benchmark for performance metrics as we merged new features. It allowed us to stay on top of changes that caused significant performance issues and keep our project within our performance budget. Chrome developer tools If you are serious about performance and want to know exactly what is causing any issues, then Chrome DevTools is your best friend. It includes some of the most detailed performance auditing tools available for your theme. With new features being released every few months, it just keeps getting better and better. Due to its incredible amount of features.
DevTools has a pretty steep learning curve. Fortunately, Google has put some time into the Chrome DevTools documentation. DevTools was used throughout the development of Narrative to identify the exact code responsible for a number of performance bottlenecks. It’s also a great tool for testing page runtime performance for blocking scroll fonts and poor animation frame rate. Analysis of performance data for bottlenecks and determination of high-impact solutions. Narrative Web Performance: Page Load Optimization A before and after of our page load optimizations to Narrative. Now that you have data flowing through your veins, it’s time to find out what it all means.
Bottlenecks and Determination of High-impact
Take a look at your performance budget and compare those metrics to the data you collected. What metrics don’t align with the ones you set out in your performance budget? Which metrics are further apart? Pick a metric of interest that needs improvement and break it down into core components. For example, first render time is a metric that is up. Of a combination of server response time and critical render path. The critical render path is made up of even more metrics. Explore these underlying metrics and what code influences them. Compare these metrics with other projects. Can they be improved? If so, for how much? This is how you discover performance bottlenecks. Once you’ve identified a performance bottleneck, you can start experimenting with solutions.