Co je ostrovní architektura? Nový koncept vytváření rychlejšího webu

Skutečný problém v životě

Už jste někdy cítili, proč dnes mnoho webových stránek? „Krásné i pomalé“? Vstoupili jsme na web, abychom našli moderní design. S krásnou animací, ale když stisknete tlačítko, přejděte a uvidíte produkt, nebo něco udělejte, musí místo toho počkat ... Počkejte ... a počkejte, než web odpověděl někdy, že to bude. Tento problém není jen nepříjemný, ale je to skutečná „konverze vraha“. Zejména majitelé podniků nebo marketingové týmy, které investují do krásných webových rozpočtů, ale nakonec se zákazník tlačil k uzavření kvůli pomalosti, bohužel ztráta obchodních příležitostí

Výzva pro ilustrace: Obrázek uživatele sedí na nohou brady. Při pohledu na obrazovku počítače nebo mobilního telefonu s nudou. Na obrazovce je symbol nakládky, který vypadá krásně. Zprostředkovat podrážděnost webu, který se naložil pomalu

Proč k tomuto problému došlo?

Zdroj tohoto problému obvykle pochází z tradiční architektury pro tvorbu webových stránek (jako jsou aplikace s jednou stránkou nebo SPA), která používá metodu „hydratační“. Jinými slovy, i když jsme viděli, jak se webová stránka objeví. Za prohlížeč však musí stáhnout velký soubor JavaScript (JS) a poté se „probudit“ na celou webovou stránku a může interagovat se všemi uživateli současně. Představte si, jako bychom si objednali jídlo ke stolu, ale šéfkuchař řekl: „Musí čekat, až každé jídlo bude nejprve dokončit, aby začalo jíst.“ Výsledkem je, že většina webových stránek je pouze zpráva nebo skluzavka (statická), která vůbec nemusí používat JS, ale musí čekat, až čeká na malou část, jako je klávesnice nebo komentáře, které je třeba použít jako první. Všechno je příliš pomalé.

Výzva pro ilustrace: Jednoduché infografické obrázky ve srovnání se dvěma stranami levé strany, „Originální metoda“, zobrazená ve velkém kusním spuštění JavaScriptu, aby se nalezla webová stránka na pravé straně, „ostrovní architektura“ ukazuje statnou webovou stránku a mnoho malých kusů JavaScriptu běží pouze (ostrov), které jsou potřebné, jako je například tlačítko nákupu, vyhledávací pole.

Pokud to odejde, jak to ovlivní?

Nechte web zpomalit, protože stará struktura má vážnější důsledky, než se očekávalo. Za prvé, uživatelská zkušenost (UX) je zbořena. Nikdo nechce čekat. A to vede k vyšší míře okamžitého opuštění (lidé stiskněte a pak spěchají, aby vytiskli), což je špatné znamení v očích Google. Další je základní webové vitality , což je skóre, které Google používá kvalitu uživatelského zážitku na webu. Přímo ovlivní budou nové ukazatele, jako je interakce k další barvě (INP) Protože měří rychlost odezvy webové odezvy k kliknutí nebo akci uživatele, pokud náš web načte velkou JS a pomalou práci, bude skóre INP nízká, což nakonec to vše vytáhne vaše hodnocení SEO tak špatně, protože Google miluje web, který je rychlý a poskytuje dobrý zážitek s uživateli.

Výzva pro ilustrace: Graf ukazuje hodnocení SEO. Spolu s zamračenou ikonou uživatele a mírou hranic, která se zvýšila, aby zprostředkovala negativní dopady v podnikání a SEO

Existuje nějaké řešení? A kde by to mělo začít?

Dobrou zprávou je, že máme nový koncept, který přichází k vyřešení tohoto konkrétního problému: ostrovní architektura ! Tento koncept byl představen a známý Jasonem Millerem a byl široce používán v moderním rámci. Jeho princip je velmi snadný. Místo toho, aby se podíval na celou webovou stránku, aplikace, která vyžaduje, aby veškerý JavaScript zjistil, že naše webová stránka je jako „oceán“ plný HTML, což je stále a pouze „ostrovy“, z nichž některé jsou interaktivní.

Proto místo odesílání všech JavaScript uživatelům okamžitě odešleme HTML, aby se okamžitě zobrazovaly. Způsob, že si web nejprve stahuje a poté odeslat JavaScript Tiny JavaScript pouze „ostrov“, který uživatel chystá interagovat s touto metodou, se nazývá částečná hydratace nebo selektivní hydratace. Jedná se o změnu od „čekání na dokončení všeho“ jako „pouze část, kterou je třeba udělat“, což je začátek nejsilnější změny.

Výzva pro ilustrace: Obrázky na mapu oceánu (místo webové stránky), většina statických HTML a malých ostrovů je rozptýlena, z nichž každá má označení „tlačítka“, „Video“, komentáře “, aby vysvětlila koncept ostrovní architektury.

Příklady ze skutečné věci, která bývala úspěšná

Nejviditelnějším příkladem použití ostrovní architektury k úspěchu je Astro Framework . Astro je vytvořen na filozofii. „Odeslat JavaScript 0kb jako výchozí“ (ve výchozím nastavení).

Když vývojáři chtějí interagovat (například obrazový kolotoč nebo přidat do košíku), mohou tuto část označit jako „ostrov“ a rozhodnout se stáhnout JavaScript, jako je načítání okamžitě (dychtivého), když uživatel posouvá (viditelný), nebo když uživatel klikne, je výsledek, který je vytvořen základní skóre. Vynikající webové vitály a jasně poskytování lepších uživatelských zkušeností. Což dokazuje, že koncept architektury ostrovů není jen teorie, ale je to něco, co opravdu funguje a vytváří pozoruhodný výsledek

Výzva pro ilustrace: Logo Astro Framework ve středu obklopené ikony, které představují výhody, jako jsou rakety (rychlost), základní webové vitality a úsměvy uživatelů (Good UX).

Pokud chcete následovat, co dělat? (Lze použít okamžitě)

Pro vývojáře nebo majitele webu, kteří chtějí tuto myšlenku použít, nejsou kroky tak komplikované, jak si myslíte:

1. Analyzujte svou webovou stránku: Hledáte, která část je statická (stačí zobrazit) a která část je interaktivní (musí kliknout, vyplnit nebo pohyb)
2. Vyberte správný nástroj: Zkuste studovat rámec, který je přímo postaven na této architektuře, jako je Astro nebo Qwik nebo hledáte funkce v rámci, který používáte (například komponenty serveru React), který umožňuje podobné věci.
3. Začněte s malou součástí: Zkuste se nejprve použít na novou stránku vstupní stránky nebo na komplikované komponenty. Porozumět pracovním principům
4. Zaměřte se na „líné“ zatížení. Nastavte „ostrov“. Stáhněte si JavaScript pouze v případě, že je to skutečně nutné, například když uživatel posouvá obrazovku zavřený nebo když se uživatel rozbije na akci (na volnoběhu) a stahujte první webovou stránku co nejdříve

Tento koncept lze také rozšířit na složitější architekturu, jako je bezhlavý obchod nebo dokonce práce s novou technologií, jako je WebAsembly , na vytvoření webové aplikace, která je rychlá i výkonná.

Výzva pro ilustrace: Kontrolní seznam s tématem „Jak implementovat ostrovní architekturu“ se 4 Easy -to -to -nepochopitelnými položkami podle výše uvedeného obsahu. A mít každou ikonu

Otázky, které lidé mají tendenci divit a odpovědi, které jsou vymazány

Je ostrovní architektura jako Micro-Fronntds?
Ne úplně stejný Micro-Fronntds se zaměřuje na „dělicí týmy“. Vyvinout různé části. Webu volně. Architektura ostrova se zaměřuje na metodu „JavaScript“ pro zlepšení účinnosti zatížení webu. Ačkoli oba myšlenky lze použít společně, ale mají různé hlavní cíle

Je nutné napsat zcela nový web pro použití tohoto konceptu?
Není to vždy nutné, i když je zahájen nový projekt s rámcem, Astro je nejjednodušší, můžete použít principy na původní web, jako je vážně vyrábět kód a používat líné techniky načítání s různými komponenty. Chcete -li získat podobné výsledky

K jakému webu je vhodné?
Velmi vhodné pro webové stránky, které se zaměřují na obsah (weby s těžkým obsahem), jako jsou blogy, zpravodajské webové stránky, webové stránky elektronického obchodování a marketingové weby na většině webových stránek, jsou statické, ale existují některé části, které vyžadují interaktivní. Použití ostrovní architektury pomůže těmto webovým stránkám obrovským rychlejším.

Opravdu ovlivňujete SEO?
Má přímý efekt a je to velmi dobrá rychlost stránky a lepší jádro webové vitality je důležitým faktorem, který Google používá k hodnocení těchto dvou částí ostrovní architekturou je jako červený koberec pro vaše SEO. A také pomáhá zvyšovat výkon rozhraní API pro spekulace , které pomáhá webu navigaci rychleji

Výzva pro ilustrace: Ikona obrázku, velký otazník (?) A tam se vznáší krátká schránka zpráv, která sdělí otázky a odpovědi.

Shrnutí, které má být snadno pochopitelné + chtějí to zkusit udělat

Stručně řečeno, ostrovní architektura je změnou toho, jak vytvořit web. Z originálu, který je třeba načíst vše současně, přijde vytvořit lehký a rychlejší web s HTML jako základ a poté se pomalu „probudí“. Pouze část, která musí na život reagovat jako „ostrov“. Vynikající uživatelský zážitek a je milován společností Google

Nechat váš web zpomalit nijak neliší od zavření dveří před zákazníkem, který se chystá vstoupit do obchodu. Nenechte tuto příležitost vyklouznout. Je čas věnovat pozornost moderní webové architektuře, která efektivně zdůrazňuje. Zkuste použít tuto myšlenku ke studiu a aplikovat na svůj další projekt. A zjistíte, že web „krásný a rychlý“ může vytvářet různé obchodní výsledky.

Pokud chcete upgradovat svůj web na další úroveň s nejnovější technologií a nejúčinnější architekturou. Podívejte se na pokročilou vývojovou službu WebFlow . Jsme připraveni být konzultantem a pomáháme vám vytvářet vynikající webové stránky a vytvářet konkurenční výhody.

Výzva pro ilustrace: Světlé obrazy lampy V žárovce je uvnitř malé ostrovní mapy s textem výzvy k akci. "Vytvořte web, který je rychlejší než dnes!" Stimulovat to.

‍