homefinance blog
Siempre que pruebe su sitio web con herramientas de prueba de velocidad, como PageSpeed Insights de Google, Gtmetrix.com, ve el resultado con la pintura primaria y la primera pintura significativa junto con otros valores de velocidad. Estos son valores importantes centrados en el usuario que pueden decirle mucho sobre cuánto tiempo esperan sus visitantes de contenido. Echemos un vistazo a las siguientes dos capturas de pantalla. PageSpeed Insights Ratio de velocidad:
Informe de velocidad gtmetrix.com:
Para cualquier sitio web, estos dos valores indican qué tan rápido se abre el contenido de un sitio web en particular en la pantalla. Es posible que se pregunte cuáles son exactamente esos valores. En este artículo, cubriremos en detalle la primera pintura Contentul (FCP) y la primera pintura significativa (MFP). También discutimos 4 métodos para reducir los tiempos de pintura para su sitio de WordPress para mejorar la puntuación de su comprensión de la página.
Contenido
¿Cuál es la primera pintura (FCP)?
¿Qué es la primera pintura significativa (FMP)?
Cómo acelerar la primera pintura de contenido (FCP) y la primera pintura significativa (FMP)
1. Reduzca el número de CSS y scripts externos que bloquean la representación en la que depende la página.
2. Use el almacenamiento en caché HTTP
3. Reduzca y comprimir elementos basados en texto
4. Optimizar JavaScript
resumen
¿Cuál es la primera pintura (FCP)? First Contentful Paint (FCP) es el primer contenido que se reproduce en la pantalla cuando los usuarios navegan en el sitio. Mide el tiempo desde la navegación hasta el momento en que el navegador reproduce la primera pieza de contenido definida en el modelo de objeto de documento (DOM). Puede ser texto, una imagen o una tela de representación.
En el caso del sitio de WordPress, los elementos del encabezado son el primer contenido que comienza la representación. El visitante ve el logotipo del sitio y el menú de navegación. Hay dos fases en la primera pintura contenida. Primera pintura y la pintura de contenido. Primera pintura: la primera pintura se activa cuando se detecta un navegador. Esto podría ser algo tan sutil y no formativo como un cambio en el color de fondo. El problema con esta sincronización es que las primeras pinturas se pueden activar relativamente temprano en la carga de la página, sin proporcionar necesariamente contenido o información para el consumo.
Los componentes de los sitios web se pueden cargar de manera escalonada y, mientras que un color de fondo se puede pintar rápidamente, la carga de contenido/interactividad real puede llevar más tiempo. Pintura contentful: la primera pintura contentful se activa cuando se pinta el primer contenido en el modelo de objeto de documento (DOM). Esto puede ser texto, una imagen o una tela de representación definida en el domo. Debido a que el contenido se coloca en el contenido, la idea es que esta medición le brinde una idea del momento en que su usuario recibe información consumible, como texto, elementos visuales, etc.
Las diferentes fases de primera pintura y pintura de contenido se presentan en la imagen a continuación:
Las fases de la primera pintura satisfactoria ¿Qué es primero significativo (FMP)? Cuando el contenido de un sitio web está completamente cargado que los usuarios están buscando, esto se llama Primera pintura significativa. Este es el momento en que el usuario siente que el contenido principal de la página es visible. Como su nombre indica después de la primera pintura de juego significativa, proporciona información significativa a los usuarios.
La información significativa difiere de un sitio a otro, pero la práctica general está designando actualmente el valioso contenido conocido como elementos EROE. Los elementos EROE incluyen marcas, imágenes y títulos que probablemente serán más significativos para un usuario cuando visite el sitio, lo que los convierte en buenas señales para la sincronización de FMP. Para un sitio web de blog, los héroes pueden ser publicaciones de blog con imágenes presentadas y para Sitios de redes sociales, los héroes pueden ser cronología, perfil de usuarios. La siguiente imagen muestra un sitio web completamente cargado con temas de ACME.
Cómo acelerar la primera pintura (FCP) y la primera pintura significativa (FMP) para mejorar la primera pintura, acelerar el tiempo de descarga de recursos o hacer menos trabajos que eviten que el navegador juegue contenido DOM. Las siguientes son formas de mejorar la velocidad del sitio web. 1. Reduzca el número de CSS y scripts externos que bloquean la representación en la que depende la página. Esta es la primera forma en que puede reducir el tiempo de pintura de su sitio eliminando los recursos que bloquean la representación. El bloque de renderizado es cualquier cosa que interviene en las formas de reproducir el modelo de objeto de documento (DOM). Un archivo CSS se trata como un recurso que bloquea la reproducción, lo que significa que el navegador no reproducirá ningún contenido procesado hasta que se construya CSSOM. Asegúrese de mantener débil su CSS, entregárselo lo antes posible y use los tipos de medios y la consulta para desbloquear la reproducción.
2. Use la memorización del almacenamiento en caché HTTP en caché HTTP es otra forma de reducir el tiempo de pintura de cualquier sitio web. Cuando alguien visita un sitio web, todo lo que debe mostrarse y trabajarse el sitio debe venir de algún lugar. Todos los textos, imágenes, estilos CSS, scripts, archivos multimedia, etc. deben ser tomados por el navegador para su visualización o ejecución. Puede dar a los opciones del navegador desde donde puede hacerse cargo de un recurso, y esto puede marcar una gran diferencia en la velocidad de carga de su página. 3. Reduzca y comprime los elementos basados en texto. Texto. Si no puede eliminar un archivo porque es esencial, entonces debe reducir el tamaño del archivo tanto como sea posible. Hay formas en que puede reducir el tamaño del archivo, puede reducir o comprimir. Minificación: la minificación se refiere al proceso de eliminación de datos innecesarios o redundantes, sin afectar cómo el navegador procesa el recurso, por ejemplo, el código y el formateo de comentarios , Eliminación del código no utilizado, el uso de nombres más cortos de variables y funciones, etc.
Compresión: compresión Si el proceso de detección de modelos y duplicación en el archivo de texto y los codifica de manera mucho más eficiente.
Ambas técnicas reducen significativamente el tiempo de pintura. 4. Optimizar el archivo JavaScript JavaScript es el archivo más difícil en comparación con otros archivos para un sitio web. Las imágenes, por ejemplo, deben decodificarse, pero JavaScript debe analizarse, compilarse y luego ejecutarse, ocupando mucho tiempo precioso. Puede usar diferentes métodos, como la sacudida de los árboles y la división de código, para optimizar el Javascript. Trasto: Tree Shaking es un término comúnmente utilizado en el contexto de JavaScript para describir la eliminación del código muerto.
División de código: es el proceso de dividir el código en piezas pequeñas y mover las piezas que no son críticas desde la cabeza de su sitio, reduciendo el tiempo para la primera pintura.
Resumen Hablando sobre la reducción del tiempo de carga de la página, esta es solo una perspectiva (solución técnica) que las herramientas de prueba de velocidad tienen en cuenta. Hay varios otros factores que afectan la velocidad de carga del sitio. Tanto la primera pintura Contentul como la primera pintura significativa deberían durar menos de un segundo para la mejor experiencia de usuario. Debido a que estos valores son valores centrados en el usuario que pueden decirle mucho sobre cuánto tiempo esperan sus visitantes de contenido. Por lo tanto, puede seguir los métodos enumerados anteriormente para reducir FCP y FMP. Verifique la velocidad de su sitio a PageSpeed Insights de Google y descubra el estado de su sitio.