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
mac
brew install pngquant
pngquant 「pngファイル名」
TTFBとは、Time To First Byte の略で、ウェブページの読み込み時間を測る指標の1つです。
具体的には、クライアント(通常はウェブブラウザ)がウェブサーバーに対してリソース(HTMLファイル、画像、JavaScriptなど)を要求してから、最初のバイトデータを受信するまでの時間を示します。
TTFBが短いほど、ユーザーがページの表示を視覚的に認識するまでの時間が短縮されるため、ユーザーエクスペリエンス(UX)の改善につながります。一方、TTFBが長くなると、ユーザーが待たされる時間が長くなり、ストレスやフラストレーションを感じる可能性があります。
TTFBは、サーバーの処理能力、ネットワークの遅延、サーバーの負荷状況など、様々な要因に影響を受けます。ウェブサイトのパフォーマンス改善を行う際には、TTFBの値を確認し、問題の特定や対策を講じることが重要となります。
https://web.dev/articles/ttfb?hl=ja
Core Web Vitalsは、Googleが提唱するウェブサイトのユーザーエクスペリエンス指標の集合体です。
ユーザーにとって快適なWebサイトを実現するための重要な指標となっています。
Core Web Vitalsは以下の3つの指標で構成されています。
メインコンテンツが読み込まれるまでの時間を測定
ユーザーが待たされすぎると離脱するため、重要な指標
ユーザーがサイトと最初にインタラクション(クリック、タップ、スクロールなど)した時の応答性を測定
応答が遅れるとフラストレーションを感じるユーザーが多い
ページ上のコンテンツがレイアウトシフト(予期せぬ移動)する度合いを測定
レイアウトシフトが発生するとユーザーは戸惑う
これらの指標を改善することで、パフォーマンスが向上し、コンバージョン率やユーザーエンゲージメントの向上が期待できます。Googleはこれらの指標をランキング要因の1つとして考慮しています。
aria-label をつけましょう
<select name="menu">
↓
<select name="menu" aria-label="クイックリンク">
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>
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(); をやめて見ましょう。
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">
最低でも48x48pxのクリック領域を確保しましょう。
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>
ARIA ラベルと関係性 | Web | Google Developers
ARIA は要素にラベルと説明を加える複数の仕組みを提供します。実際に、ARIA はユーザー補助のサポートや説明テキストを追加できる唯一の方法です。読み取り可能なラベルを作成する際に ARIA が使用するプロパティを見てみましょう。
<a href="article_123.html">続きを読む</a>
↓
<a href="article_123.html" aria-label="記事「ホッキョクグマの生態について」の続きを読む">続きを読む</a>
<button type="submit" class="btn btn-default">検索</button>
↓
<button type="submit" class="btn btn-default" aria-label="検索する">検索</button>
<select onchange="location.href='hoge.html';">
↓
<select onchange="location.href='hoge.html';" aria-label="hogeページへ移動します）">
target="_blank" で開くリンクに rel="noopener" をつけ忘れてはいませんか？
target="_blank" を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作します。 そのため、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。
また、target="_blank" にはセキュリティ上の脆弱性もあります。リンク先のページでは window.opener を使用して親ウィンドウのオブジェクトにアクセスしたり、window.opener.location = newURL によって親ページの URL を変更したりできます。
<a href="link.html" target="_blank">サイトへのリンク</a>
↓
<a href="link.html" target="_blank" rel="noopener">サイトへのリンク</a>
<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
https://developers.google.com/speed/pagespeed/insights/?hl=ja
URLを入力するとサイトがどれくらい早いか計測してくれます。
ここにサイトのURLを入れて計測し、結果を表示させます。
圧縮を有効にするにはWEBサーバによって方法が異なります、
Apache: mod_deflate
Nginx: HttpGzipModule
IIS: HTTP 圧縮
専用サーバやクラウド等のバーチャルマシンの場合は適宜設定しましょう。
レンタルサーバの場合は Apache が多いので、 レンタルサーバのmod_deflate が有効かどうかを調べます。
エックスサーバ : ○
ロリポップ : ○
さくら : ○
ヘテムル : ○
圧縮を有効にするには サイトのトップに .htaccess を設置し以下のように記述します。
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI\.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
</IfModule>
SetOutputFilter DEFLATE ですべての出力を圧縮する設定にして、
・Mozilla や IE の古いバージョンでは圧縮をオフ
・画像ファイルは圧縮をオフ
としています。
.htaccess に以下のように記述します。
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
</IfModule>