{"id":14463,"date":"2020-07-07T17:47:50","date_gmt":"2020-07-07T15:47:50","guid":{"rendered":"https:\/\/trilogi.com\/blog\/?p=14463"},"modified":"2022-07-19T17:48:09","modified_gmt":"2022-07-19T15:48:09","slug":"google-page-speed-insights-una-odisea-por-el-ciberespacio-de-la-velocidad-de-carga-de-una-web","status":"publish","type":"post","link":"https:\/\/trilogi.com\/blog\/google-page-speed-insights-una-odisea-por-el-ciberespacio-de-la-velocidad-de-carga-de-una-web\/","title":{"rendered":"Google Page Speed Insights \u2013 Una odisea por el ciberespacio de la velocidad de carga de una web"},"content":{"rendered":"
Imaginemos que tenemos una herramienta que creemos que es \u00fatil y que nos ayudar\u00e1 a mejorar nuestras ventas. Imaginemos adem\u00e1s, por un momento, que podemos usar esa herramienta con la web de la competencia y \u201ccompararnos\u201d para ver quien es mejor. \u00bfA qui\u00e9n no le gustar\u00eda tener algo as\u00ed? Pero esta situaci\u00f3n, completamente imaginaria, viene acompa\u00f1ada de una cosa muy real, muy humana, muy nuestra: compramos una herramienta nueva, la sacamos de la caja y la empezamos a usar\u2026<\/p>\n
\u00ab\u00bfLas instrucciones? Bah, no son para m\u00ed. Ya s\u00e9 c\u00f3mo funciona.\u00bb<\/em> Imaginemos ahora que Google Page Speed Insights es esta herramienta. Imaginemos que es un cuentakil\u00f3metros para ver qui\u00e9n es m\u00e1s r\u00e1pido, quien llega antes a meta.<\/p>\n \u00ab\u00a1\u00a1He visto que la web de la competencia es mejor que la m\u00eda!! \u00a1\u00a1Lo dice Google!!\u00bb<\/strong><\/em> Si te dedicas a la maquetaci\u00f3n web y\/o al marketing online, esto te suena y mucho. No son imaginaciones tuyas \ud83d\ude09 A mi tambi\u00e9n me ha pasado, y por ello decid\u00ed investigar un poco m\u00e1s para conocerla y ver qu\u00e9 podemos hacer para mejorar nuestros resultados en ella. NOTA:<\/strong> Este post est\u00e1 basado en hechos reales. Todo lo que vais a ver a continuaci\u00f3n ha pasado en realidad, y cronol\u00f3gicamente tal cual est\u00e1 escrito.<\/em><\/p>\n <\/p>\n Todo el an\u00e1lisis se basa en la comparativa entre una web real y un clon de la misma, alojado en el mismo servidor y bajo las mismas condiciones: mismos datos que la web real, mismo c\u00f3digo, mismos plugins activos, etc… En teor\u00eda son la misma web. NOTA: el resultado de la izquierda es la web real<\/strong>, el de la derecha es la web clonada<\/strong> sobre la que voy a ir haciendo experimentos. Esto ser\u00e1 as\u00ed durante todo el post.<\/em><\/p>\n Como la herramienta realiza un an\u00e1lisis cada vez que se ejecuta y realiza el calculo al vuelo, los vuelvo a ejecutar para asegurarme que jugamos en igualdad de condiciones, o mas o menos.. y \u00e9ste es el resultado que obtengo:<\/p>\n Como se puede observar, son unos resultados muy parecidos en ambos casos.<\/p>\n NOTA:<\/strong> si ejecutas de nuevo inmediatamente responde con el \u00faltimo an\u00e1lisis cacheado, as\u00ed que hay que asegurarse de quitar el foco de la p\u00e1gina y dejar pasar un tiempo o analizar otra url<\/em><\/p>\n <\/p>\n De este \u00faltimo test extraigo tambi\u00e9n los datos principales del experimento, y quedan como muestro a continuaci\u00f3n:<\/p>\n Para no quedarme solo en portada, hago el an\u00e1lisis tambi\u00e9n de una p\u00e1gina con poco contenido y principalmente texto plano, como puede ser la del aviso legal.<\/p>\n Sin ninguna explicaci\u00f3n razonable, el resultado obtenido es este:<\/p>\n Sin embargo el resto de datos del an\u00e1lisis son muy parecidos:<\/p>\n Vuelvo a ejecutar el an\u00e1lisis de ambas p\u00e1ginas, y el resultado obtenido es el siguiente:<\/p>\n <\/p>\n Primera conclusi\u00f3n:<\/strong> <\/p>\n La web que estoy usando para el an\u00e1lisis es todo lo contrario al concepto minimalista. No es limpia, no respira… y si quedase un hueco en alg\u00fan sitio, aun podr\u00edamos ver si se puede rellenar con alg\u00fan banner m\u00e1s\u2026 y si las cosas se mueven un poco, mejor a\u00fan\u2026<\/p>\n Me recuerda un poco a esto: Actualmente desde esta web, adem\u00e1s de peticiones propias o a nuestros CDN, se hacen peticiones a 18 dominios externos para recabar datos y\/o usar herramientas terceras para incorporar un chat, m\u00e9tricas, buscador inteligente y \u201cmarketing automation\u201d, entre otros\u2026<\/p>\n Una de las primeras sospechas que ten\u00edamos cuando nos aventuramos a este an\u00e1lisis era que las herramientas incorporadas a la web pod\u00edan interferir en el resultado del test seg\u00fan como estuvieran aplicadas y\/o debido a su propia naturaleza.<\/p>\n Ahora poco a poco voy a ir desconectando herramientas y c\u00f3digos JavaScript de seguimiento en la web clonada y voy a ir analizando comparativamente ambas webs en el mismo momento de nuevo.<\/p>\n <\/p>\n En primer lugar me decanto por desactivar esta herramienta que funciona como un plugin JavaScript sobre la tienda. Verifico que desde la web clonada ya no se hacen peticiones al dominio del buscador y entonces analizo ambas webs al mismo tiempo. Como no me creo lo que ven mis ojos.. lo vuelvo a ejecutar:<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 1. Nota 1. Me estoy volviendo loco. No s\u00e9 si podr\u00e9 aguantar esto un minuto m\u00e1s\u2026)<\/em><\/span><\/p>\n Como estoy alucinando, lo vuelvo a ejecutar:<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 1. Nota 2. Definitivamente este trabajo es muy duro para m\u00ed\u2026)<\/em><\/span><\/p>\n <\/p>\n Segunda conclusi\u00f3n:<\/strong> <\/p>\n Y aqu\u00ed podr\u00eda acabar este an\u00e1lisis… no se si es necesario perder m\u00e1s tiempo con algo que no es fiable\u2026 A\u00fan as\u00ed, le doy una ultima oportunidad, y pruebo de nuevo\u2026 y este es el resultado:<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 1. Nota 3. Realmente no s\u00e9 por qu\u00e9 sigo con esto\u2026 Me estoy replanteando seriamente mi futuro\u2026)<\/em><\/span><\/p>\n Venga va, una \u00faltima vez y paro\u2026 \u00faltimo resultado:<\/p>\n Para no seguir d\u00e1ndome cabezazos con la pared, voy a hacer como los equipos de Clemente, \u201cpatad\u00f3n y palante\u201d, considerando que el cambio no ha afectado a mejorar los resultados de la web clonada respecto a la original.<\/p>\n <\/p>\n Seguidamente procedo a desactivar el plugin que permite a los compradores emitir opiniones sobre la web y las compras que han realizado. Verifico que desde la web clonada ya no se hacen peticiones al dominio en cuesti\u00f3n, y entonces analizo ambas webs al mismo tiempo.<\/p>\n El resultado obtenido es el siguiente:<\/p>\n Alucinante… le quito cosas a la web clonada y \u201cmejora\u201d la real… he tenido que volver a mirar por si me estaba equivocando de sitio al desconectar cosas… pero no…<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 1. Nota 4. Ten\u00eda que haber cogido la pastilla azul, ser\u00eda mucho m\u00e1s feliz en una falsa realidad\u2026)<\/em><\/span><\/p>\n Lo vuelvo a intentar, y este es el resultado:<\/p>\n Y por \u00faltima vez:<\/p>\n Y para no volverme m\u00e1s loco.. seguir\u00e9 adelante como si no hubiera visto nada..<\/p>\n <\/p>\n La siguiente desconexi\u00f3n pertenece al \u00e1mbito de las m\u00e9tricas de tr\u00e1fico proveniente de redes sociales y su conversi\u00f3n. Verifico que desde la web clonada ya no se hacen peticiones al dominio de la red social, y entonces analizo ambas webs al mismo tiempo.<\/p>\n El resultado obtenido es el siguiente:<\/p>\n Y ahora mismo me siento as\u00ed:<\/p>\n De nuevo ejecuto ambos test:<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 1. Nota 5. Si no salgo vivo de \u00e9sta, decidle a mi familia que la quiero\u2026)<\/span><\/em><\/p>\n A \u00e9stas alturas del experimento, la web clonada ha reducido un poco sus peticiones y peso. <\/p>\n Ahora me dispongo a desconectar una herramienta de m\u00e9tricas generales (no Google Analytics). Verifico que desde la web clonada ya no se hacen peticiones al domino de la herramienta, y entonces analizo ambas webs al mismo tiempo.<\/p>\n El resultado obtenido es el siguiente:<\/p>\n Debe ser hora punta en AWS ahora mismo…<\/p>\n Voy a volver a probar… no se ni porqu\u00e9… pero lo hago:<\/p>\n Ni caso.. palante..<\/p>\n <\/p>\n Ahora voy a desconectar la primera herramienta de marketing automation, de esas que hacen de todo en tu web y autom\u00e1ticamente vendes m\u00e1s y tienes m\u00e1s clientes y m\u00e1s de todo\u2026 \u00a1Palabrita! El resultado obtenido es el siguiente:<\/p>\n Y, aun no se ni porqu\u00e9, lo ejecuto de nuevo:<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 1. Nota 6. No oigo nada, solo hay silencio\u2026 No veo nada, solo hay oscuridad\u2026)<\/span><\/em><\/p>\n <\/p>\n Ahora voy a desconectar la segunda herramienta de marketing automation, que tambi\u00e9n es de esas que hacen de todo en tu web y autom\u00e1ticamente vendes m\u00e1s y tienes m\u00e1s clientes y m\u00e1s de todo\u2026 pero mejor\u2026 o no\u2026 \u00bfQu\u00e9 se yo? El resultado obtenido es el siguiente:<\/p>\n Ser\u00e1 un espejismo.. un oasis, tiene que serlo.. Vuelvo a probar:<\/p>\n Esto no se paga con dinero.. he visto torturas mas suaves.. no hac\u00eda ninguna falta..<\/p>\n Llegado a este punto, la web clonada ha bajado en unas 40 peticiones y un par de Mb de peso respecto a la situaci\u00f3n original (aunque el tama\u00f1o transferido no ha bajado tanto)<\/p>\n <\/p>\n Verifico que desde la web clonada ya no se hacen peticiones a esta herramienta, y entonces analizo ambas webs al mismo tiempo.<\/p>\n El resultado obtenido es el siguiente:<\/p>\n Mas de lo mismo\u2026 llevo un rato desconectando cosas, lo juro… pero estoy igual que al principio.. empiezo a sospechar que estoy buscando en el lugar equivocado\u2026<\/p>\n Vuelvo a ejecutar de nuevo:<\/p>\n \u00bfMe lo creo? \u00bfO no me lo creo? Mi intuici\u00f3n me dice que no, las pruebas me dicen que no, la vida me dice que no\u2026 as\u00ed que, \u00bfPor qu\u00e9 creerlo?<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 1. Nota 7.\u00a0 Estoy considerando seriamente la muerte como soluci\u00f3n a todo esto\u2026 Una fuerza extra\u00f1a en mi interior me empuja a ejecutar de nuevo el test:<\/p>\n Me remito a las dos primeras conclusiones para expresar mi opini\u00f3n sobre lo que estoy presenciando.<\/p>\n <\/p>\n Esta web usa un conocido plugin de chat para incorporar esta funcionalidad y dar servicio a sus clientes. Desconecto la herramienta y verifico que desde la web clonada ya no se hacen peticiones, y entonces analizo ambas webs al mismo tiempo.<\/p>\n El resultado obtenido es el siguiente:<\/p>\n \u00a1Hostia!<\/strong> (con perd\u00f3n) he superado la barrera psicol\u00f3gica de los 40 \ud83d\ude42 Como con la edad, ah\u00ed empieza la vida en realidad… pero… \u00bfDeber\u00eda creer lo que ven mis ojos? \u00bfO sigue siendo una patra\u00f1a de Google Skynet para desviar mi atenci\u00f3n?<\/p>\n Dios (digo\u2026 Google), si est\u00e1s jugando conmigo, que sepas que no tiene ninguna gracia. (Cuaderno de bit\u00e1cora. D\u00eda 1. Nota 8. Nota mental: empezar a usar Yahoo como buscador)<\/em><\/span><\/p>\n De nuevo, vuelvo a ejecutar, por si acaso. No es que no me f\u00ede… ya sabes\u2026<\/p>\n Y.. una \u00faltima vez:<\/p>\n S\u00e9 que no deber\u00eda hacerme ilusiones\u2026 pero me gusta lo que veo… \u00bfqui\u00e9n puede resistirse a eso? Al fin y al cabo, la vista es el m\u00e1s influyente de los sentidos… Voy a limpiarme las gafas, por si acaso…<\/p>\n Por curiosidad, lo ejecuto una vez m\u00e1s:<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 1. Nota 9. \u00bfQu\u00e9 es esa luz? Me atrae… no me puedo resistir\u2026)<\/em><\/span><\/p>\n <\/p>\n A estas alturas del test, ya solo quedan los trackers relacionados con Google en la web. El peso de la misma, y los datos transferidos se han reducido notablemente, y la carga de la web es mucho m\u00e1s ligera.<\/p>\n Aunque no me creo nada, porque la herramienta ha demostrado ser muy irregular en sus resultados, la desconexi\u00f3n de la herramienta de chat parece haber dado cierta estabilidad a los resultados, not\u00e1ndose una mejora de la web clonada respecto a la web real (y a sus propios resultados iniciales)<\/p>\n NOTA:<\/strong> Debo decir que en este momento, el test tarda aproximadamente la mitad de tiempo en ejecutarse en la web clonada. (Cosa normal, entiendo\u2026)<\/p>\n <\/p>\n Dentro de GTM encontramos Analytics, Google Ads y las otras herramientas relacionadas.<\/p>\n Desconecto el tracker y verifico que desde la web clonada ya no se hacen peticiones a ning\u00fan de los dominios de Google, y entonces analizo ambas webs al mismo tiempo.<\/p>\n El resultado obtenido es el siguiente:<\/p>\n Parece continuista, dentro de su caos aleatorio\u2026<\/p>\n <\/p>\n Y, como me estoy creyendo lo que veo, a pesar de la mala experiencia del pasado, quiero corroborarlo con otra situaci\u00f3n. As\u00ed que voy a testear de nuevo las paginas con poco contenido que he analizado al principio, pero con esta nueva situaci\u00f3n:<\/p>\n Y aqu\u00ed viene cuando vuelvo a alucinar con el rigor cient\u00edfico de la herramienta\u2026<\/p>\n Emm… \u00bfAlguien tiene una explicaci\u00f3n? \u00bfPor qu\u00e9 tanto dolor?<\/p>\n \u00bfQu\u00e9 le he hecho yo al mundo? \u00bfPor qu\u00e9 a m\u00ed?<\/p>\n A pesar del resultado de la web real, esto se aproxima m\u00e1s a lo que esperaba encontrarme…<\/p>\n Parece constante… aunque de nuevo la web real ha bajado mucho respecto a lo esperado… aunque con esta herramienta, ya no s\u00e9 qu\u00e9 es lo esperado…<\/p>\n Voy a volver a testear la portada a ver que veo:<\/p>\n Sigue como lo dej\u00e9… Como si nada hubiera pasado\u2026 Como si la herramienta supiera lo que hace\u2026<\/p>\n <\/p>\n Si nos fiamos de los resultados obtenidos, la conclusi\u00f3n m\u00e1s clara seria que el chat es el tercero que m\u00e1s afecta al resultado que obtenemos desactivando los terceros.<\/p>\n Voy a intentar confirmar si esta conclusi\u00f3n es correcta. Para hacerlo, voy a conectar de nuevo todo lo desconectado excepto la herramienta de chat. Volvemos a n\u00fameros parecidos a los del inicio en cuanto a peso y peticiones.<\/p>\n Y lo pruebo:<\/p>\n WTF? En serio.. esto no es normal.. a ver, otra vez:<\/p>\n Esto ya se parece m\u00e1s a lo que esperaba\u2026 \u00bfPero qui\u00e9n se puede fiar de esto?<\/p>\n Bueno\u2026 una \u00faltima vez…<\/p>\n <\/p>\n Vuelvo a conectar la herramienta de chat, para volver a la situaci\u00f3n inicial.<\/p>\n Y ejecuto las pruebas:<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 1. Nota 10. Han vuelto las alucinaciones\u2026)<\/em><\/span><\/p>\n El resultado de la tienda real es absurdo\u2026 as\u00ed que vuelvo a ejecutar la prueba\u2026<\/p>\n No puedo usar el adjetivo \u201cnormal\u201d, pero esto ya se acerca m\u00e1s a lo esperado\u2026<\/p>\n Bueno… pues parece claro… aun as\u00ed, lo desconecto de nuevo de la web clonada y testeo:<\/p>\n Sospechoso… El resultado esperado \u00a1a la primera! A ver… otra vez:<\/p>\n \u00a1\u00bfPor qu\u00e9 herramienta de chat?! \u00a1\u00a1\u00bf\u00bfPor qu\u00e9??!! \u00a1\u00a1Se supon\u00eda que estabas aqu\u00ed para ayudarme!! As\u00ed que, despu\u00e9s de mi representaci\u00f3n dram\u00e1tica, viene la tercera conclusi\u00f3n de este estudio:<\/p>\n <\/p>\n Tercera conclusi\u00f3n:<\/strong> <\/p>\n Vale, esa herramienta de chat es el demonio y ha quedado demostrado. Pero, \u00bfnos vamos a conformar con eso?<\/p>\n Est\u00e1 claro que, aparte del chat, el resto de terceros tiene una interferencia con el resultado que puede ser desestimada en un estudio de optimizaci\u00f3n.<\/p>\n As\u00ed pues, voy a por el siguiente experimento.<\/p>\n <\/p>\n Lo primero que me planteo es \u00bfhasta d\u00f3nde podemos llegar? \u00bf99? \u00bf100?<\/p>\n Este primer experimento consiste en dejar el c\u00f3digo de la tienda \u201cvac\u00edo\u201d. De tal manera que cargue todo el c\u00f3digo js y css com\u00fan que nuestro sistema necesita para poder ejecutarse, en conjunto con el de la propia tienda, pero no renderice nada.<\/p>\n El resultado es una p\u00e1gina en blanco, con todos los trackers y la base CSS+JS de common. En este punto, la herramienta de chat es la \u00fanica que no est\u00e1 activa.<\/p>\n Y el resultado de la ejecuci\u00f3n del test es sorprendente:<\/strong><\/p>\n Lo ejecuto un par de veces m\u00e1s, porque ya ha quedado demostrado que m\u00e1s vale hacer una media de los resultados…<\/p>\n Me pregunto qu\u00e9 afectaci\u00f3n tendr\u00e1n ahora porcentualmente los trackers que han quedado conectados. As\u00ed que me dispongo a desconectarlos todos de nuevo. TODOS a la vez.<\/p>\n Y su peso y los tiempos de carga quedan en m\u00ednimos\u2026 Y el resultado sigue sorprendiendo\u2026 \u00a1no es un 100!<\/p>\n <\/p>\n As\u00ed que me planteo una \u00faltima vuelta de tuerca… Le quito la configuraci\u00f3n de la pol\u00edtica de cookies y GDPR a la tienda (que saca contenido din\u00e1micamente con JavaScript) y le pongo un \u201ccontenido\u201d en html plano.<\/p>\n El resultado es una web que no lee ni crea cookies y que renderiza texto plano directo del html en lugar de hacerlo por JS.<\/p>\n Quiero creer que esto es lo m\u00ednimo que podemos obtener de una \u201ctienda\u201d creada con nuestro sistema (aunque no sea realista)<\/p>\n Ser\u00eda el equivalente a tener un fichero HTML en el servidor y leerlo, pero pasando por nuestro lenguaje de servidor, creando una sesi\u00f3n de usuario y todo el resto de procesos necesarios.<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 1. Nota 11. El doble de nada, es nada\u2026 eso me ha ense\u00f1ado Google)<\/em><\/span><\/p>\n Pero esto, \u00bfsirve para algo? Bueno, estamos m\u00e1s cerca de algo… sea lo que sea\u2026<\/p>\n <\/p>\n Para descartar que los tiempos de proceso del servidor web y\/o base de datos est\u00e9n afectando, me creo un fichero html con el mismo contenido que el que se renderiza din\u00e1micamente, y ejecuto un test sobre \u00e9l.<\/p>\n El resultado es casi clavado, excepto que en las capturas desde la primera ya tenemos \u201ccontenido\u201d renderizado.<\/p>\n Y con esto me pregunto:<\/strong> \u00bfPor qu\u00e9 dice que tarda 1.7s en entregar el primer renderizado con contenido si es un html plano?<\/p>\n As\u00ed que le quito la carga de los js y vuelvo a probar.<\/p>\n Vale… 100… \u00bf\u00bfPero la herramienta ha tardado 1.6s en renderizar??<\/p>\n \u00bf\u00bfY sin CSS?<\/p>\n Wow, es r\u00e1pido… pero personalmente 0,6 segundos para renderizar un html pr\u00e1cticamente vac\u00edo, me parece mucho… Entiendo que este es el tiempo \u201cm\u00ednimo\u201d al que aspiramos con esta herramienta…<\/p>\n Y ya que estamos\u2026 \u00bfcon JS pero sin CSS?<\/p>\n Tarda lo mismo en el primer renderizado, pero 2,6s en estar interactiva. <\/p>\n Vale, he llegado al m\u00ednimo com\u00fan denominador. Ahora necesito el m\u00e1ximo com\u00fan m\u00faltiple.<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 1. Nota 12. Vale… estoy delirando otra vez… deber\u00eda dejar esto antes de que sea tarde\u2026)<\/em><\/span><\/p>\n Voy a recuperar la portada de la web como estaba, y voy a ir quitando elementos para ver la afectaci\u00f3n que puedan tener. Recuerdo que en este punto, la web no tiene ning\u00fan tracker ni herramienta JavaScript incorporada.<\/p>\n Lo \u00fanico que no puedo quitar es nuestro c\u00f3digo com\u00fan a nivel de JS y CSS. En los experimentos anteriores hemos visto cual es el m\u00ednimo esperable en este caso:<\/p>\n <\/p>\n Le quito a la web todos el JavaScript que se hace desde la propia tienda. De esta manera la web est\u00e1 completa, pero solo tiene el JS del motor de nuestro sistema com\u00fan.<\/p>\n Y este es el resultado:<\/p>\n <\/p>\n Le quito a la web todos los CSS y tambi\u00e9n el JavaScript que se hace desde tienda. De esta manera la web est\u00e1 completa, pero solo tiene el JS\/CSS del motor de nuestro sistema com\u00fan.<\/p>\n Y este es el resultado:<\/p>\n Tampoco est\u00e1 nada mal\u2026 pero… hay algo que no me cuadra\u2026<\/p>\n <\/p>\n En este momento me da por recordar que tenemos un c\u00f3digo base de demo, sobre el que construimos las tiendas y los experimentos. Un c\u00f3digo limpio pero completo, funcional.<\/p>\n Preparo un nuevo entorno y pongo una tienda con ese c\u00f3digo disponible para poder efectuar un test sobre ella con esta herramienta. Y\u2026<\/p>\n Esta web tambi\u00e9n carga css y js de nuestro motor com\u00fan. Tambi\u00e9n tiene CSS y JS propio, y tambi\u00e9n efect\u00faa acciones cuando el DOM est\u00e1 \u201cready\u201d y tiene dinamismo\u2026 \u00bfEntonces? \u00bfQu\u00e9 est\u00e1 pasando?<\/p>\n <\/p>\n Habiendo llegado hasta aqu\u00ed todav\u00eda cuerdo, lo cual es todo un logro, solo me falta poner la guinda al pastel con un gran final, dram\u00e1tico, emocionante, con un cierto suspense y sobretodo \u201crevelador\u201d.<\/p>\n Y si la culpa de todo la tiene\u2026 \u00bf\u00a1el dise\u00f1o!? Bueno\u2026 \u00a1el responsive! Bueno… tampoco… o tambi\u00e9n… No el concepto, pero si como se \u201centiende\u201d en muchos casos y a donde nos llevan los clientes…<\/p>\n (Bien es cierto que la herramienta de Google tiene una manera curiosa de medir, que m\u00e1s adelante intentar\u00e9 explicar con teor\u00edas conspiranoides)<\/p>\n Y para intentar demostrarlo, lo mejor es hacer alg\u00fan experimento m\u00e1s, como \u00e9ste:<\/p>\n La web que estoy analizando tiene un mega men\u00fa complejo. Tanto, que su \u201cconversi\u00f3n a mobile\u201d no es posible porque jer\u00e1rquicamente son muy distintos. (En html ocupa unas 700 l\u00edneas de c\u00f3digo html y carga 54 im\u00e1genes)<\/p>\n Por tanto, en realidad la web tiene 2 men\u00fas. Y se muestra uno u otro en funci\u00f3n del dispositivo. Esto significa que en mobile se est\u00e1 cargando todo el html, im\u00e1genes y dem\u00e1s del men\u00fa desktop, aunque no se use.<\/p>\n \u00bfQu\u00e9 ocurre si quito el men\u00fa desktop del c\u00f3digo? En este punto, el c\u00f3digo contiene todo el JS y CSS, excepto los plugins y la herramienta de Chat.<\/p>\n De repente parece que el motor de renderizado de mobile va m\u00e1s ligero, se cargan menos im\u00e1genes y html, y el resultado es mejor.<\/p>\n He obtenido mejor resultado que sin cargar ning\u00fan JS en la web\u2026<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 1. Nota 13. Ya no distingo lo bueno de lo malo, as\u00ed que todo es bueno)<\/em><\/span><\/p>\n <\/p>\n Y desde aqu\u00ed, solo puedo volver a la t\u00e9cnica de construir un html con el resultado que he obtenido din\u00e1micamente, para intentar incorporar cambios que puedan optimizar el resultado obtenido hasta ahora.<\/p>\n Parto de la base del experimento anterior (web sin chat, sin trackers y sin men\u00fa desktop)<\/p>\n Primero de todo, miro que el resultado siga siendo el esperado:<\/p>\n Mover todos los CSS al final del todo del c\u00f3digo:<\/p>\n Mejora el resultado, pero a cambio de tener algo m\u00e1s de tiempo la web sin estilos y vi\u00e9ndose \u201cun poco fea\u201d. Modificar las llamadas a CSS para convertirlas en as\u00edncronas<\/p>\n Mejora un poco el resultado, pero a cambio de tener algo m\u00e1s de tiempo la web sin estilos y vi\u00e9ndose \u201cun poco fea\u201d.<\/p>\n Modificar las llamadas a JS para convertirlas en as\u00edncronas<\/p>\n De nuevo, mejora un poco el resultado, pero a cambio de tener algo m\u00e1s de tiempo la web sin estilos y vi\u00e9ndose \u201cfea\u201d.<\/p>\n \u00bf\u00bfY si a todo esto, le a\u00f1ado de nuevo el chat?? Lo voy a probar un par de veces a ver\u2026<\/p>\n \u00a1\u00a1\u00a1\u00a1Lucifer!!!! \u00a1\u00a1\u00a1\u00a1Al\u00e9jate de mi web!!!!<\/strong><\/p>\n <\/p>\n Durante esta odisea por el ciberespacio de la velocidad de carga puede que hayamos perdido contacto con toda realidad. Es normal. Es lo que Google querr\u00eda.<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 2. Nota 1. No he llegado hasta aqu\u00ed para nada\u2026 las generaciones futuras dar\u00e1n valor a todo esto\u2026)<\/em><\/span><\/p>\n Con todo lo \u201caprendido\u201d hasta ahora, que no es poco, nos faltar\u00eda volver a la realidad. \u00bfQu\u00e9 podemos hacer para mejorar la puntuaci\u00f3n de la web que estamos analizando?<\/p>\n De nuevo, solo puedo volver a la t\u00e9cnica de construir un html con el resultado de la web real, para intentar incorporar cambios que puedan optimizar el resultado.<\/p>\n Parto de cero, en este caso. Es decir, la web tiene todos sus trackers y plugins, chat incluido.<\/p>\n Primero de todo, miro que el resultado siga siendo el esperado:<\/p>\n De momento bien, ninguna \u201csorpresa\u201d. La herramienta est\u00e1 haciendo lo que tiene que hacer, cosa que es de agradecer a estas alturas\u2026<\/p>\n Voy a ponerle los CSS al final del todo, a ver que consigo. Lo pruebo un par de veces:<\/p>\n \u00bfQu\u00e9 pasa? \u00bfAyer era el d\u00eda de los Santos Inocentes o qu\u00e9? De repente a la herramienta le ha dado por ser \u201cestable\u201d\u2026<\/p>\n Obviamente aparece el \u201cproblema\u201d est\u00e9tico de no tener la web bien formada hasta pasado un tiempo, lo cual es \u201cfeo\u201d pero podr\u00eda hacerse un apa\u00f1o. Ahora voy a modificar las llamadas a CSS para convertirlas en as\u00edncronas, no deber\u00eda ser muy relevante una vez el CSS est\u00e1 al final de la carga, pero como se supone que \u201cpunt\u00faa\u201d pues lo haremos\u2026 \ud83d\ude42<\/p>\n Corramos un est\u00fapido velo\u2026<\/p>\n Ahora voy a modificar las llamadas a JS para convertirlas en as\u00edncronas.<\/p>\n Corramos otro est\u00fapido velo\u2026<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 2. Nota 2. Cada ca\u00edda me hace m\u00e1s fuerte\u2026 cada error, m\u00e1s sabio\u2026 cada intento, mas desquiciado\u2026)<\/em><\/span><\/p>\n \u00bfY si le quito el chat?<\/p>\n \u00bfY si le quito el mega men\u00fa desktop?<\/p>\n WTF?? \u00bfHe mencionado ya que odio esta herramienta? Google\u2026 \u00a1yo te maldigo!<\/p>\n <\/p>\n Cuarta conclusi\u00f3n:<\/strong> <\/p>\n Vale, vuelvo atr\u00e1s\u2026 dejo el mega men\u00fa y el resto como estaba\u2026 todo\u2026<\/p>\n Ahora voy a hacer lo que realmente le gustar\u00eda a Google que esta p\u00e1gina hiciera\u2026<\/p>\n \u00a1Fuera CSS! \u00a1Fuera JS!<\/p>\n Bienvenidos a la Era de AMP Ultron<\/p>\n Da igual todo: Peso de las im\u00e1genes, Numero de im\u00e1genes, Peso del html\u2026 \u00a1\u00a1Todo!! \u00a1\u00a1Esta web pesa casi 2Mb y hace 111 peticiones!!<\/p>\n Lo \u00fanico que importa es cu\u00e1nto tiempo tarda el motor de renderizado en poner a disposici\u00f3n del usuario ficticio la web.<\/p>\n Lo ten\u00edamos ah\u00ed mismo, y no lo quer\u00edamos ver\u2026<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 2. Nota 3. Han estado jugando conmigo… \u00a1Lo sab\u00edan todo desde el principio!)<\/em><\/span><\/p>\n <\/p>\n Todo este viaje psicotr\u00f3pico no pod\u00eda ser en balde. Era imperativo aprender algo\u2026 adquirir conocimiento y poderlo aplicar. Y, sobre todo, distinguir la delgada l\u00ednea entre la locura y la cordura.<\/p>\n <\/p>\n Simplicidad, y que el usuario tenga disponible lo antes posible el contenido y pueda interactuar con \u00e9l. Mientras m\u00e1s compleja sea una p\u00e1gina, menor puntuaci\u00f3n conseguir\u00e1, a no ser que se intente \u201cdisimular\u201d delante de la herramienta de medici\u00f3n.<\/p>\n A cambio de quitar interactividad inicial y elementos de la web para simplificarla y permitir que pueda no verse bien inicialmente. Usando cargas posteriores al primer resultado \u201cinteractivo para el usuario\u201d.<\/p>\n Una versi\u00f3n mobile exclusiva ayudar\u00eda a trabajar un c\u00f3digo m\u00e1s limpio para este test y obtener mejor nota. Sobre todo si por dise\u00f1o el responsive de la web no es \u201cmuy natural\u201d y hay muchos elementos duplicados por ser imposible \u201ctransformarlos\u201d din\u00e1micamente.<\/p>\n Que dicha versi\u00f3n mobile sea AMP ayudar\u00eda a\u00fan m\u00e1s.<\/p>\n Como ocurre con Google y el posicionamiento SEO, para esta herramienta hay decenas de variables a analizar. No todo es JS y CSS, pero si lo que m\u00e1s \u201cfrena\u201d.<\/p>\n Simplificar la web ayuda, pero si se suben dos im\u00e1genes de 2Mb de peso cada una, seremos penalizados\u2026 por tanto, no todo lo mejorable recae en el c\u00f3digo.<\/p>\n Prueba de ello es el hecho que el c\u00f3digo \u201cbase\u201d tiene una muy buena puntuaci\u00f3n, y sin embargo arrastra todo el c\u00f3digo js\/css de base como en la tienda analizada\u2026<\/p>\n \u00bfPor qu\u00e9? Porque es muy sencilla. A la que empezamos a complicar el dise\u00f1o responsive de una web: mega men\u00fa, header sticky, buscador interactivo, decenas de banners + categor\u00edas + productos en portada, elementos din\u00e1micos generados por js como popups, aceptaci\u00f3n de cookies, etc\u2026 Es cuando se introducen elementos que ralentizan el motor de renderizado de la herramienta.<\/p>\n Bajo mi punto de vista, y esto es una teor\u00eda, el cometido de la herramienta es darte una puntuaci\u00f3n basada en la \u201cmejora\u201d que considera que se puede dar a nivel de c\u00f3digo y recursos respecto al resultado que ha obtenido. Algo as\u00ed como \u201cSi yo tuviera que hacer una web como la que estoy viendo, lo har\u00eda as\u00ed\u2026 y t\u00fa lo has hecho as\u00e1\u2026 las comparo y te digo la diferencia\u2026\u201d.<\/p>\n Por eso, una web horrorosamente pesada y fea, pero sin interpretaci\u00f3n de css\/js obtiene una puntuaci\u00f3n de 100. \u00a1Google no sabr\u00eda hacerla mejor! \ud83d\ude00 (Probablemente tampoco peor\u2026)<\/p>\n En este punto, hago lo que ten\u00eda que haber hecho al principio, y es leerme el manual de instrucciones \uf04a Extracto de la documentaci\u00f3n oficial de Google al respecto de esta herramienta:<\/p>\n https:\/\/developers.google.com\/speed\/docs\/insights\/about?hl=es-419 <\/a><\/p>\n \u201cEn PSI se determina en qu\u00e9 grado se siguen las pr\u00e1cticas recomendadas de rendimiento m\u00e1s habituales en una p\u00e1gina, que se punt\u00faa del 0 al 100, calificaci\u00f3n con la que se indica de manera aproximada el margen de rendimiento\u201d<\/p>\n Y a\u00fan m\u00e1s: \u201cCon la puntuaci\u00f3n de optimizaci\u00f3n se calcula de manera aproximada el margen de mejora del rendimiento de las p\u00e1ginas\u201d<\/p>\n Y para acabar de demostrar que esta herramienta no mide la velocidad de nuestra web, ni es un indicador de si otras webs son m\u00e1s r\u00e1pidas de que la nuestra:<\/p>\n \u201cEs posible que una p\u00e1gina lenta tenga una puntuaci\u00f3n de optimizaci\u00f3n elevada porque la proporci\u00f3n de recursos que bloquean el renderizado respecto al total de recursos de la p\u00e1gina es baja. Y el caso contrario tambi\u00e9n se puede dar: una p\u00e1gina r\u00e1pida puede tener una puntuaci\u00f3n de optimizaci\u00f3n baja por tener muchos recursos que bloquean el renderizado en relaci\u00f3n con sus recursos totales\u201d<\/p>\n Uf\u2026 si me hubiera le\u00eddo el manual antes de empezar no hubiera sufrido este calvario\u2026<\/p>\n Pero \u00bfpor qu\u00e9 los resultados son tan distintos para el mismo test?<\/p>\n Mi teor\u00eda es que seg\u00fan el momento en que lances el test, el servidor encargado de hacerlo tarda m\u00e1s o menos en ejecutarlo y, seg\u00fan el caso, en acceder a todos los dominios donde tiene que hacer peticiones y eso acaba bloqueando el tiempo de carga… Pero es solo una teor\u00eda…<\/p>\n Otra podr\u00eda ser que el test en realidad no hace nada, y saca un n\u00famero aleatorio basado en el tiempo de carga total… Sin m\u00e1s… xDD Y que detr\u00e1s de todo esto hay un mu\u00f1eco de monito tocando los platillos\u2026<\/p>\n S\u00ed y no.<\/strong><\/p>\n \u00bfQu\u00e9 esperabas? Despu\u00e9s de la locura que he vivido\u2026<\/p>\n Es importante al menos darle un vistazo y ver que no hemos cometido errores que nos penalicen tontamente. Im\u00e1genes muy pesadas, t\u00e9cnicas mejorables,\u2026<\/p>\n Pero a su vez, es importante no obsesionarse con los resultados. Al fin y al cabo no es una herramienta estable. Y adem\u00e1s, su resultado est\u00e1 condicionado por variables que en muchos casos est\u00e1n fuera de tu control.<\/p>\n Entonces te preguntar\u00e1s \u00bfvale la pena invertir para sacar mejor puntuaci\u00f3n?<\/p>\n Y mi respuesta de nuevo ser\u00e1: depende. Para mejorar un desastre, obviamente s\u00ed. Es se\u00f1al de que algo no est\u00e1 del todo bien. Para mejorar respecto a otros: obviamente no. En ese caso no est\u00e1s comparando cosas iguales.<\/p>\n Y por \u00faltimo, y que no se le olvide a nadie: mejorar el resultado de la portada de tu web no har\u00e1 que el resto de la web cambie de puntuaci\u00f3n. Google est\u00e1 experimentando con el uso de esta herramienta en la navegaci\u00f3n de tu web, en TODA, no solo en la portada.<\/p>\n As\u00ed que si quieres focalizarte en algo, intenta que sean mejoras estructurales y generales para optimizar de verdad tu web, no para estar \u201cpor delante de otros\u201d.<\/p>\n Ahora que he sacado mis propias conclusiones, he buscado un poco de informaci\u00f3n para ver si alguien m\u00e1s ha llegado a las mismas. Recomiendo un poco m\u00e1s de lectura, si no hab\u00e9is tenido suficiente:<\/p>\n Son realmente interesantes, creedme.<\/p>\n (Cuaderno de bit\u00e1cora. D\u00eda 2. Nota 4. Todo tiene su fin\u2026 espero que este no sea el m\u00edo)<\/em><\/span><\/p>\n Espero que te lo hayas pasado tan bien leyendo este post como me lo he pasado yo haci\u00e9ndolo. Disfrutar de algo tan tedioso debe ser digno de estudio.<\/p>\n","protected":false},"excerpt":{"rendered":" Imaginemos que tenemos una herramienta que creemos que es \u00fatil y que nos ayudar\u00e1 a mejorar nuestras ventas. Imaginemos adem\u00e1s, por un momento, que podemos usar esa herramienta con la web de la competencia y \u201ccompararnos\u201d para ver quien es mejor. \u00bfA qui\u00e9n no le gustar\u00eda tener algo as\u00ed? Pero esta situaci\u00f3n, completamente imaginaria, viene […]<\/p>\n","protected":false},"author":2,"featured_media":14576,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[489],"tags":[],"class_list":["post-14463","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-teconologia"],"yoast_head":"\n
\n– Un humano<\/strong><\/em><\/p>\n
\n– Un humano con una web<\/strong><\/em><\/p>\n
\nDado que desconozco c\u00f3mo funciona internamente la herramienta y qu\u00e9 criterios usa para su testing, me dispongo a realizar una inmersi\u00f3n total a trav\u00e9s de una serie de pruebas para determinar que espera esta herramienta de una web. Para no condicionar mi opini\u00f3n, he decidido no buscar informaci\u00f3n por internet ni leer la documentaci\u00f3n oficial (\u00bfmanual de instrucciones? \u00a1Bah!) y realizar este testing \u201ca ciegas\u201d. Considero que es m\u00e1s divertido as\u00ed.<\/p>\nCondiciones del an\u00e1lisis \/ comparativa (primera conclusi\u00f3n)<\/h2>\n
\nCon esta situaci\u00f3n, hago el primer an\u00e1lisis de Google Page Speed a ambas webs y obtengo el siguiente resultado en m\u00f3vil:<\/p>\n
<\/p>\n
<\/p>\nWEB REAL<\/strong>\r\n
<\/pre>\nW<\/strong>EB CLONADA<\/strong>\r\n
<\/pre>\n
<\/p>\nWEB REAL<\/strong>\r\n
<\/pre>\nW<\/strong>EB CLONADA<\/strong>\r\n
<\/pre>\n
<\/p>\n
\nEsta herramienta es menos estable que la conexi\u00f3n a Internet en China<\/p><\/blockquote>\nEl caso que nos ocupa<\/h2>\n
\n
<\/p>\nBuscador inteligente<\/strong><\/h4>\n
\nEl resultado obtenido es el siguiente:<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
\nEsta herramienta tiene la misma credibilidad que un pol\u00edtico en campa\u00f1a<\/p><\/blockquote>\n
<\/p>\n
<\/p>\nValoraciones y opiniones<\/strong><\/h4>\n
<\/p>\n
<\/p>\n
<\/p>\nM\u00e9tricas de redes sociales<\/h4>\n

<\/p>\n
<\/p>\n
<\/p>\n
\n\u00a1Seguimos! (que remedio\u2026)<\/p>\nM\u00e9tricas generales<\/h4>\n

<\/p>\n
<\/p>\nMarketing automation 1<\/h4>\n
\nVerifico que desde la web clonada ya no se hacen peticiones al dominio de la herramienta, y entonces analizo ambas webs al mismo tiempo.<\/p>\n
<\/p>\n
<\/p>\nMarketing automation 2<\/h4>\n
\nVerifico que desde la web clonada ya no se hacen peticiones, y entonces analizo ambas webs al mismo tiempo.<\/p>\n
<\/p>\n
<\/p>\nM\u00e1s m\u00e9tricas generales<\/h4>\n

<\/p>\n
<\/p>\n
<\/p>\n
\nEn caso de juicio por asesinato, esto deber\u00eda ser considerado un atenuante.)<\/em><\/span><\/p>\n
<\/p>\nHerramienta de chat<\/h4>\n

<\/p>\n
<\/p>\n
\nMi cordura est\u00e1 en juego, y as\u00ed no ayudas.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\nSituaci\u00f3n actual despu\u00e9s de la desconexi\u00f3n masiva de terceros<\/h2>\n
Google Tag Manager<\/h4>\n
<\/p>\n
<\/p>\nComparativa desde otro punto de vista<\/h2>\n

<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\nConectando de nuevo todo<\/h2>\n

<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n\u00bfY si volvemos al inicio? (tercera conclusi\u00f3n)<\/h2>\n

<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
\nNo puedo creerlo, me resigno\u2026 lo tengo que volver a intentar, \u00a1\u00a1no puedo vivir sin ti!!<\/p>\n
\nUsar seg\u00fan que chat en tu web es como ir a trabajar en un trailer:
\nLlegar, llegar\u00e1s\u2026 pero\u2026 \u00bfa qu\u00e9 precio? Y\u2026 \u00bfd\u00f3nde vas a aparcar?<\/p><\/blockquote>\n\u00bfQu\u00e9 m\u00e1s podemos hacer?<\/h2>\n
\u00bfEl m\u00e1ximo al que podemos aspirar? Primer experimento<\/h2>\n
<\/p>\n
<\/p>\n
<\/p>\nSegundo experimento<\/h2>\n
<\/p>\nTercer experimento<\/h2>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
\nCon esto tengo informaci\u00f3n suficiente como para seguir con test m\u00e1s \u201creales\u201d.<\/p>\nAhora lo mismo, pero al rev\u00e9s<\/h2>\n
\n
Cuarto experimento<\/h2>\n
<\/p>\nQuinto experimento<\/h2>\n
<\/p>\nLas comparaciones son odiosas<\/h2>\n
<\/p>\nLa dura realidad (Sexto experimento)<\/h2>\n
<\/p>\n\u00bfEl experimento definitivo?<\/h2>\n
<\/p>\nParte 1<\/h4>\n
<\/p>\n
\nEl primer renderizado es r\u00e1pido, el resto se mantiene como hasta ahora.<\/p>\nParte 2<\/h4>\n
<\/p>\nParte 3<\/h4>\n
<\/p>\nParte 4<\/h4>\n

<\/p>\nVolviendo a la realidad (cuarta conclusi\u00f3n)<\/h2>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
\nEsta herramienta es como un ni\u00f1o con dinero en una tienda de chuches: Sabe lo que quiere, pero no sabe lo que quiere\u2026<\/p><\/blockquote>\nParte 8 \u2013 Lo que le gustar\u00eda a Google\u2026<\/h2>\n
<\/p>\n\u00a1\u00a1\u00a1\u00a1Tachaaaannnnnnnn!!!!<\/strong><\/h4>\n
De la locura a la cordura: los mandamientos<\/h2>\n
\u00bfQu\u00e9 espera esta herramienta de nuestras p\u00e1ginas?<\/h4>\n
\u00bfC\u00f3mo conseguimos eso?<\/h4>\n
\u00bfHay otras alternativas?<\/h4>\n
\u00bfC\u00f3mo demonios punt\u00faa esta herramienta?<\/h4>\n
\u00bfLe tengo que hacer caso a esta herramienta?<\/h4>\n
Un poco m\u00e1s de lectura para acabar<\/h4>\n
\n