Actualmente, es muy importante administrar las herramientas de SEO en la página, especialmente una de las herramientas de Google llamada PagePeed le ayudará a ver sus datos de velocidad, al igual que con la configuración de la herramienta de búsqueda de las últimas espadas, la velocidad de carga de su sitio web es muy importante. , es decir, que Google se centra en la visión de su sitio para clasificar a los SERPS.
Es por eso que le enseñaré lo que necesita saber sobre las páginas para que pueda calificar para los motores de búsqueda y Google.
¿Qué es el PageSpeed?
La prueba de velocidad de PageSpeed Insights es una herramienta que calcula y muestra el tiempo de carga de la página en el primer paso. Todo lo que tiene que hacer es ingresar su dirección de Internet en el campo proporcionado y listo. Los resultados, es decir, «Page Speed Insights» (información de velocidad de página), se dividen claramente en versiones móviles y de escritorio. Puede cambiar fácilmente entre vistas. Se puede ingresar cualquier URL válida en el motor de escaneo.
Pagespeed es lo rápido que carga tu sitio web, en los últimos años ya no es tan importante para Google, sin embargo, su última actualización se ha enfocado en mejorar la posición de las páginas responsivas Buena respuesta de velocidad de descarga.
Además, un punto importante para que la velocidad de la página de Google considere la velocidad de carga de su sitio web es que si los usuarios se ven afectados por su velocidad de carga, a menudo irán a sus competidores, muchas personas no esperan que cargue la página si usted tener una conexión lenta.
¿Cómo mejorar la velocidad de carga con Pagespeed tools?
Una de las mejores formas para analizar y mejorar la puntuación del pagespeed insights es a través de las seo tools y si en caso no puedes adquirirla, te recomiendo leer mía articulo sobre conjunta herramientas seo que son una buena alternativa a tan elevado costo que te puede dar estas herramientas, las cuales te indicaran cuales son los problemas de tu web, por lo tanto, te invito a conocerlas a continuación.
Herramientas SEO
- SEMrush
- Xovi
- Stage Analyzer
- GT Metrix
- Pingdom Speed Test
- Web Page Test
- KeyCDN Speed Test
- Varvy PageSpeed Optimization
- Yslow
- Google PageSpeed Insights
Estructura de Google PageSpeed Insights
Esta herramienta para medir la Pagespeed Insights tiene un enfoque diferente cuando se refiere a la carga en móvil y la carga en un ordenador. Por lo que te indicara diferentes estadísticas como te enseño a continuación.
Cuando agregas la URL de tu pagina web en Google PageSpeed tendrás diferentes campos.
- Datos de campo: En esta sección se te mostrara un pequeño resumen de los últimos 30 días.
- Datos de experimentos: Aquí se te indicaran los tiempos de inactividad y uso.
- Oportunidades: Esta es una sección muy importante, ya que aquí te indicaran cuales son los puntos críticos a mejorar y que se pueden mejorar rápidamente para optimizar la velocidad de carga.
- Diagnósticos: Otra sección que tienes que considerar, ya que al igual que con “oportunidades” tendrás diferentes puntos que tienes que mejorar.
- Auditorias aprobadas: Esta es la sección de consuelo, donde Google te mostrara lo que estas haciendo bien y lo que debes mantener de esa forma.
¿Qué mide el Pagespeed Test?
El análisis de pagespeed mide e incluye la experiencia de usuario (CrUX para abreviar). Google recibe estos datos de los usuarios que utilizan el navegador Chrome interno y comparten voluntariamente sus estadísticas de uso con Google.
Además, los datos de Lighthouse se incluyen en el análisis. El test de Pagespeed evalúa y mide el rendimiento, así como la facilidad de uso y acceso de la URL indicada.
El resultado que nos muestra el análisis del test Google PageSpeed Insights se muestra mediante el valor de velocidad en una muestra de 0 – 50 – 100. Esto permite una evaluación aproximada y ayuda a comprender el rendimiento del sitio web en unos segundos. Los resultados de PageSpeed Insights contienen más que solo este valor. Más bien, se componen de muchas cifras clave diferentes.
Dependiendo del punto para mejorar la velocidad de carga, Google te mostrara diferentes iconos al inicio de cada línea en el pagespeed test, en la parte superior está el valor de rendimiento, que se muestra en una escala de 0 a 100, que se divide en tres categorías:
- El triangulo rojo indica que es necesario mejorar rápidamente, ya que ese punto esta en un nivel muy bajo, donde marca de 0 a 49 que indica que la web es lenta.
- El cuadrado naranja muestra que debes considerar arreglar el punto cuando puedas que va en un promedio de 50 a 89.
- El circulo verde quiere indicar que son mejoras menos considerables, que no afectan mucho en la carga de la web.
Resumen de datos de campo y origen en Pagespeed
A esto le siguen los datos de campo del CrUX (datos de los últimos 28 días), siempre que estén disponibles para la URL ingresada. Si no es así, aparece el mensaje: «El informe sobre la experiencia del usuario en Chrome no tiene suficientes datos de velocidad real para esta página».
Si los datos de campo están disponibles para el sitio web, la evaluación se refiere a los siguientes valores:
- First Contentful Paint (FCP)indica cuánto tiempo tarda en mostrarse por completo la primera imagen o texto del sitio web.
- First Input Delay (FID)mide el tiempo en el que un usuario puede interactuar por primera vez con el sitio web.
- La pintura de contenido (LCP)Esta mide cuándo la parte más grande de contenido se vuelve visible en la ventana gráfica.
- Cambio de diseño acumulativo (CLS)es el cambio inesperado de elementos de la página mientras el sitio web todavía se está cargando.
- Estos valores de los datos de campo se clasifican a su vez según las velocidades:
Rápido (verde):
FCP: está entre 0 y 1 segundo.
FID: está entre 0 y 0,1 segundos.
LCP: está entre 0 y 2,5 segundos.
CLS: el cambio de diseño acumulativo está entre 0 y 10 por ciento.
Promedio (naranja):
FCP: entre 1 y 3 segundos.
FID: está entre 0,1 y 0,3 segundos.
LCP: está entre 2,5 y 4 segundos.
CLS: el cambio es entre el 10 y el 25 por ciento.
Lento (rojo):
FCP: es superior a 3 segundos.
FID: es más de 0,3 segundos.
LCP: es superior a 4 segundos.
CLS: el cambio es superior al 25 por ciento.
Recomendaciones de Google PageSpeed Insights
En pocas palabras, se debe de prestar toda la atención al momento de optimizar la ruta para el acceso por medio de una representación crítica y con base. Entre estas recomendaciones de Google PageSpeed Insights, tenemos:
Eliminar lenguaje JavaScript y CSS
Para poder lograr lo que es el menor tiempo para la representación, se debe minimizar lo más que se pueda la cantidad de recursos que consume el portal. Minimizando la cantidad de bytes que se descargan o los críticos y pudiendo optimizar lo que es la longitud de su ruta crítica.
Optimizar al usar el JavaScript
En caso de que no se pueda eliminar del todo, los recursos del mismo JavaScript se puede bloquear lo que es el analizador de una manera predeterminada. A no ser que este se encuentre marcado como “async” o se le haya agregado algún fragmento de JavaScript en especial.
Este recurso que suele bloquear el analizador, es el que obliga al mismo navegador a tener que esperar por el CSSOM y así pausar, por lo que el detenimiento del DOM llega a demorar de manera considerable la representación.
Elección de recursos asincrónicos de JavaScript
Esta elección va a desbloquear el analizador de los documentos, permitiendo que el navegador pueda evitar lo que es el bloqueo de CSSOM antes de que pase a la ejecución de secuencia en cuanto a comandos.
Por lo general, dicha secuencia puede generar el atributo conocido como “async”. Esto significa que no llega a ser fundamental para la representación principal. Siendo una excelente idea para cargar aquellos comandos en secuencia de manera asíncrona luego de la primera representación.
Evitando llamadas asincrónicas entre servidores
Otra de las recomendaciones es el uso del método: “navigator.sendBeacon()” para poder limitar aquellos datos que se suelen enviar por medio de XMLHttpRequests en los controladores tipo unload. Esto se debe a que muchos de los navegadores van a tener solicitudes de tipo sincrónicas.
A su vez, esto deriva en un retardo para las transiciones entre páginas. Algunas veces esto se revela en forma prácticamente notable.
Diferir el análisis otorgado al JavaScript
Al momento de minimizar dicho trabajo, se debe esperar que el navegador pueda representar la página. Pudiendo diferir aquellas secuencias en cuanto a los comandos que no han de ser especiales o esenciales para las críticas, tanto para construcción de contenido tipo visible o para la representación que inicia.
Evita que se ejecute de forma prolongada el JavaScript
Una ejecución prolongada va a bloquear el navegador. Esto impide que se pueda hacer construcción del DOM y del CSSOM para la representación de la página. Por ende, se tiene que diferir la lógica y la inicialización para la funcionalidad. Aunque estas no pasen a ser sumamente esenciales para la primera representación.
Sin embargo, si va a ser necesario que se ejecute la secuencia y la inicialización prolongada. Considerándose como una división de diversas etapas para poder permitir que este navegador pueda procesar otro tipo de eventos que se encuentren justamente en medio.
Procura optimizar el CSS
Es completamente necesario para poder dar la construcción de lo que es la representación y el JavaScript. Aunque a veces este último suele bloquear la CSS cuando el portal se encuentra en plena construcción. Por este mismo hecho, hay que asegurarse que la CSS no sea una de las esenciales o que se encuentren marcadas dentro de lo “No crítico”.
Un ejemplo, la impresión y la consulta por otros medios. La cantidad de CSS crítica más el tiempo necesario para que sean acotados de forma posible pero de una forma proporcional.
Colocar CSS como un encabezado
Todos esos recursos como CSS se van a especificar en un documento tipo HTML, de forma que el navegar va a poder detectar las etiquetas y así puede enviar la solicitud para el CSS tan pronto sea posible.
Evitar la importación del CSS
La misma directiva de CSS va a permitir que la hoja de estilo pueda importar las reglas que tengan otro archivo u hojas de ese estilo. Sin embargo, se tiene que evitar aquellas directivas porque van a generar recorridos adicionales a lo que es la ruta crítica: Aquellos recursos CSS que sean importados y que solo se detectan luego de haber recibido y analizado la hoja con estilo CSS por medio de su regla.
CSS integrado que llega a bloquear el analizador
Por último, para poder dar con el mejor rendimiento, se debe considerar la integración de la CSS crítica de manera directa con el documento HTML. Esto llega a eliminar la posibilidad para generar aquellos recorridos extra en cuanto a la ruta crítica, si esto se llega a efectuar correctamente, se puede implementar para dar una extensión con ruta crítica.
Así como si se tratase de “un tour” cuando el HTML va a actuar como un recurso para bloquear.
