本週の黒板報 #2

不満を減らし、問題の解決策を積極的に考える。問題と解決策は常に同時に存在する。今週は『みんなのためのデザイン書』を読み始め、製品の美的感覚を向上させたいと思っています。

パフォーマンス最適化#

画像フォーマットの最適化#

LCPを最適化します。画像を Base64 形式に変換することで、画像の解析、接続、ダウンロード時間を節約できます。ただし、Base64 文字列のバイト数が増加するため、HTML のサイズが大きくなり、ネットワークのデータ量が増加し、TTFB指標が悪化する可能性があるため、両者のバランスを取る必要があります。

web-vitals の報告に問題が存在#

web-vitalsは Chrome が公式に定義したウェブパフォーマンス指標で、FCP、LCP、CLS、TTFB などが含まれ、客観的なデータの観点からウェブページのユーザー体験を評価し、より良い SEO の重みを与えます。
その中で LCP は最も重要な指標であり、Largest Contentful Paint、つまり最大コンテンツ描画を指し、ウェブページ内の最大の要素が画面に描画される時間を示します。公式には 75 パーセンタイルの場合、2.5 秒以内に入ることが優れたとされています：

その原理は標準 Web API を利用して計算し、各種パフォーマンスデータを報告するためのライブラリを提供します web-vitals。サンプルコードは以下の通りです：

import {onCLS, onINP, onLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // `navigator.sendBeacon()`が利用可能な場合は使用し、そうでなければ`fetch()`を使用します。
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

また、Web Vitalsプラグインをインストールすることで、現在のウェブページのパフォーマンスを簡単に検出できます。

コンソールに印刷して直接表示する設定を有効にできます：

ところで、b 站の ttfb はどうしてこんなに悪いのか（doge

コンソールの情報は非常に詳細なデータを提供しています。しかし、1 つの問題を発見しました。複数のタブを開いている場合、新しいページが読み込まれ、事前レンダリングが完了しても、新しいページに切り替えた後、コンテンツがすぐに表示されるのに対し、web-vitals が計算した FCP、LCP は実際の状況と大きな乖離があることです。再現の録画は以下の通りです：

新しいページを開いてしばらくしてから切り替えると再現できます。今後、chrome または web-vitals に issue を提起して修正してもらうつもりです。ユーザーが実際にページに初めて入った時間を取得し、計時の起点として LCP を計算するというアイデアを提供します。コードは以下の通りです：

if (typeof document.hidden !== 'undefined') {
        // 現在のページを直接リフレッシュしたときの計時起点
        if (!document.hidden) {
          window.firstInViewTime = 0;
          console.log(
            `Page is visiable in ${window.firstInViewTime} ms, right now.`
          );
        } else {
          // ページがバックグラウンドで読み込まれている
          document.addEventListener(
            'visibilitychange',
            () => {
              // タブを切り替えてページに入る
              if (document.visibilityState === 'visible') {
                window.firstInViewTime =
                  new Date() - window.performance.timing.navigationStart;
                console.log(
                  `Page is visiable in ${window.firstInViewTime} ms, delayed.`
                );
              }
            },
            // 一度だけトリガーし、繰り返しトリガーしない
            {
              once: true,
            }
          );
        }
      } else {
        console.warn('Page visibility API is not supported in the browser.');
      }

この一時的なコードはStackBlitzにホストされています。では、onLCP コールバック内で LCP 値からこの値を引いて正しい LCP 報告値とすることは可能でしょうか？🤔

サボりの収穫#

コンテンツ駆動の Web 開発フレームワーク#

Astroフレームワークには「Island architecture」という概念があり、SPA アプリケーションとは対照的です。SPA はすべてのバンドル JS の実行に依存して完全なページコンテンツを作成しますが、JS は解析 + レンダリングの二重ブロッキングリソースであり、ウェブページのパフォーマンスを遅くします。Astro はページを海のように見なし、すべてのページモジュール / コンポーネントがその上に浮かんでいます。その中でインタラクティブなモジュールは「Island」と呼ばれ、島🏝️です。異なる島は相互に隔離され、相互に通信できます。したがって、Astro は複数のフレームワークモジュールが同時に 1 つのページに存在することをサポートします。

必要に応じて読み込む。「Island」は部分的および選択的ハイドレーション技術に基づいており、パフォーマンス最適化に役立ちます。ウェブページ内の大部分の静的モジュールは fast static html 形式で存在し、インタラクションが必要なモジュールのみが必要に応じて JS を読み込みます。
並行読み込み。以下の図のように、比較的重い低優先度の Carousel island は高優先度の Header island をブロックせず、両者は並行して独立して読み込まれ、Header はより早くインタラクティブにユーザーの操作に応答します。
指示をサポートし、各モジュールの読み込み戦略を明確に宣言します。詳細はTemplate Directives Referenceを参照してください。

無題 - 2024-08-10-1900

オープンソースのアイコンライブラリ#

lucideは開発者 / デザイナーに迅速なアイコン導入ソリューションを提供し、さまざまなフロントエンドフレームワークに対応するpackageがあります。

コードレベルでもパフォーマンス最適化が考慮されており、SVG が圧縮され、tree-shaking機能をサポートしています。

オープンソースのコンポーネント集#

shadcn/uiは多くのデザインされたコンポーネントのコレクションを提供し、CV 大法または CLI を使用してプロジェクトに簡単に導入でき、高度にカスタマイズ可能で、自分だけのコンポーネントライブラリを作成できます。npm パッケージ形式のコンポーネントライブラリと比較して、基本的な実装のみを提供し、具体的なインタラクションやスタイルは開発者が自分で修正できます。

面白いこと#

異なる方法での知識の獲得量の比較#

bg2023062902
今週、阮一峰のネットログを購読していて、知識を迅速に学ぶ方法の 1 つが紹介されていました。理論 + 実践で一部の知識を得ることができ、より多くの知識は実践中に遭遇する問題から学ぶことができます。これは私に間違いノートやバグを思い出させます。エラーが発生することは、認識と理論が一致していないことを示しており、エラーを修正することで理論の理解が深まります。

無料でログイン不要の写真作品#

pexelsは、ログイン不要で無料でダウンロードできる無水印の動画 / 画像の写真作品サイトで、人気検索、ランキング、写真コンペ、ブログや写真ストーリーなどを提供しています。

デザインツール集#

freepikには非常に多くのオンラインデザインツール、画像処理ツールがあり、アイコンのダウンロードも提供していますが、無料版では png 形式のみのダウンロードが可能です。

海底ケーブル図#

海底ケーブル図というサイトから、世界の海底ケーブルの配置を確認できます。全世界の大陸は電路基板のチップのようで、海底ケーブルはリードのようで、両端の都市の場所はピンのようです。

GitHub リポジトリの stars トレンドを確認#

star-historyは GitHub リポジトリの stars トレンドを確認するためのオンラインサイトで、Markdown に埋め込むことができます。

同時に、Chrome 拡張機能も提供しています。

インストール後、任意のリポジトリを開き、プラグインをクリックするだけで stars トレンドを見ることができます。

React Digest#

A carefully curated weekly newsletter for React developers.
React 開発者のために慎重にキュレーションされた毎週のニュースレター —— React Digest

Understanding SSR with Hydration: Pros, Cons, and Scenarios for Software Architectsという記事を読みました。これは SSR に関連するハイドレーションについて詳しく説明しており、なかなか良い内容です。時間があるときに数本の記事を読んで学ぶことは、React の理解を深めるのに役立ちます。