如何使用自定義功能在Google表格中顯示Lighthouse評分

已發表: 2020-11-19

自動化和機器學習具有巨大的潛力，可以幫助我們所有人進行營銷。但是目前，這些工具中的許多工具對於那些無法編寫代碼或可以編寫一些代碼但又不太適應它的人來說是無法使用的。

經常發生的情況是，辦公室裡只有一兩個人熟悉編寫和編輯代碼，然後這些人製作了其他人都可以運行的腳本和筆記本。工作流程看起來像這樣：

我將向您展示一種簡化此工作流程的簡單方法，以消除人們需要運行腳本並格式化輸出的步驟。相反，他們可以直接從Google表格中運行自動化程序。

我將向您展示的示例是針對Sheets定制函數的，該函數返回如下gif所示URL的Lighthouse分數：

我將向您展示的方法不是實現此目的的唯一方法，但它確實說明了一種更通用的技術，可用於許多方面，包括機器學習算法。

有兩個部分：

一個Google Cloud Run應用程序，它將執行複雜的工作（在這種情況下，將運行Lighthouse測試），並將響應HTTP請求。
一個Appscript自定義函數，它將向您在步驟1中創建的API發出請求，並將結果返回到Google表格中。

雲運行應用程序

Cloud Run是一項Google服務，可獲取您提供的docker映像並通過HTTP使其可用。您只需在發出HTTP請求時付款，因此對於不全天候使用的此類服務，它非常便宜。實際成本將取決於您使用它的數量，但是我估計運行數千個測試每月不到1美元。

我們需要做的第一件事是製作一個Docker映像，當我們向它發出HTTP請求時將執行Lighthouse分析。對我們來說幸運的是，有一些文檔顯示瞭如何在Github上以編程方式運行Lighthouse審核。鏈接的代碼將分析保存到文件中，而不是通過HTTP返迴響應，但是通過將整個內容包裝在Express應用程序中，可以很容易地解決此問題，如下所示：

 const express = require('express'); const app = express(); const lighthouse = require('lighthouse'); const chromeLauncher = require('chrome-launcher'); app.get('/', async (req, res) => { // Check that the url query parameter exists if(req.query && req.query.url) { // decode the url const url = decodeURIComponent(req.query.url) const chrome = await chromeLauncher.launch({chromeFlags: ['--headless', '--no-sandbox','--disable-gpu']}); const options = {logLevel: 'info', output: 'html', port: chrome.port}; const runnerResult = await lighthouse(url, options); await chrome.kill(); res.json(runnerResult.lhr) } }); const port = process.env.PORT || 8080; app.listen(port, () => { console.log(`Listening on port ${port}`); });

將此代碼另存為index.js。

然後，您還將需要一個名為package.json的文件，該文件描述瞭如何安裝上述應用程序和一個Dockerfile，以便我們將所有內容打包在Docker中。所有代碼文件都可以在Github上找到。

 package.json { "name": "lighthouse-sheets", "description": "Backend API for putting Lighthouse scores in Google sheets", "version": "1.0.0", "author": "Richard Fergie", "license": "MIT", "main": "index.js", "scripts": { "start": "node index.js" }, "dependencies": { "express": "^4.17.1", "lighthouse": "^6.3" }, "devDependencies": {} } Dockerfile # Use the official lightweight Node.js 10 image. # https://hub.docker.com/_/node FROM node:12-slim # Our container needs to have chrome installed to # run the lighthouse tests RUN apt-get update && apt-get install -y \ apt-transport-https \ ca-certificates \ curl \ gnupg \ --no-install-recommends \ && curl -sSL https://dl.google.com/linux/linux_signing_key.pub | apt-key add - \ && echo "deb https://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google-chrome.list \ && apt-get update && apt-get install -y \ google-chrome-stable \ fontconfig \ fonts-ipafont-gothic \ fonts-wqy-zenhei \ fonts-thai-tlwg \ fonts-kacst \ fonts-symbola \ fonts-noto \ fonts-freefont-ttf \ --no-install-recommends \ && apt-get purge --auto-remove -y curl gnupg \ && rm -rf /var/lib/apt/lists/* # Create and change to the app directory. WORKDIR /usr/src/app # Copy application dependency manifests to the container image. # A wildcard is used to ensure copying both package.json AND package-lock.json (when available). # Copying this first prevents re-running npm install on every code change. COPY package*.json ./ # Install production dependencies. # If you add a package-lock.json, speed your build by switching to 'npm ci'. # RUN npm ci --only=production RUN npm install --only=production # Copy local code to the container image. COPY . ./ # Run the web service on container startup. CMD [ "node", "--unhandled-rejections=strict","index.js" ]

構建docker映像，然後您可以像這樣在自己的計算機上本地測試事物：

首先啟動圖像：

 docker run -p 8080:8080 lighthouse-sheets

然後測試看看是否可行：

 curl -v "localhost:8080?url=https%3A%2F%2Fwww.example.com"

或在瀏覽器中訪問localhost：8080？url = https％3A％2F％2Fwww.example.com。您應該看到很多JSON。

下一步是將圖像推送到Google Container註冊表中。對我來說，這是一個簡單的命令：

 docker push gcr.io/MY_PROJECT_ID/lighthouse-sheets

但是您可能必須先設置docker身份驗證，然後才能執行此操作。另一種方法是使用Google Cloud Build製作圖像。如果您無法通過身份驗證，這對您可能會更好。

接下來，您需要使用此Docker映像創建Cloud Run服務。

打開Cloud Run，然後單擊“創建服務”

命名並調整設置。 您必須給服務起一個名字並配置其他一些設置：

最好選擇一個與您網站的大多數受眾所居住的地區接近的地區。從東京檢查英國站點的站點速度不會獲得與您的受眾相同的結果。

為了讓您從Google表格調用此服務，它必須允許未經身份驗證的調用。如果您擔心鎖定和保護服務以防止其他人使用它，則必須（例如）通過檢查HTTP請求中的API機密或類似內容來執行此操作。

接下來，您必須選擇之前製作的容器。 如果記得，可以鍵入名稱，也可以單擊“選擇”並從菜單中選擇它。

然後單擊“顯示高級設置”，因為還有更多配置要做。

您需要增加內存分配，因為Lighthouse測試需要運行超過256Mb的內存。我在這裡選擇了1GiB，但對於某些站點，您可能需要2GiB的最大限額。

我發現將並發減少為1可以提高服務的可靠性。這意味著Google將為每個HTTP請求自動啟動一個新容器。缺點是，這會花費更多的錢。

單擊“創建”，您的Cloud Run服務將很快準備就緒。

您可以使用URL對其進行快速測試。例如：

 curl -v "https://lighthouse-sheets-public-v4e5t2rofa-nw.a.run.app?url=https%3A%2F%2Fwww.example.com"

或在瀏覽器中訪問https://lighthouse-sheets-public-v4e5t2rofa-nw.a.run.app?url=https%3A%2F%2Fwww.example.com。

下一步是編寫一些Appscript，以便您可以在Google表格中使用新的API。

打開一個新的Google表格，然後打開Appscript編輯器。

這將打開一個新標籤，您可以在其中編碼Google表格自定義功能。

這裡的關鍵思想是使用Appscript UrlFetchApp函數對您的API執行HTTP請求。一些執行此操作的基本代碼如下所示：

 function LIGHTHOUSE(url) { const BASE_URL = "https://lighthouse-sheets-public-v4e5t2rofa-nw.a.run.app" var request_url = BASE_URL+"?url="+encodeURIComponent(url) var response = UrlFetchApp.fetch(request_url) var result = JSON.parse(response.getContentText()) return(result.categories.performance.score * 100) }

最後一行將整體性能得分返回到工作表中。您可以對其進行編輯以返回其他內容。例如，要獲取SEO分數，請使用result.categories.seo.score。

或者，您可以通過返回像這樣的列表來返回結果的多列：

[result.categories.performance.score，result.categories.seo.score]

保存文件，然後您的Google表格中就會有一個名為LIGHTHOUSE的自定義功能。

最簡單的方法是複制我的示例Google表格，然後自己更新代碼以指向自己的API，並返回您最感興趣的Lighthouse結果。

增強電子表格的專業知識

這種方法的優點在於，它可以處理可以包裝在Docker容器中的任何東西，並在30秒內返回結果。不幸的是，Google表格自定義函數會超時，因此您沒有足夠的時間來訓練一些大規模的深度學習算法，但是您仍然可以做很多事情。

我對Google表格附加組件Forecast Forge使用了非常類似的過程，但是除了返回Lighthouse分數之外，它返回的是機器學習的預測，無論您輸入多少數字。

這種事情的可能性確實令人興奮，因為在Search Marketing中，我們有很多非常擅長電子表格的人。我想看看他們在使用所有電子表格知識並通過機器學習增強知識時可以做什麼。

本文表達的觀點是來賓作者的觀點，不一定是Search Engine Land。 此處列出了工作人員作者。