homefinance blog
Google aprecia la experiencia de la página mientras clasifica los sitios y para medir la experiencia de la página, Google usará vitales web centrales. Esto no es nada nuevo; Sin embargo, Google continúa mejorando la web vital para medir la actitud del usuario hacia la página web. Si ejecuta un sitio en WordPress, continúe leyendo. En este artículo, explicaré qué cambios debe hacer a su sitio de WordPress para optimizarlo para Core Web Vitals.
¿Qué son Core Web Vitals?
El mayor contenido de contenido (LCP)
Retraso a la primera entrada (FID)
Cambio de apariencia acumulativo (CLS)
La importancia de los elementos web vitales básicos
Herramientas para medir los valores web vitales
Optimizar la experiencia del usuario
Optimizar la pintura más grande llena de contenido
Optimizar el retraso en la primera entrada
Optimizar el cambio de apariencia acumulativo
resumen
¿Qué son Core Web Vitals? Core Web Vitals es un grupo de tres elementos web vitales específicos que Google cree que son capaces de evaluar la experiencia del usuario de la página web.
Estos son los valores que el propietario del sitio web debe medir y debe mejorarse si es necesario. Cada uno de los tres componentes Core Web Vitals es un aspecto separado de la experiencia del usuario. Google siempre trata de proporcionar un mejor resultado a los usuarios y ha probado continuamente varios factores que podrían usarse para medir la experiencia del cliente en una página web. Es un proceso continuo. Por ahora, Google se centra en tres aspectos de la experiencia del usuario: carga, interactividad y estabilidad visual. Core Web Vitals son:
La pintura de contenido más grande: LCP mide el rendimiento de carga de la página web. Un LCP ideal debe ser inferior a 2.5 segundos. Comenzando para la primera entrada: FID mide la interactividad de la página. Un FID ideal debe ser menos de 100 ms.
Cambio de apariencia acumulativo: CLS mide la estabilidad de la página web. Un CLS ideal debe ser inferior a 0.1.
El mayor contenido lleno de LCP de contenido (LCP) mide el rendimiento de carga de la página.
No estamos hablando de la velocidad de cargar la página, sino la velocidad percibida de la página. Significa a qué hora siente el usuario que la página ha sido cargada. La página completa se puede cobrar más tiempo; LCP no mide eso. Mida el tiempo requerido para cargar el primer elemento impresionable de la página. Una página carga elementos con elementos en etapas. Entonces, el contenido principal de la parte superior de sus páginas debe cargarse rápidamente. Cuanto antes suceda, mejor LCP.
LCP no debe exceder los 2.5 segundos. El retraso en la primera entrada de FID mide la primera impresión del usuario con el sitio.
Nuevamente, no estamos hablando de qué tan rápido se carga la página, sino qué tan rápido puede interactuar el usuario con ella. Este valor central web vital captura la primera impresión del usuario con una página hasta que el navegador pueda responder a esa interacción. La interacción puede tener lugar cuando el usuario hace clic en un enlace, toca un botón o usa un formulario personalizado. Cuánto tiempo lleva hasta que se vuelva accesible un enlace. Si el usuario completa un formulario y tiene que esperar a que se cargue la página siguiente, porque el navegador está ocupado cargando otras partes de la página web, entonces el FID es alto. Esto genera frustración, porque el usuario ha completado la información y desea que Pase en la página siguiente.
La demora en la primera entrada de menos de 100 milisegundos brinda a los usuarios una excelente experiencia. El cambio acumulativo de la apariencia de CLS mide la frecuencia de cambiar la apariencia que el usuario debe experimentar durante la carga de la página web. Tal cambio de apariencia inesperado ocurre porque los diferentes recursos de la página están cargados asíncronos o los elementos DOM se agregan a la parte superior del contenido existente. Por ejemplo, anuncios, imágenes, videos, fuentes, títulos: todos cambian sus dimensiones dinámicamente.
Es molesto y frustrante para el usuario, porque es posible que desee hacer clic en algo, luego cambiar y hacer clic accidentalmente en otra cosa.
El puntaje de LS menos de 0.1 ofrece una buena experiencia de usuario. 4 Otros elementos web vitales Además de estos tres elementos vitales web básicos, hay 4 más uso de Google para medir la experiencia de la página.
Deseficiente en dispositivos móviles: Google llora móvil por primera vez. Por lo tanto, debe verificar si su página/sitio está optimizado para su pantalla móvil o no. Navegación segura: Google penaliza regularmente los sitios con enlaces maliciosos y malware. Intersticial interitial: la página no debe tener elementos que bloqueen el contenido principal. Muchos sitios y blogs tienen un cuadro de suscripción en toda la página que oculta el contenido. Junto con estos elementos web vitales, Google también anunció tres elementos web vitales básicos. Con el tiempo, mejorarán y podemos ver más factores para medir la experiencia en la página. La importancia de Google Vital Web Elements no ha implementado Core Web Vitals en el algoritmo de motores de búsqueda, pero lo planea para el próximo año.
Según su notificación:
Sin embargo, estas nuevas señales funcionarán con las otras señales. De esta manera, Google podrá obtener los mejores datos para servir a los usuarios. Sin embargo, la calidad del contenido es la señal superior para la experiencia de la página. Todas estas señales son para cuando todos los blogs de palabras clave tienen contenido de calidad. Luego, Google buscará el sitio que ofrezca la mejor experiencia a los usuarios. Sin embargo, si desea estar antes de los competidores, puede optimizar sus páginas/sitios para centrales vitales web.
Para hacer esto, primero debe medir los elementos vitales. Herramientas para medir los valores vitales de Google en la web proporcionan una amplia gama de herramientas para medir vitales web centrales. Todas las herramientas populares de Google pueden ayudarlo a descubrir problemas de página. Sin embargo, hay dos tipos de pruebas que puede ejecutar. Las herramientas de laboratorio ayudan a ejecutar la prueba en condiciones de laboratorio. Muestra cómo los usuarios potenciales verán su página y le permitirán optimizar la página configurando un medio de prueba. Las herramientas de campo lo ayudan, brindándole información sobre cómo los usuarios reales experimentan su sitio. La medida del navegador Chrome recopila datos de usuarios y, en nombre de estos datos, Google sugiere cambios en las páginas. Aquí hay cinco herramientas fáciles de usar para auditar la página web:
faro
Insights de PageSpeed
Consolas de búsqueda
Extensión web vital
Web.dev
Far Lighthouse es un instrumento para auditar los sitios web de Google que ayudan a los desarrolladores a encontrar los problemas y las oportunidades para mejorar la experiencia del usuario del usuario. Ofrece una perspectiva sobre las diferentes dimensiones de la calidad de la experiencia del usuario, como el rendimiento y la accesibilidad, pero en un entorno de laboratorio.
Con la nueva actualización, Lighthouse 6.0 trae nuevos valores, factores de auditoría y puntajes de rendimiento para la página web. Entre los nuevos valores agregados, dos son la pintura de contenido más grande (LCP) y el cambio de diseño acumulativo (CLS). La tercera medición es el tiempo de bloqueo total (TBT). TBT es una alternativa a FID en condiciones de laboratorio. Estos tres valores también son un factor para calcular la puntuación de rendimiento del faro. Cómo usar el faro: Paso 1: Abra la página en Chrome
Paso 2: Herramientas de desarrollo de Chrome Chrome
Paso 3: haga clic en la pestaña “Lighthouse”.
A partir de ahí, puede generar un informe del faro. También puede instalar la extensión de Chrome Lighthouse y acelerar su tarea. PageSpeed Insights PageSpeed Insights ofrece informes de rendimiento de laboratorio y tierras, tanto para versiones móviles como de escritorio. El instrumento está integrado con el último faro y también ofrece la relación de vital web central.
Las herramientas también proporcionan múltiples recomendaciones para mejorar la experiencia de la página y evaluarlas de acuerdo con la prioridad. Cómo usar PageSpeed:
Paso 1: Abra la página de PageSpeed
Paso 2: Ejecutar
La consola de búsqueda puede encontrar las páginas específicas de su sitio que fallan en los elementos web vitales con la ayuda de la consola de búsqueda. Los datos proporcionados por la consola de búsqueda se basan en usuarios del mundo real. Las páginas del sitio están alineadas por el estado, el tipo de valor y el grupo de direcciones de URL.
El informe que verá se basa en los valores centrales de Web Vitals: LCP, FID y CLS. Después de verificar la prueba de núcleo de núcleo vital fallido, puede ejecutar esas páginas en Lighthouse para una recomendación y optimización específicas. Cómo usar la consola de búsqueda: Paso 1: Abra la consola de búsqueda de Google
Paso 2: elija su sitio
Paso 3: Encuentre la opción “Core Web Vitals” en “Mejoras” del panel izquierdo
La extensión de la extensión de la web vital esta extensión mide solo los valores vitales centrales del núcleo para la versión de escritorio.
Esta es una extensión fácil que solo proporciona información sobre Core Web Vitals y nada más. Web.dev PageSpeed Insights Feed Web.DV Mediciones, pero hace más que sugerir cambios. Le brinda una lista priorizada de mejoras para una experiencia de página y le brinda una guía sobre cómo hacerlo. Similar a PageSpeed Insights, debe ejecutar la auditoría, y luego el resultado le servirá.
Los enlaces en la opción Guía lo llevan a esa página que lo ayuda a resolver este problema. Todas las herramientas de resumen:
Lighthouse: para verificar el rendimiento de la página de Core Web Vitals y otros vitales de Web Web
PageSpeed Insights: para comparar el laboratorio y el rendimiento de la tierra de Core Web Vitals
Consola de búsqueda: para verificar el rendimiento de las páginas populares de su sitio
Vitalos de extensión web: para medir los valores vitales básicos de una sola página de clics
Web.dev: para obtener la lista de prioridades y guía para optimizar la página para obtener elementos vitales
Optimice la experiencia del usuario Paso 1: Identificación de páginas con problemas en las consolas de búsqueda El primer paso es verificar los problemas que muestra la consola de búsqueda de Google. Abra la relación “Core Web Vitals” y busque páginas que requieran atención y mejoras urgentes. Estas son sus páginas clave. Paso 2: Análisis de páginas con PageSpeed Insights Puede abrir los informes de PageSpeed Insight del panel de consola de búsqueda. Haga clic en la URL y un panel se deslizará desde el lado derecho. Después de hacer clic en “PageSpeed Insight”, lo llevará al informe de la nueva pestaña. Lea el informe y busque los motivos del problema. Paso 3: Obtenga datos más específicos en páginas con Lighthouse. PageSpeed y Lighthouse ofrecen las mismas sugerencias e informes; Sin embargo, Lighthouse tiene algunas características adicionales. Por lo tanto, es aconsejable auditar la página con Lighthouse para obtener información adicional. Paso 4: Priorice con Web.dev, recibirá muchas recomendaciones para mejorar la experiencia de la página web;
Sin embargo, debe priorizar los cambios que va a hacer.Se puede hacer con web.dev/mesure o puede hacerlo manualmente.Audite su sitio en la web.dev para obtener una lista priorizada de sugerencias.Paso 5: Resuelva los problemas de su sitio ahora, resuelva cada problema uno por uno.Todas las pruebas que ha realizado le han dado suficientes datos y recomendaciones que sabe qué hacer ahora.Ahora es el momento de actuar.Optimizar el contenido más grande de contenido lleno de contenido aceptable para LCP es de 2.5 segundos.Después de eso, Google no lo considera una buena experiencia de usuario.Para alcanzar la marca de 2.5 segundos, debe optimizar la página para LCP.Las causas más comunes de LCP débil son: tiempos de respuesta lentos
JavaScript y CSS que bloquea la representación
Tiempos de carga de recursos de carga lenta
Juega en el lado del cliente
El tiempo de respuesta lento del servidor del navegador envía la solicitud al servidor, y el servidor responde con los paquetes solicitados. Cuanto más tiempo lleva el navegador el navegador para recibir la respuesta, más la tomará. El tiempo de respuesta más rápido del servidor mejora directamente la velocidad general de la página. Esta es la razón por la cual un alojamiento web fuerte y rápido es esencial para la velocidad de carga rápida del sitio de WordPress. En Servrguy, garantizamos una velocidad de carga del sitio por debajo de 3 segundos. Tener un alojamiento de WordPress de calidad es el primer paso porque todo viene después de eso. Si el tiempo de respuesta del servidor es alto, ninguna otra mejora puede mejorar la velocidad de carga. Para medir el tiempo de respuesta del servidor, puede usar el valor del tiempo para el primer byte. Optimizar el tiempo de respuesta del servidor: optimizar su servidor
Use CDN
Activos de caché
Establecer conexiones de tercera parte temprano
Optimice su servidor si su servidor no está optimizado correctamente, la respuesta llegará tarde. Plataformas CMS como Magento, Joomla, WordPress, etc. Requerir servidores con la configuración específica para el rendimiento ideal. Puede instalar estas plataformas en cualquier servidor, pero para un rendimiento óptimo, debe usar servidores especialmente optimizados. ServarGuy ofrece un servidor optimizado de WordPress, lo que significa que cada host se ha ajustado para funcionar de manera efectiva para la plataforma de WordPress. Por lo tanto, este problema se puede resolver rápidamente obteniendo un mejor alojamiento. Use CDN A Content Delivery Network es una gran red de servidores distribuidos en todo el mundo. El CDN guarda su contenido en el servidor cerca del usuario, y cuando el usuario abre la página nuevamente, el navegador toma la página en el servidor CDN, en lugar del servidor web. De esta manera, el navegador no debe recibir la respuesta del servidor lejos, pero podría hacerse desde el servidor más cercano. Por lo tanto, el tiempo de latencia se reduce y el tiempo de respuesta general se mejora. Hay muchos CDN en ese mundo gratis. Cloudflare es uno de ellos. CDNS que puede usar: Cloudflare
Akamai
Jugos
Keycdn
CDN77
Activos de caché Si la página web es estática y no hay cambios regulares en las páginas, almacenar a un niño local puede aumentar en gran medida la velocidad de carga. El navegador no debe enviar solicitudes para tomar los mismos recursos cada vez, y su carga desde el almacenamiento local será más rápida. Hay muchos complementos de caché de WordPress que puede usar sin costo. El mejor complemento de caché de WordPress:
Caché total W3
Cache WP más rápido
WP Super Cachewp Rocket
Ven al caché
Establecer la página web de la parte de la parte de las conexiones de terceros no solo tiene elementos que se cargan de un solo dominio, sino también más áreas. En este caso, debe decirle al navegador que la página tiene elementos que deben formar la conexión con las terceras aplicaciones. Los navegadores modernos son mucho mejores al anticipar la conexión de terceros, pero marcarían la diferencia si les dijera temprano. La simple adición de rel = preconnect a un enlace es suficiente para decirle a su navegador que su página establecerá una conexión a otra área y sería mejor si el navegador comienza el proceso lo antes posible.
JavaScript y CSS que bloquean la fila del navegador deben analizar el código antes de la página. Y el análisis se detendrá si se encuentra con CSS o JavaScript. El análisis no comenzará nuevamente hasta que el JS se descargue completamente del servidor; Por lo tanto, bloqueará la carga del otro elemento. Esto retrasa FCP y luego LCP. La solución para bloquear la reacción es el aplazamiento de JavaScript y CSS en WordPress. Reduzca el bloqueo de CSS: minimice el CSS: los desarrolladores escriben el código de una manera que es más fácil de leer. Hay tantos espacios, comentarios y hendiduras. La minimización significa eliminar todos los caracteres adicionales del CSS para que el código pueda compilar rápidamente.
Postpone CSS no crítico: hay muchos complementos y temas que, una vez desinstalados, aún dejan el CSS. El navegador no lo necesita, pero todavía está descargado con el otro contenido. Su aplazamiento aumenta la carga de la página. Esto se puede hacer con el complemento autoptimizado.
Vaya a la configuración de selección automática y verifique las opciones de miniificaciones CSS y CSS en línea. Reducir el tiempo de bloqueo de JavaScript Minify JS: similar a CSS, JS también tiene mucho espacio adicional. Su minimización reducirá el tiempo de bloqueo JS. El complemento de autoevaluación tendrá la función de minimizar Java. Lea la guía: ¿Cómo posponer JavaScript en el sitio web de WordPress? Lea también: ¿Cómo minimizar Java y CSS? Tiempos de carga de recursos lentos CSS y JavaScript El tiempo de bloqueo ralentiza la página web y afecta directamente el rendimiento del sitio de WordPress. Pero hay otros tipos de recursos en la página que son lentos. Elementos como: imagen
videos
Fotos detrás del texto
Gifs
LCP se ve afectado por el tiempo requerido para que estos elementos se carguen. Debe asegurarse de que estos archivos se están cargando rápidamente y aquí hay algunas formas de hacer esto:
Optimizar y comprimir las imágenes
Comprimir los archivos de texto
Servicio adaptativo
Memor en activos de caché utilizando un servicio de trabajadores
Optimizar y comprimir las imágenes La mayoría de los sitios de WordPress tienen páginas web con imágenes. Imágenes grandes, carruseles, imágenes de pancartas, anuncios y más. Las imágenes a menudo se hacen gran parte de cualquier página web. Y son esenciales para construir una apariencia interactiva y atractiva. Hay pasos que puede seguir para optimizar y comprimir las imágenes.
No use imágenes (o imágenes) de alta calidad si no es necesario y mantenga el contenido en función del texto.
COMPRESIONES PRISIONES CON TIEMPLES DE WORDPRESS (SMUSH o SUT SHORTPIXEL)
Convierta las imágenes en formato web (JPEG200 o WebP)
Use imágenes receptivas
Implementar una imagen CDN
Comprimir archivos de texto que activen la compresión de GZIP en el sitio web de WordPress pueden reducir significativamente el tamaño del archivo, lo que significa transferencia y descarga más rápida del servidor. La compresión de recursos mejorará el tiempo de carga y el LCP. Consulte con sus proveedores de alojamiento si la compresión GZIP ya está activada. La mayoría de las empresas de alojamiento permiten la compresión por defecto o proporcionan una manera fácil de configurarla. Como servrguy, nuestro alojamiento de WordPress está optimizado para la velocidad. Por lo tanto, no tiene que preocuparse por la compresión de GZIP. Sin embargo, si desea comprimir los archivos de texto, siga nuestra guía para activar la compresión GZIP. Servicio adaptativo El servicio adaptativo significa comprender el dispositivo del usuario y el estado de la red y luego adaptarse a él. Por ejemplo, si la persona usa 4G, entonces la imagen se carga primero y luego el video. Pero si la persona está en el wifi y la velocidad de Internet es alta, entonces el video se está cargando primero. La codificación para esto se vería así: if (navigator.connection && navigator.connection.effectiveType) {if (navigator.connection.EffectivePe == ‘wifi’) {// cargar video} else {// cargar imagen}} útiles útiles Puede usar: navigator.connection.EffectiveType: tipo de conexión efectiva
navigator.connection.savedata: salvador de datos activados/deshabilitados
Navigator.HardWareconConcurrency: Número de núcleos de CPU
navigator.deviceMemory: memoria del dispositivo
Memor en caché Los activos utilizando un servicio de trabajadores de servicio es un script que el navegador carga en segundo plano. Dichos trabajadores de servicio pueden usarse para almacenar activos en caché, para que puedan ser atendidos desde el navegador en lugar del servidor. La memorización de caché de recursos críticos utilizando trabajadores de servicio puede mejorar la velocidad de carga del sitio. No tiene que construir un trabajador de servicios personalizado y hay bibliotecas como la caja de trabajo que facilita la tarea. Juega del lado del cliente Muchos elementos en el sitio web de WordPress usan la representación en el cliente. Por ejemplo, cuando se registra en cualquier sitio, solicita su contraseña dos veces. Si la contraseña no es la misma en ambos cuadros, mostrará la señal de advertencia, justo antes de hacer clic. Este es un ejemplo de representación del lado del cliente, porque el servidor no tiene nada que ver con esta función. Del mismo modo, muchas funciones y opciones funcionan en la representación del cliente. Aunque es útil, pero afecta el LCP si JavaScript está involucrado. Se deben hacer algunas optimizaciones para minimizar los efectos de la reproducción en el cliente en el tiempo LCP del sitio de WordPress. Minimice JS crítico Si el contenido de la página web depende en gran medida de la carga de JavaScript, debe reducir el tamaño del paquete JS tanto como sea posible. Puede hacerlo: minimizando a JavaScript
JavaScript se pospone sin usar
Minimizar los polyumpels no utilizados
Usar el pre-confirmación previo al randing es una técnica más simple para mejorar los sitios de WordPress. En esto, los archivos HTML estáticos se generan en un navegador sin cabeza. Estos archivos se pueden enviar con los paquetes JS que se necesitan para reproducir la página. Optimice el retraso en la primera entrada, el excelente momento para FID es de 100 milisegundos. Además, el retraso se vuelve molesto para el usuario, según los informes de Google Chrome. Es vital tener FID por debajo de 100 ms y debe optimizar los sitios de WordPress para esto. JavaScript Heavy es la causa principal de un FID débil y puede reducirse optimizando JS. Consejos para obtener un mejor FID: divide tareas largas
Optimizar su página para la preparación de interacción
Use un trabajador web
Reducir el tiempo de ejecución de JavaScript
Divide las tareas largas La parte del código que bloquea el hilo principal durante 50 ms o más puede considerarse una carga larga. Después de haber reducido JavaScript en su blog de WordPress, debe buscar estas tareas largas. Puede dividirlos en varias tareas y permitirles ejecutar asíncrono. Puede encontrar tareas largas en las herramientas de desarrolladores de Chrome. Vaya al panel de rendimiento.
El FID del sitio de WordPress mejoraría mucho después del largo desglose del embarazo. Optimice su página para la preparación de la interacción para ejecutar el script en la primera parte: JavaScript es un alto momento de ejecución, y la fragmentación ineficiente ralentiza la interactividad de la página con el usuario, lo que afecta a FID y TBT. Solución: Carga progresiva del código. La carga progresiva significa cargar la carga inicial tan rápido y luego cargar los componentes de la interfaz de usuario solo cuando sea necesario. Ejecución de script de terceros: la mayoría de los sitios de WordPress usan Google Analytics u otros scripts de terceros para realizar varias funciones. Estos scripts de terceros mantienen la red ocupada y, por esta razón, el hilo principal no responde. Solución: No cargue el script hasta que estén más cerca de la ventana de vista. Use un trabajador web La razón principal del retraso de entrada es el bloqueo principal de hilo. Puede ejecutar scripts en segundo plano con trabajadores web. Por ejemplo: Mover Operations No II a un trabajador separado puede reducir el volumen de trabajo del tiempo de hilo principal y, finalmente, mejorará FID. Hay muchas bibliotecas donde puede encontrar el trabajador web para usar.comlink
Forma de trabajo
Trabajar
Reduzca el tiempo de ejecución de JavaScript Como mencioné anteriormente, el tiempo de ejecución de JavaScript es esencial para obtener un mejor FID. La mejor manera de reducir el tiempo de ejecución de JS es reducir el número de JS que se ejecutará. Esto acelerará el proceso general, y el navegador puede comenzar a responder más rápido a la interacción del usuario. Formas de reducir el número JS por página:
Posponido de JavaScript sin usar, no se utilice el relleno
Postpone JavaScript sin usar cuando el navegador se encuentra con JavaScript, tiene todo el código y descarga, analiza, compila y ejecuta ese JavaScript con prioridad.Es por eso que solo debe cargar el JS que es esencial para la página.Puede encontrar el JS no utilizado en la pestaña de cobertura de desarrollador de Chrome.
Hay dos formas de reducir el JavaScript no utilizado. Método 1: División del código: divida el código grande en piezas más pequeñas y las cargó (carga perezosa). Todos los navegadores modernos aceptan sintaxis de importación dinámica. Método 2: Async o diferir: use la etiqueta Async y diferir para todos los scripts de tercera parte que no son necesarias, porque el contenido anterior. minimice los rellenos versátiles no utilizados con cada actualización, se introducen nuevas funciones HTML y JS y facilitan el desarrollo. Pero el problema es que los navegadores no son tan rápidos para implementar estos cambios. Para resolver este problema, el desarrollador utiliza polyfills para funciones que no son aceptadas por los navegadores. Sin embargo, los polyfills surgen con sus desventajas y aumentan su tiempo de FID. La mejor solución es minimizar los polyultos no utilizados o usar polyfills solo cuando sea necesario. Pero no es una tarea fácil. Para obtener más información sobre la optimización de los polyfills, lea este artículo. Cambio de apariencia acumulativa Para una buena experiencia de uso, los sitios de WordPress deben tener una puntuación de menos de 0.1. Los cambios de apariencia pueden distraer la atención y molesto hasta el punto en que los usuarios salen de la página. Tener un puntaje inferior a uno es esencial, de lo contrario, la experiencia del usuario será terrible. Puede optimizar la página para obtener una puntuación CLS óptima. Las causas comunes de un CLS débil son: imágenes sin tamaño
Anuncios, incorporación e iframe falla sin dimensión
Inyección de contenido dinámico
Las imágenes sin tamaño tienen imágenes sin el atributo de ancho y longitud aumentan la puntuación CLS. Como la página se carga de arriba a abajo, deje el espacio en blanco en la página si no se especifica el tamaño de la imagen (longitud y ancho). Al principio, los desarrolladores solían agregar la longitud y el ancho de los atributos de las etiquetas de imagen, pero esas etiquetas estaban en píxeles. Por ejemplo:
Se especifica el tamaño de píxeles, y el navegador deja esa imagen para la imagen. La imagen debe estirarse en 640 × 360 píxeles en el área. Pero luego tuvo lugar el diseño receptivo, y los desarrolladores dejaron de escribir los atributos de ancho y longitud. En cambio, comenzaron a usar CSS para cambiar el tamaño de las imágenes de acuerdo con la pantalla del dispositivo. Ejemplo: img {ancho: 100%; /* o ancho máximo: 100%; */ Altura: auto; } Este enfoque funciona, pero tiene una desventaja. El navegador puede conocer el tamaño de la imagen solo una vez que se descarga la imagen. Y a medida que se carga la imagen, el contenido de la página se restablecería. La apariencia repentina en la pantalla y los usuarios que pierden su posición en la página se han convertido en un lugar común. Para resolver esto, se introdujeron las relaciones de aspecto. La relación de aspecto significa la relación entre el ancho y la altura. Si el navegador conoce un tamaño y una relación de apariencia, entonces puede encontrar el otro. Si camdy.jpg tiene una altura de 360 píxeles, el ancho es de 360 x (16/9) = 640 píxeles
Si Candy.jpg tiene un ancho de 640 px, la altura es de 640 x (9/16) = 360 PX
Sin embargo, la práctica web moderna incluyó el uso avanzado de la relación de apariencia, CSS y SRCSET. WordPress le permite cambiar el tamaño de la imagen en el front-end. Las imágenes receptivas son una característica básica de WordPress, por lo que no tiene que preocuparse por ello. Los anuncios, la incorporación y los marcos de iframe sin anuncios de dimensión son una de las principales razones que contribuyen a la puntuación débil. Los propietarios de sitios a menudo aceptan dimensiones dinámicas de anuncios óptimos de rendimiento/ingresos, porque las grandes dimensiones de los anuncios significan más clics. Pero a veces afecta la experiencia del usuario, porque los grandes anuncios impulsan el contenido que el usuario está tratando de consumir. Las mejores prácticas para evitar tal problema: similar a las imágenes, reserve el lugar para los anuncios.
Si los anuncios no se muestran en el lugar reservado, no restrinja el espacio.
Elija el mejor tamaño de los anuncios, después de verificar los datos históricos
Evite poner anuncios en la parte superior de la página, si lo hace, asegúrese de reservar un lugar
Sin embargo, existe la posibilidad de que los anuncios más pequeños llenen el gran espacio o ningún anuncio, pero el riesgo que deben asumir para una mejor experiencia del usuario. Puede usar varios complementos de inserción de anuncios en WordPress para esta tarea. Los complementos de AD Inserter le darán la opción de establecer el tamaño del punto de anuncios. Incorporar e iframe marcos Puede insertar contenido portátil en la página de WordPress, como YouTube, Google Maps, Tweets, etc. Los navegadores no pueden saber qué tan grande sería esta incorporación. En primer lugar, las incorporaciones son dinámicas y pueden cambiar. WordPress no puede ver el tamaño de la incorporación y no puede reservar un lugar para ellos. Eventualmente, cargarán y afectarán la apariencia de la página. La mejor solución a este problema es evitar el tamaño de la incorporación y dejar un sustituto en la página. Sin embargo, para esto, necesitará un desarrollador web. Inspeccione la incorporación después de cargar y verificar el tamaño
Establecer un sustituyente con el mismo tamaño
Inyección de contenido dinámico Además de los anuncios, hay tanto contenido que los webmasters generalmente intentan presionar, inyectándolos a la parte superior del contenido ya cargado. Un banner de servicio, un formulario, una política de confidencialidad actualizada, tales elementos a menudo perturban la experiencia de la página. Más ejemplo:
¡Regístrese para nuestro boletín!
Contenido similar
Instale nuestra aplicación nativa
Todavía estamos recibiendo pedidos
Notificación de GDPR.
La solución es la misma. Si va a cargar algo, deje suficiente espacio en la página para que no afecte la apariencia de la página. Resumen
Divida tales tareas. El script hasta que esté cerca de la ventana de vista
Preguntas frecuentes ¿Qué son Core Web Vitals? Core Web Vitals son nuevos vitales web introducidos por Google, además de 4 vitales web. Estos valores vitales básicos son LCP (pintura contenta más grande) que mide la velocidad de carga de página percibida, FID (primera pantalla interactiva) mide la interactividad de la página y CLS (desplazamiento acumulativo de diseño) mide la estabilidad de la página web. ¿Es necesario implementar vitales web centrales? Por el momento, puede ignorar Core Web Sitals.
Google no los integra en el algoritmo de clasificación de páginas para 2021. Y según la notificación de Google, le dará seis meses para preparar su sitio.Sin embargo, si desea estar antes de los competidores, puede comenzar a optimizar su página de vital web central.¿Qué tan vitales son los vitales de la web principales como señal de clasificación?El contenido siempre será la señal más poderosa para la clasificación.Sin embargo, cuando todos los factores son similares a los sitios, los vitales de la web central podrían convertirse en un factor decisivo.Palabras finales En esta guía, aprendí: ¿Qué son los vitales de la web central?
LCP en detalle
Fid en detalle
CLS en detalle
Herramientas para medir CWV
Optimización de la experiencia del usuario con CWV
Optimización de LCP
Optimización de FID
CLS de optimización
Espero que esta publicación lo ayude a optimizar su sitio web de WordPress para Core Web Vitals.Si tiene alguna pregunta, puede dejarlas en la sección de comentarios.
