島の建築とは何ですか？より高速なWebサイトを作成するという新しい概念

人生の本当の問題

なぜ今日多くのウェブサイトを感じたことがありますか？ 「美しくて遅い」？現代のデザインを見つけるためにウェブサイトに参加しました。美しいアニメーションを使用しますが、ボタンを押すときは、スクロールして製品を確認するか、代わりに何かをしなければなりません...待ってください...そして、ウェブが応答するまで待ちます。この問題は迷惑なだけではありませんが、実際の「キラーコンバージョン」です。特に、美しいウェブ予算に投資するビジネスオーナーまたはマーケティングチームですが、最終的には、残念ながらビジネスチャンスを失ったことが遅いため、顧客は閉鎖を迫られました

イラストのプロンプト：ユーザーイメージはあごの足に座っています。退屈なコンピューター画面または携帯電話を見る。画面には美しいように見えるロードシンボルがあります。ゆっくりとロードされたウェブのいらいらを伝えるために

なぜその問題が発生したのですか？

この問題の原因は、通常、「水和」メソッドを使用する従来のWeb作成アーキテクチャ（シングルページアプリケーションやSPAなど）に由来しています。言い換えれば、ウェブページが表示されているのを見てきましたが。ただし、ブラウザの後ろには、大きなJavaScript（JS）ファイルをダウンロードしてから、Webページ全体に「目を覚まし」、すべてのユーザーと同時に対話できます。私たちがテーブルに食べ物を注文したように想像してみてください。しかし、シェフは「すべての料理が最初に食べ始めるのを待つ必要があります。」と言ったのは、ほとんどのウェブページはJSを使用する必要のないメッセージまたはスライド（静的）であるが、キーパッドや最初にダウンロードする必要があるコメントなどの小さな部品を待つ必要はありません。すべてが遅すぎます。

イラストのプロンプト：左側の2つの側面「元の方法」と比較した単純なインフォグラフィック画像、右側のウェブページを見つけるために大きなJavaScriptランプランで示されている「Island Architecture」は、まだWebページと多くの小さなJavaScriptランプが必要な（島のみ）、購入ボタンなどの多くの小さなJavaScriptランプが必要な（島）を示しています。

残っている場合、それはどのように影響しますか？

古い構造が予想よりも深刻な結果をもたらすため、ウェブを遅くします。まず、ユーザーエクスペリエンス（UX）が取り壊されます。誰も待つのが好きではありません。そして、それはより高いバウンス率（人々は押し込んでから急いで押し出されます）。これはGoogleの目には悪い兆候です。、GoogleがWeb上のユーザーエクスペリエンスの品質を使用するスコアであるコアWeb Vitalsです Next Paint（INP）への相互作用などの新しいインジケーターが直接影響を受けます。 Webサイトが大規模なJSと遅い作業をロードした場合、ユーザーのクリックまたはアクションにWeb応答速度を測定するため、 INPスコアは低くなります。

イラストのプロンプト：グラフはSEOランキングを示しています。ユーザーの眉をひそめたアイコンと、ビジネスとSEOのマイナスの影響を伝えるために上昇した境界レート

解決策はありますか？そして、それはどこから始めるべきですか？

良いニュースは、この特定の問題を解決するために来る新しい概念があるということです。アイランドアーキテクチャ！ Jason Millerによって提示され、知られるようにされ、現代のフレームワークで広く使用されていました。その原則は非常に簡単です。 Webページ全体を見る代わりに、すべてのJavaScriptにWebページがHTMLでいっぱいの「海」のようなものであることを確認する必要があるアプリケーションは、まだ「島」であり、その一部はインタラクティブです。

したがって、すべてのJavaScriptをユーザーに一度に送信する代わりに、すぐに表示するためにHTMLを送信します。 Webを最初にダウンロードしてから、JavaScript Tiny JavaScriptをこの方法とやり取りしようとしている「島」のみを送信します。これは、「すべてが完成するのを待つ」による変更であり、「行う必要がある部分のみ」として、最も強力な変化の始まりです。

イラストのプロンプト：オーシャンマップ画像（Webページの代わりに）、静的HTMLと小さな島のほとんどが散らばっています。それぞれには「購入する」ボタン、「ビデオ」、コメント「コメント」と書かれたサインがあります。

かつて成功していた本物からの例

成功するために島建築の使用の最も明白な例は、アストロフレームワーク。アストロは哲学で作成されています。 「JavaScript 0KBをデフォルトとして送信」（デフォルトではゼロジャン）。

開発者が対話したい場合（画像カルーセルやカートを追加するなど）、その部分を「島」として発表し、ユーザーがスクロールするとき（目に見える）、またはユーザーがクリックするとき、すぐにロード（熱心）などのJavaScriptをダウンロードすることを選択できます。結果はコアスコアで作成されたWebサイトです。優れたWebバイタルと、より良いユーザーエクスペリエンスを明確に提供します。島の建築の概念は単なる理論ではなく、本当に機能し、驚くべき結果を生み出すものである

イラストのプロンプト：ロケット（速度）、コアWebバイタル、ユーザーの笑顔（良いUX）などの利点を表すアイコンに囲まれた中央のアストロフレームワークのロゴ。

フォローしたい場合、何をすべきですか？ （すぐに使用できます）

このアイデアを適用したい開発者またはウェブ所有者にとって、あなたが思うほど複雑ではありません：

1. あなたのウェブページを分析する：どの部分が静的（表示のジャスト）で、どの部分がインタラクティブであるかを探す（クリック、入力、または動きが必要です）
2. 適切なツールを選択してください。アストロやQWIKなど、このアーキテクチャに直接構築されたフレームワークを研究したり、使用しているフレームワーク（Reactサーバーコンポーネントなど）で同様のものを許可している機能を探してみてください。
3. 少しの部分から始めてください：最初に新しいランディングページページまたは複雑なコンポーネントに適用してみてください。働く原則を理解する
4. 「怠zy」負荷に焦点を当てます。 「島」を設定します。ユーザーが画面を閉じたときや、ユーザーがアクションを壊したとき（アイドル時に）ときなど、本当に必要な場合にのみJavaScriptをダウンロードして、できるだけ早く最初のWebページをダウンロードします

、ヘッドレスコマースなどのより複雑なアーキテクチャに拡張したり WebAsemblyなどの新しいテクノロジーを操作して、高速で強力なWebアプリケーションを作成することもできます。

イラストのプロンプト：上記のコンテンツに従って、4つの簡単な項目を理解した4つの簡単な項目を使用して、トピック「島アーキテクチャの実装方法」のチェックリスト。各アイコンを持っています

人々が不思議に思う傾向がある質問とクリアされた答え

島の建築はmicro-fronntdsのようなものですか？
まったく同じではないMicro-Fronntdsは、「分割チーム」に焦点を当てています。さまざまな部分を開発します。ウェブの自由に。 Island Architectureは、Webロード効率を向上させるための「JavaScript」方法に焦点を当てています。どちらのアイデアも一緒に使用できますが、主な目標は異なります

この概念を使用するためにまったく新しいWebサイトを書く必要がありますか？
フレームワークを備えた新しいプロジェクトの開始が常に必要であるとは限りませんが、Astroは最も簡単です。コードを真剣に作成したり、さまざまなコンポーネントを使用して怠zyなロードテクニックを使用したりするなど、元のWebサイトに原則を適用できます。同様の結果を得るため

どのようなウェブサイトに適していますか？
ブログ、ニュースWebサイト、eコマースWebサイト、ほとんどのWebページのマーケティングWebサイトなどのコンテンツ（コンテンツが多いサイト）に焦点を当てたWebサイトに非常に適していますが、静的ですが、インタラクティブが必要な部分がいくつかあります。島の建築を使用すると、これらのウェブサイトが膨大な速さを高めることができます。

本当にSEOに影響しますか？
直接的な効果があり、非常に優れたページスピードであり、より優れたコアWebバイタルは、Googleがこれらの2つのパートを島の建築でランク付けするために使用する重要な要素です。 Webナビゲーションをより速くするのに役立つ投機ルールAPIのパフォーマンスを向上させるのにも役立ちます

イラストのプロンプト：画像アイコン、大きな疑問符（？）、そしてQ＆Aを伝えるために短いメッセージボックスが浮かんでいます。

理解しやすい +をやりたいと思うようにする

要するに、島のアーキテクチャは、Webの作成方法の変更です。すべてを同時にロードする必要があるオリジナルから、HTMLを備えた軽量でより高速なWebサイトを基礎として作成し、ゆっくりと「目を覚ます」ようになります。 「島」として人生に対応する必要がある部分のみ。優れたユーザーエクスペリエンスとGoogleに愛されています

あなたのウェブサイトが、店に足を踏み入れようとしている顧客の前でドアを閉めることと変わらないようにします。機会を逃げさせないでください。効果的に強調する現代のWebアーキテクチャに注意を払う時が来ました。このアイデアを使用して、次のプロジェクトに勉強して適用してみてください。また、「美しくて速い」Webサイトは、さまざまなビジネス結果を作成できることがわかります。

最新のテクノロジーと最も効果的なアーキテクチャを使用して、ウェブサイトを次のレベルにアップグレードしたい場合。 Advanced WebFlow Development Serviceをご覧ください。私たちはコンサルタントになる準備ができており、優れたウェブサイトを作成し、競争力のある利点を作成するのに役立ちます。

イラストのプロンプト：電球に明るいランプ画像、アクショントゥアクションテキストがある小さな島の地図があります。 「今日より速いウェブサイトを作成してください！」それを刺激する。

‍