GoogleスプレッドシートでCore Web Vitalsを毎日自動計測する

<p>- Core Web Vitals : GoogleのWebページ性能指標<br /> - Googleスプレッドシートに複数のWebサイトを登録しておき、毎日1回自動実行して指標を記録し、その後グラフで表示 <br /> - デスクトップ/モバイルページのFCP、FID、LCP、CLS、TTIなどをすべて計測<br /> <br /> 1. 該当シートをコピー<br /> 2. 最初にページ速度を計測するURLとSheet Nameを記入<br /> 3. Sheet Nameを適切に変更<br /> 4. Track Web Vitalsを押すと計測が開始され、毎日自動で1回ずつ計測して記録を残す</p>

[xguru]

<p>コードを見ると、内部で Google PageSpeedOnline を使って計測し、その内容をパースして Google スプレッドシートに保存する方式ですね。<br /> 最初に登録するとセキュリティ警告が出ますが、ソースコードを見れば分かるとおり、セキュリティ上の問題はないコードです。<br /> https://github.com/labnol/code/… /> <br /> 自動で計測して記録されるので、週に一度くらい内容をメールで送ってくれると、さらに良さそうですね。</p>

[xguru]

<p>function sendEmail() {<br /> var sheets = SpreadsheetApp.getActiveSpreadsheet().getSheets(); <br /> for (var i = 0; i &lt; sheets.length ; i++ ) {<br /> var sheet = sheets[i];<br /> var dataRange = sheet.getDataRange()<br /> var cwvRange = sheet.getRange(2,1,dataRange.getLastRow()-1,dataRange.getLastColumn());<br /> <br /> var numRows = cwvRange.getNumRows();<br /> var numCols = cwvRange.getNumColumns();<br /> var message = &quot;CWTの値&quot;;<br /> for (var i = 0; i &lt; numRows; i++) {<br /> for (var j = 0; j &lt; numCols; j++) {<br /> message = message + cwvRange.getValues()[i][j] + &quot; | &quot;<br /> }<br /> message = message + &quot;\r\n&quot;<br /> }<br /> }<br /> <br /> MailApp.sendEmail(&quot;email@server&quot;, &quot;今週の Core Web Vitals&quot;, message);<br /> }</p>

[xguru]

<p>Google、検索結果の順位にページ エクスペリエンス（Page Experience）指標を導入 https://ja.news.hada.io/topic?id=2197<br /> - Core Web Vitals<br /> → LCP : Largest Contentful Paint<br /> → FID : First Input Delay<br /> → CLS : Cumulative Layout Shift<br /> <br /> Lighthouse 6.0 リリース https://ja.news.hada.io/topic?id=2122<br /> → LCP、CLS、TBT メトリクスを追加<br /> <br /> Cumulative Layout Shift（CLS）とは何か？ https://ja.news.hada.io/topic?id=1697<br /> → 画像/広告の遅い読み込み、非同期動作、動的な DOM 変更などによって、Web ページのレイアウトがどれだけ変化するかを測定<br /> → ユーザーの誤クリックを引き起こしかねない視覚的な不安定さをチェックする、ユーザー中心のパフォーマンス指標</p>