Estás leyendo la publicación: Funciones de Chrome Canary para SEO técnico
Construir para la web es más difícil que nunca. Cada día se implementan mejores tecnologías móviles y estándares web.
Entonces, ¿cómo se mantienen los sitios web?
Los planes de datos ilimitados son un lujo. Pero, ¿cuántos datos se descargan al visitar un sitio web y cuál es el impacto ambiental de nuestra web hoy?
El índice móvil primero del motor de búsqueda de Google prioriza los sitios web que ofrecen experiencias de página suaves como la mantequilla. ¿Su empresa realiza envíos teniendo en cuenta la visibilidad de búsqueda?
Los desarrolladores tienen mucha influencia en el éxito del rendimiento de un sitio en Google, pero ¿siempre se centran en la búsqueda?
Los buenos desarrolladores logran un equilibrio entre la estética y el rendimiento del sitio web. ¿Su equipo está estableciendo presupuestos de rendimiento web con objetivos medibles?
En este artículo, exploro formas de mejorar la comunicación con su equipo de desarrollo. Las herramientas para desarrolladores de Chrome tienen los datos que los desarrolladores necesitan para solucionar problemas más rápido.
Veremos cómo el navegador Canary es un gran lugar para comenzar una auditoría técnica de SEO.
Compartiré nuevas actualizaciones de funciones que los profesionales de SEO deberían probar hoy.
Cómo Chrome lanza nuevas funciones
Canario es la versión de lanzamiento anticipado de Google Chrome.
comunicados de Google sus características en cuatro etapas las llama canales de liberación. Los canales son Canary, Dev, Beta y Stable. cromo canario, Betay desarrollador se puede instalar en paralelo en Android, Mac, Windows y Linux.
Los ingenieros de Chrome prueban las funciones nuevas en usuarios reales para ver si tienen algún problema antes de lanzar la función al siguiente canal.
Captura de pantalla de YouTube, agosto de 2022
Canary recibe las actualizaciones primero con lanzamientos nocturnos a las 2 a. m. PST. Obtiene las últimas funciones, experimentos de navegador y API de plataforma web. Las actualizaciones también incluyen correcciones de errores, mejoras en el navegador, limpieza de código, seguridad y protección.
Las funciones se iteran durante un ciclo de lanzamiento de seis semanas antes de publicarse en todos 3.2B de usuarios.
Los usuarios pueden probar las próximas funciones en sus sitios web, aplicaciones web, sistema de administración de contenido (CMS), temas y complementos. Informan errores y dan su opinión sobre nuevas características.
No todas las características superan a Canary. El navegador experimental es utilizado por entusiastas de los navegadores, desarrolladores, usuarios empresariales y profesionales técnicos de SEO.
Depuración de SEO con herramientas para desarrolladores
Chrome DevTools es un kit de herramientas de navegador de diagnóstico para probar sitios web dentro del navegador. Los desarrolladores prueban, crean y mantienen sitios web con instrumentos que miden el rendimiento de la velocidad de la página.
Las herramientas del navegador prueban el rendimiento del sitio web en diferentes condiciones. Le da una ventaja inicial en la reparación de sitios web.
Para los desarrolladores, las herramientas son casi tan importantes como el propio navegador.
No hay necesidad de esperar a que termine un rastreo largo y costoso; Puede encontrar problemas técnicos de SEO y presentarlos de inmediato con Canary.
Configuración de Chrome Canary para SEO
Los sitios web deben funcionar bien en diferentes ubicaciones, dispositivos y redes. DevTools le permite simular la navegación en diferentes lugares y a velocidades más lentas.
Configure Canary para navegar como el agente de usuario de Googlebot en la configuración de Chrome.
Eche un vistazo a lo que Google ve cuando carga un sitio.
Captura de pantalla del panel de condiciones de red de Chrome DevTools, diciembre de 2022
No permita que las extensiones del navegador interfieran con la precisión de sus pruebas.
Descargue Canary como un navegador independiente dedicado a la auditoría y depuración técnica de SEO.
Solución de problemas técnicos de SEO Plug and Scan en Canary
Chrome DevTools te permite mirar debajo del capó de un sitio web.
Prueba e imprime informes de rendimiento detallados en segundos, pero puede abrumarlo al principio.
Los profesionales técnicos de SEO inspeccionan la web de la misma manera que los mecánicos solucionan los problemas de los automóviles; Conectamos y escaneamos sitios en las herramientas del navegador y analizamos cómo se cargan y responden.
Con Canary puedes registrar y medir momentos clave como la carga de la página, la navegación y las interacciones del usuario. También puede obtener códigos de estado, lecturas de Core Web Vitals (CWV), gráficos en cascada y de línea de tiempo, y mucho más.
Captura de pantalla de YouTube, mayo de 2021
A veces, la solución de problemas en Canary solo apunta a un síntoma en lugar del problema. Las herramientas más capaces ofrecen lecturas avanzadas, pero el proceso de solución de problemas sigue siendo el mismo.
Auditoría Técnica SEO Con Google Chrome Canary
Google quiere que los sitios web se carguen rápido, pero una página no se clasificará bien si Googlebot no comprende el contenido principal.
DevTools puede medir y ayudar a depurar la entrega y el rendimiento del sitio web.
Audite y depure problemas de Javascript, CSS y CWV con Canary.
Use DevTools para verificar sus páginas y plantillas de inmediato.
Captura de pantalla de YouTube, mayo de 2022
Es útil ver cómo un sitio guía a los visitantes y a los rastreadores de Google. Verifique los enlaces internos, la duplicación de contenido, los enlaces rotos, las imágenes faltantes y las páginas 404.
Verifique sus metadatos en la página para ver si está todo allí y optimizado. Busque problemas de datos estructurados e investigue el contenido que Google no indexó debido a problemas de procesamiento de JavaScript.
Acelera la configuración de la red para examinar la latencia en diferentes condiciones web y analiza el rendimiento del tiempo de ejecución del sitio web para identificar cuellos de botella.
Busque oportunidades para optimizar su entrega de contenido.
Compruebe cómo se cargan y procesan los recursos de un sitio. No todos los recursos son iguales: una mejor entrega de recursos puede mejorar la experiencia del usuario.
Uso de DevTools en Canary para auditorías técnicas de sitios web de SEO
Los siguientes son algunos de los casos de uso populares en DevTools para profesionales de SEO:
Faro
- Una auditoría basada en puntajes de rendimiento, accesibilidad, mejores prácticas, SEO y PWA.
- Información procesable para mejorar el rendimiento.
Panel de red
- Emulación del rastreador del motor de búsqueda.
- Simulación de estado y velocidad de la red.
- Solicitudes de red e información de conexiones por cuadro.
- Información de carga y renderizado de recursos.
- Gráfico de cascada visual de los recursos del sitio web a medida que se descargan.
- Respuestas del servidor.
Panel de rendimiento
Otros flujos de trabajo de SEO DevTools
- Deshabilitar la configuración de JS para depurar problemas de Javascript SEO.
- Pruebas de dispositivos móviles.
- Comprobaciones de accesibilidad.
- Pruebas remotas de navegador sin cabeza.
- Pruebas y automatización programáticas del navegador DevTools.
¿Necesita ayuda para hacer un caso de negocios para SEO?
Utilice los datos para demostrar el valor del SEO técnico.
Evalúa el rendimiento del sitio y compara la entrega de contenido con la de tus competidores.
Captura de pantalla de Looker Studio, diciembre de 2022
Use Canary para mantenerse al día con su sitio a medida que cambia.
Ecosistema de desarrollo del navegador Chrome
La estrategia de desarrollo de software de Chrome ejecuta varias implementaciones continuas y paralelas. Este método le permite ejecutar pruebas A/B y de capacidad.
Los ingenieros de Chrome automatizan las reversiones de funciones y evitan los inicios en frío y los tiempos de inactividad. Es un proceso simplificado que proporciona un control granular de la versión del navegador.
Asegúrese de realizar un seguimiento de las funciones a medida que evolucionan en cada canal. Lea resúmenes de características y comprenda qué problemas comerciales pueden resolver.
Unirse a la conversación.
Chromestatus.com realiza un seguimiento de las características a medida que avanzan. Suscríbete a la Blog del desarrollador de Chrome para estar al día con la Herramientas y bibliotecas de Chrome.
Captura de pantalla de ChromeStatus.com, diciembre de 2022
Funciones experimentales de DevTools en Chrome Canary
Nuevo panel de información de rendimiento en Chrome DevTools
Los atletas profesionales ven videos de juegos para comprender su desempeño. De manera similar, el panel Performance Insights le permite reproducir y compartir grabaciones de la carga de una página web.
Panel de rendimiento de Chrome DevTools, diciembre de 2022
El nuevo panel se envió con Chrome 102. Es una actualización simplificada del panel Rendimiento que brinda información sin necesidad de una comprensión técnica profunda de la representación del navegador.
El panel tiene una interfaz de usuario simple para medir el rendimiento de CWV de carga de página. Brinda información procesable de la página, encuentra solicitudes de bloqueo de procesamiento, cambios de diseño y más.
Los lanzamientos futuros ampliarán los casos de uso como prueba de interactividad.
Comparta los retrasos de la red en su ruta de representación crítica y muestre la actividad de la GPU para los fotogramas caídos que hacen que su sitio se retrase.
Ahorre tiempo a sus desarrolladores y adjunte grabaciones de rendimiento al enviar tickets. Muéstreles exactamente lo que está mal con sus páginas para inspirar la acción de inmediato.
Nuevas actualizaciones del panel de la grabadora en Chrome DevTools
El panel Grabador es una función experimental que brinda información sobre el flujo de usuarios.
Registra el rendimiento del tiempo de ejecución para flujos de usuario de varios pasos a través del Panel de rendimiento.
Utilice esta función para audite los flujos de usuarios de su sitio web principal actuación.
La mayoría de los usuarios interactúan con su sitio después de que se carga. Por lo tanto, es una buena idea registrar las interacciones del usuario, como hacer clic, desplazarse y navegar. Registre y edite sus flujos de usuario para condiciones de red simuladas.
Además, registre un flujo de pago de comercio electrónico y mida el rendimiento del pago configurando diferentes pasos para agregar al carrito.
También puede crear una secuencia de comandos para cargar una página y hacer clic en un botón o enlace y medir su CWV.
Captura de pantalla de Chrome DevTools Recorder Panel, diciembre de 2022
Google enumera el soporte para varias propiedades de entrada del usuario.
Detecta automáticamente los selectores ARIA y CSS. También puede agregar selectores de datos * personalizados utilizados por los marcos JS y CSS populares. Lo último Lanzamiento de cromo 108 apoyo ampliado a Selectores de texto y XPath.
Las páginas pueden cargarse rápido pero ejecutarse lentamente, y una experiencia de usuario deficiente tiene un impacto en la percepción de su marca.
Asegúrese de que los visitantes no abandonen un sitio porque se congeló cuando hicieron clic.
Exportación de secuencias de comandos del panel de la grabadora para reproducción de terceros
Exporte sus principales grabaciones de flujo de usuario a diferentes formatos para herramientas de prueba de front-end populares.
Utilice las exportaciones JSON para editar flujos e importarlos nuevamente a Recorder y ver repeticiones.
Exporte scripts personalizados con extensiones de Chrome.
Existe soporte para exportar grabaciones a la biblioteca Node.js Puppeteer de Google. También puede usarlos con Cypress, Nightwatch, Sauce Labs y TestCafe.
Captura de pantalla de Chrome DevTools Recorder Panel, diciembre de 2022
Automatice las pruebas de navegadores autónomos con Puppeteer
La navegación sin cabeza es cuando visitas un sitio web sin la interfaz de usuario del navegador. Puede iniciar Chrome en segundo plano en su computadora y operar las herramientas del navegador.
Puppeteer Chrome es una API que se ejecuta sobre el protocolo DevTools. Titiritero también puede ejecutar pruebas de navegador sin usar la interfaz de usuario de Chrome a través del modo sin cabeza.
Configure pruebas periódicas automáticas de CWV y tome capturas de pantalla de sus páginas cargando en diferentes dispositivos y redes. Los desarrolladores automatizan los envíos de formularios y las pruebas de interfaz de usuario.
Automatice los informes de rendimiento de la velocidad de su página.
Chrome te permite trabajar de manera más inteligente, no más difícil. Los desarrolladores ahorran mucho tiempo, y tú también puedes hacerlo cuando realizas auditorías técnicas de SEO con Canary.
Automatice los seguimientos de la línea de tiempo para pruebas sintéticas
Las pruebas sintéticas son grabaciones de seguimiento de línea de tiempo de diferentes navegadores, dispositivos y redes.
Synthetic simula pruebas de rendimiento para la experiencia del mundo real de su usuario.
Configure grabaciones de flujo de usuario en el Panel de grabadoras y exporte el script a una prueba de página web. Puede exporte scripts de Recorder personalizados a través de la extensión WebPage Test Recorder.
Pruebas de API de plataforma web en Chrome Canary
El equipo de ingeniería de Chrome publica API experimentales.
Las herramientas y empresas de terceros dependen de ellas para probar nuevas funciones. Las pruebas de origen son como indicadores de características: se desactivan y no siempre llegan a Chrome estable.
La documentación de la propuesta de funciones brinda contexto y explica cómo pueden ayudar a los usuarios.
Comprobar el estado de Indicadores de características de Chrome y API en chromestatus.com.
Captura de pantalla de YouTube, agosto de 2022
Los desarrolladores usan API para pruebas de rendimiento web automatizadas. Los proveedores de análisis de Real User Monitoring (RUM) usan las API de Chrome para rastrear e informar los CWV de los usuarios reales.
Chrome se basa en el Proyecto de código abierto Chromium y los errores se rastrean en el Rastreador de errores de cromo.
Pruebas de caché atrás/adelante para una navegación de página fluida
Los navegadores modernos agregaron recientemente una función que carga las páginas más rápido usando un nuevo tipo de caché.
El caché Atrás/Adelante (bfcache) captura una instantánea de la página en la memoria del navegador cuando la visitas.
Captura de pantalla de la prueba bfcache de Chrome DevTools, diciembre de 2022
Recarga páginas sin realizar una nueva solicitud de red a su servidor.
Los usuarios que navegan de regreso a una página visitada anteriormente en su sitio obtienen una experiencia de carga de página más rápida. La carga desde bfcache es más rápida que la caché HTTP tradicional, ya que evita que el visitante descargue datos adicionales.
La versión estable de Chrome 96 envió la prueba bfcache en el panel de aplicaciones. Comprueba las páginas si se está implementando el almacenamiento en caché Atrás/Adelante.
Corrección de informes insuficientes de análisis de la función del navegador Bfcache
La optimización del navegador bfcache es automática, pero no impacto CWV. Las herramientas de análisis pueden subestimar las páginas vistas porque una página se carga desde su bfcache.
¿Su análisis está configurado para detectar cuándo se carga una página desde bfcache?
Pruebe su sitio web para bfcache para asegurarse de que sus páginas importantes lo estén sirviendo.
Esté atento cuando sus páginas ya no se publiquen desde bfcache.
Nueva actualización de la API de prueba de caché atrás/adelante
La nueva función API NotRestoredReason mejora el informe de errores para problemas de bfcache. Ayuda a comprender por qué una página no está sirviendo el caché a los visitantes que regresan.
La API se enviará con Chrome estable 111.
Identificación de recursos de bloqueo de procesamiento con la API de rendimiento
Las herramientas RUM no tenían una forma sencilla de verificar si un recurso estaba bloqueando la representación.
Chrome 107 envió una nueva función para la API de rendimiento que identifica los recursos que bloquean el renderizado. Esta actualización ayuda a los usuarios de RUM a ahorrar tiempo y optimizar las rutas de representación.
El Panel de rendimiento ayuda a identificar los recursos que bloquean el renderizado, como CSS, que retrasan la carga de un sitio.
Cuando un navegador se encuentra con una hoja de estilo, mantiene la carga de la página hasta que termina de leer el archivo. Un navegador necesita comprender el diseño y el diseño de una página antes de que pueda representar y pintar un sitio web.
Los desarrolladores pueden ayudar a minimizar el recálculo, el estilo y el repintado para evitar la ralentización del sitio web.
Informes de códigos de estado de respuesta HTTP mejorados para la API de sincronización de recursos
La API de temporización de recursos no admitía la notificación de códigos de respuesta fallidos. Chrome 109 se enviará con una nueva función para la API de rendimiento que captura los códigos de respuesta HTTP.
Los desarrolladores y SEO ahora pueden segmentar su análisis RUM para visitas a la página que resultan en Códigos de respuesta 4XX y 5XX.
El futuro de Core Web Vitals está aquí
Google posee 86% de la cuota de mercado de los motores de búsqueda y los comandos de Chrome 66% de la cuota de mercado mundial de navegadores.
Google lanzó sus métricas Core Web Vitals (CWV) de rendimiento web en 2020 para ayudar a cuantificar la experiencia del usuario en una página web.
First Input Delay (FID) es un CWV que mide la interactividad de una página.
Desde que se lanzó por primera vez como una métrica, las personas han estado mejorando el FID de sus sitios web, y hoy lo están aplastando. 92% de los sitios web ahora tienen una buena puntuación FID para usuarios móviles y el 100 % para usuarios de escritorio.
Pero FID solo prueba la primera interacción del usuario. No mide la experiencia del usuario más allá de la carga inicial de la página.
Según Jeremey Wagner,
“El uso de Chrome muestra que 90% de la actividad de un usuario ocurre después de la carga de la página inicial”.
Google lanzó recientemente la métrica experimental Interaction to Next Paint (INP) en E/S de Google 2022 – y pronto podría reemplazar a FID como la métrica de campo de interactividad de CWV.
INP pinta una imagen más precisa de la experiencia interactiva del usuario. Captura la actividad de clics, toques, teclado y tabulación desplazada, y también mide el tiempo de respuesta promedio de la página para cualquier interacción que ocurra.
Captura de pantalla de YouTube, noviembre de 2022
El archivo HTTP informó una correlación más fuerte del tiempo de bloqueo total (TBT) con INP sobre FID.
Google continúa experimentando y refinando INP.
Los sitios optimizados para INP tendrán una ventaja competitiva cuando Google evolucione más allá de FID.
¿Está su sitio web listo para cuando INP se convierta en un CWV y afecte la clasificación?
Reflexiones finales sobre el uso de Chrome Canary para SEO
Para tener un buen desempeño y una puntuación alta en usabilidad, un sitio debe verse, sentirse, navegar y cargarse rápido, y también ser accesible. El diseño encantador y la navegación rápida permiten una mejor visibilidad en la búsqueda.
Estamos viendo sitios web con mejor apariencia ahora, pero a veces puede tener el costo de una buena experiencia de usuario. Los equipos de desarrollo deben considerar el costo ambiental de enviar sitios web inflados.
Un sitio web se carga de la forma en que nuestros desarrolladores los construyen.
Los desarrolladores deben tener en cuenta el diseño, el contenido, el rendimiento, la accesibilidad, los marcos, las redes y los dispositivos. Necesitan crear sitios mientras equilibran las prioridades de marketing, administración y SEO.
Los profesionales y desarrolladores de SEO pueden trabajar juntos para impulsar un mejor rendimiento del sitio web. Las herramientas listas para usar de Google ofrecen un excelente punto de partida para la auditoría técnica de SEO.
DevTools ayuda a reducir el tiempo de depuración y resolución de problemas, mientras que Canary le permite optimizar los informes de CWV con la automatización del navegador.
Encuentre y comparta los datos que sus desarrolladores necesitan para comenzar a solucionar los problemas de SEO de inmediato.
Más recursos:
