El rendimiento de una página web es mucho más importante de lo que puedes imaginar, no solo afecta la percepción que tienen los usuarios de tu negocio, también es una señal de un sitio de calidad.
La otra razón importante para considerar mejorar el rendimiento de tu sitio web es que se trata de un factor SEO para los motores de búsqueda.
Mejorar el FCP de tu sitio WordPress es una tarea complicada, pero estos consejos pueden ayudarte a obtener buenos resultados.
¿Que es el First Contentful Paint?
Es una de las métricas de rendimiento web definidas por Chrome y que tienen el propósito de determinar si un sitio web es lento, desde el punto de vista del usuario.
El FCP mide el tiempo que tarda tu página web en pintar cualquier contenido (texto o imágenes) en la pantalla del navegador.
Puedes encontrar una descripción mucho más completa en web.dev (sitio oficial de Google).
¿Por qué es importante mejorar el FCP de mi sitio web en WordPress?
Desde el 2010 Google reconoce oficialmente que la velocidad de un sitio web puede afectar la posición de tu sitio web en los resultados de búsqueda.
De manera personal considero que los factores de rendimiento son muy importantes y no solo por cuestiones de SEO.
En una página web muy lenta es bastante común encontrar que el porcentaje de rebote (usuarios que salen del sitio sin navegar a otra página) es demasiado alto.
Y es fácil de entender, por qué las personas detestan los sitios lentos y poco responsivos.
Estudio: Analizando el FCP de los primeros 10 resultados
A modo de ejercicio hice un pequeño estudio: Analice el FCP de los 100 sitios que devuelve la busqueda de Google para la consulta «Que es el SEO».
El FCP de los primeros 20 resultados son los siguientes:
| URL | Tiempo (ms) | Duración |
|---|---|---|
| https://rockcontent.com/es/blog/que-es-seo/ | 2707.58 | 2.7 s |
| https://rockcontent.com/es/blog/que-es-seo/ | 2252.38 | 2.3 s |
| https://www.iebschool.com/blog/que-es-seo-social-y-como-puede-ayudar-a-mi-estrategia-de-seo-sem/ | 1379.13 | 1.4 s |
| https://emarkc.com/seo-redes-sociales-aplicaciones/ | 3545.04 | 3.5 s |
| https://es.semrush.com/blog/que-es-seo/ | 1970.62 | 2.0 s |
| https://mailchimp.com/es/marketing-glossary/seo/ | 3030.97 | 3.0 s |
| https://blog.hubspot.es/marketing/guia-completa-seo | 3031.82 | 3.0 s |
| https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=es | 2849.12 | 2.8 s |
| https://www.mdmarketingdigital.com/blog/que-es-seo-y-para-que-funciona/ | 3602.52 | 3.6 s |
| https://www.cyberclick.es/que-es/seo | 3399.20 | 3.4 s |
| https://www.youtube.com/watch?v=_hNCh4oF4IE | 2118.68 | 2.1 s |
| https://www.godaddy.com/resources/es/marketing/que-es-posicionamiento-seo | 2821.51 | 2.8 s |
| https://es.wix.com/blog/que-es-seo | 2305.55 | 2.3 s |
| https://www.il3.ub.edu/blog/que-es-el-seo/ | 3127.15 | 3.1 s |
| https://blog.growxco.com/articulos/seo-en-marketing-digital | 3232.62 | 3.2 s |
| https://marketing.wearedrew.co/posicionamiento-seo | 8350.33 | 8.4 s |
| https://www.40defiebre.com/guia-seo/que-es-seo-por-que-necesito | 3999.56 | 4.0 s |
Aunque se trata de un estudio pequeño, se puede notar que los primeros resultados nunca superan un FCP de 4s y que conforme avanzas a la segunda y tercer página de resultados de Google el FCP comienza a aumentar aún más.
El gráfico con los 100 resultados y sus respectivos FCP queda así:
Visualmente es mucho más fácil notar como el FCP tiene una pequeña relación con la posición SEO de un sitio web en los resultados de búsqueda de Google.
¿Cómo se mide el FCP en WordPress?
Es la métrica de rendimiento web más simple de entender. Cuando abres una página web el navegador comienza a descargar los recursos de tu sitio, como scripts, hojas de estilo, imágenes y el código HTML.
Una vez que el navegador ha descargado los recursos más críticos comienza con el renderizado de la pagina web. Cuando se muestra en pantalla una imagen o un texto finaliza el conteo del FCP.
Calculando el FCP de tu WordPress
Existen diferentes formas de conocer el FCP de tu página web pero las más accesibles son las siguientes.
Google Speed Insights
Usar Speed Insights para obtener el FCP de una página web es extremadamente sencillo y es la mejor forma de obtener el valor de esta métrica.
Para calcularlo es necesario acceder al sitio web de Speed Insights (https://pagespeed.web.dev/) e ingresar la URL de la página que quieres evaluar.
Después de procesar tu página web Speed Insights te devuelve un reporte con las métricas más importantes de tu sitio web, incluido el FCP.
Chrome Lighthouse
Lighthouse está disponible en Chrome y es la misma herramienta que utiliza Google Speed Insights para generar los reportes.
Para acceder a Lighthouse debes abrir el panel de desarrollador (presionando F12) y navegar hasta la pestaña de Lighthouse.
Después de analizar tu sitio web Lighthouse va a crear una reporte muy similar al que puedes obtener en Google Speed Insights.
Recuerda no ejecutar Lighthouse en la misma ventana donde tienes abierta la sesión de tu WordPress, por que los recursos que carga WordPress van a afectar el FCP de tu página.
¿Como se mejora el FCP en WordPress?
Para mejorar el FCP dentro un sitio en WordPress es necesario reducir los recursos que pueden retrasar el renderizado de la página y mejorar el tiempo de carga del sitio web.
En mi experiencia, estos consejos son los que
Reducir el CSS y Javascript
Es uno de los consejos más comunes y se debe a que reducir el número de hojas de estilo y de scripts que carga tu sitio web puede mejorar enormemente su rendimiento.
Si en tu Instalación de WordPress utilizas un maquetador (Elementor, Bricks) o un tema desarrollado por otra persona puede ser difícil reducir el numero de recursos de tu sitio web.
Una forma fácil para lograrlo es desinstalar plugins innecesarios, ya que muchos añaden scripts o archivos CSS que en muchas situaciones solo afectan el rendimiento de tu sitio.
Reducir el número de fuentes
Las fuentes son un elemento crucial en el diseño web y su optimización es esencial para mejorar el rendimiento y la experiencia del usuario.
El uso de fuentes personalizadas puede mejorar la estética de una página, pero si no se gestionan correctamente, pueden aumentar los tiempos de carga y afectar métricas clave como el First Contentful Paint (FCP).
Mi consejo cuando se trata de fuentes es integrarlas en el sitio web como base64. Eso asegura que cuando tu sitio cargue la fuente ya haya sido descargada.
Optimizar el tamaño de las imágenes
Comprimir las imágenes es una de las técnicas más comunes para mejorar el rendimiento de una pagina web y también pueden afectar positivamente el FCP.
Mi recomendación es utilizar servicios web como jpeg-optimizer.com por que los plugins encargados de optimizar imágenes inyectan scripts que pueden empeorar el rendimiento.
Conclusión: Mejorar el FCP es indispensable para el SEO
Mejorar el FCP en WordPress es una tarea difícil, que requiere conocimiento avanzados sobre desarrollo web, pero es indispensable para mejorar la experiencia de usuario y la posición de nuestra web en Google.
¿Quieres mejorar el rendimiento de tu sitio web pero no sabes como? Agenda una consulta rápida y descubre como puedo ayudarte a llevar tu sitio web al siguiente nivel.