超シンプルなページでPageSpeedスコア0点を意図的にとる方法

PageSpeedスコアの採点ロジックを逆手にとって、**わざと0点をとってみる**デモンストレーションというかお遊びです。

逆説的にPageSpeed Insightsの採点ロジックを検証します。

PageSpeed Insightsの点数はどのように計算されているか。100点をとるための条件
https://qiita.com/miyanaga/items/d38124cdd64a1999fed9

# 2020/6/3 追記

本家レポートより**PageSpeed Insightsのスコア改善が捗る裏レポートツール**を公開しました。合わせてご参考ください。
https://simulate.site/cheatspeed-insights/

また、この記事はLighthouse 5.6に準拠しています。Lighthouse 6.0への変更についてはこちらの記事などをご参考ください。
[PageSpeed Insightsのスコア大変動か？ Lighthouse 6 で変わる採点ルールを先取りチェック！ \- アイデアマンズブログ](https://blog.ideamans.com/2020/03/pagespeed-lighthouse-6-draft.html)

# まずは超シンプルなページ(100点)

`h1`要素ひとつのシンプルなページを用意します。

<img width="570" alt="PageSpeed_Score_100.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/03fcbc82-66cf-2daa-d51a-94e7b087dd26.png">


```html
<!doctype html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>PageSpeed Score 100</title>
</head>

<body>
  <h1>PageSpeed Score 100</h1>
</body>

</html>
```

そのうち消すかもですが、実際に測定したページはこちら。
https://www.ideamans.com/_samples/pagespeed-0/100.php

※ 最初は、真っ白なページで試そうと思ったのですが、真っ白だと`FCP`が測定できないというエラーが出たため、`h1`要素ひとつにしました。

当然100点になります。

<img width="742" alt="PageSpeed_Insights.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/b0c6f648-3d39-744c-a77c-92574c534820.png">

# ドキュメントTTFBを遅らせる(100 → 74点)

PHPの`sleep`関数を使ってサーバーの応答をわざと遅らせます。10秒にするとPageSpeed Insights自体がタイムアウトしてしまうので、9秒にします。

```php
<?php sleep(9) ?>
```

TTFBがPageSpeedスコアに与える影響は`約15分の4`と限定的であることがわかっています。
https://qiita.com/miyanaga/items/838478d5a559dd585972

**よほどのモチベーションがない限り離脱する遅さ**ですが、`11/15 ≒ 74点`は獲得できます。

<img width="751" alt="PageSpeed_Insights.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/a8c91d1e-1c92-3bce-f7d9-7c17c75d9f43.png">

https://www.ideamans.com/_samples/pagespeed-0/74.php

※ 本当は73点を取りたいのですが、9秒のTTFB遅延だとSpeedIndexも1点を寄与するようです。

# ロングタスクだらけにする(74 → 28点)

次に`インタラクティブになるまでの時間`と`CPUの初回アイドル`を0点にします。

先日このような記事を書いたところですが、
https://qiita.com/miyanaga/items/ed2deef2470a277ab650

500msごとに、メインスレッドを100ms専有するスクリプトを実行させます。

```html
<body>
  <h1>PageSpeed Score 28</h1>
  <script>
    setInterval(function() {
      var started = new Date()
      while(+new Date() - started < 100) {}
    }, 500)
  </script>
</body>
```

<img width="737" alt="PageSpeed_Insights.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/56049547-14ad-7006-ca50-a5392abb5e58.png">

`インタラクティブになるまでの時間`と`CPUの初回アイドル`が0点になりました。残るは`FCP`と`FMP`で、28点の内訳は次の通りです。

> FCP(3/15 = 20点) + FMP(1/15 ≒ 7点) + SpeedIndex(1点) = 28点

https://www.ideamans.com/_samples/pagespeed-0/28.php

# HTMLの冒頭にロングタスクを入れる(28 → 0点)

単独HTMLで見た目を変えず、`head`要素内でJavaScriptのロングタスクを実行し、DOMツリーの構築を邪魔してみます。

```html
<head>
  <meta charset="utf-8">
  <title>PageSpeed Score 0</title>
  <script>
    (function() {
      var started = new Date()
      while(+new Date() - started < 4500) {}
    })()
  </script>
</head>
```

速度インデックスも悪化し、無事に(?)超シンプルなページでPageSpeedスコアで意図的な0点を獲得できました。

https://www.ideamans.com/_samples/pagespeed-0/0.php

<img width="742" alt="PageSpeed_Insights.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/72ce6e90-56d7-a915-0112-ce26b7d2f03c.png">

レポート下部のアドバイス(監査項目)を見ると、**ほとんどの項目に合格しているにも関わらずスコアは0点**です。

<img width="734" alt="PageSpeed_Insights.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/3d56fea1-3fe8-4d78-fa49-f07a854df800.png">

# まとめ

この結果からも、PageSpeedスコアは減点方式ではないことがわかります。監査への合格数を増やしても思うようにスコアが改善されないのはそのためです。

もちろん監査アドバイスが嘘を言っているのではありませんが、あくまでベストプラクティスというか一般論なので、**対象サイトの現況や特性を見ずにやみくもに従っても大変な遠回りになる**ということです。