¿Qué es la arquitectura de la isla? El nuevo concepto de crear un sitio web más rápido

El verdadero problema en la vida

¿Alguna vez has sentido por qué muchos sitios web hoy? "Tanto hermoso y lento"? Entramos en el sitio web para encontrar un diseño moderno. Con una hermosa animación pero al presionar el botón, desplácese para ver el producto, o haga algo, en cambio, tiene que esperar ... esperar ... y esperar antes de que la web respondiera a veces, lo es. Este problema no es solo molesto, sino que es la verdadera "conversión asesina". Especialmente propietarios de negocios o equipos de marketing que invierten en hermosos presupuestos web, pero al final, el cliente presionó para cerrar debido a la lentitud desafortunadamente perdiendo oportunidades comerciales

Solicitud de ilustraciones: la imagen del usuario está sentada en los pies de la barbilla. Mirando la pantalla de la computadora o el teléfono móvil con aburrimiento. Hay un símbolo de carga en la pantalla que se ve hermoso. Para transmitir la irritabilidad de la web que se cargó lentamente

¿Por qué ocurrió ese problema?

La fuente de este problema generalmente proviene de la arquitectura de creación web tradicional (como aplicaciones o spas de una sola página) que utiliza el método de "hidratación". En otras palabras, a pesar de que hemos visto aparecer la página web. Pero detrás del navegador debe descargar un archivo grande JavaScript (JS) y luego "despertar" a toda la página web y puede interactuar con todos los usuarios al mismo tiempo. Imagínese como si ordenamos la comida a la mesa, pero el chef dijo: "Debe esperar a que cada plato termine primero para comenzar a comer." El resultado es que la mayoría de las páginas web son solo un mensaje o un deslizamiento (estático) que no necesita usar JS en absoluto, pero debe esperar para esperar una parte pequeña, como el teclado o los comentarios que deben estar utilizados para descargar primero. Todo es demasiado lento.

Solicitud de ilustraciones: Imágenes infográficas simples en comparación con 2 lados del lado izquierdo, "Método original", que se muestra en un gran bulto de JavaScript ejecutado para encontrar la página web en el lado derecho, "Island Architecture" muestra una página web fija y muchos pequeños bultos de JavaScript solo se ejecutan (isla) que se necesitan, como el botón de compra, el cuadro de búsqueda.

Si se deja, ¿cómo afectará?

Dejar que la Web disminuya porque la antigua estructura tiene consecuencias más graves de lo esperado. En primer lugar, la experiencia del usuario (UX) es demolida. A nadie le gusta esperar. Y conduce a una tasa de rebote más alta (las personas presionan y luego se apresuran a presionar), lo cual es una mala señal a los ojos de Google. El siguiente es el Core Web Vitals , que es una puntuación que Google utiliza la calidad de la experiencia del usuario en la web. Los nuevos indicadores como la interacción a la siguiente pintura (INP) se verán directamente afectados. Debido a que mide la velocidad de respuesta web para hacer clic o la acción del usuario si nuestro sitio web carga un JS grande y un trabajo lento, los puntajes de INP serán bajos, lo que al final todo esto extraerá sus clasificaciones de SEO porque Google ama el sitio web que es rápido y ofrece una buena experiencia con los usuarios.

Solicitud de ilustraciones: el gráfico muestra la clasificación SEO. Junto con el ícono fruncido del usuario y la tasa de límites que ha aumentado para transmitir impactos negativos en los negocios y el SEO

¿Hay alguna solución? ¿Y dónde debería comenzar?

La buena noticia es que tenemos un nuevo concepto que viene a resolver este problema en particular: ¡ la arquitectura de la isla ! Este concepto fue presentado y hecho conocido por Jason Miller y fue ampliamente utilizado en el marco moderno. Su principio es muy fácil. En lugar de mirar toda la página web, la aplicación que requiere que JavaScript vea que nuestra página web es como un "océano" lleno de HTML, que aún es y solo "islas", algunas de las cuales son interactivas.

Por lo tanto, en lugar de enviar todo el JavaScript a los usuarios a la vez, solo enviaremos HTML para mostrar de inmediato. Haciendo que la Web se descargue primero y luego envíe JavaScript Tiny JavaScript solo la "Isla" que el usuario está a punto de interactuar con este método se llama hidratación parcial o hidratación selectiva. Es un cambio de "esperar a que todo se complete" como "solo la parte que debe hacerse", que es el comienzo del cambio más poderoso.

Solicitud de ilustraciones: las imágenes del mapa del océano (en lugar de la página web), la mayoría del HTML estático y las islas pequeñas están dispersas, cada una de las cuales tiene un letrero "botón para comprar", "Video", comentarios "para explicar el concepto de arquitectura de las islas.

Ejemplos de lo real que solía tener éxito

El ejemplo más obvio del uso de la arquitectura de la isla para tener éxito es Astro Framework . Astro se crea en la filosofía. "Enviar JavaScript 0KB como el valor predeterminado" (cero-js por defecto).

Cuando los desarrolladores quieren interactuar (como el carrusel de imagen o agregar al carrito), pueden anunciar esa parte como "isla" y elegir descargar JavaScript, como la carga inmediatamente (ansiosa), cuando el usuario se desplazará (visible), o cuando el usuario está haciendo clic, el resultado es un sitio web que se crea con un puntaje central. Excelentes vitales web y claramente brindando mejores experiencias de usuario. Lo que prueba que el concepto de arquitectura de las islas no es solo la teoría, sino que es algo que realmente funciona y crea un resultado notable

Solicitud de ilustraciones: logotipo de Astro Framework en el medio rodeado de iconos que representan ventajas como cohetes (velocidad), vital de web central y sonrisas de usuarios (buena UX).

Si quieres seguir, ¿qué hacer? (Se puede usar de inmediato)

Para los desarrolladores o propietarios web que desean aplicar esta idea, los pasos no son tan complicados como cree:

1. Analice su página web: buscando qué parte es estática (solo visualización) y qué parte es interactiva (debe hacer clic, completar o moverse)
2. Elija la herramienta correcta: intente estudiar el marco que se basa directamente en esta arquitectura, como Astro o Qwik o buscando características en el marco que está utilizando (como los componentes del servidor React) que permite cosas similares.
3. Comience con una pequeña parte: intente aplicar a la nueva página de la página de destino o primero los componentes complicados. Para entender los principios de trabajo
4. Concéntrese en la carga "perezosa". Establecer "Isla". Descargue JavaScript solo cuando sea realmente necesario, como cuando el usuario mueve la pantalla cierra o cuando el usuario rompe la acción (en inactivo) para descargar la primera página web lo antes posible

Este concepto también se puede extender a una arquitectura más compleja, como el comercio sin cabeza o incluso trabajar con una nueva tecnología como WebAsembly para crear una aplicación web que sea rápida y poderosa.

Solicitud de ilustraciones: Lista de verificación con el tema "Cómo implementar la arquitectura de la isla" con 4 elementos fáciles de entender de acuerdo con el contenido anterior. Y tener cada icono

Preguntas que las personas tienden a preguntarse y las respuestas que se limpian

¿Es la arquitectura de la isla como Micro-Fronntds?
No es el mismo Microfronntds se centra en "dividir equipos". Desarrollar varias partes. De la web libremente. La arquitectura de la isla se centra en el método "JavaScript" para mejorar la eficiencia de carga web. Aunque ambas ideas se pueden usar juntas, pero tienen diferentes objetivos principales

¿Es necesario escribir un sitio web completamente nuevo para usar este concepto?
No siempre es necesario, aunque el comienzo de un nuevo proyecto con el marco, Astro es el más fácil, puede aplicar los principios al sitio web original, como hacer que el código sea gravemente volar y usar técnicas de carga perezosa con varios componentes. Para obtener resultados similares

¿Para qué tipo de sitio web es adecuado?
Muy adecuado para sitios web que se centran en el contenido (sitios de contenido pesado) como blogs, sitios web de noticias, sitios web de comercio electrónico y sitios web de marketing en la mayoría de las páginas web son estáticas, pero hay algunas partes que necesitan un interactivo. El uso de la arquitectura de la isla ayudará a estos sitios web enormemente más rápido.

¿Realmente afectando el SEO?
Tiene un efecto directo y es una muy buena velocidad de página y Better Core Web Vitals es un factor importante que Google usa para clasificar estas dos partes con la arquitectura de la isla es como una alfombra roja para su SEO. Y también ayuda a aumentar el rendimiento de la API de reglas de especulación que ayuda a la navegación web más rápido

Solicitud de ilustraciones: icono de imagen, un gran signo de interrogación (?) Y hay un cuadro de mensaje corto que flota para transmitir las preguntas y respuestas.

Resumen para ser fácil de entender + quiero intentar hacer

En resumen, Island Architecture es un cambio en cómo crear una web. Desde el original que debe cargarse todo al mismo tiempo, llegar a crear un sitio web ligero y más rápido con HTML como base y luego "despierta" lentamente. Solo la parte que necesita responder a la vida como una "isla". Excelente experiencia de usuario y es amada por Google

Permitir que su sitio web no se desanime de no diferente a cerrar la puerta frente al cliente que está a punto de entrar a la tienda. No dejes que la oportunidad se escape. Es hora de prestar atención a la arquitectura web moderna que enfatiza de manera efectiva. Intente usar esta idea para estudiar y aplicar a su próximo proyecto. Y encontrará que el sitio web "hermoso y rápido" puede crear diferentes resultados comerciales.

Si desea actualizar su sitio web al siguiente nivel con la última tecnología y la arquitectura más efectiva. Eche un vistazo a servicio de desarrollo de flujo web avanzado . Estamos listos para ser consultores y ayudarlo a crear sitios web sobresalientes y crear ventajas competitivas.

Solicitud de ilustraciones: imágenes de lámparas brillantes en la bombilla, hay un pequeño mapa de la isla en el interior con el texto de llamada a acción. "¡Crea un sitio web que sea más rápido que hoy!" Para estimularlo.

‍