Cómo aceleramos la velocidad de carga de página en WPBeginner (6 consejos revelados)

Nuestros lectores a menudo preguntan cómo hacemos que WPBeginner cargue tan rápido. Seguimos las mejores prácticas, pero administrar un sitio con mucho tráfico nos ha enseñado algunos trucos adicionales para un rendimiento óptimo.

Sabemos que puede ser estresante cuando Google cambia sus métricas, como reemplazar el First Input Delay (FID) por el nuevo Interaction to Next Paint (INP). Mantenerse al tanto de estas actualizaciones es importante para mantener tu sitio rápido y tu SEO fuerte.

En este artículo, vamos a revelar las estrategias exactas que usamos aquí en WPBeginner. Estos son consejos prácticos que pueden ayudar a cualquier sitio web, sin importar su tamaño.

A continuación, te guiaremos a través de todo, desde nuestra plataforma de alojamiento hasta las herramientas específicas que nos dan una ventaja competitiva.

Aquí tienes un resumen rápido de todos los elementos que discutiremos en este artículo:

• ¿Por qué es importante la velocidad de carga de la página?
• Cómo mejoramos la velocidad de carga de la página en WPBeginner
• Plataforma de alojamiento más rápida
• DNS de Cloudflare
• Optimización del rendimiento con WP Rocket
• 4. Encolado de JavaScript y CSS
• Descarga de estilos del editor de bloques
• Mejoras de rendimiento varias
• Preguntas frecuentes sobre cómo mejorar la velocidad de carga de la página
• Recursos adicionales y próximos pasos

¿Por qué es importante la velocidad de carga de la página?

La velocidad de carga de la página es la rapidez con la que aparece tu sitio web cuando un usuario hace clic en un enlace.

Nuestro objetivo es asegurar que los usuarios obtengan rápidamente la información que necesitan. Un sitio web que carga más rápido hace felices a los usuarios porque pueden obtener de inmediato la información que buscan.

Por otro lado, un sitio web de carga lenta puede obligarlos a irse. Esto es lo que queremos evitar en todos nuestros sitios web. Los usuarios son más propensos a convertirse en suscriptores o clientes si permanecen más tiempo en tu sitio.

Los usuarios tienen un 36% más de probabilidades de abandonar (rebotar) un sitio web si tarda 3 segundos en cargarse. Y tienen un 90% más de probabilidades de abandonar los sitios web que tardan 5 segundos o más en cargarse.

Source: ThinkWithGoogle

Aquí hay algunas razones más por las que la velocidad de carga de la página es tan importante:

• Mejora la Interacción del Usuario: Un sitio web de carga rápida mantiene a los visitantes interactuando, permitiéndoles acceder a la información rápidamente. Los usuarios que pasan más tiempo en un sitio son más propensos a gastar o convertir.
• Mejora los Rankings en Motores de Búsqueda: Debido a una mejor experiencia de usuario, los motores de búsqueda favorecen los sitios web de carga rápida clasificándolos más alto.
• Crucial para Usuarios Móviles: La velocidad es particularmente importante para la navegación móvil. Los usuarios móviles tienen el doble de probabilidades de abandonar un sitio web lento que los usuarios de escritorio.
• Construye Confianza y Autoridad: Un sitio de carga rápida parece más confiable y profesional, lo que puede ayudarte a convencer a los usuarios de comprar en tu negocio.

En resumen, la velocidad de carga de la página mejora la experiencia general del usuario con una mayor satisfacción y participación del cliente.

Cómo mejoramos la velocidad de carga de la página en WPBeginner

Aplicamos todas las mejores prácticas estándar de nuestro manual de optimización de rendimiento y velocidad de WordPress.

Además, tomamos algunas medidas adicionales para mejorar el rendimiento de WordPress en WPBeginner.

Aquí tienes una captura de pantalla reciente de la optimización de nuestro rendimiento antes y después de las técnicas que implementamos.

Si quieres hacer una prueba similar para tu sitio web y ver tu puntuación de Google Core Web Vitals, entonces usa la herramienta PageSpeed Insights .

Simplemente ingresa la URL que deseas probar y haz clic en el botón ‘Analizar’.

La herramienta analizará la página web durante unos segundos y luego te mostrará los resultados de la prueba.

Ahora, veamos los pasos que seguimos para lograr esta puntuación de rendimiento.

1. Plataforma de Alojamiento Más Rápida

Con años de experiencia administrando negocios basados en WordPress, hemos aprendido la importancia de elegir el mejor alojamiento de WordPress.

Para sitios web pequeños, puedes empezar con cualquiera de las principales empresas de alojamiento como Bluehost o Hostinger.

Sin embargo, WPBeginner es un sitio web más grande con un alto volumen de tráfico. Los planes de alojamiento compartido o VPS son demasiado limitados a esa escala.

Es por eso que WPBeginner está alojado en la Infraestructura de Nube Empresarial de SiteGround, que se ejecuta en la Plataforma de Google Cloud.

Por qué usamos SiteGround

• La infraestructura de alojamiento de nivel empresarial de SiteGround tiene varias capas de redundancia, lo que garantiza el tiempo de actividad máximo.
• Se ejecuta en la Plataforma de Google Cloud, que está conectada a la red de última generación de Google, garantizando las velocidades más rápidas desde todos los puntos del mundo.
• Reduce los costos y la dificultad involucrados en la administración de servidores de alojamiento dedicado individuales.
• Las mejoras internas de SiteGround, como PHP ultrarrápido, MySQL más rápido y la compresión Brotli, brindan un impulso adicional al rendimiento.
• Tenemos experiencia de primera mano trabajando con el equipo de soporte de SiteGround. La experiencia de sus ingenieros, los tiempos de respuesta más rápidos y la ayuda general siempre nos han impresionado.

Para más detalles, puedes ver nuestro artículo sobre por qué WPBeginner cambió a SiteGround hosting.

Actualmente, también ofrecen un generoso descuento a los usuarios de WPBeginner con un nombre de dominio gratuito. Comienza en $2.99 por mes, lo cual es bastante asequible si consideras la tecnología y el nivel de servicio proporcionado.

La mejor parte es que los beneficios de SiteGround no se limitan a los clientes empresariales. Todas las cuentas de hosting compartido de SiteGround también están alojadas en la Plataforma Google Cloud.

2. DNS de CloudFlare

En un artículo anterior de WPBeginner Insider, compartimos nuestro estudio de caso sobre el cambio de Sucuri a Cloudflare.

Además de la seguridad, usar el DNS de Cloudflare le da a WPBeginner una ventaja significativa en rendimiento.

El DNS (Sistema de Nombres de Dominio) es como una guía telefónica para sitios web.

Cuando introduces la dirección de un sitio web en tu navegador o haces clic en un enlace, un servicio DNS busca el nombre de dominio y dirige tu sitio web a la dirección IP de ese sitio web en particular.

Normalmente, los sitios web usan los servidores de nombres de su empresa de alojamiento para administrar el DNS. Estos no son tan rápidos como Cloudflare, lo que permite la resolución de DNS en el borde de la red en sus centros de datos en más de 310 ciudades en todo el mundo.

Por qué usamos Cloudflare DNS

• Resolución DNS más rápida: La red global de Cloudflare permite que el DNS se resuelva en la ubicación más cercana a cualquier usuario.
• Seguridad integrada: Dado que todo el tráfico pasa a través de Cloudflare DNS, su firewall de aplicaciones web (WAF) puede mitigar y bloquear ataques DDoS, spam, bots innecesarios, inyecciones SQL, intentos de hackeo y más, rápidamente.
• Entrega CDN – Su red almacena automáticamente en caché los activos estáticos y los sirve a través de su red global, haciendo que los sitios web carguen más rápido. Y dado que esto sucede a nivel de DNS, no necesitas tener subdominios separados para los activos de la CDN.

Usamos el plan Enterprise, pero Cloudflare ofrece CDN y DNS gratuitos para sitios web más pequeños, lo que esencialmente hace lo mismo con menos funciones.

3. Optimización del rendimiento con WP Rocket

Para optimizar aún más el rendimiento, usamos WP Rocket, que es uno de los mejores plugins de rendimiento para WordPress en el mercado. Entre otras cosas, maneja el almacenamiento en caché, lo que significa que guarda copias de tu sitio web para que las páginas se carguen más rápido para los visitantes recurrentes.

Lo que más nos gusta de WP Rocket es que es el plugin de optimización de rendimiento de WordPress más completo, por lo que solo necesitamos una herramienta para manejar muchas tareas diferentes.

Por qué usamos WP Rocket

• Pre-carga de caché: Normalmente, un plugin de caché espera a que un usuario visite una página para crear una copia en caché de la misma. WP Rocket mantiene automáticamente tu caché lista, lo que marca una gran diferencia en el tiempo de carga de la página.
• Caché del navegador: Almacenar activos estáticos como imágenes, JavaScript y CSS en la caché del navegador significa una carga más rápida en visitas posteriores a las páginas.
• Optimización de archivos: WP Rocket te ayuda a minificar y optimizar la entrega de archivos estáticos como JavaScript y hojas de estilo. Hacer que estos archivos sean más pequeños reduce significativamente el tiempo total de carga de la página.

Compartimos nuestra experiencia detallada con este plugin en nuestra reseña de WP Rocket con pros y contras.

¿Qué configuraciones usamos en WP Rocket?

Tenemos las siguientes configuraciones de WP Rocket activadas:

• Caché de página completa
• Optimización de archivos (minificación de archivos JS y CSS y entrega de CSS crítico)
• JavaScript diferido (retrasar la carga de JS, lo que ayuda a solucionar el problema de renderizado bloqueado)
• Carga diferida de imágenes y archivos multimedia

¿Necesitas ayuda para usar esta configuración en tu sitio? Tenemos una guía paso a paso para configurar WP Rocket y obtener los mejores resultados.

4. Encolado de JavaScript y CSS

Optimizamos la entrega de archivos JavaScript y CSS con WP Rocket, pero primero, nos aseguramos de que nuestro sitio web solo cargue los archivos JavaScript y CSS necesarios para una página en particular.

La mejor manera de manejar esto es usando temas y plugins de alta calidad que sigan los estándares de codificación de WordPress. Estas herramientas están diseñadas para cargar scripts solo cuando realmente se necesitan.

Sin embargo, un desarrollador puede cargar un script en todo tu sitio para asegurar que una función funcione correctamente. En WPBeginner, nuestro equipo de desarrollo elimina manualmente estos scripts innecesarios y luego los agrega solo en las páginas donde se requieren.

Una forma mucho más segura y fácil de agregar fragmentos de PHP como los siguientes es usando el plugin gratuito WPCode. Te permite agregar y administrar código personalizado sin editar los archivos de tu tema, lo que ayuda a prevenir errores. Puedes aprender más en nuestra reseña completa de WPCode.

Si prefieres agregar el código manualmente, primero necesitas encontrar los scripts innecesarios. La forma más fácil es usando el plugin Query Monitor.

Te mostrará todos los archivos JavaScript y CSS que se cargan en una página, para que puedas determinar cuáles son innecesarios. Para eliminar la cola de un script, necesitarás su identificador (handle) de Query Monitor. Luego, puedes usar el siguiente código:

function prefix_remove_scripts() {
	if ( is_front_page() ) {
		wp_dequeue_script( 'plugin-script-handle' );
	}
}
add_action( 'wp_print_scripts', 'prefix_remove_scripts', 100 );

De manera similar, puedes usar el siguiente código para eliminar una hoja de estilos innecesaria:

/**
 * Remove unnecessary stylesheets
 */
function prefix_remove_styles() {
	if ( is_front_page() ) {
	wp_dequeue_style( 'stylesheet-handle' );
	}
}
add_action( 'wp_enqueue_scripts', 'prefix_remove_styles', 100 );

Para más detalles, consulta nuestro tutorial sobre cómo agregar correctamente JavaScript y CSS en WordPress.

5. Descarga de estilos del editor de bloques

Usamos el editor de bloques de WordPress predeterminado en WPBeginner. Es extremadamente rápido y el equipo de desarrollo principal de WordPress dedica mucho tiempo y recursos a mejorar su rendimiento.

Para mejorar aún más el rendimiento, descargamos algunos estilos del editor de bloques que no usamos en WPBeginner.

Esto reduce el tamaño del DOM y hace que sea más rápido para los navegadores procesar la página solicitada.

En la terminología del navegador, el DOM es como el mapa de elementos y subelementos en una página (encabezados, texto, imágenes, hojas de estilo, scripts, etc.)

Un DOM más grande significa que el navegador tardará un poco más en procesarlo. Un DOM más pequeño se procesa rápidamente.

Sin embargo, la mejora de rendimiento de esto no es tan grande, y no lo recomendaríamos para la mayoría de los usuarios con sitios web de WordPress más pequeños.

6. Mejoras de rendimiento varias

Además de los consejos mencionados anteriormente, también tenemos mejores prácticas implementadas para garantizar mejores velocidades de carga de página.

Aquí hay algunas de ellas que puedes implementar fácilmente en tu sitio web:

• Imágenes Optimizadas – Nuestro equipo se asegura de que las capturas de pantalla, imágenes y medios que subimos estén altamente optimizados para reducir el tamaño del archivo. Consulta nuestra guía sobre cómo optimizar imágenes para WordPress.
• Optimizar Trabajos Cron – Los trabajos cron son tareas programadas de WordPress que se ejecutan en segundo plano para verificar actualizaciones, publicar entradas programadas, etc. Los plugins de WordPress también pueden agregar sus propios procesos en segundo plano. Optimizar los trabajos cron reduce la carga del servidor y mejora el rendimiento.
• Reducir Solicitudes HTTP Externas – Algunos plugins y herramientas que utilizas pueden necesitar cargar archivos de dominios externos. Demasiadas de estas solicitudes pueden aumentar el tiempo de carga de la página. Para solucionar esto, puedes consultar nuestro tutorial sobre cómo deshabilitar los archivos CSS y JavaScript de tus plugins.

Puedes seguir nuestra guía completa de velocidad y rendimiento de WordPress para un recorrido más detallado de estos métodos y otras estrategias para mejorar tu tiempo de carga de página.

Preguntas frecuentes sobre cómo mejorar la velocidad de carga de la página

Entendemos que aún podrías tener preguntas sobre cómo hacer que tu sitio cargue más rápido. Aquí tienes respuestas a algunas de las más comunes que recibimos.

¿Cuál es una buena velocidad de carga de página para un sitio web?

Una gran meta es que tus páginas carguen en menos de 2 segundos. Cuanto más rápido sea tu sitio, mejor será tanto para tus visitantes como para tus rankings en motores de búsqueda.

¿Cómo puedo probar la velocidad de mi sitio web?

Puedes usar herramientas gratuitas en línea como PageSpeed Insights de Google para probar tu sitio. Simplemente ingresa la URL de tu sitio web y la herramienta te dará un informe detallado de rendimiento y sugerencias de mejora.

¿Necesito ser desarrollador para hacer mi sitio más rápido?

En absoluto. Muchas de las estrategias más efectivas, como elegir un hosting de calidad, usar un plugin de caché como WP Rocket y optimizar imágenes, no requieren ninguna habilidad de codificación.

¿Cuál de estos consejos da el mayor impulso de rendimiento?

Tu hosting de WordPress es la base de la velocidad de tu sitio web. Empezar con un host rápido y confiable como SiteGround tendrá el mayor impacto en tu rendimiento desde el primer día.

Recursos adicionales y próximos pasos

Esperamos que esta mirada interna a nuestra estrategia de rendimiento te brinde un camino claro para hacer que tu propio sitio web sea más rápido. Los consejos que compartimos pueden mejorar la experiencia del usuario y el SEO para cualquier sitio.

Si está listo para aprender más, aquí tiene algunas guías adicionales que le pueden ser útiles:

• La guía definitiva para mejorar la velocidad y el rendimiento de WordPress
• Cómo preparar tu sitio de WordPress para un evento de alto tráfico
• Los mejores plugins de caché de WordPress para acelerar tu sitio web

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.