ウェブサイトにおける悪い慣行

ウェブサイトにおける悪い慣行

46

2 分。

最初のセクションにあるスライダーと描画の遅延

最初のセクションにスライダーを配置すると、LCP(Largest Contentful Paint という指標が著しく悪化します。ブラウザはまずJSをロードして初期化しなければならず、その後にようやくメインコンテンツを描画することになるため、目に見える遅延が生じます。

ユーザビリティの観点から見ると、スライドの自動切り替えは情報の理解を妨げます。ユーザーは1つのスライドのテキストを読み終える前に次のスライドに切り替わってしまうことが多く、これにより認知的な不快感が生じ、インターフェースに対するコントロールを失うことでリソースへの信頼が低下します。

強制音声付き動画の自動再生

現代のブラウザ(Chrome、Safari)の自動再生ポリシーは、ユーザーが意識的にクリックするまでオーディオストリームをブロックします。これらの制限を技術的に回避しようとすると、コンソールにエラーが表示されたり、メディアプレーヤーが正常に動作しなくなったりすることがよくあります。

心理的な観点から、突然の音はユーザーを驚かせ、直ちに離脱率の急上昇を招く可能性があります。特にスマートフォンでは、ユーザーはミュートボタンを探すよりも、タブを閉じてしまう傾向があります。

ページのクリティカルなサイズ (> 5 MB)

5 MBという閾値を超えると、データ解析時にデバイスのRAMやプロセッサに過度な負荷がかかります。モバイルデバイスでは、これによりTime to Interactive (TTI) が長くなり、ページは表示されているものの、インターフェースがタップに反応しなくなります。

主な原因としては、通常、最新のフォーマット(WebP, AVIF)を使用していない最適化されていない画像や、不要なコードが挙げられます。モバイルインターネット環境下では、このような重いサイトは、一部のユーザーにとって事実上アクセス不能になってしまいます。

記事は随時更新されます

関連記事

  • Reactコンポーネントの構造

    各Reactコンポーネントがどのような外観であるべきか、私の考え

    104

    12 分。

  • SSF-U - フルスクリーン表示の統一規格

    SSF-U規格は、フルスクリーン表示のセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています

    37

    3 分。

  • SSA - アコーディオンの統一標準

    SSA規格は、アコーディオンのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を定めています

    51

    4 分。

  • SSP - ページネーションの統一規格

    SSP規格は、ページネーションのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています

    57

    3 分。

  • SSPS - プロジェクト構造の統一基準

    SSPS標準は、プロジェクト内のファイルおよびフォルダの構造と命名に関する要件を規定しています

    169

    3 分。

  • SSG - Gitの統一標準

    SSG標準は、Gitのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています

    52

    6 分。

  • すべての記事

ご連絡ください