Visi\u00f3n general
Conocimiento de la velocidad de las p\u00e1ginas<\/h2><\/span><\/div><\/div><\/div>Hoy en d\u00eda, el rendimiento de un sitio web es vital para el posicionamiento org\u00e1nico en el Serp de Google, y esta tendencia se ve a\u00fan m\u00e1s corroborada por los nuevos Core Web Vitals, que se han convertido en un factor de clasificaci\u00f3n a partir de mayo de 2021.<\/p>\n
La pesta\u00f1a \u00abPageSpeed\u00bb del Seo Spider te ayuda a recopilar datos de dos fuentes:<\/p>\n
\n- PageSpeed Insights<\/strong>, que utiliza Lighthouse para comprobar la velocidad de las p\u00e1ginas web mediante \u00abdatos de laboratorio\u00bb;<\/li>\n
- Informe de experiencia de usuario de Chrome<\/strong> (CrUX, o \u00abdatos de campo\u00bb) que te permite obtener datos reales de navegaci\u00f3n.<\/li>\n<\/ul>\n
Para rellenar los datos de la pesta\u00f1a \u00abPageSpeed\u00bb, la API PSI debe estar conectada.<\/p>\n<\/div><\/div><\/div><\/div><\/div>
> > Configuraci\u00f3n API PageSpeed Insights<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/span>Las m\u00e9tricas<\/h3><\/span><\/div><\/div><\/div>Desde la pesta\u00f1a Pagespeed, tienes varias m\u00e9tricas gen\u00e9ricas a tu disposici\u00f3n:<\/p>\n
\n- Ahorro total de tama\u00f1o.<\/li>\n
- Ahorro total de tiempo.<\/li>\n
- Total de solicitudes.<\/li>\n
- Tama\u00f1o total de la p\u00e1gina.<\/li>\n
- Tama\u00f1o HTML.<\/li>\n
- Recuento HTML.<\/li>\n
- Tama\u00f1o de la imagen.<\/li>\n
- Recuento de im\u00e1genes.<\/li>\n
- Tama\u00f1o CSS.<\/li>\n
- Recuento de CSS.<\/li>\n
- Tama\u00f1o de JavaScript.<\/li>\n
- Recuento de JavaScript.<\/li>\n
- Tama\u00f1o de letra.<\/li>\n
- Recuento de fuentes.<\/li>\n
- Tama\u00f1o del soporte.<\/li>\n
- Recuento de medios.<\/li>\n
- Otro tama\u00f1o.<\/li>\n
- Otro recuento.<\/li>\n
- Tama\u00f1o de la tercera parte.<\/li>\n
- Recuento de terceros.<\/li>\n<\/ul>\n
Las m\u00e9tricas m\u00e1s espec\u00edficas disponibles se dividen entre \u00abCrUX Metrics\u00bb, que corresponde a los datos de campo de Chrome, y \u00abLighthouse Metrix\u00bb, con datos de laboratorio publicados por PageSpeed Insight.<\/p>\n<\/div>
<\/div><\/div><\/span>M\u00e9tricas CrUX<\/h3><\/span><\/div><\/div><\/div>\n- Rendimiento CrUX.<\/li>\n
- CrUX Tiempo de pintura del primer contenido (seg).<\/li>\n
- CrUX Primera Pintura de Contenido Categor\u00eda.<\/li>\n
- CrUX Tiempo de retardo de la primera entrada (seg).<\/li>\n
- CrUX Primera Categor\u00eda de Retardo de Entrada.<\/li>\n
- CrUX Origen Rendimiento.<\/li>\n
- CrUX Origen Primer Contenido Tiempo de Pintura (seg).<\/li>\n
- CrUX Origen Primer Contenido Pintura Categor\u00eda.<\/li>\n
- CrUX Origen Tiempo de retardo de la primera entrada (seg).<\/li>\n
- CrUX Origen Categor\u00eda Retraso Primera Entrada.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/span>
M\u00e9tricas del Faro<\/h3><\/span><\/div><\/div><\/div>\n- Puntuaci\u00f3n de rendimiento.<\/li>\n
- Tiempo hasta el primer byte (ms).<\/li>\n
- Tiempo de pintura del primer contenido (seg.)<\/li>\n
- \u00cdndice de velocidad Tiempo (seg).<\/li>\n
- Tiempo hasta Interactivo (seg).<\/li>\n
- Primera Puntuaci\u00f3n de Pintura Contenta.<\/li>\n
- Primer Tiempo de Pintura Significativo (seg).<\/li>\n
- Primera puntuaci\u00f3n significativa en pintura.<\/li>\n
- Puntuaci\u00f3n del \u00cdndice de Velocidad.<\/li>\n
- Latencia de entrada estimada (ms).<\/li>\n
- Puntuaci\u00f3n estimada de la latencia de entrada.<\/li>\n
- Primer tiempo de inactividad de la CPU (seg).<\/li>\n
- Primera puntuaci\u00f3n de CPU inactiva.<\/li>\n
- Tiempo para la puntuaci\u00f3n interactiva.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/span>
Filtros Pagespeed<\/h3><\/span><\/div><\/div><\/div>Adem\u00e1s de las m\u00e9tricas, la Ficha incluye los siguientes filtros:<\/p>\n
\n- Eliminar recursos que bloquean la renderizaci\u00f3n<\/strong>: se muestran todas las p\u00e1ginas con recursos que bloquean la \u00abPrimera pintura\u00bb de la p\u00e1gina, junto con los posibles ahorros.<\/li>\n
- Tama\u00f1o correcto<\/strong> de las im\u00e1genes: el filtro resalta todas las p\u00e1ginas que contienen im\u00e1genes de tama\u00f1o incorrecto y destaca el ahorro potencial si se corrigieran.<\/li>\n<\/ul>\n<\/div>
![\"Web](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/pagespeed_size_images.png\" "\\"Pagespeed")
<\/span><\/div>Lo ideal es que tu p\u00e1gina web no muestre im\u00e1genes m\u00e1s grandes que la versi\u00f3n mostrada en la pantalla del usuario. La estrategia m\u00e1s adecuada es servir \u00abim\u00e1genes responsive\u00bb generando m\u00faltiples versiones y especificando cu\u00e1les utilizar en tu Html o CSS mediante consultas de medios, tama\u00f1os de ventana gr\u00e1fica, etc.<\/p>\n
Otras soluciones pueden ser el uso de CDN de im\u00e1genes o el uso de formatos de imagen vectorial SVG para escalar a cualquier tama\u00f1o, por ejemplo, iconos.<\/p>\n
\n- Aplazar<\/strong> im\u00e1genes fuera de pantalla: identifica todas las p\u00e1ginas que contienen im\u00e1genes ocultas o fuera de pantalla junto con el ahorro potencial. Para evitar este problema, puedes considerar la posibilidad de \u00abcargar perezosamente\u00bb estas im\u00e1genes despu\u00e9s de los recursos cr\u00edticos para reducir el \u00edndice de \u00abTiempo para interactuar\u00bb.<\/li>\n
- Minificar CSS<\/strong>: todas las p\u00e1ginas con archivos CSS sin minificar, junto con el ahorro potencial si se minificaran correctamente.<\/li>\n<\/ul>\n<\/div>
![\"Core](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/minifyCss.png\" "\\"Minify")
<\/span><\/div>Minificar el CSS mejora el tiempo de carga de la p\u00e1gina porque normalmente el CSS utilizado es mayor de lo necesario. Los archivos CSS pueden contener caracteres innecesarios, como comentarios, espacios en blanco y sangr\u00edas.<\/p>\n
Cuando se ponen en l\u00ednea, estas fuentes pueden eliminarse de forma segura para reducir el tama\u00f1o del archivo sin afectar a la forma en que el navegador procesa los estilos. Esta t\u00e9cnica se llama minificaci\u00f3n.<\/p>\n<\/div>
![\"Esempio](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Esempio-minificazioni-css.png\" "\\"Esempio")
<\/span><\/div><\/div><\/div><\/div><\/div>Este c\u00f3digo se puede minificar en una l\u00ednea:<\/p>\n<\/div>
![](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Minificazione-del-codice-html.png\" "\\"Minificazione")
<\/span><\/div><\/div><\/div><\/div><\/div>\n- Minificar JavaScript<\/strong>: muestra todas las p\u00e1ginas con archivos JavaScript sin minificar, junto con el ahorro potencial. Minificar los archivos JavaScript puede reducir el tama\u00f1o de la carga \u00fatil y el tiempo de an\u00e1lisis del script.
\nLa minificaci\u00f3n es el proceso de eliminar los espacios en blanco y cualquier c\u00f3digo que no sea necesario para crear un archivo de c\u00f3digo m\u00e1s peque\u00f1o pero perfectamente v\u00e1lido. Por ejemplo, Terser es una popular herramienta de compresi\u00f3n de JavaScript. webpack v4 incluye por defecto un plugin para esta biblioteca para crear archivos de compilaci\u00f3n minificados.<\/li>\n- Eliminar<\/strong> CSS no utilizado: identifica las p\u00e1ginas con CSS no utilizado, junto con el ahorro potencial en bytes. Normalmente los desarrolladores lo utilizan para a\u00f1adir hojas de estilo a una p\u00e1gina:<\/li>\n<\/ul>\n<\/div>
![\"file](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Rimozione-CSS-non-utilizzati.png\" "\\"Rimozione")
<\/span><\/div><\/div><\/div><\/div><\/div>El archivo main.css que descarga el navegador se denomina hoja de estilo externa y se almacena separado del HTML que lo incluye en el c\u00f3digo. As\u00ed, cuando un navegador se encuentra con esta condici\u00f3n, debe descargar, analizar y procesar todas las hojas de estilo externas que encuentre antes de poder servir cualquier contenido en la pantalla del usuario.<\/p>\n
\n- Codificar eficazmente<\/strong> las im\u00e1genes: el filtro muestra las p\u00e1ginas con im\u00e1genes no optimizadas, junto con los ahorros potenciales. Lighthouse recopila todas las im\u00e1genes JPEG o BMP de la p\u00e1gina, establece el nivel de compresi\u00f3n de cada imagen en 85 y, a continuaci\u00f3n, compara la versi\u00f3n original con la comprimida. Si el ahorro potencial es de 4 KiB o m\u00e1s, Lighthouse marca la imagen como optimizable.<\/li>\n
- Servir im\u00e1genes en formatos Next-Gen<\/strong>: destaca las p\u00e1ginas con im\u00e1genes servidas en formatos antiguos como jpeg y png. El consejo es utilizar formatos como AVIF y WebP, que tienen caracter\u00edsticas de compresi\u00f3n y calidad superiores.<\/li>\n
- Activar<\/strong> compresi\u00f3n de texto: todas las p\u00e1ginas con recursos basados en texto que no se han comprimido, junto con el ahorro potencial.<\/li>\n
- Preconectar al origen requerido<\/strong>: el filtro identifica todas las p\u00e1ginas que tienen conexiones a dominios distintos del tuyo, pero que todav\u00eda no est\u00e1n priorizando las peticiones fetch con enlaces rel=preconnect, junto con posibles ahorros. Antes de solicitar un recurso a un servidor, el navegador necesita establecer una conexi\u00f3n con el servidor para buscar el nombre de dominio y definirlo en una direcci\u00f3n IP, establecer una conexi\u00f3n con el servidor y cifrar la conexi\u00f3n. En todos estos pasos, el navegador env\u00eda datos y recibe respuestas del servidor, este proceso se denomina \u00abida y vuelta\u00bb y, dependiendo de las condiciones de la red, tarda un tiempo que afecta inexorablemente al rendimiento.<\/li>\n<\/ul>\n
Para optimizarlo, puedes utilizar la \u00abpreconexi\u00f3n\u00bb de los recursos externos (conexiones a otros dominios), que indica al navegador a qu\u00e9 recursos debe conectarse en primer lugar por considerarlos prioritarios.<\/p>\n<\/div>
![\"preconnect](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Risorse-in-Preconnect.png\" "\\"Risorse")
<\/span><\/div><\/div><\/div><\/div><\/div>Un ejemplo de aplicaci\u00f3n de \u00abpreconectar\u00bb podr\u00eda ser para Google Tag Manager o Google Analytics<\/p>\n<\/div>
![\"preconnect](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Preconnect-Google-Tag-Manager.png\" "\\"Preconnect")
<\/span><\/div><\/div><\/div><\/div><\/div>Las \u00abpeticiones de cadena cr\u00edtica\u00bb corresponden a una serie de peticiones de red dependientes e importantes para la correcta renderizaci\u00f3n del documento html.<\/p>\n
\n- Reducir los tiempos de respuesta del servidor (TTFB<\/strong>): la velocidad de carga es esencial para una experiencia de usuario adecuada, y los usuarios son muy sensibles a este aspecto. Un sitio que tarda muchos segundos en cargarse tiene tasas de abandono directamente proporcionales. Una de las causas m\u00e1s comunes est\u00e1 relacionada con la lentitud de las respuestas del servidor a la hora de devolver el contenido de la p\u00e1gina al navegador. Este filtro identifica todas las p\u00e1ginas en las que el navegador tuvo que esperar m\u00e1s de 600 ms a la respuesta del servidor en la petici\u00f3n del documento principal.<\/li>\n
- Evitar Redirecciones M\u00faltiples<\/strong>: muestra las p\u00e1ginas que tienen recursos de redirecci\u00f3n, y el ahorro potencial utilizando la URL directa. Los redireccionamientos ralentizan la velocidad de carga de la p\u00e1gina. Cuando un navegador solicita un recurso que ha sido redirigido, el servidor suele devolver una respuesta HTTP como \u00e9sta:<\/li>\n<\/ul>\n<\/div>
![\"codice](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Risposta-Http.png\" "\\"Risposta")
<\/span><\/div>y el navegador se ve obligado a realizar otra petici\u00f3n HTTP para recuperar el recurso en la nueva ubicaci\u00f3n. Esta consideraci\u00f3n no pretende prohibir el uso de 3xx, sino al crear cadenas de redirecciones o redirecciones m\u00faltiples en la misma p\u00e1gina.
\nDeben evitarse siempre los redireccionamientos a recursos necesarios para la \u00abruta de renderizado cr\u00edtica\u00bb.<\/p>\n
\n- Peticiones clave<\/strong> de precarga: identifica las p\u00e1ginas html con elementos que podr\u00edan manejarse con \u00abprecarga\u00bb.
\nCuando se solicita una p\u00e1gina, el navegador solicita la p\u00e1gina html al servidor analizando el contenido y enviando peticiones separadas para cada recurso de referencia incluido en el documento. Para mejorar el rendimiento, se recomienda acelerar este proceso solicitando los recursos cr\u00edticos con antelaci\u00f3n.
\nUn ejemplo de aplicaci\u00f3n podr\u00eda ser la solicitud de una fuente en un archivo CSS, ya que el navegador s\u00f3lo la descubrir\u00eda tras leer la hoja de estilo. Al utilizar la funci\u00f3n \u00abPrecargar\u00bb, vas a precargar y recuperar un recurso que el navegador s\u00f3lo tendr\u00eda en cuenta en una fase posterior, por ejemplo, en peticiones de cadena cr\u00edtica.
\nRecuerda que el navegador almacena en cach\u00e9 el recurso en \u00abprecarga\u00bb sin ejecutar los scripts, pero que, al haberlos considerado ya, los servir\u00e1 inmediatamente una vez solicitados.
\nEsta funcionalidad es muy adecuada para dependencias como JS, fuentes y CSS.<\/li>\n<\/ul>\nEsta funcionalidad es una directiva para que el navegador no bloquee la carga del documento html. <> <> Para implementar la directiva \u00abPrecargar\u00bb, basta con a\u00f1adir la etiqueta enlace en la secci\u00f3n head del html o utilizar la cabecera Enlace HTTP.<\/p>\n<\/div>
![\"gestione](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Intestazioni-http-e-header.png\" "\\"Intestazioni")
<\/span><\/div>\n- Utilizar el formato de v\u00eddeo para las im\u00e1genes animadas<\/strong>: identifica las p\u00e1ginas con GIF animados, junto con el ahorro potencial si se convierten a v\u00eddeo.<\/li>\n
- Evitar tama\u00f1o DOM excesivo:<\/strong> identifica todas las p\u00e1ginas que tienen un tama\u00f1o DOM superior a los 1.500 nodos totales recomendados. Considerar el DOM es de vital importancia porque puede afectar negativamente al rendimiento y la eficacia de varias formas:\n
\n- A menudo, el DOM incluye muchos nodos que no son visibles para el usuario cuando la p\u00e1gina se carga por primera vez; esta condici\u00f3n aumenta innecesariamente el volumen de datos que hay que servir a los usuarios y ralentiza el tiempo de carga (rendimiento de la carga).<\/li>\n
- Durante la navegaci\u00f3n, se producen numerosas interacciones con la p\u00e1gina web por parte de usuarios y scripts que hacen que el navegador reorganice la posici\u00f3n y el estilo de los nodos en el DOM, creando ralentizaciones en la renderizaci\u00f3n (rendimiento en tiempo de ejecuci\u00f3n).<\/li>\n
- Si JavaScript utiliza selectores de consulta generales como document.querySelectorAll(‘li’), puede almacenar, sin saberlo, referencias a un n\u00famero muy elevado de nodos, lo que puede sobrecargar las capacidades de memoria de los dispositivos de los usuarios (rendimiento de la memoria).<\/li>\n<\/ul>\n<\/li>\n
- Reducir<\/strong> el tiempo de ejecuci\u00f3n de JavaScript: filtra las p\u00e1ginas de informes con un tiempo de ejecuci\u00f3n de JavaScript medio o lento. Cuando una p\u00e1gina html tarda mucho en ejecutar scripts JavaScript, ralentiza el rendimiento:\n
\n- aumentar el coste de la red: utilizar m\u00e1s bytes aumenta el tiempo de descarga.<\/li>\n
- El Javascript se analiza y compila en el hilo principal, que no permanece disponible para la interacci\u00f3n del usuario.<\/li>\n
- Ocupar el hilo principal de Javascript tambi\u00e9n retrasa el TTI (Tiempo para Interactuar) penalizando la Ux de la p\u00e1gina y las vitales web dedicadas.<\/li>\n
- Si el Javascript contiene muchas referencias, puede consumir inexorablemente mucha memoria, penalizando la consulta de la p\u00e1gina por parte del usuario.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Para mejorar el rendimiento de la ejecuci\u00f3n de Javascript, generalmente se recomienda \u00abminificar\u00bb y comprimir el c\u00f3digo, eliminar el c\u00f3digo no utilizado y almacenarlo en cach\u00e9.<\/p>\n
\n- Servir activos est\u00e1ticos con una pol\u00edtica de cach\u00e9 eficiente<\/strong>: devuelve todas las p\u00e1ginas con recursos que no est\u00e1n \u00aben cach\u00e9\u00bb, junto con el ahorro potencial. Cuando un navegador solicita un recurso, el servidor que lo proporciona puede indicar al navegador durante cu\u00e1nto tiempo debe almacenarlo temporalmente o guardarlo en cach\u00e9. Para cada solicitud posterior de ese recurso, el navegador utiliza su copia local en lugar de obtenerla de la red. Las evaluaciones de Lighthouse tienen en cuenta fuentes, medios, im\u00e1genes u hojas de estilo que respondan con el c\u00f3digo de estado 2xx y no hayan declarado expl\u00edcitamente una \u00abpol\u00edtica de no cach\u00e9\u00bb.<\/li>\n<\/ul>\n
Aqu\u00ed tienes un ejemplo de almacenamiento en cach\u00e9 mediante cabecera HTTP:<\/p>\n<\/div>
![\"codice](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Cache-Control.png\" "\\"Cache")
<\/span><\/div>La directiva ‘max-age’ indica al navegador cu\u00e1nto tiempo permanecer\u00e1 un recurso en la cach\u00e9. Para los \u00abactivos est\u00e1ticos\u00bb, se recomienda un tiempo no inferior a un a\u00f1o.<\/p>\n
\n- Minimizar el trabajo del<\/strong> hilo principal: identifica todas las p\u00e1ginas con tiempos de ejecuci\u00f3n medios o lentos en el hilo principal que penalizan la renderizaci\u00f3n del documento html. El proceso de renderizado del navegador convierte tu c\u00f3digo en una p\u00e1gina web con la que los usuarios pueden interactuar. Por defecto, el hilo principal del proceso de renderizado se encarga de la mayor parte del c\u00f3digo: analiza el HTML y construye el DOM, analiza el CSS y aplica los estilos especificados, y analiza, eval\u00faa y ejecuta el JavaScript.<\/li>\n<\/ul>\n
El hilo principal tambi\u00e9n procesa los eventos de usuario. As\u00ed, cuando el hilo principal est\u00e1 ocupado haciendo otra cosa, la p\u00e1gina web puede no responder a las interacciones del usuario, lo que provoca una mala experiencia. Para mejorar este proceso, recomendamos optimizar el javascript de terceros, eliminar el c\u00f3digo no utilizado, reducir las referencias CSS y simplificarlas (minificarlas), posponer el CSS no cr\u00edtico, dividir las cargas \u00fatiles de javascript.<\/p>\n
\n- Garantizar que el texto permanezca visible durante la carga de fuentes web<\/strong>: todas las p\u00e1ginas con fuentes que puedan parpadear o volverse invisibles durante la carga de recursos.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/div><\/div>
Hoy en d\u00eda, el rendimiento de un sitio web es vital para el posicionamiento org\u00e1nico en el Serp de Google, y esta tendencia se ve a\u00fan m\u00e1s corroborada por los nuevos Core Web Vitals, que se han convertido en un factor de clasificaci\u00f3n a partir de mayo de 2021.<\/p>\n
La pesta\u00f1a \u00abPageSpeed\u00bb del Seo Spider te ayuda a recopilar datos de dos fuentes:<\/p>\n
- \n
- PageSpeed Insights<\/strong>, que utiliza Lighthouse para comprobar la velocidad de las p\u00e1ginas web mediante \u00abdatos de laboratorio\u00bb;<\/li>\n
- Informe de experiencia de usuario de Chrome<\/strong> (CrUX, o \u00abdatos de campo\u00bb) que te permite obtener datos reales de navegaci\u00f3n.<\/li>\n<\/ul>\n
Para rellenar los datos de la pesta\u00f1a \u00abPageSpeed\u00bb, la API PSI debe estar conectada.<\/p>\n<\/div><\/div><\/div><\/div><\/div>
> > Configuraci\u00f3n API PageSpeed Insights<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/div>
<\/div><\/div><\/span>Las m\u00e9tricas<\/h3><\/span>
<\/div><\/div><\/div>Desde la pesta\u00f1a Pagespeed, tienes varias m\u00e9tricas gen\u00e9ricas a tu disposici\u00f3n:<\/p>\n
- \n
- Ahorro total de tama\u00f1o.<\/li>\n
- Ahorro total de tiempo.<\/li>\n
- Total de solicitudes.<\/li>\n
- Tama\u00f1o total de la p\u00e1gina.<\/li>\n
- Tama\u00f1o HTML.<\/li>\n
- Recuento HTML.<\/li>\n
- Tama\u00f1o de la imagen.<\/li>\n
- Recuento de im\u00e1genes.<\/li>\n
- Tama\u00f1o CSS.<\/li>\n
- Recuento de CSS.<\/li>\n
- Tama\u00f1o de JavaScript.<\/li>\n
- Recuento de JavaScript.<\/li>\n
- Tama\u00f1o de letra.<\/li>\n
- Recuento de fuentes.<\/li>\n
- Tama\u00f1o del soporte.<\/li>\n
- Recuento de medios.<\/li>\n
- Otro tama\u00f1o.<\/li>\n
- Otro recuento.<\/li>\n
- Tama\u00f1o de la tercera parte.<\/li>\n
- Recuento de terceros.<\/li>\n<\/ul>\n
Las m\u00e9tricas m\u00e1s espec\u00edficas disponibles se dividen entre \u00abCrUX Metrics\u00bb, que corresponde a los datos de campo de Chrome, y \u00abLighthouse Metrix\u00bb, con datos de laboratorio publicados por PageSpeed Insight.<\/p>\n<\/div>
<\/div><\/div><\/span>M\u00e9tricas CrUX<\/h3><\/span>
<\/div><\/div><\/div>- \n
- Rendimiento CrUX.<\/li>\n
- CrUX Tiempo de pintura del primer contenido (seg).<\/li>\n
- CrUX Primera Pintura de Contenido Categor\u00eda.<\/li>\n
- CrUX Tiempo de retardo de la primera entrada (seg).<\/li>\n
- CrUX Primera Categor\u00eda de Retardo de Entrada.<\/li>\n
- CrUX Origen Rendimiento.<\/li>\n
- CrUX Origen Primer Contenido Tiempo de Pintura (seg).<\/li>\n
- CrUX Origen Primer Contenido Pintura Categor\u00eda.<\/li>\n
- CrUX Origen Tiempo de retardo de la primera entrada (seg).<\/li>\n
- CrUX Origen Categor\u00eda Retraso Primera Entrada.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/span>
M\u00e9tricas del Faro<\/h3><\/span>
<\/div><\/div><\/div>- \n
- Puntuaci\u00f3n de rendimiento.<\/li>\n
- Tiempo hasta el primer byte (ms).<\/li>\n
- Tiempo de pintura del primer contenido (seg.)<\/li>\n
- \u00cdndice de velocidad Tiempo (seg).<\/li>\n
- Tiempo hasta Interactivo (seg).<\/li>\n
- Primera Puntuaci\u00f3n de Pintura Contenta.<\/li>\n
- Primer Tiempo de Pintura Significativo (seg).<\/li>\n
- Primera puntuaci\u00f3n significativa en pintura.<\/li>\n
- Puntuaci\u00f3n del \u00cdndice de Velocidad.<\/li>\n
- Latencia de entrada estimada (ms).<\/li>\n
- Puntuaci\u00f3n estimada de la latencia de entrada.<\/li>\n
- Primer tiempo de inactividad de la CPU (seg).<\/li>\n
- Primera puntuaci\u00f3n de CPU inactiva.<\/li>\n
- Tiempo para la puntuaci\u00f3n interactiva.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/span>
Filtros Pagespeed<\/h3><\/span>
<\/div><\/div><\/div>Adem\u00e1s de las m\u00e9tricas, la Ficha incluye los siguientes filtros:<\/p>\n
- \n
- Eliminar recursos que bloquean la renderizaci\u00f3n<\/strong>: se muestran todas las p\u00e1ginas con recursos que bloquean la \u00abPrimera pintura\u00bb de la p\u00e1gina, junto con los posibles ahorros.<\/li>\n
- Tama\u00f1o correcto<\/strong> de las im\u00e1genes: el filtro resalta todas las p\u00e1ginas que contienen im\u00e1genes de tama\u00f1o incorrecto y destaca el ahorro potencial si se corrigieran.<\/li>\n<\/ul>\n<\/div>
<\/span><\/div>Lo ideal es que tu p\u00e1gina web no muestre im\u00e1genes m\u00e1s grandes que la versi\u00f3n mostrada en la pantalla del usuario. La estrategia m\u00e1s adecuada es servir \u00abim\u00e1genes responsive\u00bb generando m\u00faltiples versiones y especificando cu\u00e1les utilizar en tu Html o CSS mediante consultas de medios, tama\u00f1os de ventana gr\u00e1fica, etc.<\/p>\n
Otras soluciones pueden ser el uso de CDN de im\u00e1genes o el uso de formatos de imagen vectorial SVG para escalar a cualquier tama\u00f1o, por ejemplo, iconos.<\/p>\n
- \n
- Aplazar<\/strong> im\u00e1genes fuera de pantalla: identifica todas las p\u00e1ginas que contienen im\u00e1genes ocultas o fuera de pantalla junto con el ahorro potencial. Para evitar este problema, puedes considerar la posibilidad de \u00abcargar perezosamente\u00bb estas im\u00e1genes despu\u00e9s de los recursos cr\u00edticos para reducir el \u00edndice de \u00abTiempo para interactuar\u00bb.<\/li>\n
- Minificar CSS<\/strong>: todas las p\u00e1ginas con archivos CSS sin minificar, junto con el ahorro potencial si se minificaran correctamente.<\/li>\n<\/ul>\n<\/div>
<\/span><\/div>Minificar el CSS mejora el tiempo de carga de la p\u00e1gina porque normalmente el CSS utilizado es mayor de lo necesario. Los archivos CSS pueden contener caracteres innecesarios, como comentarios, espacios en blanco y sangr\u00edas.<\/p>\n
Cuando se ponen en l\u00ednea, estas fuentes pueden eliminarse de forma segura para reducir el tama\u00f1o del archivo sin afectar a la forma en que el navegador procesa los estilos. Esta t\u00e9cnica se llama minificaci\u00f3n.<\/p>\n<\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>Este c\u00f3digo se puede minificar en una l\u00ednea:<\/p>\n<\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>- \n
- Minificar JavaScript<\/strong>: muestra todas las p\u00e1ginas con archivos JavaScript sin minificar, junto con el ahorro potencial. Minificar los archivos JavaScript puede reducir el tama\u00f1o de la carga \u00fatil y el tiempo de an\u00e1lisis del script.
\nLa minificaci\u00f3n es el proceso de eliminar los espacios en blanco y cualquier c\u00f3digo que no sea necesario para crear un archivo de c\u00f3digo m\u00e1s peque\u00f1o pero perfectamente v\u00e1lido. Por ejemplo, Terser es una popular herramienta de compresi\u00f3n de JavaScript. webpack v4 incluye por defecto un plugin para esta biblioteca para crear archivos de compilaci\u00f3n minificados.<\/li>\n- Eliminar<\/strong> CSS no utilizado: identifica las p\u00e1ginas con CSS no utilizado, junto con el ahorro potencial en bytes. Normalmente los desarrolladores lo utilizan para a\u00f1adir hojas de estilo a una p\u00e1gina:<\/li>\n<\/ul>\n<\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>El archivo main.css que descarga el navegador se denomina hoja de estilo externa y se almacena separado del HTML que lo incluye en el c\u00f3digo. As\u00ed, cuando un navegador se encuentra con esta condici\u00f3n, debe descargar, analizar y procesar todas las hojas de estilo externas que encuentre antes de poder servir cualquier contenido en la pantalla del usuario.<\/p>\n
- \n
- Codificar eficazmente<\/strong> las im\u00e1genes: el filtro muestra las p\u00e1ginas con im\u00e1genes no optimizadas, junto con los ahorros potenciales. Lighthouse recopila todas las im\u00e1genes JPEG o BMP de la p\u00e1gina, establece el nivel de compresi\u00f3n de cada imagen en 85 y, a continuaci\u00f3n, compara la versi\u00f3n original con la comprimida. Si el ahorro potencial es de 4 KiB o m\u00e1s, Lighthouse marca la imagen como optimizable.<\/li>\n
- Servir im\u00e1genes en formatos Next-Gen<\/strong>: destaca las p\u00e1ginas con im\u00e1genes servidas en formatos antiguos como jpeg y png. El consejo es utilizar formatos como AVIF y WebP, que tienen caracter\u00edsticas de compresi\u00f3n y calidad superiores.<\/li>\n
- Activar<\/strong> compresi\u00f3n de texto: todas las p\u00e1ginas con recursos basados en texto que no se han comprimido, junto con el ahorro potencial.<\/li>\n
- Preconectar al origen requerido<\/strong>: el filtro identifica todas las p\u00e1ginas que tienen conexiones a dominios distintos del tuyo, pero que todav\u00eda no est\u00e1n priorizando las peticiones fetch con enlaces rel=preconnect, junto con posibles ahorros. Antes de solicitar un recurso a un servidor, el navegador necesita establecer una conexi\u00f3n con el servidor para buscar el nombre de dominio y definirlo en una direcci\u00f3n IP, establecer una conexi\u00f3n con el servidor y cifrar la conexi\u00f3n. En todos estos pasos, el navegador env\u00eda datos y recibe respuestas del servidor, este proceso se denomina \u00abida y vuelta\u00bb y, dependiendo de las condiciones de la red, tarda un tiempo que afecta inexorablemente al rendimiento.<\/li>\n<\/ul>\n
Para optimizarlo, puedes utilizar la \u00abpreconexi\u00f3n\u00bb de los recursos externos (conexiones a otros dominios), que indica al navegador a qu\u00e9 recursos debe conectarse en primer lugar por considerarlos prioritarios.<\/p>\n<\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>Un ejemplo de aplicaci\u00f3n de \u00abpreconectar\u00bb podr\u00eda ser para Google Tag Manager o Google Analytics<\/p>\n<\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>Las \u00abpeticiones de cadena cr\u00edtica\u00bb corresponden a una serie de peticiones de red dependientes e importantes para la correcta renderizaci\u00f3n del documento html.<\/p>\n
- \n
- Reducir los tiempos de respuesta del servidor (TTFB<\/strong>): la velocidad de carga es esencial para una experiencia de usuario adecuada, y los usuarios son muy sensibles a este aspecto. Un sitio que tarda muchos segundos en cargarse tiene tasas de abandono directamente proporcionales. Una de las causas m\u00e1s comunes est\u00e1 relacionada con la lentitud de las respuestas del servidor a la hora de devolver el contenido de la p\u00e1gina al navegador. Este filtro identifica todas las p\u00e1ginas en las que el navegador tuvo que esperar m\u00e1s de 600 ms a la respuesta del servidor en la petici\u00f3n del documento principal.<\/li>\n
- Evitar Redirecciones M\u00faltiples<\/strong>: muestra las p\u00e1ginas que tienen recursos de redirecci\u00f3n, y el ahorro potencial utilizando la URL directa. Los redireccionamientos ralentizan la velocidad de carga de la p\u00e1gina. Cuando un navegador solicita un recurso que ha sido redirigido, el servidor suele devolver una respuesta HTTP como \u00e9sta:<\/li>\n<\/ul>\n<\/div>
<\/span><\/div>y el navegador se ve obligado a realizar otra petici\u00f3n HTTP para recuperar el recurso en la nueva ubicaci\u00f3n. Esta consideraci\u00f3n no pretende prohibir el uso de 3xx, sino al crear cadenas de redirecciones o redirecciones m\u00faltiples en la misma p\u00e1gina.
\nDeben evitarse siempre los redireccionamientos a recursos necesarios para la \u00abruta de renderizado cr\u00edtica\u00bb.<\/p>\n- \n
- Peticiones clave<\/strong> de precarga: identifica las p\u00e1ginas html con elementos que podr\u00edan manejarse con \u00abprecarga\u00bb.
\nCuando se solicita una p\u00e1gina, el navegador solicita la p\u00e1gina html al servidor analizando el contenido y enviando peticiones separadas para cada recurso de referencia incluido en el documento. Para mejorar el rendimiento, se recomienda acelerar este proceso solicitando los recursos cr\u00edticos con antelaci\u00f3n.
\nUn ejemplo de aplicaci\u00f3n podr\u00eda ser la solicitud de una fuente en un archivo CSS, ya que el navegador s\u00f3lo la descubrir\u00eda tras leer la hoja de estilo. Al utilizar la funci\u00f3n \u00abPrecargar\u00bb, vas a precargar y recuperar un recurso que el navegador s\u00f3lo tendr\u00eda en cuenta en una fase posterior, por ejemplo, en peticiones de cadena cr\u00edtica.
\nRecuerda que el navegador almacena en cach\u00e9 el recurso en \u00abprecarga\u00bb sin ejecutar los scripts, pero que, al haberlos considerado ya, los servir\u00e1 inmediatamente una vez solicitados.
\nEsta funcionalidad es muy adecuada para dependencias como JS, fuentes y CSS.<\/li>\n<\/ul>\nEsta funcionalidad es una directiva para que el navegador no bloquee la carga del documento html. <> <> Para implementar la directiva \u00abPrecargar\u00bb, basta con a\u00f1adir la etiqueta enlace en la secci\u00f3n head del html o utilizar la cabecera Enlace HTTP.<\/p>\n<\/div>
<\/span><\/div>- \n
- Utilizar el formato de v\u00eddeo para las im\u00e1genes animadas<\/strong>: identifica las p\u00e1ginas con GIF animados, junto con el ahorro potencial si se convierten a v\u00eddeo.<\/li>\n
- Evitar tama\u00f1o DOM excesivo:<\/strong> identifica todas las p\u00e1ginas que tienen un tama\u00f1o DOM superior a los 1.500 nodos totales recomendados. Considerar el DOM es de vital importancia porque puede afectar negativamente al rendimiento y la eficacia de varias formas:\n
- \n
- A menudo, el DOM incluye muchos nodos que no son visibles para el usuario cuando la p\u00e1gina se carga por primera vez; esta condici\u00f3n aumenta innecesariamente el volumen de datos que hay que servir a los usuarios y ralentiza el tiempo de carga (rendimiento de la carga).<\/li>\n
- Durante la navegaci\u00f3n, se producen numerosas interacciones con la p\u00e1gina web por parte de usuarios y scripts que hacen que el navegador reorganice la posici\u00f3n y el estilo de los nodos en el DOM, creando ralentizaciones en la renderizaci\u00f3n (rendimiento en tiempo de ejecuci\u00f3n).<\/li>\n
- Si JavaScript utiliza selectores de consulta generales como document.querySelectorAll(‘li’), puede almacenar, sin saberlo, referencias a un n\u00famero muy elevado de nodos, lo que puede sobrecargar las capacidades de memoria de los dispositivos de los usuarios (rendimiento de la memoria).<\/li>\n<\/ul>\n<\/li>\n
- Reducir<\/strong> el tiempo de ejecuci\u00f3n de JavaScript: filtra las p\u00e1ginas de informes con un tiempo de ejecuci\u00f3n de JavaScript medio o lento. Cuando una p\u00e1gina html tarda mucho en ejecutar scripts JavaScript, ralentiza el rendimiento:\n
- \n
- aumentar el coste de la red: utilizar m\u00e1s bytes aumenta el tiempo de descarga.<\/li>\n
- El Javascript se analiza y compila en el hilo principal, que no permanece disponible para la interacci\u00f3n del usuario.<\/li>\n
- Ocupar el hilo principal de Javascript tambi\u00e9n retrasa el TTI (Tiempo para Interactuar) penalizando la Ux de la p\u00e1gina y las vitales web dedicadas.<\/li>\n
- Si el Javascript contiene muchas referencias, puede consumir inexorablemente mucha memoria, penalizando la consulta de la p\u00e1gina por parte del usuario.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Para mejorar el rendimiento de la ejecuci\u00f3n de Javascript, generalmente se recomienda \u00abminificar\u00bb y comprimir el c\u00f3digo, eliminar el c\u00f3digo no utilizado y almacenarlo en cach\u00e9.<\/p>\n
- \n
- Servir activos est\u00e1ticos con una pol\u00edtica de cach\u00e9 eficiente<\/strong>: devuelve todas las p\u00e1ginas con recursos que no est\u00e1n \u00aben cach\u00e9\u00bb, junto con el ahorro potencial. Cuando un navegador solicita un recurso, el servidor que lo proporciona puede indicar al navegador durante cu\u00e1nto tiempo debe almacenarlo temporalmente o guardarlo en cach\u00e9. Para cada solicitud posterior de ese recurso, el navegador utiliza su copia local en lugar de obtenerla de la red. Las evaluaciones de Lighthouse tienen en cuenta fuentes, medios, im\u00e1genes u hojas de estilo que respondan con el c\u00f3digo de estado 2xx y no hayan declarado expl\u00edcitamente una \u00abpol\u00edtica de no cach\u00e9\u00bb.<\/li>\n<\/ul>\n
Aqu\u00ed tienes un ejemplo de almacenamiento en cach\u00e9 mediante cabecera HTTP:<\/p>\n<\/div>
<\/span><\/div>La directiva ‘max-age’ indica al navegador cu\u00e1nto tiempo permanecer\u00e1 un recurso en la cach\u00e9. Para los \u00abactivos est\u00e1ticos\u00bb, se recomienda un tiempo no inferior a un a\u00f1o.<\/p>\n
- \n
- Minimizar el trabajo del<\/strong> hilo principal: identifica todas las p\u00e1ginas con tiempos de ejecuci\u00f3n medios o lentos en el hilo principal que penalizan la renderizaci\u00f3n del documento html. El proceso de renderizado del navegador convierte tu c\u00f3digo en una p\u00e1gina web con la que los usuarios pueden interactuar. Por defecto, el hilo principal del proceso de renderizado se encarga de la mayor parte del c\u00f3digo: analiza el HTML y construye el DOM, analiza el CSS y aplica los estilos especificados, y analiza, eval\u00faa y ejecuta el JavaScript.<\/li>\n<\/ul>\n
El hilo principal tambi\u00e9n procesa los eventos de usuario. As\u00ed, cuando el hilo principal est\u00e1 ocupado haciendo otra cosa, la p\u00e1gina web puede no responder a las interacciones del usuario, lo que provoca una mala experiencia. Para mejorar este proceso, recomendamos optimizar el javascript de terceros, eliminar el c\u00f3digo no utilizado, reducir las referencias CSS y simplificarlas (minificarlas), posponer el CSS no cr\u00edtico, dividir las cargas \u00fatiles de javascript.<\/p>\n
- \n
- Garantizar que el texto permanezca visible durante la carga de fuentes web<\/strong>: todas las p\u00e1ginas con fuentes que puedan parpadear o volverse invisibles durante la carga de recursos.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/div><\/div>
- Minimizar el trabajo del<\/strong> hilo principal: identifica todas las p\u00e1ginas con tiempos de ejecuci\u00f3n medios o lentos en el hilo principal que penalizan la renderizaci\u00f3n del documento html. El proceso de renderizado del navegador convierte tu c\u00f3digo en una p\u00e1gina web con la que los usuarios pueden interactuar. Por defecto, el hilo principal del proceso de renderizado se encarga de la mayor parte del c\u00f3digo: analiza el HTML y construye el DOM, analiza el CSS y aplica los estilos especificados, y analiza, eval\u00faa y ejecuta el JavaScript.<\/li>\n<\/ul>\n
- Servir activos est\u00e1ticos con una pol\u00edtica de cach\u00e9 eficiente<\/strong>: devuelve todas las p\u00e1ginas con recursos que no est\u00e1n \u00aben cach\u00e9\u00bb, junto con el ahorro potencial. Cuando un navegador solicita un recurso, el servidor que lo proporciona puede indicar al navegador durante cu\u00e1nto tiempo debe almacenarlo temporalmente o guardarlo en cach\u00e9. Para cada solicitud posterior de ese recurso, el navegador utiliza su copia local en lugar de obtenerla de la red. Las evaluaciones de Lighthouse tienen en cuenta fuentes, medios, im\u00e1genes u hojas de estilo que respondan con el c\u00f3digo de estado 2xx y no hayan declarado expl\u00edcitamente una \u00abpol\u00edtica de no cach\u00e9\u00bb.<\/li>\n<\/ul>\n
- Evitar tama\u00f1o DOM excesivo:<\/strong> identifica todas las p\u00e1ginas que tienen un tama\u00f1o DOM superior a los 1.500 nodos totales recomendados. Considerar el DOM es de vital importancia porque puede afectar negativamente al rendimiento y la eficacia de varias formas:\n
- Utilizar el formato de v\u00eddeo para las im\u00e1genes animadas<\/strong>: identifica las p\u00e1ginas con GIF animados, junto con el ahorro potencial si se convierten a v\u00eddeo.<\/li>\n
- Evitar Redirecciones M\u00faltiples<\/strong>: muestra las p\u00e1ginas que tienen recursos de redirecci\u00f3n, y el ahorro potencial utilizando la URL directa. Los redireccionamientos ralentizan la velocidad de carga de la p\u00e1gina. Cuando un navegador solicita un recurso que ha sido redirigido, el servidor suele devolver una respuesta HTTP como \u00e9sta:<\/li>\n<\/ul>\n<\/div>
- Servir im\u00e1genes en formatos Next-Gen<\/strong>: destaca las p\u00e1ginas con im\u00e1genes servidas en formatos antiguos como jpeg y png. El consejo es utilizar formatos como AVIF y WebP, que tienen caracter\u00edsticas de compresi\u00f3n y calidad superiores.<\/li>\n
- Eliminar<\/strong> CSS no utilizado: identifica las p\u00e1ginas con CSS no utilizado, junto con el ahorro potencial en bytes. Normalmente los desarrolladores lo utilizan para a\u00f1adir hojas de estilo a una p\u00e1gina:<\/li>\n<\/ul>\n<\/div>
- Minificar CSS<\/strong>: todas las p\u00e1ginas con archivos CSS sin minificar, junto con el ahorro potencial si se minificaran correctamente.<\/li>\n<\/ul>\n<\/div>
- Tama\u00f1o correcto<\/strong> de las im\u00e1genes: el filtro resalta todas las p\u00e1ginas que contienen im\u00e1genes de tama\u00f1o incorrecto y destaca el ahorro potencial si se corrigieran.<\/li>\n<\/ul>\n<\/div>
- Eliminar recursos que bloquean la renderizaci\u00f3n<\/strong>: se muestran todas las p\u00e1ginas con recursos que bloquean la \u00abPrimera pintura\u00bb de la p\u00e1gina, junto con los posibles ahorros.<\/li>\n
- Informe de experiencia de usuario de Chrome<\/strong> (CrUX, o \u00abdatos de campo\u00bb) que te permite obtener datos reales de navegaci\u00f3n.<\/li>\n<\/ul>\n
![\"Panoramica](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Report-per-le-performance.png\")
<\/a><\/span><\/div><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[113],"tags":[112,117,115],"class_list":["post-4598","post","type-post","status-publish","format-standard","hentry","category-vision-general-de-screaming-frog","tag-avanzado","tag-fichas-superiores","tag-vision-general"],"acf":[],"yoast_head":"\n