HTML
js
performance
frontend
audits

Auditsで計測した際に指摘されるポイント

Chrome 60 より、 Dev tools Audits が Lighthouse になったそうです。
https://developers.google.com/web/updates/2017/05/devtools-release-notes#lighthouse

Performance で指摘されるポイント

サイトに初回ペイントの遅延を引き起こすリソースを使用しない

Best Practices で指摘されるポイント

サイトの独自リソースに HTTP/2 を使用する

HTTP/2 を使用すると、ページのリソースの読み込み速度が向上し、データ通信量が削減されます。

Passive Event Listener を使用してサイトでのスクロール パフォーマンスを向上させる

js
document.addEventListener('touchstart', onTouchStart, {passive: true});

サイトで document.write() を使用しない

2G、3G、低速 Wi-Fi など、低速のネットワークに接続している場合は、document.write() で動的に挿入された外部スクリプトによって、メインページのコンテンツ表示が数十秒単位で遅れる場合があります。

サイトで rel="noopener" を使用して外部アンカーを開く

target="_blank" を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作します。 そのため、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。

また、target="_blank" にはセキュリティ上の脆弱性もあります。リンク先のページでは window.opener を使用して親ウィンドウのオブジェクトにアクセスしたり、window.opener.location = newURL によって親ページの URL を変更したりできます。

レポートを確認して、Lighthouse で特定された各リンクに rel="noopener" を追加します。 一般的に、外部リンクを新しいウィンドウまたはタブで開く場合は、必ず rel="noopener" を追加してください。

html
<a href="https://examplepetstore.com" target="_blank" rel="noopener">...</a>

マニフェストに定義したアプリの省略名が切れずにホーム画面上に表示される

ユーザーがホーム画面にウェブアプリを追加すると、アプリ アイコンの下に short_name プロパティがラベルとして表示されます。 short_name が 12 文字を超えると、ホーム画面上で途中までしか表示されません。

Chrome の場合は、short_name が定義されておらず、name プロパティの値が十分に短ければ、name プロパティの値が代用されます。

ウェブアプリ マニフェストの short_name プロパティを 12 文字以下にします。

js
{
  ...
  "short_name": "Air Horner",
  ...
}