Un sitio web lento es malo, especialmente ahora, por que las personas esperan experiencias instantáneas, como las de TikTok.
Y es que no solo afecta la percepción que tienen los usuarios de tu negocio, también les impide encontrar rápidamente lo que buscan.
Ademas, Google ha confirmado que se trata de un factor SEO para su motor de búsqueda.
Voy a compartirte los mejores trucos que conozco para optimizar el FCP en WordPress.
Primero lo importante: ¿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 de Google
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 optimiza 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 te pueden servir.
1. 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.
2. Reducir el número de fuentes
Las fuentes son importantes para mejorar el diseño de una pagina y para ofrecer una buena experiencia al 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.
Mi consejo cuando se trata de fuentes es integrarlas en el sitio web de manera inline como base64. Eso asegura que cuando tu sitio cargue la fuente ya haya sido descargada.
3. Optimizar el tamaño de las imágenes
Existen diferentes técnicas de optimización SEO para imágenes que ademas de ayudarte a mejor la visibilidad de tu sitio en las SERP puede conseguirte mejorar el tiempo de carga de tu pagina web.
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.
4. Mejora tu hosting
Este es un problema muy común, por que la mayoría de sitios en WordPress usan un hosting compartido con rendimiento muy bajo.
Y no es que el hosting compartido sea malo, pero si tu tienda en linea recibo a cientos de visitantes, tienes que buscar una mejor opción de hosting.
La mejor alternativa es usar un VPS o alguna plataforma especializada, que aunque son más costosas, si ofrecen un rendimiento muy superior.
5. Reduce el numero de etiquetas de seguimiento
Una gran cantidad de etiquetas de seguimiento (como la de Analytics o Tag Manager) y pixeles puede afectar el tiempo de carga de tu sitio web.
Elimina o mueve al footer las etiquetas que no sean indispensables.
6. Usa un CDN
No es algo que considere indispensable, por que los beneficios de un CDN son más visibles cuando tus visitantes vienen de distintos países.
Pero un CDN puede ayudarte a servir las imágenes de manera más rápida, y al mismo tiempo reduces la carga de tu servidor.
7. Instala un plugin de Cache
Usar un plugin de cache es una forma simple de mejorar el FCP de tu sitio WordPress, pero debes hacerlo cuidadosamente para evitar problemas.
He visto decenas de sitios web con errores (formularios que no funcionan, mapas que no se ven, widgets que no sirven) y los plugins de cache siempre son los responsables.
8. Cambia de tema
Algunos temas de WordPress incluyen recursos de manera errónea y que probablemente no necesitas en tu sitio web, por lo que cambiar de tema es una buena forma de optimizar el FCP.
Los más populares, como GeneratePress pueden reducir enormemente el tiempo de carga de tu sitio web.
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.