Contenidos
Descubra 10 formas en que puede optimizar la velocidad de su página, brindar una excelente experiencia a sus visitantes y ayudar a mejorar su clasificación SERP.
Esta publicación fue patrocinada por DebugBear Las opiniones expresadas en este artículo son propias del patrocinador.
¿Quieres un sitio web que ocupe un lugar destacado en Google y genere buenas conversiones?
Asegurarse de que sus páginas se carguen rápidamente es importante para brindar una buena experiencia de usuario.
Y las tres métricas Core Web Vitals que introdujo Google han sido una señal de clasificación desde hace varios años. Core Web Vitals metrics
¿No estás seguro de cómo abordar la optimización de tus Core Web Vitals?
1 Utilice Google Search Console para comprobar si la velocidad de la página está afectando su SEO
Google Search Console incluye un informe Core Web Vitals de alto nivel que le indica si hay páginas en su sitio web que deben optimizarse para su velocidad. Google recopila datos de velocidad de esta página de usuarios reales de Chrome. includes a high-level Core Web Vitals report
Puede hacer clic en los problemas individuales en la sección «Por qué las URL no se consideran buenas» y descubrir qué páginas se ven afectadas por el problema.
Tenga en cuenta que Search Console agrupa páginas similares, por lo que, por ejemplo, el valor de pintura con contenido más grande (LCP) para la «URL de ejemplo» no necesariamente coincide con el valor general del «LCP del grupo». Largest Contentful Paint (LCP)
2 Ejecute una prueba de velocidad de página gratuita
Realizar una prueba de velocidad de un sitio web en línea le indica qué tan rápido se carga su sitio web, lo ayuda a comprender la velocidad de su página y brinda recomendaciones sobre cómo mejorarla. Simplemente ingrese la URL de su sitio web para generar un informe. online website speed test
Puede hacer clic en cada métrica para obtener más información sobre qué factores influyen en el valor de la métrica. Por ejemplo, muchos hitos de carga de páginas se pueden explicar observando una visualización en cascada de solicitudes que muestra cuándo comienzan y terminan de cargarse los diferentes recursos de la página. request waterfall visualization
La vista de tira de película en la parte superior de la cascada le permite correlacionar lo que sucede en la red con lo que sus visitantes pueden ver.
También puede ver el rendimiento de su sitio web en los datos del Informe de experiencia del usuario de Chrome (CrUX) del usuario real. Estos son los datos que Google utiliza como señal de clasificación. Chrome User Experience Report (CrUX)
Finalmente, puede encontrar recomendaciones de velocidad de página específicas para su sitio web en la parte inferior de la pestaña «Descripción general».
3 Observe cómo se renderiza su sitio web cuadro por cuadro
Al cargar su sitio web en una conexión de red rápida, probablemente se cargue en uno o dos segundos. Demasiado rápido para ver realmente lo que está pasando paso a paso.
El uso de la limitación de red en Chrome DevTools le permite ver cómo se carga su sitio web en una conexión más lenta Puede ver cómo aparece el contenido gradualmente y utilizar esa comprensión del proceso de carga durante sus esfuerzos de optimización. network throttling in Chrome DevTools
Siga estos pasos para cargar su sitio web usando una conexión más lenta:
- Haga clic derecho en la página y haga clic en «Inspeccionar».
- Abra la pestaña «Red».
- Abra el menú desplegable «Sin limitación» y seleccione «3G rápido».
- Vuelva a cargar la página.
En el siguiente ejemplo puedes ver que:
- La página comienza a renderizarse con un fondo estático antes de que aparezca la imagen de fondo.
- Inicialmente se utiliza una fuente alternativa hasta que se haya cargado la fuente web.
- La imagen del centro aparece al final.
Grabación de vídeo del proceso de renderizado de un sitio web en DebugBear, octubre de 2023
También puede utilizar la prueba gratuita DebugBear para recorrer el proceso de renderizado fotograma a fotograma. O descargue la grabación como MP4 con una suscripción paga a DebugBear. free DebugBear test
Grabación de vídeo del proceso de renderizado de un sitio web en DebugBear, octubre de 2023
4 Concéntrese en los elementos básicos de la web en lugar de en su puntuación Lighthouse
La herramienta Lighthouse de Google se utiliza ampliamente para probar el rendimiento de un sitio web Es fácil de ejecutar y ofrece un conjunto de recomendaciones prácticas para mejorar su sitio web. Lighthouse tool
Sin embargo, la puntuación Lighthouse Performance no es una señal de clasificación SEO. Muchos sitios tienen una puntuación Lighthouse baja o media, pero obtienen buenos resultados en las tres métricas de Core Web Vitals en los datos de usuarios reales que afectan las clasificaciones.
Lighthouse es bueno para probar su sitio web en un entorno fijo y le permite ejecutar pruebas antes y después en su sitio web antes de que los datos reales actualizados del usuario estén disponibles. Pero lo que finalmente cuenta es cómo los visitantes reales experimentan su sitio web.
5 Optimice los recursos de bloqueo de renderizado
Los recursos de bloqueo de renderizado son archivos que deben cargarse en su sitio web antes de que los navegadores puedan mostrar cualquier contenido al usuario. Los archivos CSS y JavaScript en la página
a menudo bloquean la representación. Render-blocking resourcesA continuación se muestra un ejemplo de cascada de solicitudes que muestra cómo los archivos que bloquean el procesamiento afectan el proceso de procesamiento de su sitio web.
- El navegador comienza con una página en blanco.
- El documento HTML está cargado.
- Se cargan varios recursos de bloqueo de renderizado (nos centraremos en app.css como el archivo más grande y más lento).
- Una vez que se carga app.css, la página se representa (como lo indica la tarea naranja de la CPU en la cascada).
- Finalmente, el contenido de la página comienza a hacerse visible en la vista de tira de película.
Cargar muchos recursos que bloquean el procesamiento hará que el contenido de la página aparezca más lentamente y afectará su puntaje de pintura con contenido más grande.
Mejore el tiempo de respuesta del servidor
Cargar el documento HTML inicial es el primer paso para cargar un sitio web La métrica de tiempo hasta el primer byte (TTFB) mide la rapidez con la que su servidor web responde a una solicitud de este recurso. The Time to First Byte
Reducir la cantidad de solicitudes de bloqueo de renderizado
La mejor manera de hacer que su sitio web se cargue más rápidamente es reducir la cantidad de recursos que bloquean la renderización. Si un archivo no es necesario para comenzar a renderizar contenido, entonces no debería bloquear la renderización.
Por ejemplo, las palabras clave defer y async en la etiqueta script le indican al navegador que se debe cargar un archivo JavaScript, pero que la página puede comenzar a procesarse antes de eso. defer and async keywords
<script src="app.js" async>Cargue recursos de bloqueo de renderizado más rápidamente
Para mantener el tiempo de bloqueo de renderizado lo más corto posible, puede reducir el tamaño de los archivos que bloquean el renderizado para acelerar la descarga.
Cargar estos recursos desde el mismo dominio del sitio web que el documento HTML también acelera estas solicitudes, ya que no se necesitan conexiones de servidor web adicionales. web server connections
6 Cargue imágenes con la prioridad correcta
Algunos recursos de la página son esenciales para que la página se cargue y otros pueden cargarse más adelante en el ciclo de vida de la página. Sólo hay una cantidad limitada de ancho de banda disponible en una conexión de red, por lo que conviene dar a los navegadores pistas adecuadas sobre si un recurso es importante o puede esperar hasta más tarde.
Esto es especialmente cierto para las imágenes de su sitio web. Cuando se mira solo el navegador HTML, no se puede distinguir si una imagen aparece como imagen principal o como un pequeño ícono en el pie de página del sitio web. Sólo cuando el navegador comienza a mostrar contenido se da cuenta de qué imágenes son importantes.
Para imágenes importantes, puede utilizar el atributo fetchpriority para indicarle al navegador que comience a cargar una imagen antes: fetchpriority attribute
<img src="hero.jpg" fetchpriority="high">Por el contrario, a las imágenes que se encuentran más abajo en la página se les puede quitar prioridad diciéndole al navegador que solo comience a cargarlas cuando estén a punto de aparecer en la ventana gráfica. El atributo de carga img hace que esto sea fácil de implementar: img loading attribute
<img src="icon.png" loading="lazy">7 Minimizar el peso de la página
El peso de la página mide cuántos bytes de datos deben descargarse para cargar una página web. Cuantos más datos deban transferirse, más tardará la descarga La mejor manera de reducir el peso de la página depende del tipo de recursos que más contribuyen a la métrica general. Page weight
Para reducir el tamaño de las imágenes, puede utilizar formatos de imagen modernos como WebP o Avif. Estos formatos utilizan menos espacio para almacenar el mismo contenido que los archivos PNG o JPEG. modern image formats like WebP or Avif
Si los archivos de texto como documentos HTML, hojas de estilo CSS o código JavaScript contribuyen al peso de su página, verifique si está utilizando algoritmos de compresión HTTP como Brotli. HTTP compression algorithms like Brotli
8 Comprender las cadenas de solicitudes de red
Para cargar recursos importantes rápidamente, desea comenzar a cargarlos lo antes posible. El navegador necesita descubrir rápidamente el recurso desde el principio, lo que significa que se debe hacer referencia a él en el documento HTML.
Sin embargo, a veces se forman cadenas de solicitudes secuenciales más largas al cargar un sitio web. En el siguiente ejemplo, solo se hace referencia a la imagen de fondo desde dentro de una hoja de estilos CSS. En consecuencia, la solicitud de red para la imagen solo comienza después de que la hoja de estilo haya terminado de descargarse.
En estos casos, las sugerencias de carga previa en el documento HTML pueden indicarle al navegador que cargue recursos antes de que, de otro modo, sean descubiertos. Por ejemplo: preloads hints
<link rel="preload" href="background.png" as="image" />9 Utilice la representación del lado del servidor para aplicaciones de una sola página
Las aplicaciones de una sola página son sitios web donde el contenido de la página se genera mediante código JavaScript en el navegador. A menudo se crean utilizando marcos de codificación como React, Vue o Angular.
La ventaja de las aplicaciones de una sola página es que las transiciones de página ocurren sin recargar completamente todo el contenido de la página. Una vez que se carga una página, la navegación a una URL diferente en el sitio web suele ser rápida.
Sin embargo, la carga inicial de la página suele ser más lenta con aplicaciones de una sola página, ya que es necesario cargar y ejecutar el código de la aplicación para mostrar el contenido de la página. Es posible que los visitantes solo vean inicialmente una rueda giratoria o un marcador de posición de contenido mientras esperan que la página se cargue por completo.
Para solucionar este problema, el contenido de la página inicial se debe representar en el servidor, utilizando la representación del lado del servidor. De esa manera, el contenido de la página se carga como un documento HTML tradicional al principio y luego pasa a una aplicación del lado del cliente. server-side rendering
10 Supervise continuamente la velocidad de su página
Realizar una prueba de velocidad en su sitio web le indica qué tan rápido es su sitio web hoy y qué puede hacer para mejorarlo.
Sin embargo, monitorear continuamente su sitio web con DebugBear ayuda a su equipo a estar al tanto de los problemas de rendimiento del sitio web y garantiza que reciba alertas si hay un problema. Tener el historial disponible a lo largo del tiempo le ayuda a comunicarse con la administración y facilita la investigación de problemas recién introducidos. continuously monitoring your website with DebugBear
Los datos de Google Core Web Vitals se agregan durante un período de 28 días, por lo que cuando se produce una regresión, tarda un tiempo en mostrarse en los datos de Google. Programar pruebas diarias garantiza que reciba notificaciones sobre nuevos problemas antes de que afecten su clasificación.
Esta captura de pantalla muestra un ejemplo de una regresión de pintura con contenido más grande que aparece primero en los datos de laboratorio y luego, gradualmente, comienza a aumentar los datos de Google.
DebugBear también proporciona una función de Experimentos que le permite probar mejoras en la velocidad del sitio sin tener que implementar código. De esa manera podrás ir a tu desarrollo con ideas concretas y una estimación del impacto en el rendimiento que tendrán.
Puede seleccionar entre más de 20 ubicaciones de prueba, analizar páginas que requieren inicio de sesión o que están alojadas en un servidor provisional y realizar un seguimiento de sus puntuaciones de rendimiento, accesibilidad y SEO de Lighthouse.
Además de ejecutar pruebas de laboratorio programadas, DebugBear también ofrece monitoreo de la velocidad de la página del usuario real. Al instalar un fragmento de análisis, puede ver en qué parte de su sitio web sus visitantes están teniendo una buena experiencia y en qué páginas necesita trabajar. real-user page speed monitoring
Mientras que los datos de laboratorio analizan un único tipo consistente de experiencia, los datos de usuarios reales capturan mejor toda la diversidad de experiencias de los visitantes. Algunos visitantes tendrán conexiones móviles lentas, utilizarán un navegador antiguo o visitarán su sitio web desde una ubicación alejada del servidor de su sitio web.
El monitoreo de usuarios reales también le permite depurar la nueva métrica Interacción con Next Paint (INP) que se convertirá en uno de los Core Web Vitals de Google en marzo de 2024. Interaction to Next Paint
La capacidad de respuesta de su sitio web para un usuario depende en gran medida de a qué responde su sitio web: ¿con qué elemento de la página intenta interactuar el usuario?
Con estos datos, sabrá en qué interacciones centrarse cuando decida optimizar INP.
DebugBear proporciona un conjunto completo de funciones de monitoreo de la velocidad de la página que permiten a su equipo brindar excelentes experiencias. ¡Regístrese para una prueba gratuita hoy! Sign up for a free trial today!
¿Listo para comenzar a optimizar su sitio web? DebugBear
Créditos de imagen
Imagen destacada: Imagen de DebugBear Usado con permiso.
Leer el articulo original en Search Engine Journal.
