png画像の最適化は結局何を使う

png画像最適化の選択肢

引用 : https://tinyurl.com/29qksq92

画像形式 ロッシー プラグイン ロスレス プラグイン
JPEG imagemin-mozjpeg imagemin-jpegtran
PNG imagemin-pngquant imagemin-optipng
GIF imagemin-giflossy imagemin-gifsicle
SVG imagemin-svgo
WebP imagemin-webp imagemin-webp

● 画像最適化にはこれ

jpeg → mozjpeg
png → pngquant

● pngquant のインストール

mac

brew install pngquant

● pngquant の実行

 pngquant 「pngファイル名」

参考 : https://tinyurl.com/2437l6d2

No.2518
05/27 10:17

edit

TTFB

● TTFB とは

TTFBとは、Time To First Byte の略で、ウェブページの読み込み時間を測る指標の1つです。

具体的には、クライアント(通常はウェブブラウザ)がウェブサーバーに対してリソース(HTMLファイル、画像、JavaScriptなど)を要求してから、最初のバイトデータを受信するまでの時間を示します。

TTFBが短いほど、ユーザーがページの表示を視覚的に認識するまでの時間が短縮されるため、ユーザーエクスペリエンス(UX)の改善につながります。一方、TTFBが長くなると、ユーザーが待たされる時間が長くなり、ストレスやフラストレーションを感じる可能性があります。

TTFBは、サーバーの処理能力、ネットワークの遅延、サーバーの負荷状況など、様々な要因に影響を受けます。ウェブサイトのパフォーマンス改善を行う際には、TTFBの値を確認し、問題の特定や対策を講じることが重要となります。

https://web.dev/articles/ttfb?hl=ja

● TTFB 計測ツール

https://www.webpagetest.org/

No.2494
03/21 14:28

edit

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

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