Performance で指摘されるポイント

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

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

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

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

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 文字以下にします。

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