画像最適化 生成画像3枚をPNGからWebPへ変換。容量は97.2〜98.8%減った
実際のサイトで使用した3枚を同一条件で変換し、元ファイルとWebPの容量を比較しました。
検証結果を読む →ALL REPORTS
検証記事
使用した素材、条件、計測値を明記し、結果だけでなく判断の過程も残します。 すべての記事をmayoが実測データと照合して公開しています。
- 公開記事
- 34本
- カテゴリ
- 8分野
- 検証日
- 2026.06.10
画像最適化
2件の実測・検証
レスポンシブ画像
1件の実測・検証
スマホUI
5件の実測・検証
スマホUI 360・390・430pxでトップを計測。横スクロールなしで次セクションを49px表示
スマホ向けトップページを3種類の画面幅で開き、実際のレイアウト寸法をブラウザから取得しました。
検証結果を読む → スマホUI トップページのリンクを数えた。20件を役割別に確認
ヘッダー、本文、記事カード、フッターを含むトップページのリンク数と重複する導線を調べました。
検証結果を読む → スマホUI 画像のwidth・height属性を監査。トップ5枚すべてに寸法指定
画像読み込み前のレイアウト確保に必要なwidthとheightが、ビルド後も残っているか確認しました。
検証結果を読む → スマホUI コンテンツ幅を監査。デスクトップ1180px、スマホは左右14pxを確保
共通コンテナのmax-widthとモバイル時の左右余白をCSSから確認しました。
検証結果を読む → スマホUI 記事カード画像の表示を監査。720×480属性と固定領域で高さを安定化
画像比率が異なる記事でもカード一覧の高さが崩れないよう、HTML属性とCSS表示を確認しました。
検証結果を読む →アクセシビリティ
7件の実測・検証
アクセシビリティ スマホのタップ領域を実測。小さかったロゴ・メニュー・フッターを修正した
トップページのリンクとボタンを390px幅で計測し、44px未満の操作領域を修正した記録です。
検証結果を読む → アクセシビリティ トップの見出し構造を監査。h1は1件、h2は7件だった
ビルド済みトップHTMLから見出し要素を数え、ページ構造と見た目の役割が一致しているか確認しました。
検証結果を読む →
アクセシビリティ 記事ページの見出しを監査。h1が1件、本文h2が5件
品質比較記事のHTMLを対象に、タイトル、検証条件、結果、考察、まとめの階層を確認しました。
検証結果を読む → アクセシビリティ トップの画像5枚を監査。alt属性の欠落は0件だった
ビルド済みHTML内の画像について、alt属性の有無と装飾画像・内容画像の使い分けを確認しました。
検証結果を読む → アクセシビリティ モバイルメニューを実測。開閉ボタン44px、各リンク高50px
スマホ用メニューの開閉領域と展開後リンクの高さをCSS値から確認しました。
検証結果を読む → アクセシビリティ 本文色のコントラストを計算。#506168と白背景で約6.4:1
記事やトップ本文で使う文字色と背景色から相対輝度を計算し、読みやすさの目安を確認しました。
検証結果を読む → アクセシビリティ ランドマークを監査。header・main・footerを各1件配置
トップページの大きな領域がHTMLの意味要素で区切られているか、ビルド結果を確認しました。
検証結果を読む →表示速度
6件の実測・検証
表示速度 画像3枚の合計転送量を比較。PNG 5.50MBからWebP 125KBへ削減
一枚ずつではなく、同じページでまとめて読み込む場合の合計容量を比較しました。
検証結果を読む → 表示速度 トップHTMLを圧縮比較。10,938bytesがGzipで4,111bytesになった
静的出力したトップページをGzipとBrotliで圧縮し、未圧縮HTMLとの差を実測しました。
検証結果を読む → 表示速度 3000文字超の記事HTMLを圧縮。14,825bytesがBrotliで4,949bytes
WebP品質比較の記事ページを対象に、HTMLの未圧縮・Gzip・Brotli容量を測りました。
検証結果を読む → 表示速度 トップ画像5枚の読み込み指定を確認。4枚をlazy、主画像1枚を優先
ファーストビュー画像と下方のサムネイルで、loading属性をどのように分けているか調べました。
検証結果を読む → 表示速度 外部Webフォントを使わない構成を確認。フォント通信は0件
CSSのfont-familyとHTMLの外部読み込みを調べ、文字表示のための第三者通信がないことを確認しました。
検証結果を読む → 表示速度 トップの画像予算を集計。初期表示候補102KB、下方画像は遅延読込
トップページで参照する画像のうち、最初に必要な主画像と後から読む画像を分けて容量を確認しました。
検証結果を読む →CSS・素材
2件の実測・検証
静的サイト
6件の実測・検証
静的サイト Astro静的ビルドを計測。50ページでHTML約598KB、共有JSは0本
現在のサイトを静的出力し、生成ページ数、HTML合計、JavaScriptファイル数を調べました。
検証結果を読む → 静的サイト canonical URLを全メディアページで確認。相対パスから絶対URLを生成
Astroのsite設定と現在のパスを使い、正規URLが各ページでどのように出力されるか確認しました。
検証結果を読む → 静的サイト XMLサイトマップを検査。初期構成15URLを登録対象にした
固定ページと記事ページを含むサイトマップのURL件数、ドメイン、除外ページを確認しました。
検証結果を読む → 静的サイト robots.txtを確認。全体クロール許可とサイトマップURLを3行で記述
静的サイトのrobots.txtについて、内容、改行、参照先ドメインを実ファイルから確認しました。
検証結果を読む → 静的サイト トップ・記事・AboutのHTML容量を比較。長文記事が14.4KBで最大
三種類のページテンプレートについて、未圧縮HTMLの容量と要素数を並べました。
検証結果を読む → 静的サイト JavaScriptの範囲を監査。記事本文は静的HTML、操作JSは作品側へ分離
メディア閲覧に必要なJavaScriptと、謎解き作品の操作スクリプトが混在していないか確認しました。
検証結果を読む →編集・運営
5件の実測・検証
編集・運営 記事8本のdescriptionを監査。要約が本文内容と一致するか確認
検索結果や共有時に使われる可能性があるdescriptionについて、長さと記事固有性を点検しました。
検証結果を読む → 編集・運営 記事タイトル8本を比較。重複0件、数値を含むタイトルは8件
初期記事のタイトルを一覧化し、同じ検索意図の記事が競合していないか確認しました。
検証結果を読む → 編集・運営 外部通信元をソース監査。メディア側はAdSense 1系統のみ
HTMLとCSSに記載された外部URLを確認し、閲覧時に第三者へ接続し得る要素を整理しました。
検証結果を読む → 編集・運営 ads.txtを実ファイルで確認。pub IDと認証機関IDを1行で記述
AdSense用ads.txtの四つのフィールドと、公開ルートへ配置される構成を確認しました。
検証結果を読む → 編集・運営 30記事化のビルド設計。固定7ページと作品8ページを分離して管理
記事を30本へ増やす際に、公開メディア、固定ページ、購入者向け作品をどのように数え分けるか整理しました。
検証結果を読む →