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

Por si aún no lo sabes… Google ha introducido algunos cambios importantes en las métricas de rendimiento de su sitio web, denominadas Google Core Web Vitals.

Core Web Vitals incluye ahora el sistema estable Interaction to Next Paint (INP), que sustituye a First Input Delay (FID).

Muchos de nuestros lectores nos han preguntado cómo mantenemos tiempos de carga rápidos en WPBeginner. Seguimos prácticas de optimización estándar, pero tomamos medidas adicionales para gestionar nuestro elevado tráfico.

En este artículo, compartiremos esos consejos adicionales para aumentar la velocidad de carga de su página, muchos de los cuales pueden aplicarse a cualquier sitio web.

He aquí un breve resumen de todos los puntos que trataremos en este artículo:

¿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 se muestra su sitio web cuando un usuario hace clic en un enlace al mismo.

Nuestro objetivo es garantizar 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 inmediatamente la información que buscan.

Por otro lado, un sitio web lento puede obligarles a abandonarlo. Esto es lo que queremos evitar en todos nuestros sitios web. Es más probable que los usuarios se conviertan en suscriptores o clientes si permanecen más tiempo en su sitio.

Es un 36% más probable que los usuarios abandonen (reboten) un sitio web si tarda 3 segundos en cargarse. Y es un 90% más probable que abandonen los sitios web que tardan 5 segundos o más en cargarse.

Source: ThinkWithGoogle

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

• Mejora la participación de los usuarios: Un sitio web de carga rápida mantiene la participación de los visitantes, permitiéndoles acceder rápidamente a la información. Los usuarios que pasan más tiempo en un sitio tienen más probabilidades de gastar o convertir.
• Mejora la clasificación en los motores de búsqueda: Debido a la mejor experiencia de usuario, los motores de búsqueda favorecen los sitios web de carga rápida clasificándolos mejor.
• Crucial para usuarios móviles: La velocidad es especialmente importante para la navegación móvil. Los usuarios de móviles tienen el doble de probabilidades de abandonar un sitio web lento que los usuarios de ordenadores de sobremesa.
• Genera confianza y autoridad: Un sitio que carga rápido parece más fiable y profesional, lo que puede ayudarle a convencer a los usuarios para que compren en su 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 las páginas en WPBeginner

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

Además, hemos tomado algunas medidas adicionales para mejorar aún más el rendimiento de WordPress en WPBeginner.

He aquí una captura de pantalla reciente de nuestra optimización del rendimiento antes y después de las técnicas que aplicamos.

Si desea realizar una prueba similar para su sitio web y ver su puntuación de Google Core Web Vitals, utilice la herramienta PageSpeed Insights.

Sólo tiene que introducir la URL que desea comprobar y hacer clic en el botón “Analizar”.

La herramienta analizará la página web durante unos segundos y, a continuación, le mostrará los resultados de la prueba.

Veamos ahora los pasos que hemos seguido para lograr esta puntuación de rendimiento.

1. Plataforma de alojamiento más rápida

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

Para sitios web pequeños, puede 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.

Por eso WPBeginner está alojado en la Infraestructura Cloud Empresarial de SiteGround, que se ejecuta en Google Cloud Platform.

Por qué usamos SiteGround

• La infraestructura de alojamiento de nivel empresarial de SiteGround tiene varias capas de redundancias, lo que garantiza el máximo tiempo de actividad.
• Se ejecuta en Google Cloud Platform, que está conectada a la red de última generación de Google, lo que garantiza las velocidades más rápidas desde todos los puntos del planeta.
• Reduce los costes y la dificultad de gestionar servidores de alojamiento dedicados individuales.
• Las mejoras internas de SiteGround, como PHP ultrarrápido, MySQL más rápido y compresión Brotli, dan un impulso extra 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 amabilidad en general siempre nos han impresionado.

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

Actualmente, también están ofreciendo un generoso descuento a los usuarios de WPBeginner con un nombre de dominio gratuito. Comienza en 2,99 dólares al mes, lo que es bastante asequible si se tiene en cuenta la tecnología y el nivel de servicio prestado.

Lo mejor es que las ventajas de SiteGround no se limitan a los clientes empresariales. Todas las cuentas de alojamiento compartido de SiteGround también están alojadas en Google Cloud Platform.

2. DNS de CloudFlare

En un artículo anterior de WPBeginner Insider, compartimos nuestro caso práctico de cambio de Sucuri a Cloudflare.

Aparte de la seguridad, el uso de Cloudflare DNS da a WPBeginner una ventaja significativa en el rendimiento.

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

Cuando usted introduce la dirección de un sitio web en su navegador o hace clic en un enlace, un servicio DNS busca el nombre de dominio y lo dirige a la dirección IP de ese sitio web concreto.

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

Por qué usamos Cloudflare DNS

• Resolución de DNS más rápida: La red global de Cloudflare permite resolver DNS en la ubicación más cercana a cualquier usuario.
• Seguridad integrada: Dado que todo el tráfico pasa por Cloudflare DNS, su cortafuegos de aplicaciones web (WAF) es capaz de mitigar y bloquear rápidamente ataques DDoS, spam, bots innecesarios, inyecciones SQL, intentos de pirateo y mucho más.
• 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 se carguen más rápido. Y como esto ocurre a nivel de DNS, no necesitas tener subdominios separados para los activos CDN.

Nosotros utilizamos el plan Enterprise, pero Cloudflare ofrece CDN y DNS gratuitos para sitios web más pequeños, que básicamente hacen lo mismo con menos características.

3. Optimización del rendimiento con WP Rocket

Para una mayor optimización del rendimiento, utilizamos WP Rocket, que es uno de los mejores plugins de rendimiento de WordPress del mercado. Entre otras cosas, se encarga del 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 del rendimiento de WordPress más completo, por lo que sólo necesitamos una herramienta para manejar un montón de tareas diferentes.

Por qué usamos WP Rocket

• Precarga de cach é – Normalmente, un plugin de caché espera hasta que un usuario visita una página para crear una copia en caché de la misma. WP Rocket mantiene automáticamente la caché lista, lo que supone una gran diferencia en el tiempo de carga de la página.
• Almacenamiento en 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 las siguientes visualizaciones de la página.
• 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 estos archivos más pequeños reduce significativamente el tiempo total de carga de la página.

Compartimos nuestra experiencia detallada con este plugin en nuestra revisión de WP Rocket con pros y contras.

¿Qué ajustes utilizamos en WP Rocket?

Tenemos la siguiente configuración de WP Rocket activada:

• Caché de página completa
• Optimización dearchivos (minificación de archivos JS y CSS y entrega de CSS críticos)
• JavaScript diferido (retrasa la carga de JS, lo que ayuda a solucionar el problema del bloqueo de la renderización )
• Carga diferida de imágenes y archivos de medios

¿Necesitas ayuda para usar estos ajustes en tu sitio? Tenemos una guía paso a paso para establecer WP Rocket para lograr los mejores resultados.

4. Puesta en cola de JavaScript y CSS

Optimizamos la entrega de archivos JavaScript y CSS con WP Rocket, pero antes de eso, nos aseguramos de que nuestro sitio web solo carga los archivos JavaScript y CSS que necesita una página.

La forma más sencilla de hacerlo es utilizando plugins y temas de WordPress que sigan las mejores prácticas de codificación de WordPress. Estos desarrolladores solo cargarán un script cuando sea necesario.

Sin embargo, a veces, un desarrollador de plugins o temas no puede tomar esta decisión por usted. Pueden cargar scripts globalmente para una mejor experiencia de usuario.

En WPBeginner, tenemos desarrolladores internos que están investigando este problema / conflicto / incidencia. Eliminamos los scripts y CSS innecesarios y los ponemos en cola cuando es necesario.

Sin embargo, los usuarios con conocimientos básicos de codificación de WordPress pueden hacerlo siguiendo estos pasos.

En primer lugar, debe encontrar los scripts innecesarios. La forma más sencilla de averiguar qué scripts y hojas de estilo se están cargando es utilizando el plugin Query Monitor.

Le mostrará los archivos JavaScript y CSS cargados en una página, y así podrá averiguar cuáles son innecesarios.

Para retirar un script de la cola, necesita utilizar el manejador de script como se muestra en el Monitor de Consulta. Después de eso, puede utilizar el siguiente código para ponerlo en cola:

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

Del mismo modo, para eliminar las hojas de estilo innecesarias, puede utilizar el siguiente código:

/**
 * 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, consulte nuestro tutorial sobre cómo añadir correctamente JavaScript y CSS en WordPress.

5. Descarga de estilos del editor de bloques

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

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

Esto reduce el tamaño del DOM y hace que los navegadores procesen más rápidamente la página solicitada.

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

Un DOM más grande significa que el navegador empleará algo más de tiempo en procesarlo. Un DOM más pequeño se procesa rápidamente.

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

6. Varias mejoras de rendimiento

Además de los consejos mencionados, también contamos con buenas prácticas para garantizar una mayor velocidad de carga de las páginas.

He aquí algunos de ellos que puede aplicar fácilmente en su sitio web:

• Imágenes optimizadas – Nuestro equipo se asegura de que las capturas de pantalla, imágenes y medios que cargamos estén altamente optimizados para reducir el tamaño del archivo. Consulta nuestra guía sobre cómo optimizar imágenes para WordPress.
• Optimizar Cron Jobs – Los Cron jobs son tareas programadas de WordPress que se ejecutan en segundo plano para comprobar si hay actualizaciones, publicar entradas programadas, etc. Los plugins de WordPress también pueden añadir sus propios procesos en segundo plano. Optimizar los cron jobs reduce la carga del servidor y mejora el rendimiento.
• Reduzca las peticiones HTTP externas – Algunos plugins y herramientas que utiliza pueden necesitar cargar archivos de dominios externos. Demasiadas de estas peticiones pueden aumentar el tiempo de carga de la página. Para solucionarlo, puedes ver nuestro tutorial sobre cómo desactivar los archivos CSS y JavaScript de tus plugins.

Puede consultar nuestra guía completa sobre velocidad y rendimiento de WordPress para obtener información más detallada sobre estos métodos y otras estrategias para mejorar el tiempo de carga de su página.

Esperamos que este artículo te haya ayudado a mejorar la velocidad de carga de tus páginas web. También puedes ver cómo hacemos crecer nuestra lista de correo electrónico o echar un vistazo a nuestra guía WordPress SEO para aumentar tu tráfico orgánico.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.