pagespeed

How We Built our frontend performance monitor dashboard using PageSpeed, Apps Script, Google Sheet & Data Studio

我们如何使用PageSpeed，Apps Script，Google Sheet和Data Studio构建前端性能监视器仪表板

In NE Digital, we are obsessed with providing the best user experience & speed is a key component of it. We are also data-driven, therefore before making a change we always measure the before and after. To enable this data-driven approach for frontend performance, we recently built our frontend performance monitoring dashboard for the Fairprice website.

在NE Digital中，我们着迷于提供最佳的用户体验，而速度是其中的关键组成部分。 我们也是数据驱动的，因此在进行更改之前，我们总是先评估前后。 为了使这种数据驱动的方法能够实现前端性能，我们最近为Fairprice网站构建了前端性能监控仪表板。

This dashboard helped us to understand the current values of different key performance metrics (FCP, LCP, TBT, CLS, TTI) for our website & set a baseline for those. It also enabled us to monitor continuously & easily find performance regression issues on production and fix it.

该仪表板帮助我们了解了网站不同关键绩效指标( FCP ， LCP ， TBT ， CLS ， TTI )的当前值，并为这些指标设定了基准。 这也使我们能够连续监视并轻松找到生产中的性能下降问题并进行修复。

Performance is a constant process, not a one-time checklist. It requires continuous monitoring and work. A useful workflow when investing in performance is Measure, Optimize & Monitor. Addy Osmani

性能是一个持续的过程，而不是一次性的清单。 它需要持续的监控和工作。 投资绩效时有用的工作流程是衡量，优化和监控。 艾迪·奥斯曼尼(Addy Osmani)

广泛使用的合成测试工具 (Widely used synthetic testing tools)

These are a few of the very popular tools among frontend developers for synthetic testing and finding performance bottlenecks that we are also using internally.

这些是前端开发人员中用于综合测试和发现我们也在内部使用的性能瓶颈的一些非常流行的工具。

PageSpeed见解 (PageSpeed insights)

PageSpeed insight is one of the most popular tools and it combines data from the lighthouse to give synthetic testing data and CRUX data to give real user loading experience information.

PageSpeed洞察力是最受欢迎的工具之一，它结合了来自灯塔的数据，以提供综合测试数据和CRUX数据，从而提供真实的用户加载体验信息。

网页测试 (Webpagetest)

Webpagetest is another very popular tool and includes lots of config options such as device type, testing location, network connection, etc. It provides some very useful insights into its waterfall to performance issues. We also use its filmstrip view to focus on LCP and Speed Index.

Webpagetest是另一个非常流行的工具，它包含许多配置选项，例如设备类型，测试位置，网络连接等。它提供了一些非常有用的洞察力，以了解其性能问题。 我们还使用其幻灯片视图将重点放在LCP和速度索引上 。

灯塔 (Lighthouse)

Lighthouse is inbuilt in the Google Chrome dev tool and that makes it very easy to quickly measure any of the performance metrics before/after making any change. It is very easy to use and it detects and gives suggestions on how to improve the performance of different metrics.

Lighthouse内置在Google Chrome开发者工具中，可以轻松地在进行任何更改之前/之后快速测量任何性能指标。 它非常易于使用，并且可以检测并提供有关如何提高不同指标性能的建议。

灯塔问题 (Problem with lighthouse)

Lighthouse score varies from system to system 😈. There are many reasons for this variability. Even the score varies between different run 😭😭. This was causing some confusion and also different scores for each run was adding difficulty in setting a baseline for different metrics and performance scores.

灯塔得分因系统😈而异。 这种可变性有很多原因。 即使分数不同，运行run也不同。 这造成了一些混乱，并且每次运行的分数不同也增加了为不同指标和性能分数设定基准的难度。

https://starecat.com/ https://starecat.com/

我们的解决方案 (Our solution)

To solve the problem we decided to use PageSpeed insights which is a hosted lab environment and has a public API. We decided to call PageSpeed API on a specific interval and average the metric values and scores in our dashboard.

为了解决该问题，我们决定使用PageSpeed见解，这是一个托管的实验室环境，并且具有公共API。 我们决定按特定的时间间隔调用PageSpeed API，并在信息中心中平均指标值和得分。

我们的方法 (Our Approach)

Use Google Apps Script to periodically call PageSpeed API.

使用Google Apps脚本定期调用PageSpeed API 。

Save the PageSpeed insight data using Google Sheets.

使用Google表格保存PageSpeed洞察数据。

Create a different set of visualizations in data-studio from this google sheet data.

根据此Google工作表数据在data-studio中创建一组不同的可视化效果。

To utilize these google services, we used our G Suite account but these services are also available to any Gmail account and after accepting the terms conditions we can quickly start to use it. We got our PageSpeed API key from here.

要使用这些Google服务，我们使用了G Suite帐户，但所有Gmail帐户也都可以使用这些服务，并且在接受条款条件后，我们可以快速开始使用它。 我们从这里获得了PageSpeed API密钥。

Now that we are clear about the flow, let’s set up the things.

现在我们已经了解了流程，让我们进行设置。

https://thumbs.gfycat.com/ https://thumbs.gfycat.com/

配置Google表格和Apps脚本 (Configure google sheet & Apps script)

In Google Sheets, we can find the Script Editor in the Tools tab. Here we have created a sheet name results. This same name will be used later in apps script to refer to this sheet. This sample google sheet can be used for reference.

在Google表格中，我们可以在“工具”标签中找到“脚本编辑器”。 在这里，我们创建了一个工作表名称结果 。 稍后在应用程序脚本中将使用相同的名称来引用此工作表。 此示例Google表格可以用作参考。

Script editor option under Tools tab in google sheet Google工作表中“工具”标签下的脚本编辑器选项

Once we click on the Script editor, it will take us to a script editor view in a new tab. Google Apps script uses javascript so it is very easy for frontend developers to use.

单击脚本编辑器后，它将带我们到新选项卡中的脚本编辑器视图。 Google Apps脚本使用javascript，因此前端开发人员可以轻松使用。

New script view in Apps Script Apps脚本中的新脚本视图

Next, we are going to replace the default code with the below code and save the changes. After that, we have to replace PAGESPEED_API_KEY with our own PageSpeed API key and YOUR_WEBSITE with the website URL we want to monitor.

接下来，我们将用以下代码替换默认代码并保存更改。 之后，我们必须将PAGESPEED_API_KEY替换为我们自己的PageSpeed API密钥，并将YOUR_WEBSITE替换为我们要监视的网站URL。

code to pull PageSpeed API data and insert in Google Sheet 代码以提取PageSpeed API数据并插入Google表格中

The above code is calling PageSpeed Insight API for the given website and collecting data for desktop and mobile strategy. After that, it is inserting the data into the results sheet that we earlier created.

上面的代码正在为给定的网站调用PageSpeed Insight API，并为桌面和移动策略收集数据。 之后，它将数据插入到我们先前创建的结果表中。

让我们尝试细分代码的作用 (Let’s try to breakdown what the code is doing)

Here, the above code is connecting to a google sheet and selecting the sheet named results. This will be used in different functions to perform several write operations on the results sheet.

在这里，以上代码将连接到Google工作表并选择名为results的工作表。 这将用于不同的功能，以在结果表上执行多个写操作。

createHeaders function creates the columns that we want to set for our sheet. Here we are setting 9 column headers and we are inserting the names of those columns using the range.setValues method. This createHeaders function we just need to run once to set the column names for the sheet.

createHeaders函数创建我们要为工作表设置的列。 在这里，我们设置9个列标题，并使用range.setValues方法插入这些列的名称。 我们只需运行一次createHeaders函数即可设置工作表的列名。

monitor function is the function which is calling getPageSpeedInfo function to get API information from PageSpeed then feeding the data to instertDataToSheet function to insert the data to the sheet. This is the function that we are going to configure later to execute using Apps Scripts triggers.

监视函数是调用getPageSpeedInfo函数以从PageSpeed获取API信息，然后将数据提供给instertDataToSheet函数的函数 将数据插入工作表。 这是我们稍后将配置的功能，以使用Apps Scripts 触发器执行。

getPageSpeedInfo function is pretty straightforward, it calls PageSpeed API and returns the result.

getPageSpeedInfo函数非常简单，它调用PageSpeed API并返回结果。

As the name suggests instertDataToSheet functions insert various metrics data captured via PageSpeed API to the results sheet.

顾名思义instertDataToSheet函数 将通过PageSpeed API捕获的各种指标数据插入结果表。

We went to https://developers.google.com/speed/docs/insights/v5/get-started to see sample API response to understand which informations are captured from lighthouse and crux data and decide which ones to capture in our google sheet for monitoring.

我们去了https://developers.google.com/speed/docs/insights/v5/get-started，以查看示例API响应，以了解从灯塔和关键数据中捕获了哪些信息，并决定在Google工作表中捕获了哪些信息。用于监视。

在Apps脚本中运行代码 (Running code in Apps Script)

Executing code in Apps script is very simple, We can find the Run function in the Run tab. It will show us all the functions from our code that can be executed.

在Apps脚本中执行代码非常简单，我们可以在“ 运行”选项卡中找到“ 运行”功能 。 它将向我们展示代码中可以执行的所有功能。

Running code in Apps Script 在Apps脚本中运行代码

We are going to run createHeaders function to set headers for the results sheet. and once it completes running, we will go to the google sheet and verify that the headers got added successfully.

我们将运行createHeaders函数来设置结果表的标题。 并完成运行后，我们将转到Google工作表并验证标题是否已成功添加。

Header columns got added to the results sheet 标题列已添加到结果表

To pull data from PageSpeed API we are going to run the monitor function and once the function finishes executing, it will append two rows in the sheet; one for desktop, another for mobile.

要从PageSpeed API中提取数据，我们将运行Monitor函数，一旦函数执行完毕，它将在工作表中追加两行； 一个用于桌面，另一个用于移动。

PageSpeed API information is inserted in Google Sheet by Apps Script 通过Google脚本将PageSpeed API信息插入Google表格中

在Apps脚本中设置触发器 (Setting up a trigger in Apps Script)

Now that we have verified our code is working fine and data is getting saved properly in google sheets; we can set up a trigger to run this automatically like a cronjob on certain intervals. This will ensure that our website’s PageSpeed insight data is collected automatically at regular intervals.

现在，我们已经验证了我们的代码可以正常工作，并且数据已正确保存在Google表格中； 我们可以设置一个触发器，使其在一定的时间间隔内像cronjob一样自动运行。 这将确保定期定期自动收集我们网站的PageSpeed洞察数据。

Below you can see how to set up an hourly trigger for monitor function that we have written earlier.

在下面，您可以看到如何为我们之前编写的监视器功能设置每小时触发器。

Setting up triggers in Apps Script 在Apps脚本中设置触发器

在Data-Studio中创建可视化 (Creating visualization in data-studio)

Once we create a blank report in data-studio it will display us a view similar to below with many possible connectors. Since we have stored our data on google sheet, we will choose the Google Sheets connector.

在data-studio中创建空白报告后，它将为我们显示类似于以下视图的视图，其中包含许多可能的连接器。 由于我们已将数据存储在Google表格中，因此我们将选择Google表格连接器。

New Connector adding option in data studio Data Studio中的新连接器添加选项

Once Google Sheets connector is selected it will list the pagespeed sheet in all items. Once we click on add, it will get the data source connection.

选择Google表格连接器后，它将在所有项目中列出pagespeed表格。 一旦我们点击添加 ，它将获得数据源连接。

Google Sheet is added as a source for data studio Google表格已添加为Data Studio的来源

Voila, that’s all 🥳 🥳 🚀 🚀. Now we are all set to create our own visualization from the PageSpeed API information.

瞧，仅此而已。 现在，我们已经准备好根据PageSpeed API信息创建自己的可视化文件。

奖励积分 (Bonus Point)

In the next article, I will mention some of the hidden gems of PageSpeed Insight API. I will also share a few of the charts we created using that information & how we get performance-related insights using them.

在下一篇文章中，我将提及PageSpeed Insight API的一些隐藏要素。 我还将分享一些我们使用该信息创建的图表，以及如何使用它们获得与性能相关的见解。

一些选择 (Some alternatives)

Here are some of the alternatives that you can also consider for your performance metric dashboard.

您还可以考虑以下一些性能指标仪表板的替代方案。

Sitespeed.io is an open-source performance monitoring tool and it already includes Webpagetest, PageSpeed, Browsertime, Crux, and many other useful plugins. I 😍 sitespeed.io and some of the dashboards we use are heavily inspired by them.

Sitespeed.io是一个开放源代码性能监视工具，它已经包括Webpagetest，PageSpeed，Browsertime，Crux和许多其他有用的插件。 我😍sitespeed.io和我们使用的某些仪表板均受其启发。

Speedcurve is a paid tool with both synthetic testing & RUM solution and very popular in the frontend community.

Speedcurve是一款具有综合测试和RUM解决方案的付费工具，在前端社区中非常受欢迎。

未来目标 (Future goals)

We are currently investigating how to correlate the performance metrics with the business metric to find how performance improvement translates to different business metrics such as Add to Cart, Bounce Rate, Conversion, etc.

我们目前正在研究如何将绩效指标与业务指标相关联，以发现绩效改进如何转化为不同的业务指标，例如“ 添加到购物车” ，“ 跳出率” ，“ 转化 率”等。

Another area that we are looking for is setting up alerts so we can get a notification on performance regression. Currently, the data studio doesn’t support this feature 😭😭. In the meantime, we are exploring Apps Script for setting up this feature.

我们正在寻找的另一个领域是设置警报，以便我们可以收到有关性能下降的通知。 当前，数据工作室不支持此功能 。 同时，我们正在探索Apps脚本来设置此功能。

Disclaimer: Opinions are my own and not the views of my employer.

免责声明 ：观点是我自己的，而不是雇主的观点。

翻译自: https://medium.com/ne-digital/build-frontend-performance-monitor-dashboard-using-pagespeed-insights-e807a2caa6cf

pagespeed

相关资源：微信小程序源码-合集6.rar