{"id":9212,"date":"2019-01-16T10:59:15","date_gmt":"2019-01-16T09:59:15","guid":{"rendered":"https:\/\/www.makingscience.com\/blog\/google-page-speed-ahora-es-lighthouse\/"},"modified":"2019-01-16T10:59:15","modified_gmt":"2019-01-16T09:59:15","slug":"google-page-speed-ahora-es-lighthouse","status":"publish","type":"post","link":"https:\/\/www.makingscience.com\/es\/blog\/google-page-speed-ahora-es-lighthouse\/","title":{"rendered":"Google PageSpeed actualiza sus m\u00e9tricas de tiempo de carga"},"content":{"rendered":"
Google PageSpeed actualiza sus m\u00e9tricas de tiempo de carga<\/div>\n
El pasado 13 de noviembre de 2018 PageSpeed Insights (PSI) incorpor\u00f3 la herramienta Lighthouse a su motor de an\u00e1lisis de tiempo de carga. El cambio se realiz\u00f3 con el fin de homogeneizar las m\u00e9tricas entre las diferentes herramientas que Google ofrec\u00eda a los desarrolladores ya que hasta el momento utilizaban diferentes factores para sus an\u00e1lisis y los informes <\/span>ofrec\u00edan resultados y recomendaciones de rendimiento diferentes. \u00a0<\/span> De este modo y sabiendo la importancia que tiene el Page Speed en un mundo 100% mobile, la obsesi\u00f3n de conseguir acercarse al 100\/100 se vuelve prioritaria. Y m\u00e1s para la comunidad SEO desde la llegada de Mobile First Index, un nuevo sistema de rastreo que prioriza el posicionamiento en la versi\u00f3n m\u00f3vil de la web, y para ello el tiempo de carga juega un papel decisivo. <\/span> Pero antes de mejorar la nota, vamos a repasar las m\u00e9tricas de an\u00e1lisis del nuevo PageSpeed Insights:<\/span> Datos de campo:<\/b> Ofrece una primera foto del tiempo de carga de la web durante los \u00faltimos 30 d\u00edas en comparaci\u00f3n con el rendimiento de otras webs incluidas en el informe de Experiencia de Usuario de Chrome. <\/span> Los datos que se tienen en cuenta para esta parte del an\u00e1lisis son el <\/span>Primer Renderizado de Contenido (FCP), \u00a0el tiempo que tarda la p\u00e1gina en mostrar la primera imagen o texto, y la Latencia de la Primera Interacci\u00f3n (FID), es decir, el tiempo de carga total hasta que el usuario puede interactuar con nuestros botones o contenidos dentro de la p\u00e1gina.<\/span> \"\" La herramienta arroja los resultados en una escala de colores. Es una representaci\u00f3n de c\u00f3mo se ha cargado tu p\u00e1gina para los diferentes usuarios de los que se han registrado datos en el informe de Chrome UX Report en los \u00faltimos 30 d\u00edas. <\/span> En color verde, las veces que el FCP y el FID se mostraron en un tiempo r\u00e1pido (<1s), en naranja, las veces en las que se carg\u00f3 en un tiempo medio normal (entre 1 y 2,5s), y en rojo, las veces que se carg\u00f3 de forma lenta (>2,5s).<\/span> La media de todos los FCP y los FID aparece en el lado superior de la derecha de cada una de las m\u00e9tricas. \u00a0Si la mediana de tu p\u00e1gina comparada con la del resto de p\u00e1ginas que hay en Chrome UX Report es normal, tu puntuaci\u00f3n saldr\u00e1 en naranja. Si est\u00e1 por encima, saldr\u00e1 en verde, siendo m\u00e1s r\u00e1pido que la media; y si est\u00e1 por debajo de la media, saldr\u00e1 en rojo.<\/span> <\/span> Aqu\u00ed podemos ver como la media de carga del FCP frente al resto de webs es lento, de unos 4s, y que adem\u00e1s tienen que pasar otro segundo m\u00e1s de media para que la p\u00e1gina empiece a ser sea interactiva para el usuario. <\/span> A veces el informe Experiencia de Usuario de Chrome no tiene suficientes datos en tiempo real de la velocidad de la web analizada. Cuando no tenga hist\u00f3rico, este campo aparecer\u00e1 vac\u00edo. <\/span> Datos de experimento: <\/b>Google PageSPeed simula un test de carga a trav\u00e9s de un dispositivo m\u00f3vil con una conexi\u00f3n 3G analizando una serie de m\u00e9tricas vinculadas a las diferentes etapas de carga de una web y la posibilidad de interacci\u00f3n del usuario a lo largo de las mismas, que son:<\/span> \"\" <\/p>\n
    \n
  • Primer Renderizado de Contenido o FCP.<\/b> El tiempo que tarda la p\u00e1gina en cargar la primera imagen o fragmento de texto, por ejemplo el logo o el men\u00fa de navegaci\u00f3n.<\/span><\/li>\n
  • Primer Renderizado Significativo<\/b>. El tiempo que tarda la p\u00e1gina en cargar el contenido principal de la p\u00e1gina con sus im\u00e1genes y textos correspondientes.<\/span><\/li>\n
  • \u00cdndice de Velocidad.<\/b> La rapidez con la que se rellenan los blancos de los contenidos que se van pintando en la p\u00e1gina. Cuanto m\u00e1s bajo sea el n\u00famero, m\u00e1s r\u00e1pido se carga el site.<\/span><\/li>\n
  • Primer Tiempo Inactivo de la CPU. <\/b>Es el tiempo que transcurre hasta que los principales elementos de una p\u00e1gina son m\u00ednimamente interactivos.<\/span><\/li>\n
  • Tiempo hasta que est\u00e1 interactiva. <\/b>El tiempo que ha de transcurrir para que la p\u00e1gina sea completamente interactiva. <\/span><\/li>\n
  • Latencia de Entrada Estimada o FID. <\/b>El tiempo que tardan los elementos en responder a la interacci\u00f3n del usuario durante los 5 segundos de carga. Si la latencia es mayor a 50ms el usuario percibir\u00e1 que la p\u00e1gina tarda en cargarse.<\/span><\/li>\n<\/ul>\n

    Oportunidades: <\/b>Recomendaciones que ofrece Google PageSpeed en base al an\u00e1lisis de Lighthouse sobre c\u00f3mo optimizar las m\u00e9tricas de rendimiento de la p\u00e1gina. Al lado de cada recomendaci\u00f3n aparece una estimaci\u00f3n de cu\u00e1nto de r\u00e1pido se cargar\u00eda la p\u00e1gina si la mejora se implementara.<\/span> \"\" Diagn\u00f3stico: <\/b>Recomendaciones m\u00e1s t\u00e9cnicas pensadas en los desarrolladores principalmente que mejoran el renderizado de la p\u00e1gina, entre ellas reducir el n\u00famero de nodos de los que se compone la p\u00e1gina o el tiempo de ejecuci\u00f3n de JS.<\/span> \"\" \u00bfC\u00f3mo mejorar la puntuaci\u00f3n?<\/b> A continuaci\u00f3n, mencionamos algunas recomendaciones generales que mejoran el performance y aumentan la puntuaci\u00f3n de PageSpeed de Google.<\/span> <\/p>\n

      \n
    1. Aplaza la carga de las im\u00e1genes o v\u00eddeos que no son visibles de entrada. \u00a0Tecnolog\u00edas como Lazy Load permiten la carga progresiva de los recursos a medida que los necesita el usuario al interactuar con ellos o hacer scroll. Su implementaci\u00f3n reduce el tiempo de carga inicial ya que se carga solo lo que hay en zona visible de la pantalla a ojos del usuario.<\/span><\/b><\/li>\n
    2. Elimina o aplaza los recursos que bloquean la carga de la p\u00e1gina. El bloque se produce cuando el navegador se encuentra un script o un CSS al procesar el HTML. Para continuar con la carga de la p\u00e1gina, el navegador tiene que detenerse y pedir el archivo al servidor, esperar a que se descargue y procesarlo. Hasta que no lo ejecuta no puede terminar de procesar el resto del HTML<\/span><\/b><\/li>\n
    3. Evita los redireccionamientos innecesarios. <\/b>Resuelve los bucles de redirecciones, ya que se pierde tiempo de carga en ir de una p\u00e1gina a otra.<\/span><\/li>\n
    4. Elimina las reglas de CSS que no se utilizan<\/b>. Suprimir las l\u00edneas que no se usan mejorar\u00e1n el rendimiento de tu web, ya que estar\u00e1s reduciendo el tama\u00f1o de tus hojas de estilo. Puedes ver el CSS que no se est\u00e1 usando en la consola de Chrome, en el apartado Coverage.<\/li>\n
    5. Actualiza tus im\u00e1genes a los formatos de pr\u00f3xima generaci\u00f3n: JPEG 2000, JPEG XR o WebP. <\/b>Se trata de formatos de imagen que se descargan de forma m\u00e1s r\u00e1pida y consumen menos datos, adem\u00e1s de tener caracter\u00edsticas de compresi\u00f3n y calidad mucho mayores a los cl\u00e1sicos formatos PNG o JPEG. \u00a0El principal problema es que estos formatos no son compatibles a\u00fan en todos los navegadores, por lo que habr\u00e1 que seguir de cerca su evoluci\u00f3n durante el 2019 para ver si finalmente podemos implementarlos en las webs.<\/li>\n<\/ol>\n

      Fuentes: Google y LightHouse  <\/p><\/div>\n","protected":false},"excerpt":{"rendered":"

      Google PageSpeed actualiza sus m\u00e9tricas de tiempo de carga El pasado 13 de noviembre de 2018 PageSpeed Insights (PSI) incorpor\u00f3 la herramienta Lighthouse a su motor de an\u00e1lisis de tiempo de carga. El cambio se realiz\u00f3 con el fin de homogeneizar las m\u00e9tricas entre las diferentes herramientas que Google ofrec\u00eda a los desarrolladores ya que […]<\/p>\n","protected":false},"author":21,"featured_media":9213,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[807],"tags":[37],"class_list":["post-9212","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advertising-es","tag-seo"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/9212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/comments?post=9212"}],"version-history":[{"count":0,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/9212\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media\/9213"}],"wp:attachment":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media?parent=9212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/categories?post=9212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/tags?post=9212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}