Wat is eilandarchitectuur? Het nieuwe concept van het maken van een snellere website

Het echte probleem in het leven

Heb je ooit gevoeld waarom veel websites vandaag? "Zowel mooi als langzaam"? We zijn op de website geweest om een modern ontwerp te vinden. Met prachtige animatie, maar bij het drukken op de knop, scrol om het product te zien, of moet iets doen in plaats daarvan wachten ... wacht ... en wacht voordat het web reageerde, soms is er het. Dit probleem is niet alleen vervelend, maar het is de echte "moordende conversie". Vooral bedrijfseigenaren of marketingteams die investeren in prachtige webbudgetten, maar uiteindelijk heeft de klant gedrukt om te sluiten vanwege de traagheid helaas om zakelijke kansen te verliezen

Prompt voor illustraties: de gebruikersafbeelding zit op de kinvoeten. Kijkend naar het computerscherm of de mobiele telefoon met verveling. Er is een laadsymbool op het scherm dat er prachtig uitziet. Om de prikkelbaarheid van het web over te brengen die langzaam is geladen

Waarom is dat probleem opgetreden?

De bron van dit probleem is meestal afkomstig van traditionele webcreatie -architectuur (zoals applicaties met één pagina of spa's) die de methode "Hydratatie" gebruikt. Met andere woorden, hoewel we de webpagina hebben zien verschijnen. Maar achter de browser moet een groot JavaScript (JS) -bestand downloaden en vervolgens "wakker worden" naar de hele webpagina en tegelijkertijd met alle gebruikers kunnen communiceren. Stel je voor dat we het eten op tafel hebben besteld, maar de chef zei: "Moet wachten tot elk gerecht als eerste klaar is om te eten." Het resultaat is dat de meeste webpagina's slechts een bericht of dia zijn (statisch) die helemaal geen JS hoeft te gebruiken, maar moet wachten om te wachten op een klein deel, zoals het toetsenbord of opmerkingen die moeten worden gebruikt om eerst te downloaden. Alles is te traag.

Prompt voor illustraties: eenvoudige infographic afbeeldingen vergeleken met 2 zijden van de linkerkant, "originele methode", weergegeven in een grote JavaScript -lul run om de webpagina aan de rechterkant te vinden, "Island Architecture" toont een nog steeds webpagina en veel kleine JavaScript -klontjes die alleen worden uitgevoerd (eiland) die nodig zijn, zoals de aankoopknop, zoekbox.

Als het overgaat, hoe zal het dan beïnvloeden?

Het web vertragen omdat de oude structuur ernstiger gevolgen heeft dan verwacht. Allereerst wordt de gebruikerservaring (UX) gesloopt. Niemand wacht graag. En het leidt tot een hoger bouncepercentage (mensen drukken binnen en haasten zich om uit te drukken), wat een slecht teken is in de ogen van Google. Het volgende is de kernweb vitals , een score die Google de kwaliteit van gebruikerservaring op internet gebruikt. Nieuwe indicatoren zoals interactie naar de volgende verf (INP) worden direct beïnvloed. Omdat het de webresponssnelheid meet om te klikken of te actie van de gebruiker als onze website een grote JS en langzaam werk laadt, zullen de INP -scores laag zijn, wat uiteindelijk dit alles zo erg zal trekken , omdat Google van de website houdt die snel is en een goede ervaring met gebruikers geeft.

Prompt voor illustraties: de grafiek toont de SEO -rangorde. Samen met het fronsenpictogram van de gebruiker en de grenzen die is gestegen om negatieve effecten in het bedrijfsleven en SEO over te brengen

Is er een oplossing? En waar moet het beginnen?

Het goede nieuws is dat we een nieuw concept hebben dat dit specifieke probleem oplost: eilandarchitectuur ! Dit concept werd gepresenteerd en bekend gemaakt door Jason Miller en werd op grote schaal gebruikt in het moderne raamwerk. Het principe is heel gemakkelijk. In plaats van naar de hele webpagina te kijken, moet de applicatie die alle JavaScript vereist om te zien dat onze webpagina als een "oceaan" vol HTML is, die nog steeds en alleen "eilanden" is, waarvan sommige interactief zijn.

Daarom sturen we, in plaats van alle JavaScript tegelijkertijd naar gebruikers te sturen, alleen HTML sturen om onmiddellijk weer te geven. Waardoor het web eerst wordt gedownload en vervolgens JavaScript Tiny JavaScript alleen het "eiland" verzendt dat de gebruiker op het punt staat met deze methode te communiceren, wordt gedeeltelijke hydratatie of selectieve hydratatie genoemd. Het is een verandering van "wachten tot alles wordt voltooid" als "alleen het deel dat moet worden gedaan", wat het begin is van de krachtigste verandering.

Prompt voor illustraties: Ocean Map Images (in plaats van de webpagina), de meeste statische HTML en kleine eilanden zijn verspreid, die elk een bord hebben geschreven "Knop om te kopen", "video", opmerkingen "om het concept van eilandarchitectuur te verklaren.

Voorbeelden van het echte ding dat vroeger succesvol was

Het meest voor de hand liggende voorbeeld van het gebruik van eilandarchitectuur om succesvol te zijn, is Astro -raamwerk . Astro is gemaakt op de filosofie. "Stuur JavaScript 0KB als standaard" (standaard Zero-JS).

Wanneer de ontwikkelaars willen communiceren (zoals beeldcarrousel of toevoegen aan winkelwagen), kunnen ze dat deel als "eiland" aankondigen en ervoor kiezen om JavaScript te downloaden, zoals onmiddellijk laden (enthousiast), wanneer de gebruiker zal scrollen (zichtbaar), of wanneer de gebruiker klikt, is het resultaat een website die wordt gemaakt met een kernscore. Uitstekende webvitals en duidelijk betere gebruikerservaringen bieden. Wat bewijst dat het concept van eilandenarchitectuur niet alleen theorie is, maar iets is dat echt werkt en een opmerkelijk resultaat oplevert

Prompt voor illustraties: Astro Framework -logo in het midden omringd door pictogrammen die voordelen vertegenwoordigen zoals raketten (snelheid), kernwebvitals en gebruikers glimlachen (goede UX).

Als je wilt volgen, wat te doen? (Kan onmiddellijk worden gebruikt)

Voor ontwikkelaars of webeigenaren die dit idee willen toepassen, zijn de stappen niet zo ingewikkeld als u denkt:

1. Analyseer uw webpagina: op zoek naar welk deel statisch is (gewoon weergeven) en welk deel interactief is (moet klikken, invullen of beweging)
2. Kies de juiste tool: probeer het framework te bestuderen dat direct op deze architectuur is gebouwd, zoals Astro of QWIK of op zoek naar functies in het framework dat u gebruikt (zoals React Server -componenten) die vergelijkbare dingen mogelijk maken.
3. Begin met een klein onderdeel: probeer eerst een aanvraag in te dienen op de nieuwe bestemmingspagina of de gecompliceerde componenten. Om werkprincipes te begrijpen
4. Focus op de "luie" lading. Zet "eiland". Download JavaScript alleen wanneer het echt nodig is, zoals wanneer de gebruiker het scherm sluit of wanneer de gebruiker breekt op de actie (op inactiviteit) om de eerste webpagina zo snel mogelijk te downloaden

Dit concept kan ook worden uitgebreid tot een complexere architectuur zoals headless commerce of zelfs werken met nieuwe technologie zoals Webasembly om een webtoepassing te creëren die zowel snel als krachtig is.

Prompt voor illustraties: Checklist met het onderwerp "Hoe eilandarchitectuur te implementeren" met 4 eenvoudige -Betegreer items volgens de bovenstaande inhoud. En heb elk pictogram

Vragen die mensen de neiging hebben zich af te vragen en de antwoorden die zijn gewist

Is eilandarchitectuur zoals micro-fronntds?
Niet helemaal dezelfde micro-fronntds richt zich op "verdelende teams". Ontwikkel verschillende onderdelen. Van het web vrijelijk. De eilandarchitectuur richt zich op de methode "JavaScript" om de efficiëntie van het weblaad te verbeteren. Hoewel beide ideeën samen kunnen worden gebruikt, maar verschillende hoofddoelen hebben

Is het nodig om een hele nieuwe website te schrijven om dit concept te gebruiken?
Niet altijd nodig, hoewel het begin van een nieuw project met framework, Astro het gemakkelijkst is, u kunt de principes toepassen op de oorspronkelijke website, zoals het serieus maken van code -splying en het gebruik van luie laadtechnieken met verschillende componenten. Om vergelijkbare resultaten te krijgen

Voor wat voor soort website is geschikt?
Zeer geschikt voor websites die zich richten op inhoud (content-zware sites) zoals blogs, nieuwswebsites, e-commerce websites en marketingwebsites op de meeste webpagina's zijn statisch, maar er zijn enkele onderdelen die een interactief nodig hebben. Het gebruik van eilandarchitectuur zal deze websites sneller helpen.

Echt van invloed op SEO?
Heeft een direct effect en is een zeer goede paginasnelheid en betere kernwebvitals is een belangrijke factor die Google gebruikt om deze twee delen met eilandarchitectuur te rangschikken als een rode loper voor uw SEO. En helpt ook om de prestaties van de speculatieregels API die de webnavigatie sneller helpt

VOORBEELD VOOR ILLUSTRATIES: Afbeelding pictogram, een groot vraagteken (?) En er is een korte berichtenvak rondzweven om de Q&A over te brengen.

Samenvatting om gemakkelijk te begrijpen te zijn + willen proberen te doen

Kortom, eilandarchitectuur is een verandering in het maken van een web. Uit het origineel dat tegelijkertijd moet worden geladen, komt alles om een lichte en snellere website te maken met HTML als basis en vervolgens langzaam "wakker worden". Alleen het deel dat moet reageren op het leven als een "eiland". Uitstekende gebruikerservaring en is geliefd bij Google

Uw website laten vertragen niet anders dan het sluiten van de deur voor de klant die op het punt staat de winkel in te lopen. Laat de kans niet wegglippen. Het is tijd om aandacht te besteden aan moderne webarchitectuur die effectief benadrukt. Probeer dit idee te gebruiken om te studeren en toe te passen op uw volgende project. En u zult merken dat de website "Beautiful and Fast" verschillende bedrijfsresultaten kan opleveren.

Als u uw website naar het volgende niveau wilt upgraden met de nieuwste technologie en de meest effectieve architectuur. Bekijk Advanced WebFlow -ontwikkelingsservice . We zijn klaar om een consultant te zijn en u te helpen uitstekende websites te maken en concurrentievoordelen te creëren.

Prompt voor illustraties: Bright Lamp -afbeeldingen in de gloeilamp, er is een kleine eilandkaart binnen met de oproep tot actietekst. "Maak een website die sneller is dan vandaag!" Om het te stimuleren.

‍