homefinance blog
A principios de 2019, Google anunció que evaluará la clasificación de un sitio web que se centra en dos valores de rendimiento: Primer Contentul Paint (FCP) y First Enter Delay (FID). Con el tiempo, el escenario de rendimiento ha evolucionado. Por ejemplo, Google ha anunciado los tres elementos vitales básicos de la web: la pintura de contenido más grande (LCP), el desplazamiento de diseño (CLS) y la primera incrustación (FID). Sin embargo, el valor de la primera pintura contenta continuó desempeñando un papel importante como mediciones del faro (y experiencia del usuario). Representa el 10% de la puntuación de rendimiento general.
Su sitio se puede cargar en menos de 2 segundos en una prueba de velocidad, pero si este no es el caso para la mayoría de su audiencia, Google continuará penalizándolo. En este artículo, descubrirá qué es FCP y por qué es importante. A continuación, pasaremos a diferentes formas en que puede mejorar el FCP en su sitio web de WordPress. ¿Suena emocionante? ¡Vamos a bucear! ¿Cuál es la primera pintura (FCP)? La primera pintura contenta (FCP) es un valor centrado en el usuario para medir la velocidad de carga percibida. FCP mide cómo los usuarios perciben el rendimiento de un sitio web, en lugar de qué mide una herramienta de prueba de velocidad.
El FCP aparece en el segundo cuadro y está marcado por una caja naranja (Fuente: Google) Primera pintura de verst Pint, que es un punto en la cronología de carga de la página donde se detecta cualquier tipo de renderizado. Por otro lado, FCP requiere un contenido particular. Este contenido puede ser texto, imágenes (incluidas imágenes de fondo, logotipos) o lienzo no blanco <B.
La primera pintura satisfactoria en la pestaña Tiempos en Gtmetrix, la primera pintura llena también difiere del mayor dolor contento (LCP), uno de los vitales de la red central que mide cuánto tiempo lleva hacer que el elemento más grande sea visible en la ventana de la vista. Sigue siendo simple, usted, usted, usted, usted, usted Puede pensar en el FCP como en el momento requerido para ver cualquier contenido en su navegador. Por lo tanto, un FCP rápido calma al usuario de que algo sucede y lo mantiene pegado al sitio. ¿Cómo medir FCP? FCP se puede medir mediante pruebas de laboratorio y experiencia real (datos de campo). Aquí hay algunas herramientas que puede usar para medir FCP:
faro
WebPagetest
Devtools de Chrome
Insights de PageSpeed
Informe sobre la experiencia del usuario Chrome
Monitoreo del rendimiento de Firebase (beta)
Google mide el 75 porcentaje de páginas de carga en su sitio, segmentado tanto en dispositivos móviles como en escritorio. Esto asegura que sea una representación exacta de la experiencia del usuario.
| ¿Quieres saber más sobre Lighthouse? ¡Lea nuestro artículo sobre cómo mejorar su puntaje de rendimiento (incluida la nota de FCP)! Según Google, FCP debería tener lugar en 1.8 segundos o menos. Esto proporciona una buena experiencia de usuario para los visitantes de su sitio. Si su sitio, FCP toma más de 3 segundos, se considera lento. Según la investigación, más del 53% de los dispositivos móviles usan un sitio si tarda más de 3 segundos en cargarse. Tómate esta medida en serio. Cómo mejorar el tiempo para la primera pintura de contenido (FCP) en WordPress ahora que hemos abordado lo que es FCP y por qué es importante, aquí hay algunas formas de acelerar su sitio de WordPress reduciendo su tiempo: 1. Reduzca el tiempo de respuesta del servidor (TTFB) El tiempo de respuesta del servidor o el tiempo a First Byte (TTFB) es el tiempo requerido para que un navegador reciba el primer byte de la página web. La ecuación TTFB FCP depende de más que TTFB, pero es el primer paso para llegar allí. FCP = TTFB + Tiempo de carga de contenido + Tiempo de juego Debido a que FCP depende mucho de TTFB, es el factor más importante que necesita optimizar para mejorar el FCP. Hay muchas formas de reducir TTFB en WordPress. Como se detalla en el artículo, las tres formas más simples de reducir TTFB son: Elija un proveedor de alojamiento rápido, puede consultar el artículo de WP Rocket sobre el alojamiento web para conocer los factores que necesita considerar para elegir una excelente solución de alojamiento web. Idealmente, elija un host con servidores que se encuentren cerca de sus usuarios. Use una CDN de calidad CDN de calidad puede ayudar a acelerar la entrega de recursos estáticos de su sitio, como imágenes, videos y scripts. Esto reducirá significativamente la latencia de la red entre el servidor y los usuarios. Para obtener más información sobre cómo elegir el mejor CDN para su sitio, consulte la guía WP Rocket CDN. Caction el almacenamiento de caché para su sitio web. La mayoría de los proveedores de alojamiento de WordPress gestionados más altos han activado el servidor en el caché, así que consulte con ellos para ver lo que ofrecen. Si desea ir más allá, WP Rocket se integra con WordPress en todo tipo de hosts para acelerar su sitio. 2. Elimine los recursos que bloquean una página web es presentada por el navegador después de reunir muchos elementos, como HTML, hojas de estilo CSS, scripts JavaScript e importaciones HTML.  Un documento HTML en sí incluye varias etiquetas, pero la mayoría de los navegadores analizan rápidamente. Pero este no es el caso del análisis CSS y JS. Por lo general, el navegador intentará descargar todos los elementos de la página web primero, analizarlos todos y luego recuperar la página web. La mayoría de las veces, el tamaño de los documentos HTML es mucho más pequeño en comparación con el de las hojas de estilo CSS y los guiones JS. El número de recursos CSS y JS generalmente está en la parte superior. Entonces, cuando el usuario solicite una página web, el navegador ya habría recibido el contenido HTML, pero continuará esperando todos los demás recursos antes de la página. Como resultado, se denominan recursos de recursos de recursos. Este comportamiento reduce la FCP considerable. Por lo tanto, para mejorar el FCP, debe eliminar estos recursos que bloquean la representación. Puede hacerlo a través de los siguientes modos: recursos críticos en línea primero, identifique los scripts y estilos críticos que se necesitan para reproducir su página web. Aquí hay una guía simple de Google sobre cómo identificar recursos críticos. Una vez que haya identificado scripts críticos, debe eliminarlos del recurso de bloqueo de resurrección y luego insertarlos en su página HTML con las etiquetas y . Al hacer esto, se asegurará de que la página web tenga todo lo que necesita para administrar la funcionalidad básica cuando se cargue. Posponga los recursos no críticos para los recursos que no son críticos, debe marcar la URL con atributos asíncronos o pospuestos. Es aconsejable agregar el atributo de deferencia a la URL de los scripts no críticos. Esto ordena al navegador que ejecute el archivo de script solo después de que el documento HTML se haya analizado por completo. Así es como puede posponer un archivo de script: Para hojas de estilo que no son críticas, se recomienda agregar un atributo asíncrono a la URL a para ellos. Esto le dice al navegador que cargue estilos asíncronos, mientras que el resto de los elementos de la página continúan cargándose ininterrumpidamente. Debido a que las hojas de estilo están cargadas con la etiqueta , no hay una forma directa de aplicar su atributo asíncrono. Pero hay una solución y así es como puede implementarla: Elimine todo lo que no se use al identificar recursos críticos, puede encontrar un código que no se usa en la página web. Eliminar cualquier código no utilizado, como eliminar JavaScript no utilizado, lo ayudará a optimizar su página web. Si no se siente cómodo en la manipulación del código, WP Rocket es la forma más sencilla de posponer los archivos de JavaScript con solo unos pocos clics. Mapee JavaScript sin esfuerzo con WP Rocket, puede optimizar la entrega de CSS con WP Rocket para eliminar las hojas de estilo que bloquea las bloqueas que bloquea el Bloqueo. representación. El siguiente punto cubre esta función. 3. Genere CSS de ruta crítica y en línea si ha establecido CSS para cargar asíncrono, el navegador mostrará a los usuarios inútiles antes de que se carguen los estilos necesarios. Este comportamiento se conoce como el destello de contenido sin estilo (FOUC) y es una experiencia desagradable para los usuarios. Para evitar FOUC, debe generar CSS de ruta crítica e ingresarlo directamente en el archivo HTML. Carga de la página con CSS que bloquea la representación (UP) vs. CSS Critic Inlineat (Down) (Fuente: Google) Pero, ¿qué es exactamente la ruta crítica CSS? Critical Rath CSS es el CSS mínimo requerido para mostrar la primera parte de una página web (por encima de la página) del usuario. El análisis manual de la vía crítica del navegador y luego generar el CSS Crítico es un proceso agotador. Está más allá del propósito de este artículo. Sin embargo, puede usar herramientas en línea gratuitas como Pegasaas para generar CSS de ruta crítica. Funciona perfectamente para la mayoría de los casos de uso. Consulte Google Analizando rutas de reproducción crítica para obtener más información. Después de generar CSS de ruta crítica, debe ingresarlo en el documento HTML. El navegador ahora puede jugar la primera parte de la página web inmediatamente sin esperar a que las hojas de estilo CSS se carguen asíncronas. Esto mejora el FCP considerable. Alternativamente, puede usar WP Rocket para automatizar este proceso. WP Rocket elimina fácilmente el CSS que bloquea la representación de configurar la entrega de CSS optimizado en el cohete WP generará CSS de ruta crítica para todo tipo de páginas de WordPress e integrarálas. Y si realiza personalizaciones o cambia su tema, será automáticamente y crítico CSS de ruta. Para obtener más detalles, puede leer cómo WP Rocket administra CSS Critic. 4. Evite los elementos basados en script por encima del pliegue, sin importar qué tan bien tenga JavaScript, es más lento en comparación con el procesamiento HTML simple. Cualquier cosa que requiera JS puede tener un impacto negativo en FCP. Aunque puede integrar scripts críticos, aún deben ser cargados y analizados. Cuando se trata de mejorar el FCP, cada milisegundo importa. Este es un tiempo de carga valioso que lo daña al puntaje FCP. Para muchos elementos basados en el script FCP, muchos temas incluyen elementos fantasiosos sobre la página que usan muchos scripts. Lo mismo es cierto para el uso de constructores de páginas que agrega muchos estilos y scripts innecesarios. Por lo tanto, elija el tema de su sitio sabiamente utilizando un tema rápido y bien codificado, como GeneratePress o Astra, puede ayudar a reducir el FCP. Como regla general, intente evitar usar estos elementos sobre la página de su sitio: Animaciones pesadas de cualquier tipo Complementos deslizantes  Redes sociales o complementos compartidos  Mega complementos  Incorporar como Google Ads  5. Evite la carga perezosa de imágenes sobre la página La carga perezosa de imágenes es una de las formas más fáciles de acelerar su sitio, especialmente si tiene un sitio web rico.Desde un punto de vista técnico, la carga perezosa es un script que retrasa la carga de imágenes y marcos que aún no son visibles en la ventana de vista del navegador.Cuando el usuario se ejecute, las imágenes se cargarán a medida que aparecen. WP Rocket te ayuda a activar fácilmente la carga perezosa para imágenes porque la carga perezosa requiere el uso de JavaScript antes de que el navegador pueda reproducir imágenes, puede retrasar FCP. Por lo tanto, debe excluir las imágenes presentes sobre el pliegue de la carga perezosa. La mayoría de los complementos de carga folclóricos ya incluyen esta función. Idealmente, busque un enchufe de carga perezoso que le permita excluir imágenes no solo por nombres de archivos, sino también otras etiquetas, como clase, ID, atributos o imágenes en un campo en particular. WP Rocket acepta desactivar la carga perezosa en ciertas imágenes. Puede deshabilitarlo para una imagen, una clase de imágenes, según la fuente de la imagen e incluso para Avatal. Nota: La carga perezosa de las imágenes se ha agregado al núcleo de WordPress y se convertirá en una característica nativa que comienza con WordPress 5.5. También acepta filtros para personalizar el comportamiento de carga perezosa. 6. Las imágenes esenciales en línea HTML y CSS le dan una forma de incluir imágenes usando formatos Base64 o SVG. Estos se llaman datos. Al ingresar todas las imágenes sobre la página, el navegador no debe hacer solicitudes HTTP adicionales para descargarlas. Esto puede ayudar a mejorar FCP. Elimine los recursos que bloquean la representación por encima de la página para mejorar el FCP, algunas de las imágenes más comunes por encima del pliegue que puede incorporar son: logo Íconos (búsqueda, redes sociales, etc.) Imagen de banner antecedentes ¿Qué son las imágenes Base64 y SVG? Base64 es un algoritmo de codificación que convierte cualquier tipo de datos, incluidas las imágenes, en el texto. Puede incorporar imágenes codificadas Base64 directamente en archivos HTML o CSS. Es una excelente manera de acelerar los tiempos de carga para imágenes más pequeñas. Base64 Image Coder es una excelente herramienta gratuita para convertir cualquier formato de imagen a Base64. Acepta formatos de imagen JPEG, PNG, WebP, SVG y BMP en línea con codificación base. .custom-class {fondo: url (fecha: imagen/jpeg; base64,/9j/… [contenido] … ‘); } Los gráficos vectoriales escalables (SVG) es un formato de imagen para gráficos vectoriales. Las imágenes SVG tienen archivos más pequeños, pueden ser escalas de cualquier tamaño sin perder calidad y se ve muy bien en todos los dispositivos. Si su imagen tiene formas, curvas y contornos simples (por ejemplo, logotipos e iconos), entonces seguramente se puede guardar como SVG. Nota: El uso de una imagen SVG como fuente dentro de una etiqueta difiere de la introducción de una imagen SVG directa a través de la etiqueta . Así es como puede en línea los SVG en HTML: >  Es una buena idea comprimir o reducir las imágenes (si SVG) antes de integrarlas. Si sus imágenes están en formato ráster (JPEG o PNG), use Base64. Si se pueden convertir en formato vectorial, use SVG. Dondequiera que pueda usar una URL como fuente de la imagen, puede pegar la imagen codificada de base allí. Si se codifica alguna imagen o icono dentro de su tema o complementos, debe encontrarlos manualmente y reemplazar la URL de origen con imágenes construidas. Un complemento como la búsqueda y el reemplazo pueden ayudarlo a hacerlo fácilmente. Hay varias desventajas de las imágenes en línea: aumenta el tamaño de las imágenes (generalmente en un 30%).  Aumente el tamaño de la página y, por lo tanto, TTFB.  Las imágenes en línea no pueden ser entregadas por CDN. Desde mi experiencia, si puede mantener el tamaño de la página por debajo de 100 kb, la alineación de imágenes no es un problema. Cualquier otra cosa más allá de esto puede afectarlo TTFB y, por lo tanto, puede dañar FCP más de lo que mejora. Además, si utiliza algo como CloudFlare para servir a su sitio web, puede configurarlo para almacenar los recursos HTML en caché. Se recomienda activar esta función si y solo si el contenido de su sitio es en gran medida estático. 7. Optimizar el tamaño DOM del modelo de objeto de documento de su sitio (DOM) es una representación de todos los objetos que componen una página web. Gráficamente, se representa como un árbol con nodos y objetos ramificados. La representación estructurada de DOM facilita la modificación de sus elementos con un lenguaje de secuencias de comandos como JavaScript. El árbol DOM HTML con sus objetos, todos los elementos HTML en un árbol DOM se llaman nodos. Los nodos pueden ramificarse en varios elementos, todos pueden ramificarse más y así sucesivamente. Qué tan profunda se ramifica se llama la profundidad del nudo. La profundidad del nodo de todo el árbol DOM se llama profundidad del eje. Todos los elementos ramificados inmediatos de un nodo se llaman elementos infantiles. Tener un árbol de domo grande puede tener un impacto negativo en FCP por varias razones: un árbol DOM neo optimizado incluye muchos nodos que no son visibles para el usuario durante las etapas iniciales de la carga de la página. Un gran tamaño de DOM significa que se necesita más tiempo de procesamiento para calcular y elegante todos los nodos, ambos pueden reducir la velocidad. Un gran árbol de domo también puede abrumar el rendimiento del rendimiento de la memoria de su usuario.  Evite el gran tamaño DOM para optimizar las páginas web de FCP Google Signals con árboles DOM: Más de 1.500 nudos en total Profundidad mayor de 32 nudos Un nudo padre con más de 60 nudos secundarios ¿Cómo reducir el tamaño de DOM? En general, debe crear nodos DOM solo cuando sea necesario y destruir los nodos que no son necesarios. Sin embargo, este consejo no se aplica a la mayoría de los sitios de WordPress, porque la creación del DOM generalmente es proporcionada por temas, complementos, constructores de páginas y el propio WordPress. Aquí hay algunos consejos para ayudarlo a reducir el tamaño de DOM: Divida las páginas grandes en las más pequeñas.  Cargue tantos elementos HTML lo más justo posible. Comentarios de página, publicaciones, productos, etc. Limite el número de publicaciones que se muestran en su página de inicio y páginas de archivo. No oculte contenido no deseado con CSS.En su lugar, elimínelo por completo. Evite usar generadores de páginas hinchadas que inserten etiquetas innecesarias .  Elija temas bien optimizados (p. Ej., GeneratePress o Astra). No use complementos que agregan demasiadas etiquetas (por ejemplo, complementos de menú de mega).8. Asegúrese de que el texto permanezca visible al cargar las fuentes de fuentes web suele ser archivos grandes y requiere mucho tiempo para cargarse.Es posible que haya encontrado un error como este en Lighthouse: Lighthouse señala las direcciones de URL de las fuentes que conducen a un rayo de texto invisible (Fuente: Google) Hay una razón por la cual Google señala este comportamiento. Algunos navegadores no jugarán texto hasta que todas las fuentes estén cargadas. Esto causa lo que se conoce como flash de texto invisible (FOIT). Puede solucionar esto obligando al navegador a mostrar temporalmente una fuente del sistema mientras carga las fuentes personalizadas. Simplemente agregue la pantalla de fuente: cambie a @estilo orientado a la fuente para evitar FOIT en casi todos los navegadores modernos. Aquí hay un ejemplo de cómo puede aplicar esto: @Font-Facing {Font-Family: ‘Pacifico’; Estilo de fuente: normal; Font-peso: 400; SRC: local (‘Pacifico regular’), local (‘pacífico-regular’), url (https://fonts.sample.com/pacifico.wof2) formato (‘wof2’); Font-Display: intercambio; } Si importa fuentes directamente desde un CDN (por ejemplo, Google Font), entonces puede hacer lo mismo agregando el parámetro & display = swap al final de la URL. > 9. Use sugerencias de recursos Cuando un usuario visita un sitio web, el navegador solicita el documento HTML del servidor, lo analiza, envía solicitudes separadas para cualquier otro recurso mencionado y, después de cargarlos y analizarlos, reproduce la página web. Como desarrollador, usted sabe cuáles son los recursos más importantes para su sitio. Con este conocimiento, puede establecer esos recursos críticos para cargar temprano y acelerar la carga de la página. Las sugerencias de recursos del navegador son la forma en que puede hacer esto. Algunos índices de recursos se aplican a los recursos en la página actual, mientras que otros se aplican a posibles páginas futuras. Todas las sugerencias de recursos utilizan el atributo REL de la etiqueta para activar. Tome DNS que se asuma si carga cualquier material desde un sitio web externo, agregando que el parámetro DNS-prefetch le indicará al navegador que resuelva el DNS de la URL lo antes posible. Así es como agregar DNS a los recursos: WP cohete facilita la adición de todas las áreas externas a las tomadas de antemano. Tome las solicitudes DNS en WP Rocket si usa mucho código de terceros, agregar el parámetro DNS-Prefetch es muy útil para acelerar la carga de la página. ¡Puedes usar prejuicio gratuito! Herramienta en línea para averiguar qué campos externos puede agregar a la lista preliminar de Take -Up. Preconexión preconnección funciona igual que la precarga de DNS, excepto que no se detiene al resolver DNS. También continuará y establecerá el apretón de manos TCP y la negociación TLS (si la hay). Se puede utilizar de la siguiente manera: Tenga en cuenta que el pre -Control puede ocupar un valioso tiempo de procesamiento, especialmente para conexiones seguras. Haga cargo si está seguro de que se utilizará un recurso en el futuro, entonces puede sugerir que el navegador lo tome de inmediato y lo almacene en el navegador. A diferencia de la precarga de DNS, aquí le dice al navegador que comience a cargar el recurso de inmediato. Así es como puede dirigir el navegador que tome un recurso: Cómo funciona la precarga (fuente: KeyCDN) La adquisición puede ser ignorada por el navegador si el archivo solicitado es demasiado alto o la velocidad de la red es baja. Por ejemplo, Firefox se hace cargo de los recursos solo cuando el navegador está inactivo. Enseñar esto es la indicación más fuerte de recursos. Agregar el parámetro Prerendlish a un recurso obliga al navegador a cargar todos sus activos, analizarlos, crear un árbol DOM, aplicar estilos, ejecutar scripts, reproducir la página web y mantenerlo listo para transmitir. Si visita la URL mencionada en el HREF más adelante, la página se le cobrará instantáneamente. Esta es la forma en que enseña un recurso: La presentación de la página de destino principal es una excelente manera de aumentar el número de conversiones. Precarga en oposición a la precarga, que actúa más bien como una sugerencia del navegador, la indicación de recursos precargados ordena al navegador que cobre los activos, sin importar lo que crea. El navegador no puede ignorar la directiva precarga. … … Cuanto antes el navegador comience a solicitar los enlaces de precarga declarados, más rápido sus sugerencias de recursos no pueden ayudar. Pero cada página posterior que visiten se mostrará mucho más rápido. Debido a que Google usa datos de uso real para evaluar la velocidad de un sitio web, las sugerencias de recursos ayudarán a mejorar su sitio FCP con WP Rocket, puede aplicar fácilmente la precarga de DNS y precargar a cualquier recurso en sus páginas. Web. Alternativamente, también puede usar un complemento gratuito, como sugerencias de recursos pre* de la fiesta para activar manualmente los recursos en su sitio de WordPress. 10. Evite múltiples páginas redirige cuando visite una URL que se ha redirigido a otra URL, el servidor devolverá una respuesta con el código de estado de redirección HTTP. Se verá así en la consola de su navegador: HTTP/1.1 301 se movió permanentemente ubicación:/ URL/TO/NUEVO/Ubicación Una respuesta de redirección obliga al navegador a hacer otra solicitud HTTP a la nueva ubicación. Esto generalmente retrasa la carga de la página web con cientos de milisegundos. Si su página tiene más redireccionamientos, puede disminuir considerablemente a FCP. Evite la redireccionamiento de varias páginas (Fuente: Google) Páginas de señales de faro que tienen dos o más redirecciones. Para evitar múltiples redireccionamientos, dirija los recursos informados directamente al destino final. Además, si un recurso es parte de la ruta crítica de reproducir su página, elimine las redirecciones que provienen de ella.    
Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.
Tags 10 formas probadas de mejorar la primera pintura (FCP) en WordPress Related ArticlesCheck Also |
