Cómo acelerar WordPress. La Guia definitiva

Share on facebook
Facebook
Share on twitter
Twitter
Share on google
Google+
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on email
Email

En esta publicación, revisamos más de 10 formas de acelerar WordPress y mejorar la velocidad de Elementor.

No hay nada peor que un sitio web que tarda una eternidad en cargar, ¿cierto?

Si eres como la mayoría de los usuarios de Internet, presionarías el botón “Atrás” antes de que el contenido del sitio se cargue (¡especialmente en dispositivos móviles!).

Además, definitivamente nadie quiere que el sitio que cargue lento sea el suyo.

Más allá de lograr una mejor experiencia de usuario, acelerar WordPress también podría aumentar tu tasa de conversión. Y Google ha utilizado la velocidad de la página como factor de clasificación en sus resultados de búsqueda de escritorio desde 2010, y la usa en los resultados de búsqueda móvil a partir de julio de 2018.

Teniendo en cuenta estas consideraciones, siempre nos hemos centrado en optimizar el rendimiento con Elementor. Pero es solo una herramienta. Si realmente quieres acelerar WordPress y hacer que tu sitio se cargue lo más rápido posible, debes adoptar un enfoque más amplio.

7 optimizaciones de rendimiento para comenzar

Hay muchos ajustes menores de rendimiento que puedes hacer (¡esa es la siguiente sección!). Pero estos siete consejos de optimización te ofrecerán la mejor inversión a la hora de acelerar WordPress.

Para un giro divertido, prueba tu sitio con Pingdom Tools o Gtmetrix antes de comenzar. De esa manera, puedes saber exactamente cuánto aceleran estos consejos tu sitio WordPress.

1. Elije un host con rendimiento optimizado para tu sitio WordPress

Todos los otros ajustes en esta lista se centrarán realmente en ajustar tu sitio actual.

Pero a pesar de todos estas mejoras, no puedes evitar este hecho:

Tu sitio seguirá siendo tan rápido como el motor que lo impulsa. Puedes hacer que tu sitio sea más rápido con los siguientes consejos, pero no puedes hacerlo más rápido sin un hosting de calidad que funcione debajo.

Entonces, ¿qué hace que el hosting esté orientado al rendimiento?

En primer lugar, definitivamente quieres un host que ofrezca PHP 7+. PHP 7 ofrece mejoras de rendimiento masivas sobre las versiones anteriores de PHP 5 que muchos hosts todavía están ejecutando.

Un host WordPress gestionado de calidad debería ofrecer PHP 7, así como muchos otros ajustes de rendimiento para ayudar a que tu sitio WordPress se cargue rápidamente como el almacenamiento en caché en cuanto a servidor y más.

En el mercado hay muchas opciones actualmente. Y a medida que tu sitio crece, otros ofrecen soluciones de calidad.

Estas son las especificaciones que debes buscar para maximizar el rendimiento de Elementor:

  • PHP 7+
  • MySQL 5.6+
  • Mínimo 64 MB de memoria de WordPress. Idealmente 128 MB +

2. Mejora la velocidad con un tema ligero para WordPress

Incluso si estás usando un creador de páginas (builder) para crear la mayor parte del contenido, tu tema(theme) seguirá desempeñando un papel importante en la rapidez con que se carga tu sitio.

Cuando cambié una web de un cliente a un tema más liviano (GeneratePress), pude reducir el 48% de los tiempos de carga de la página.

¡No está nada mal!

Los temas orientados al rendimiento deben ser:

Ligero en términos de tamaño de archivo y solicitudes
Modular para que pueda elegir y elegir solo las características que desee
¿Cuáles son algunos temas buenos orientados al rendimiento?

Todas estas opciones son excelentes, especialmente si está utilizando un creador de páginas como Elementor:

  • Hello Theme: El equipo detrás de Elementor creó este tema ligero para emparejarse con Elementor Pro (solo para usuarios Pro).
  • GeneratePress: un tema ligero y popular de Tom Usborne.
  • Génesis: un marco temático en lugar de un solo tema. Popular entre los desarrolladores.
  • Astra: otro tema ligero y personalizable con muchas integraciones para complementos como WooCommerce y LifterLMS.
  • OceanWP: ligero, personalizable y ofrece muchas extensiones útiles gratuitas y premium.

3. Optimización de imágenes (puedes hacer esto automáticamente)

Según HTTP Archive, las imágenes comprenden ~ 50% del tamaño del archivo de una página promedio. Debido a que las imágenes son un gran contribuyente al tamaño de tu página, puedes lograr algunas mejoras de rendimiento igualmente grandes simplemente optimizando tus imágenes.

Hay dos partes principales para optimizar las imágenes que usas en tu sitio WordPress.

Primero, están las dimensiones reales de la imagen. Si tu tema solo muestra imágenes de hasta 800 píxeles de ancho (un valor bastante normal), no tiene sentido cargar imágenes completas de más de 3.000 píxeles en tu sitio (excluyendo imágenes de “HERO” o sitios de fotografía y similares). Incluso en pantallas retina, ¡eso es solo una pérdida de espacio!

Entonces, el paso 1 es cambiar el tamaño de las dimensiones reales de las imágenes en tu sitio a un ancho máximo que se ajuste a tu tema.

La siguiente parte del rompecabezas es la compresión. La compresión toma tus imágenes ya redimensionadas y las reduce aún más. Hay dos tipos principales de compresión:

  • Lossy: grandes reducciones de tamaño de archivo, pero también cierta pérdida de calidad.
  • Lossless: reducciones de tamaño más pequeñas, pero tampoco pérdida de calidad.

Dependiendo de la importancia de la calidad de imagen para tu contenido, puedes elegir entre los dos métodos de compresión. La mayoría de los sitios pueden usar de forma segura la compresión con pérdida(Lossy).

Para cambiar automáticamente el tamaño y comprimir las imágenes que cargas en tu sitio WordPress, tienes varias opciones de plugins de calidad:

  • ShortPixel: te factura en función de la cantidad de imágenes que optimiza. Sin restricciones de tamaño. Gratis para hasta 100 imágenes por mes.
  • Imagify: te factura en función de cuántos MB optimiza. No hay restricciones en el número de imágenes. Gratis por hasta 25MB por mes.
  • Smush Image Compression and Optimization: 100% gratis pero solo para compresión sin pérdidas(Lossless). La versión gratuita también tiene un límite de tamaño de archivo de 1 MB.

4. Deshazte de los plugins lentos de WordPress

Contrariamente a la creencia popular, no existe una correlación directa entre el número de plugins y la velocidad de tu sitio.

Es decir, no todos los plugins afectan negativamente la velocidad de tu sitio. Pero muchos lo hacen, por lo que la idea general proviene del lugar correcto.

Sin embargo, en lugar de tratar de eliminar de forma arbitraria los plugins, debes tratar específicamente de reducir la cantidad de plugins que realmente están ralentizando tu sitio.

Siguiente pregunta: ¿cómo encuentras los complementos de WordPress que ralentizan tu sitio?

Aquí hay dos formas bastante accesibles de comenzar:

Primero, puede usar el complemento gratuito P3 (Plugin Performance Profiler) si todavía estás usando PHP 5 (lo cual, de nuevo, no debería estar haciendo. Pero si aún no haz cambiado su hosting, este complemento es el lugar más fácil para comenzar).

Si bien no se ha actualizado en mucho tiempo, el complemento aún funciona bien en la mayoría de los servidores que ejecutan PHP 5.

image4 1

Si tu servidor ejecuta PHP 7 (que de nuevo, es excelente para el rendimiento, solo que no para usar el plugin P3), la siguiente forma más fácil de usar para encontrar complementos lentos es a través de la pestaña Cascada en una herramienta como GTmetrix o Pingdom Tools.

Simplemente consulta tu sitio a través de la herramienta y observa las diversas solicitudes para encontrar cuellos de botella. Puedes desplazarte sobre una solicitud y mirar la URL para tener una mejor idea de qué complemento es el origen de cada solicitud:

image8 1024x458 1

Y finalmente, otra buena opción, aunque no es muy accesible para usuarios ocasionales, es el complemento gratuito Query Monitor.

Entonces, ¿qué puedes hacer con los complementos que ralentizan tu sitio?

Bueno, la respuesta obvia es eliminarlos si son innecesarios, o encontrar alternativas más orientadas al rendimiento.

Algunos complementos pueden ayudarte a matar dos pájaros de un tiro. Por ejemplo, Elementor Pro puede eliminar la necesidad de una serie de complementos porque ofrece soporte integrado y centrado en el rendimiento para funcionalidades como:

  • Sliders
  • Formularios
  • Botones de compartir en redes sociales
  • Temporizadores de cuenta regresiva

5. Minifica código y concatena archivos

La minificación y la concatenación son dos tácticas para reducir el tamaño y la cantidad de archivos de código en tu sitio sin cambiar ninguna de las funciones subyacentes.

La minificación funciona eliminando caracteres innecesarios (como espacios en blanco y saltos de línea), mientras que la concatenación funciona combinando varios archivos en uno.

El complemento gratuito Autoptimize puede hacer ambas cosas. Todo lo que necesitas hacer es configurarlo así:

image2 1

Si experimentas algún problema con tu sitio, un buen paso para la solución de problemas es intentar desactivar la optimización de JavaScript y ver si eso soluciona el problema.

6. Utilica el almacenamiento en caché para generar versiones HTML estáticas de tu contenido

El almacenamiento en caché es el santo grial de las publicaciones sobre la aceleración de WordPress. Y por una buena razón. Aunque no debe usarse como una curita para problemas de rendimiento subyacentes, este pequeño ajuste puede ofrecer algunas mejoras importantes en el rendimiento.

El almacenamiento en caché de páginas funciona creando una versión HTML estática de tu página para servir a los visitantes, en lugar de obligar a tu servidor a generar la página desde tu base de datos y archivos PHP para cada visita.

Hoy en día, muchos hosts administrados de WordPress implementan el almacenamiento en caché directo en el servidor, por lo que esto podría no ser algo que debas hacer tú mismo si ya estás utilizando el hosting administrado de WordPress.

Pero si tu host no implementa el almacenamiento en caché de página, puedes hacerlo a través de un plugin sin demasiado alboroto.

Hay un montón de excelentes complementos de almacenamiento en caché, pero algunas buenas opciones para comenzar son:

  • Cache Enabler: un complemento ligero de la gente de KeyCDN. Este se combina muy bien con Autoptimize (solo asegúrate de deshabilitar la minificación de Cache Enabler si estás usando Autoptimize).
  • WP Super Cache: esta oferta gratuita de Automattic siempre ha funcionado bien en mis pruebas.
  • Swift Performance Lite: este complemento ha recibido excelentes críticas en el grupo WordPress Speed ​​Up de Facebook.
  • WP Rocket: este solo viene en una versión premium, pero puede hacer muchos otros ajustes de rendimiento que van más allá del almacenamiento en caché (más sobre esos en un segundo). Y también puede ayudar a integrarte con Cloudflare. Hablando de…
image10

7. Implemente una red de entrega de contenido CDN (como Cloudflare)

Una red de entrega de contenido, o CDN para abreviar, ayuda a acelerar tu sitio para los visitantes de todo el mundo.

Así es cómo:

Sin una CDN, cada visitante, ya sea en París, Francia o en París, Texas, debe descargar su sitio desde la misma ubicación (tu servidor).

Un CDN cambia eso al almacenar copias de los archivos de tu sitio en muchas ubicaciones diferentes en todo el mundo. De esa manera, los navegadores de los visitantes pueden descargar tu sitio desde la ubicación más cercana a ellos, lo que resulta en una menor latencia y mejores tiempos de carga de la página.

También es sorprendentemente barato (¡gratis!).

De hecho, puede aprovechar un CDN gratuito a través de Cloudflare. Si bien Cloudflare tiene planes pagos (no están en el negocio de la caridad), el plan gratuito está totalmente bien para la mayoría de los sitios web.

Para configurar tu sitio de WordPress con Cloudflare, solo necesitas:

Regístrate en Cloudflare
Cambies los servidores de nombres de su dominio(DNS) a los servidores de nombres proporcionados por Cloudflare

image9 1024x525 1

Es bastante sencillo, pero si necesitas más ayuda, esta publicación tiene una guía más detallada, así como algunas opciones de configuración específicas de WordPress para Cloudflare.

6 ajustes de rendimiento más pequeños a considerar

Es posible que estos ajustes no muevan la aguja tanto como los consejos anteriores, pero aún pueden ayudarte a buscar más mejoras de rendimiento en tu sitio.

Si no deseas reinventar la rueda, algunos complementos de rendimiento también pueden implementar muchos de estos de una sola vez. Notablemente:

8. Activa la compresión GZIP para una reducción de ~ 70% en el tamaño

La compresión GZIP es una forma de comprimir los archivos enviados desde tu servidor al navegador de un visitante. Esto puede reducir el tamaño de tus páginas en ~ 70%, lo cual es una mejora bastante considerable.

También es fácil de implementar. Suponiendo que tu servidor está usando Apache (que es el caso en la mayoría de los hosts), solo necesitas agregar este fragmento de código al archivo .htaccess de tu sitio:

# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

Alternativamente, algunos hosts también te permiten hacer esto a través de cPanel. Por ejemplo, nosotros incluímos una opción Optimizar sitio web en cPanel:

image1 1 1024x468 1

Una vez que hayas habilitado la compresión GZIP, puedes comprobar que funciona correctamente con la herramienta de compresión gratuita Check GZIP.

image7 1 1024x411 1

9. Reduce las solicitudes HTTP en WordPress

Cada vez que alguien llega a tu sitio, su navegador web “solicita” (abreviatura de solicitud HTTP) una lista de archivos que son necesarios para “construir” la página en el navegador de tu visitante. Estas solicitudes incluyen HTML, CSS, imágenes, etc. E incluso incluyen archivos y scripts externos, como tu código de seguimiento de Google Analytics.

Viste un ejemplo de todas estas solicitudes en la cascada anterior (cuando aprendiste a detectar plugins lentos).

Si bien cada solicitud puede tomar diferentes cantidades de tiempo, una buena regla general es que más solicitudes HTTP equivalen a un sitio web más lento.

Es por eso que herramientas como Pingdom y GTmetrix te muestran el número de solicitudes en tu sitio:

image6 1

Si bien algunas de las cosas que hemos discutido, como usar Autoptimize para la concatenación, te ayudarán a reducir la cantidad de solicitudes en tu sitio de WordPress, también puedes llevar las cosas más lejos con un enfoque más manual.

No quiero profundizar demasiado aquí porque es un tema extenso. Pero algunas victorias rápidas para la mayoría de los sitios de WordPress son:

  • No usar fuentes de Google
  • Deshabilitar Awesome Fonts
  • Desactivar Gravatars

Por ejemplo, para desactivar Google Fonts y Font Awesome en tus diseños de Elementor, puedes agregar estos dos fragmentos de código a un complemento como Code Snippets:

add_filter( 'elementor/frontend/
print_google_fonts', '__return_false' );
add_action( 'wp_enqueue_scripts', function() { wp_dequeue_style( 'font-awesome' ); }, 50 );

Para una vista más detallada de este tema, consulta la publicación de WP Rocket.

10. Configurar el almacenamiento en caché del navegador

El almacenamiento en caché del navegador es otro tipo de almacenamiento que puede acelerar los tiempos de carga de tu sitio. A diferencia del método de almacenamiento en caché de páginas mencionado anteriormente, el almacenamiento en caché del navegador le dice a los navegadores de sus visitantes que almacenen ciertos tipos de archivos en la computadora local de cada visitante.

Luego, la próxima vez que un visitante cargue una página en su sitio, su navegador puede cargar las versiones en caché local de ciertos archivos en lugar de las versiones de su servidor. Eso significa tiempos de carga más rápidos.

Para habilitar el almacenamiento en caché del navegador manualmente, solo necesitas agregar otro fragmento de código al archivo .htaccess de tu sitio:

<filesMatch ".(ico|pdf|flv|jpg|
jpeg|png|gif|
js|css|swf)$">
Header set Cache-Control "max-age=84600, public"

11. Optimiza tu base de datos de WordPress

La base de datos de tu sitio es donde se almacena todo su contenido y configuraciones. Con el tiempo, recogerá una tonelada de basura en forma de:

  • Revisiones de Post
  • Publicaciones / comentarios en la papelera
  • Etc.

Si bien es poco probable que veas una mejora masiva en los tiempos de carga de la página de inicio simplemente limpiando tu base de datos, la optimización de esta garantiza que se ejecute de manera más eficiente.

WP-Optimize puede ayudarte a limpiar esta basura de tu base de datos. Y luego, el complemento del que hablaré en la siguiente sección puede ayudar a evitar que se acumule en primer lugar.

12. Utiliza el complemento WP-Disable

WP-Disable es un complemento genial que puede ayudarte a realizar una serie de ajustes de rendimiento aún más pequeños desde una interfaz fácil de usar.

Si bien puedes jugar con su configuración, esto es lo que generalmente me gusta hacer:

  • Deshabilitar emojis. Este es un archivo .js adicional que agrega WordPress. A menos que ames absolutamente los emojis, puedes deshacerte de ellos de manera segura.
  • Eliminar Query Strings. Esto es algo por lo que muchas herramientas de prueba te harán pensar.
  • Cambie la frecuencia de la API Heartbeat a 60 segundos. Esto disminuye la carga en tu servidor mientras te brinda los beneficios de la API Heartbeat.
  • Cambiar las revisiones a 1. Si bien a algunas personas les gusta deshabilitar las revisiones por completo, me resulta útil almacenar al menos una revisión. Todavía disminuye la carga, al tiempo que te brinda al menos una revisión en caso de que algo salga mal con tu borrador actual.
  • Deshabilitar las incrustaciones de Google Maps. Si absolutamente necesitas Google Maps, puede dejarlo activado. Pero la mayoría de los sitios pueden sobrevivir sin incrustaciones directas de Google Maps. El complemento te permitirá excluir ciertas páginas si solo necesitas usar Google Maps en una página específica.
image3 1

13. Deshabilitar Hotlinking para detener a Leechers

Hotlinking es cuando otras personas usan imágenes alojadas en tu servidor en su sitio. Debido a que tu servidor tiene que cargar imágenes para el sitio de otra persona, hotlinking puede minar los recursos de tu servidor y usar tu ancho de banda.

No dejes que la gente se aproveche de ti. Es fácil bloquear el hotlinking, solo agrega este fragmento de código corto al archivo .htaccess detu sitio:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)example.com/.*$ [NC]
RewriteRule \.(gif|jpg|jpeg|bmp|zip|rar|mp3|flv|
swf|xml|php|png|css|pdf)$ - [F]

Asegúrate de reemplazar example.com con tu propio nombre de dominio.

Elementor te hace parte del camino, estos consejos hacen el resto

Elementor está diseñado para nunca interferir con el rendimiento de su sitio. Eso:

  • Sigue los estándares de código
  • Utiliza archivos CSS externos
  • Genera pequeños archivos CSS con reglas CSS personalizadas para cada página.
  • Utiliza el atributo “srcset” para todos los widgets de imagen

Para asegurarte de que todo tu sitio se cargue rápidamente, debes revisar de que todo lo demás esté optimizado también.

Siguiendo los consejos de esta guía, deberías poder lograrlo.

¡Toma una taza de café recién hecho, pasa una tarde haciendo estas optimizaciones y disfruta de un sitio de WordPress más rápido y optimizado!

PD: La mayoría de estas mejoras puedes encontrarlas integradas en nuestros planes de Hosting Cloud, revísalos aquí

Rodrigo Martínez

Rodrigo Martínez

Mi pasión es ayudar a mejorar tu Página Web o E-Commerce. Fundador Nova Imago Digital

Más Articulos de interés

Email Marketing, Mailerlite vs Mailchimp

MailerLite vs. Mailchimp. Revisa nuestra comparación de sus precios, características y más. Por un lado Mailerlite es un software sólido de email

Redes Sociales

Suscríbete al Boletín

Te enviaremos información útil para tu proyecto web

Síguenos en la Fan page

Indice

Ir arriba