{"id":148,"date":"2022-06-22T20:18:44","date_gmt":"2022-06-22T18:18:44","guid":{"rendered":"https:\/\/edfmultisite.digital\/mainwp\/?p=148"},"modified":"2022-12-14T20:32:34","modified_gmt":"2022-12-14T19:32:34","slug":"repensar-el-rendimiento-web-con-trabajadores-de-servicios","status":"publish","type":"post","link":"https:\/\/edfmultisite.digital\/mainwp\/post\/repensar-el-rendimiento-web-con-trabajadores-de-servicios\/","title":{"rendered":"Repensar el rendimiento web"},"content":{"rendered":"\n

Este art\u00edculo examina el estado actual del arte en la optimizaci\u00f3n de la velocidad de la p\u00e1gina a trav\u00e9s de la tecnolog\u00eda Service Worker. Contiene la esencia de m\u00e1s de 30 a\u00f1os-hombre de investigaci\u00f3n que se dedicaron a Speed Kit<\/a>,un complemento de rendimiento web f\u00e1cil de usar para acelerar sitios web.<\/a>.<\/h2>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

TL;DR<\/h1>\n\n\n\n

Los usuarios se van cuando la carga de la p\u00e1gina tarda demasiado. Pero a pesar de que la velocidad de la p\u00e1gina es fundamental para el \u00e9xito comercial, las cargas de p\u00e1gina lentas siguen siendo comunes en los sitios web modernos. \u00bfPor qu\u00e9 es eso y qu\u00e9 puedes hacer al respecto?<\/p>\n\n\n\n

En la primera parte de este art\u00edculo, motivamos nuestra b\u00fasqueda de tiempos r\u00e1pidos de carga de p\u00e1gina e identificamos los 3 cuellos de botella principales en el rendimiento web:<\/a>: frontend, backend y red. Abordando todos estos desaf\u00edos, resumimos el actual Las 10 mejores pr\u00e1cticas de rendimiento web<\/a> para el lado del cliente (frontend), el lado del servidor (backend) y la transferencia de datos (red). Entramos en m\u00e1s detalles sobre el almacenamiento en cach\u00e9 como la soluci\u00f3n de referencia para acelerar los activos est\u00e1ticos y discutimos por qu\u00e9 los datos din\u00e1micos generalmente se consideran no almacenables en cach\u00e9. Luego desplegamos el dise\u00f1o del sistema respaldado por la investigaci\u00f3n de Baqend que hace almacenamiento en cach\u00e9 de datos din\u00e1micos<\/a> ff\u00e1cil a trav\u00e9s de un novedoso mecanismo de coherencia de cach\u00e9 basado en filtros Bloom (ver VLDB paper<\/a>): Baqend combina los beneficios de latencia del almacenamiento en cach\u00e9 HTTP con atomicidad \u0394 y consistencia de lectura linealizable. Luego entramos en detalles sobre c\u00f3mo se puede usar el esquema de almacenamiento en cach\u00e9 \u00fanico de Baqend para acelerar cualquier sitio web<\/a> a trav\u00e9s Speed Kit<\/a>, un complemento de rendimiento web f\u00e1cil de usar. Finalmente, le mostramos c\u00f3mo generar su propio informe de rendimiento<\/a> para descubrir el potencial para una mayor optimizaci\u00f3n.<\/p>\n\n\n\n

(Para obtener una descripci\u00f3n general estructurada de las preguntas espec\u00edficas respondidas en este art\u00edculo, consulte la tabla de contenidos<\/a> en el fondo.)<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Comencemos con una motivaci\u00f3n para optimizar el rendimiento web.<\/p>\n\n\n\n

\u00bfPor qu\u00e9 es importante la velocidad de la p\u00e1gina?<\/h1>\n\n\n\n

El 49% de los usuarios espera que los sitios web se carguen en 2 segundos o menos, seg\u00fan un encuesta de Akamai<\/a>. Pero estas expectativas no se cumplen en la pr\u00e1ctica: el sitio web de comercio electr\u00f3nico promedio de los 500 principales, por ejemplo, tiene un tiempo de carga de p\u00e1gina de 9,3 segundos (ver source<\/a>).<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Y aqu\u00ed est\u00e1n mucho m\u00e1s<\/a> estudios que relacionan el rendimiento web con el comportamiento del usuario. Por ejemplo, Amazon encontr\u00f3 que 100 ms de tiempo de carga adicional reducen los ingresos por ventas en un 1 %. Con los ingresos actuales de Amazon, el impacto supera los mil millones de d\u00f3lares al a\u00f1o. De manera similar, Google midi\u00f3 una ca\u00edda del 20% en el tr\u00e1fico al comparar las reacciones de los usuarios a 30 resultados de b\u00fasqueda en lugar de 10: la disminuci\u00f3n en la participaci\u00f3n se debi\u00f3 a 500 ms de latencia adicional para la consulta de b\u00fasqueda. Al rev\u00e9s, GQ observ\u00f3 un aumento permanente del 80 % en el tr\u00e1fico despu\u00e9s de mejorar el tiempo de carga de la p\u00e1gina de 7 a 2 segundos.<\/p>\n\n\n\n

Dado que incluso las peque\u00f1as mejoras en la velocidad de la p\u00e1gina tienen un tremendo impacto en el \u00e9xito comercial, realmente sorprende la cantidad de sitios web que no son r\u00e1pidos en absoluto. A lo largo del resto de este art\u00edculo, cubriremos c\u00f3mo medir cu\u00e1ndo los sitios web se sienten lentos, discutiremos por qu\u00e9 muchos son lentos y explicaremos qu\u00e9 se puede hacer al respecto.<\/p>\n\n\n\n

\u00bfCu\u00e1ndo se siente r\u00e1pido un sitio web?<\/h1>\n\n\n\n

Las medidas t\u00edpicas de rendimiento web se relacionan con la Tiempo hasta el primer byte (TTFB)<\/a>, DomContentLoaded<\/a>, u otros aspectos t\u00e9cnicos<\/strong> de la carga de la p\u00e1gina. Si bien esas m\u00e9tricas ayudan a los ingenieros a realizar diagn\u00f3sticos u optimizaciones de bajo nivel, solo corresponden vagamente a la experiencia de los clientes: los usuarios perciben un sitio web como algo lento o r\u00e1pido, dependiendo de cu\u00e1ndo se muestra el primer contenido relevante. Otro indicador es cu\u00e1nto tiempo tardan en ingresar datos, hacer clic en la barra de navegaci\u00f3n o interactuar con el sitio web de alguna otra manera. Si bien estos aspectos del rendimiento web son f\u00e1ciles de comprender de forma intuitiva, la velocidad de la p\u00e1gina percibida por el usuario no es tan f\u00e1cil de medir objetivamente.<\/p>\n\n\n\n

\"\"\/
First Meaningful Paint <\/strong>(La primera pintura significativa) y el Speed Index<\/strong> (\u00edndice de velocidad) son medidas de rendimiento que representan la velocidad de p\u00e1gina percibida por el usuario (user-perceived page speed).<\/figcaption><\/figure>\n\n\n\n

En la ilustraci\u00f3n anterior, puede ver c\u00f3mo se carga un sitio web en un dispositivo cliente. La l\u00ednea discontinua indica la integridad visual (eje y) desde una pantalla en blanco (0) hasta la p\u00e1gina completamente renderizada (1). El ejemplo tambi\u00e9n ilustra dos de las medidas m\u00e1s populares para la velocidad de p\u00e1gina percibida por el usuario:<\/p>\n\n\n\n