Web
En el mundo de Jamstack, puedes tener tres formas comunes de renderizar una página: páginas generadas estáticamente, páginas renderizadas del lado del servidor y páginas híbridas. En este post, explicaré cómo funciona cada una de ellas y enumeraré sus pros y sus contras.
Con el renderizado de sitio híbrido, usted renderiza parcialmente la página usando la generación de sitio estático (SSG). Luego, tras el renderizado inicial, puedes añadir el contenido que necesites para que sea personalizado por el usuario utilizando el renderizado del lado del cliente.
Cuando se trata de la base de contenidos de una plataforma de experiencia digital, las capacidades críticas son razonablemente sencillas. En realidad, sólo hay cuatro, ya que la seguridad, la escalabilidad y la conteni…
Motor web
$body.css(‘margin’, ‘2px’); // reflow, repaintSin embargo, acceder a la propiedad de un elemento y posteriormente poner sólo una línea extra de código en el script conducirá a un reflow forzado:var $body = $(‘body’);
$body.css(‘margin’, ‘2px’);Dos reflujos en lugar de uno suponen el doble de esfuerzo para el sistema, por lo que esta situación debe evitarse siempre que sea posible. Una de las formas de hacerlo es agrupar las propiedades de los elementos de lectura.Aun así, a veces hay situaciones en las que es necesario un reflujo forzado – como cuando necesitas aplicar la misma propiedad al mismo elemento dos veces. Por ejemplo, puede establecer la propiedad «margin-left» a 100px sin animación, pero necesita cambiarla a 50px usando la transición. Lo que se haría normalmente es empezar creando una clase CSS con una transición:.has-transition {
$targetElem.css(‘margin-left’, 50);Sin embargo, esta implementación no funcionará como se espera. El navegador almacenará en caché los cambios y los aplicará sólo al final del bloque de código. Para que el cambio se produzca exactamente cuando lo necesites, necesitas activar un reflujo forzado, y aquí tienes una de las formas de hacerlo:// eliminar la clase de transición
Fundamentos de la web
Acciones del artículoCómo funcionan los navegadoresLos usuarios quieren experiencias web con contenidos que se carguen rápidamente y con los que se pueda interactuar sin problemas. Por lo tanto, un desarrollador debe esforzarse por alcanzar estos dos objetivos.
Para entender cómo mejorar el rendimiento y el rendimiento percibido, es útil entender cómo funciona el navegador.ResumenLos sitios rápidos proporcionan mejores experiencias de usuario. Los usuarios quieren y esperan experiencias web con contenidos que se carguen rápidamente y con los que se pueda interactuar sin problemas.
La latencia es nuestra principal amenaza para garantizar una carga rápida. Para que la carga sea rápida, el objetivo de los desarrolladores es que la información solicitada se envíe lo más rápido posible, o que al menos parezca súper rápida. La latencia de la red es el tiempo que se tarda en transmitir los bytes por el aire a los ordenadores. El rendimiento de la web es lo que hay que hacer para que la carga de la página sea lo más rápida posible.
En su mayor parte, los navegadores se consideran de un solo hilo. Para que las interacciones sean fluidas, el objetivo del desarrollador es garantizar el rendimiento de las interacciones del sitio, desde el desplazamiento suave hasta la respuesta al tacto. El tiempo de renderización es la clave, ya que hay que asegurarse de que el hilo principal pueda completar todo el trabajo que se le pide y siga estando disponible para gestionar las interacciones del usuario. El rendimiento de la web puede mejorarse si se comprende la naturaleza de un solo hilo del navegador y se minimizan las responsabilidades del hilo principal, siempre que sea posible y apropiado, para garantizar que la renderización sea fluida y las respuestas a las interacciones sean inmediatas.NavegaciónLa navegación es el primer paso en la carga de una página web. Se produce siempre que un usuario solicita una página introduciendo una URL en la barra de direcciones, haciendo clic en un enlace, enviando un formulario, así como otras acciones.
Representación de la página
A la hora de diseñar un sitio, es importante conocer los fundamentos de la velocidad de las páginas para poder entender mejor lo que hay que optimizar. Los navegadores obtienen y muestran el contenido de una manera bastante fiable; entender cómo se representan las páginas web le ayudará a predecir de manera fiable cómo sus opciones de diseño afectarán a la velocidad de la página de su sitio. Nuestro objetivo es optimizar:
Además de lo que los usuarios ven cuando su navegador renderiza el contenido, hay otras mejoras que puedes hacer en el backend, incluyendo la optimización de cualquier trabajo que el servidor tenga que hacer para devolver el primer byte al cliente. El tiempo de carga de la página no se limita a lo que ocurre en el frontend del sitio, como las llamadas a la base de datos o la compilación de plantillas en HTML. Sin embargo, como dice Steve Souders, «entre el 80 y el 90% del tiempo de respuesta del usuario final se gasta en el frontend». Como es aquí donde vive la gran mayoría de la experiencia del usuario, nos centraremos en los aspectos del frontend del tiempo de carga de la página.
Entre el momento en que tus usuarios introducen la URL de tu sitio en su navegador y el momento en que la página empieza a mostrar el diseño de tu sitio, su navegador y tu proveedor de alojamiento web negocian todos los datos que necesitan para comunicarse entre sí.
Soy Alejandro Marcos. Como jefe de los departamentos de SEO, SEM y Desarrollo Web en Negocio Vivo, me especializo en SEO, SEM y WordPress. Mi objetivo es optimizar la visibilidad y rendimiento de sitios web. Ahora estoy jugando con automatizaciones para agilizar proceso repetitivos.