Google Core Web Vitals とは

● Core Web Vitals とは

Core Web Vitalsは、Googleが提唱するウェブサイトのユーザーエクスペリエンス指標の集合体です。
ユーザーにとって快適なWebサイトを実現するための重要な指標となっています。

Core Web Vitalsは以下の3つの指標で構成されています。

・Largest Contentful Paint (LCP)

メインコンテンツが読み込まれるまでの時間を測定
ユーザーが待たされすぎると離脱するため、重要な指標

・First Input Delay (FID)

ユーザーがサイトと最初にインタラクション(クリック、タップ、スクロールなど)した時の応答性を測定
応答が遅れるとフラストレーションを感じるユーザーが多い

・Cumulative Layout Shift (CLS)

ページ上のコンテンツがレイアウトシフト(予期せぬ移動)する度合いを測定
レイアウトシフトが発生するとユーザーは戸惑う
これらの指標を改善することで、パフォーマンスが向上し、コンバージョン率やユーザーエンゲージメントの向上が期待できます。Googleはこれらの指標をランキング要因の1つとして考慮しています。

https://web.dev/explore/learn-core-web-vitals?hl=ja

No.2489
03/15 09:58

edit

Lighthouseのスコア上げ

● Lighthouseのスコア上げ

https://jpsern.com/lighthouse-score-attack/

https://originale.cc/css-customize/

No.2467
02/14 15:08

edit

Google Lighthouseの「フォーム要素にはラベルが関連付けられていません」を修正する

● 「フォーム要素にはラベルが関連付けられていません」Form elements do not have associated labels を修正する

aria-label をつけましょう

<select name="menu">

 ↓

<select name="menu" aria-label="クイックリンク">
No.1882
10/19 09:14

edit

W3C Lint / 記事に見出しがありません エラーの対処法

● Article lacks heading. (記事に見出しがありません)エラー

Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles.
<article>
    <section>
	    <h2>見出し1</h2>
    </section>
    <section>
        <h3>見出し2</h3>
    </section>
</article>

 ↓

<article>
    <h1>見出し</h1>
    <section>
	    <h2>見出し1</h2>
    </section>
    <section>
        <h3>見出し2</h3>
    </section>
</article>
No.1881
10/16 19:51

edit

W3C_Markup_Validation_Service

DiagnosticsMore information about the performance of your application. These numbers don't directly affect the Performance score.

● Diagnostics / document.write

DiagnosticsMore information about the performance of your application. These numbers don't directly affect the Performance score.
For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds. Learn more.

が出るときは document.write(); をやめて見ましょう。

No.1824
07/26 08:20

edit

[user-scalable="no"] is used in the <meta name="viewport"> element or the [maximum-scale] attribute is less than 5. の対応

Googleで [user-scalable="no"] is used in the element or the [maximum-scale] attribute is less than 5. と出るときは次のようにしましょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
No.1823
07/26 08:07

edit

100% appropriately sized tap targets (タップターゲットのサイズが適切ではありません)

● 100% appropriately sized tap targets (タップターゲットのサイズが適切ではありません)

最低でも48x48pxのクリック領域を確保しましょう。

No.1822
07/26 01:41

edit

# ● ボタンにアクセス可能な名前がありません(Buttons do not have an accessible name)

● ボタンにアクセス可能な名前がありません(Buttons do not have an accessible name)を修正する

Google lighthouse にて「Buttons do not have an accessible name」が出た時の対処

aria-label をつけましょう

<button class="navbar-toggle" type="button" >navigation bar</button>

 ↓

<button class="navbar-toggle" type="button" aria-label="ナビゲーションの切替">navigation bar</button>
No.1369
10/19 09:13

edit

Aタグなどリンクするタグ に aria-label をつける

WAI-ARIAの基本 - ウェブ開発を学ぶ | MDN

ARIA ラベルと関係性  |  Web  |  Google Developers

ARIA は要素にラベルと説明を加える複数の仕組みを提供します。実際に、ARIA はユーザー補助のサポートや説明テキストを追加できる唯一の方法です。読み取り可能なラベルを作成する際に ARIA が使用するプロパティを見てみましょう。

Aタグに aria-label をつけてみましょう

<a href="article_123.html">続きを読む</a>

 ↓

<a href="article_123.html" aria-label="記事「ホッキョクグマの生態について」の続きを読む">続きを読む</a>

BUTTONタグに aria-label をつけてみましょう

<button type="submit" class="btn btn-default">検索</button>

 ↓

<button type="submit" class="btn btn-default" aria-label="検索する">検索</button>

SELECTタグに aria-label をつけてみましょう

<select onchange="location.href='hoge.html';">

 ↓

<select onchange="location.href='hoge.html';" aria-label="hogeページへ移動します)">
No.1330
10/31 12:15

edit

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

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

target="_blank" で開くリンクに rel="noopener" をつけ忘れてはいませんか?

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

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

リンクに rel="noopener" を追加する

<a href="link.html" target="_blank">サイトへのリンク</a>

  ↓

<a href="link.html" target="_blank" rel="noopener">サイトへのリンク</a>

リンクに rel="noopener noreferrer" を追加する

<a href="link.html" target="_blank">サイトへのリンク</a>

  ↓

<a href="link.html" target="_blank" rel="noopener noreferrer">サイトへのリンク</a>

https://developers.google.com/web/tools/lighthouse/audits/noopener?hl=ja

No.1329
02/15 12:00

edit