ページ速度を継続的に追求する中で、私たちは同じ点に戻ってきていることに気づきます。製品、マーケティング、成長チームが技術チームを動機付けるために努力しているにもかかわらず、サイトのパフォーマンスを改善できるタスクはリファクタリングの必要性のために延期されることが多く、完了したとしても必ずしも完全な結果が得られるとは限りません。このサイクルでは、実際のパフォーマンスを達成するための洞察に満ちた視点を検討することが有益です。たとえば、他のプラットフォームと比較した React.js と Vue.js、または Next.js や Nuxt.js などの SSR (サーバー側レンダリング) 拡張機能の速度からどのような教訓を学べるでしょうか。jQuery と CSS ファイルの MB を最適化する時期ではないでしょうか。知識のないフロントエンド開発者のために Web パフォーマンスを犠牲にしている大企業は、いつ目覚めるのでしょうか。これらの質問に 1 つずつ対処してみましょう。

Next.js と Nuxt.js ベースのサイトが高速なのはなぜですか?

React と Vue をベースに構築された SEO に適した構造の Next および Nuxt プラットフォームは、速度パフォーマンスが際立っています。しかし、なぜこれらのプラットフォームはこんなにも高速なのでしょうか?

React.js と Vue.js 以下に示すように、各ページをサブコンポーネントに分割するコンポーネントベースのフレームワークです。

 

image（2）.png
出典： https://dev.to/yakimych/seriously-do-react-hooks-replace-state-containers-3cpl

 

この点を説明するために、実際の例、電子商取引のリストページを取り上げてみましょう。このリストページには、次のサブコンポーネントがあると考えられます。

  • ヘッダ
  • リスト
    • 出品情報
      • ページタイトル
      • ブレッドクラム
      • 製品数
    • フィルタ
      • カテゴリフィルタ
      • 価格フィルタ
      • ...
    • 選別
    • 製品カード
      • 製品写真
    • 製品詳細
      • 商品名
      • 製品価格
        • 取り消し線価格
        • セールスプライス
      • 割引率
      • キャンペーン情報
    • ページネーション
    • カテゴリコンテンツ
  • フッター

Nuxt.js でコンポーネントベースのアプリケーションを作成する場合、これらの各コンポーネントは個別にコーディングされ、マスターページに含まれます。たとえば、ProductPhoto.js というファイルを考えてみましょう。製品の写真に必要な機能 (カルーセル、レスポンシブ画像表示など) はすべて、このコンポーネント内に JS コードが記述されます。同様に、このコンポーネントで使用される CSS ファイルのみがこのコンポーネントに含まれます。つまり、コンポーネントが使用される場合、各コンポーネントに必要なファイルのみが実行されます。

現在、ほとんどの Web プラットフォームではこのプロセスはどのように処理されていますか?

script.js ファイルには、メンバーシップ、フィルター、カート ページからメニューまで、すべてのページで実行されるすべてのコードが含まれています。結果はどうでしょうか? 

 

画像-1 (2).png

 

ウェブサイト 3 MBのJSファイルと1.5 MBのCSS ファイル。主な問題はファイル サイズだけではなく、平均的な Android モバイル デバイスの CPU が数千行のコードを数ミリ秒以内に実行できるとは期待できないという事実です。必要なコードのみを実行することで、パフォーマンスを向上させることができます。

レンダリングを妨げるリソースを排除するにはどうすればいいですか?

現在、上位 32 万の Web サイトのうち 1% が Font Awesome フォント ライブラリを使用しており、平均サイズは約 250 KB です。フリック効果のため非同期読み込みは好ましくないことを考慮すると、モバイルまたはデスクトップでページを開いたときに最初の画面に表示されるフォントの数を考えてみましょう。50 の異なるプラットフォームでの短い調査では、平均 3.4 個のアイコンが使用されていることがわかりました (最も一般的なアイコン: カート、ユーザー、メニュー、通知)。したがって、問題なく XNUMX 個のアイコンを読み込むには、ライブラリ全体を読み込みます。

 

画像-2 (1).png
出典： https://trends.builtwith.com/widgets/Font-Awesome

 

高度な JS フレームワークはこれをどのように管理するのでしょうか? 関連するコンポーネントで使用されるアイコンの SVG 形式のみをインポートすることで、フォントや CSS ライブラリ全体を読み込む必要がなくなります。

Bootstrap と React JS の使用法の違いから何がわかるでしょうか?

Bootstrap JS ライブラリは、世界中のすべてのサイトで 26% の市場シェアを占めていますが、React の使用率は約 4% です。Bootstrap は柔軟性と使いやすさで人気があり、迅速な開発を可能にします。ただし、この柔軟性には代償が伴います。一般的な JS 関数、広範なコード カバレッジ、および決して使用しない可能性のある機能の関数がプロジェクトに含まれています。

 

画像-3 (1).png
出典： https://w3techs.com/technologies/comparison/js-bootstrap,js-react

 

では、質問してみましょう。100%以上の使用量の増加は、 上位10,000から上位1,000のサイトは? これは、最高の企業が、さらに優れたものとなるために、細部を自分たちの利益に活かしていることを示しています。

 

画像-4 (2).png
出典： https://w3techs.com/technologies/comparison/js-bootstrap,js-react

 

要約すると、次のような技術でサイトを書き直す代わりに、 次は、Nuxt、Angular、React、Vueなど、これらのテクノロジーが速度にどのように貢献するかを理解し、そのベスト プラクティスを Web アプリケーションに適用する必要があります。