タグ

ブックマーク / web.dev (2)

  • イージングの基本  |  Articles  |  web.dev

    自然界において、ある地点から別の地点に直線的に動くものはありません。実際には、物体は動くにつれて加速または減速する傾向があります。私たちの脳はこの種の動きを期待するように作られているため、アニメーション化するときは、これをうまく使う必要があります。自然な動きでユーザーがアプリに馴染み、全体的なエクスペリエンスの向上につながります。 まとめ イージングは、アニメーションをより自然に感じさせます。 UI 要素にイーズアウト アニメーションを選択します。 イーズインまたはイーズインアウトのアニメーションは、短くすることが可能な場合を除き、使用しないでください。エンドユーザーにとって動きが遅く感じられる傾向があります。 従来のアニメーションでは、ゆっくり始めて加速する動きは「スローイン」と呼ばれ、すばやく開始して減速する動きは「スローアウト」です。ウェブで最もよく使われている用語は、それぞれ「イー

  • PRPL パターンを使用して即時読み込みを適用する  |  Articles  |  web.dev

    PRPL パターンを使用して即時読み込みを適用する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 PRPL は、ウェブページを読み込んでインタラクティブに高速化するために使用されるパターンの頭字語です。 遅れて検出されたリソースをプリロードします。 最初のルートをできるだけ早くレンダリングします。 残りのアセットを事前にキャッシュに保存します。 他のルートや重要性の低いアセットを遅延読み込みします。 このガイドでは、これらの各手法を連携させながら、個別に使用してパフォーマンスを向上させる方法について説明します。 Lighthouse を使用してページを監査する Lighthouse を実行して、PRPL の手法に沿った改善の機会を特定します。 Ctrl+Shift+J キー(Mac の場合は Command+Option+J キー)を押して DevToo

  • 1