Webパフォーマンスがすごいサイトたち

pagespeedaやlighthouse、様々な計測ツールが充実してきていることからも
Webサイトでのパフォーマンスはwebサービスにとっての重要度は高い。

ユーザにとっては早いとストレスがないし、
ビジネスにとっても早くなるだけで売り上げがあがる、とも言われている

そこから
「Webページで早いところどこ」

これを簡単に調べる方法を紹介する:

### Chrome User Experience Report

Webのパフォーマンスをより早くしようという取り組みは
Web Fundamental というプロジェクトでgoogleがやっている。 https://developers.google.com/web/fundamentals/

そのなかに `Chrome User Experience Report` という取り組みで
世界中のウェブサイトのパフォーマンスが記録され公開されている。
そしてこのデータセットはBigQueryで簡単に利用できるのである。

##### メトリクス

Webパフォーマンスをはかるメトリクスにはいくつかの種類がある。
https://developers.google.com/web/tools/chrome-user-experience-report/#metrics

ここでは`First Content-ful Paint`(意訳: ファーストビューがいい感じになる)を基準に並び替える

パフォーマンスの測定は、10回やれば10回同じなるわけではない。
そのため 上記のサイトではパフォーマンスの分布としてデータセットが公開されている。

今回は`start * density` という形で、計算をする
density の最大のところ、とかやっても良いかもしれない。

http/https などのプロトコルやネットワーク環境はてはデバイスタイプで
差は全然でるので、そういったことを調べても面白いと思う
今回は`https`かつ`desktop`で調べる

#### BigQueryで抜き出してみる

TLD?ごとにデータが分けられているので、正確に日本のサイトとかで分けることはできないので
"日本のサイトの中で"といった網羅的な記述はできない


```query
with 
 dataset as (
    select   
      origin
      , effective_connection_type.name as network
      , form_factor.name
      , (select SUM(start * density) from unnest(first_contentful_paint.histogram.bin)) as avg_msec
    from 
       (
          select * from `chrome-ux-report.country_jp.201812` 
        )
)
, report as (
  select *, 
    rank() over (partition by network, name order by avg_msec) as rank
  from dataset
  where 
     1 = 1 
     and name = 'desktop'
     and network = '4G'
     and starts_with(origin, 'https://')
  order by avg_msec
)

select * from report limit 100
```

#### 結果

| origin                                | network | name    | avg_msec           | rank |
| :---: | :---: | :---: | :---: | :---: |
| https://www.d-deltanet.com            | 4G      | desktop | 2.37               | 1    |
| https://anshin-access.netstar-inc.com | 4G      | desktop | 3.135              | 2    |
| https://democracy.glay.co.jp          | 4G      | desktop | 3.5850000000000004 | 3    |
| https://lyze.jp                       | 4G      | desktop | 3.7849999999999997 | 4    |
| https://m.cotedazur.jp                | 4G      | desktop | 4.035              | 5    |
| https://id.gree.net                   | 4G      | desktop | 4.245              | 6    |
| https://mobile.twitter.com            | 4G      | desktop | 4.33               | 7    |
| https://popvirus.jp                   | 4G      | desktop | 4.335              | 8    |
| https://f.fdol.jp                     | 4G      | desktop | 4.400000000000001  | 9    |
| https://points.line.me                | 4G      | desktop | 4.445              | 10   |
| https://www.pscube.jp                 | 4G      | desktop | 4.555000000000001  | 11   |
| https://www.host2.jp                  | 4G      | desktop | 4.900000000000001  | 12   |
| https://www.ad-box.com                | 4G      | desktop | 5.115              | 13   |
| https://love-period.net               | 4G      | desktop | 5.1499999999999995 | 14   |
| https://s.keibabook.co.jp             | 4G      | desktop | 5.175              | 15   |
| https://s.maho.jp                     | 4G      | desktop | 5.220000000000001  | 16   |
| https://pf.ateamid.com                | 4G      | desktop | 5.475              | 17   |
| https://layton-akuma.g-takumi.com     | 4G      | desktop | 5.610000000000001  | 18   |
| https://xperiacoverstore.jp           | 4G      | desktop | 5.629999999999999  | 19   |
| https://www.yoasobiweb.com            | 4G      | desktop | 5.6850000000000005 | 20   |


なんと堂々の一位は "パチンコ屋" のサイトである。
そのほかにも競馬、風俗、ホストクラブのサイトが早いらしい。

パフォーマンスは実際にその目で確かめて見てほしい。どれもとても早い
若干の世間の闇を感じつつも、その中で奮闘している LINE, GREE, twitterのトップページはとても奮闘していると思う。

#### 考察

ログイン状態での測定、ServiceWorkerある上での測定、みたいなのは
おそらく考慮できていないので実際の実感値としては多少ズレるところもあるだろう。

またサイトのコンテンツ、画像などなどによっても
そもそも出せるパフォーマンスの限界値っていうのが変わってくるのでサイトの条件を適切に揃えることは難しい

#### 阿部寛のサイト

早いサイトといえば阿部寛のサイトが話題によく上がる
実際阿部寛のサイトはどれぐらいすごいのかも調査してみる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/62929/21bf4025-14b0-38de-0874-426a1b2a32dd.png)

それでも238位である。まだまだだな阿部寛。
それでもtabletでは 10msecである。 すごい

# おわりに

ざっくりとWebサービスのパフォーマンスをみる方法を紹介した。