Cómo mejorar la velocidad de mi WordPress: Guía Completa WPO

¿Quieres mejorar la velocidad de tu sitio WordPress?

Todos hemos sufrido en algún momento porque una web no es lo rápida que querríamos.

Cuando nos convertimos en usuarios de una web somos perezosos e impacientes, lo que significa que nos gusta disfrutar de webs rápidas e intuitivas.

Una carga rápida de tu web mejora la experiencia del usuario, lo que se traduce en un aumento de las visitas y ayuda al SEO (Google también gusta de webs rápidas).

En el caso de WordPress seguro que has oído hablar de optimizar los tiempos de carga de las imágenes, reducir los plugins instalados… pero hay mucho más que puedes hacer. 

Por esa razón, en este artículo compartiremos la guía definitiva de cómo acelerar tu página web en WordPress: te enseñaremos técnicas, métodos y consejos de WPO (Web Page Optimization) paso a paso para mejorar la velocidad de carga y aumentar el rendimiento de tu instalación de WordPress.

¿Qué són las siglas WPO?

Si tienes un sitio web, de seguro conoces la importancia de que dicho sitio esté optimizado para atraer tráfico y así generar ventas. Sin embargo, ¿En qué consiste esta optimización del sitio web?

La WPO u optimización de sitio web, (Web Page Optimization por sus siglas en inglés), engloba todas las técnicas utilizadas para aumentar el rendimiento de la web a todos los niveles, mejorar el SEO, captar tráfico, y convertir ventas. Sin embargo, la definición más famosa y conocida del WPO es la que se refiere al rendimiento en términos de velocidad de carga.

Mide los problemas de carga de tu WordPress

Existen distintas formas de comprobar la velocidad de carga de tu WordPress. La más famosa es sin duda la oficial de Google, PageSpeedInsights, aunque para usuarios poco avanzados puede ser algo difícil de interpretar los datos que arroja PSI.

En nuestro caso usaremos GTmetrix, una herramienta desarrollada por Carbon60, similar a PageSpeedInsights pero con una interfaz más agradable, para que puedas probar fácilmente el rendimiento de tu página web y saber qué componentes son los que la están ralentizando.

Puedes usar GTMetrix sin registro, pero para cambiar la localización desde donde se mide la velocidad de carga debes registrarte con una cuenta gratuita.

Lo primero que verás al finalizar el diagnóstico será esta serie de parámetros:

• Fully Loaded Time: Tiempo de carga completo de la página. Debería encontrarse máximo en torno a los 2 o 3 segundos de carga (nunca superior a 6s).
• Total Page Size: Tamaño de la página. Es recomendable que no supere 1Mb de peso, aunque puede revisarse el caso de acuerdo a las necesidades de tu página web.
• Requests: Mensajes que se envían desde el cliente al servidor para solicitar un recurso. Debe tener menos de 100 peticiones, aunque en webs grandes estos puede ser imposible.
• Time To First Byte o TTFB: Es el tiempo de espera para que llegue el primer byte de información al cliente. Debe ser inferior a 200ms. Es el primer dato que aparece en la pestaña Waterfall.

Tras el diagnóstico, GTmetrix puntua tu página de acuerdo a su rendimiento.

En caso de no dar buena puntuación (por debajo de 60% en Pagespeed e Yslow), existen un montón de medidas que podemos tomar para mejorar la velocidad de carga. A continuación te indicamos algunas.

16 cosas que puedes hacer para optimizar el tiempo de carga de tu WordPress

Si la puntuación de GTmetrix para tu WordPress no es como la nuestra… vamos a arreglarlo.

A continuación te pasamos a describir las mejoras y cambios más importantes que acelerarán tu web de forma casi automática.

#1 Actualiza la versión de PHP de tu servidor

PHP es lenguaje de programación que hace funcionar a WordPress. Como cualquier framework de programación, recibe actualizaciones periódicas de cara a mejorar su rendimiento y seguridad.

Cuando hay una nueva versión de PHP seguramente veas un aviso en tu consola de WordPress, y es muy recomendable actualizar cuando sea necesario. A cambio de dicha actualización, tu web será más rápida y segura, ya que cada nueva versión de PHP es hasta 3 veces más eficiente y rápida que sus versiones anteriores.

Actualiza a través del interfaz de servidor

Para ver tu versión de PHP en CPanel entra en la consola de CPanel > Select PHP Version.

Saldrá algo así:

Cambia la versión según corresponda.

En el caso de que tu servidor trabaje con otro gestor como Plesk, busca la opción «Php» en las opciones de administración.

Comprueba versión de PHP vía FTP

Si no tenemos acceso a CPanel o Plesk, pero si a una conexión FTP, podemos saber la versión de PHP siguiendo los siguientes pasos:

• Abre un bloc de notas, pega el código que ves a continuación y guárdalo con el nombre “info.php”:

<!--?php phpinfo(); ?-->

• Es importante que quede guardado como “.php”, cuidado que no sea “.php.txt”.
• En la carpeta public_html de tu WordPress, sube el archivo info.php creado.
• Introduce en el navegador tudominio.com/info.php y te aparecerá la versión de php.
• Tras la comprobación, elimina el archivo info.php

Para actualizar tu versión de PHP de forma segura, debes:

1. Crear una copia de seguridad de la web antes de la actualización por si algo no funciona o se rompe con la actualización. De ser así, podrás restaurar la web fácilmente.
2. Instalar la penúltima versión disponible, no la última.

#2 Protocolo HTTP vs HTTP/2

HTTP o Protocolo de Transferencia de Hipertexto, es el protocolo de comunicación que permite la transferencia de información a través de archivos, usualmente HTML, en internet.

HTTP/2 es la nueva versión de HTTP, y es mejor porque:

• optimiza la rapidez en la comunicación
• mejora del posicionamiento web
• prioriza la carga
• consume menos ancho de banda que el HTTP clásico

Para comprobar si el protocolo de tu WordPress ya está en HTTP/2, accede a: https://http2.pro/

En el caso de que no lo esté, envía un ticket a tu proveedor de servicio hosting, comentando es un factor importante para que la web sea más rápida. Si tu hosting es de calidad deberían echarte una mano con ello.

Pero las cosas no se quedan en HTTP/2, sino que escalan a HTTP/3, (aunque en la mayoría de casos es de pago).

En caso de clientes importantes y WordPress grandes, plantear y valorar su aplicación en la web.

#3 Habilita KeepAlive en WordPress

Keepalive es un mensaje enviado por un dispositivo a otro para verificar que el enlace entre los dos está funcionando, o para evitar que el enlace (conexión) se rompa.

Para no marearte mucho, te diremos que con esto se aceleran las conexiones a tu web porque se aprovechan las que ya están abiertas.

Para habilitarlo, accede al fichero .htaccess y define la siguiente directiva:

 Header set Connection keep-alive 

#4 Aumenta la memoria de tu WordPress

Tener más memoria disponible para WordPress permite la ejecución de todos los recursos de tu web de forma fluida. Lo normal es que tu hosting te provea de por lo menos 256 Megas, que es lo mínimo para el uso de WordPress.

Para aumentarla debes de editar el archivo wp-config.php que estará en la carpeta public_html, e insertar dentro lo siguiente:

define('WP_MEMORY_LIMIT', '256M');

En las nuevas versiones de WordPress la memoria límite se define en el archivo: default-constants.php que está en el directorio : /wp-includes

#5 Desinstalar Plantillas y Plugins que no se usen

El espacio en tu disco duro y el uso de recursos debe estar optimizado al máximo para evitar cargar datos que no se necesitan. Por esa razón, uno de los consejos más fáciles de aplicar es desinstalar las plantillas* y plugins que no se utilicen, puesto que consumen recursos aunque no ejecuten ninguna tarea en específico.

*Nota: deja siempre una plantilla de respaldo, ya que WordPress usará esa si detecta algún problema con la que tienes en marcha.

#6 Optimiza tu archivo .htaccess

El archivo .htaccess , también conocido como o acceso de hipertexto o HyperText Access, es un archivo de configuración que está en tu servidor.

El archivo .htaccess indica todo lo que el usuario que visita tu web puede o no puede hacer. Además, configura la forma como se comporta el servidor y cómo optimiza la carga de las páginas de tu sitio o blog.

Para optimizar el .htaccess solamente hace falta subir todas las directrices especificadas a continuación al fichero:

FileETag None

SetOutputFilter DEFLATE

Header unset ETag

#minificarCSS

  AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain

  AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml

  AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml

  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json

  AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf

  AddOutputFilterByType DEFLATE font/truetype font/opentype

    Header set Cache-Control "public"

    Header set Cache-Control "public"

    Header set Cache-Control "private"

    Header set Cache-Control "private, must-revalidate"

# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

AddType x-font/otf .otf

AddType x-font/ttf .ttf

AddType x-font/eot .eot

AddType x-font/woff .woff

AddType image/x-icon .ico

AddType image/png .png

  mod_gzip_on Yes

  mod_gzip_dechunk Yes

  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$

  mod_gzip_item_include handler ^cgi-script$

  mod_gzip_item_include mime ^text/.*

  mod_gzip_item_include mime ^application/x-javascript.*

  mod_gzip_item_exclude mime ^image/.*

  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

  ExpiresActive On

  ExpiresDefault "access plus 1 week"

  ExpiresByType image/x-icon "access plus 1 month"

  ExpiresByType image/jpeg "access plus 1 month"

  ExpiresByType image/png "access plus 1 month"

  ExpiresByType image/gif "access plus 1 month"

  ExpiresByType application/x-shockwave-flash "access plus 1 month"

  ExpiresByType text/css "access plus 4 month"

  ExpiresByType text/javascript "access plus 1 month"

  ExpiresByType application/javascript "access plus 1 month"

  ExpiresByType application/x-javascript "access plus 1 month"

  ExpiresByType text/html "access plus 1 week"

  ExpiresByType application/xhtml+xml "access plus 1 week"

# Disable ETags

    Header unset ETag

    Header set Connection keep-alive

FileETag None

############## CACHING-GZIP ############

ExpiresActive On

ExpiresDefault A2592000

ExpiresDefault A2592000

ExpiresDefault A2592000

ExpiresDefault A2592000

ExpiresDefault A2592000

   Header set Cache-Control "max-age=2592000"

   Header set Cache-Control "max-age=2592000"

   Header set Cache-Control "max-age=2592000"

   Header set Cache-Control "max-age=2592000"

            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding

            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding

        AddOutputFilterByType DEFLATE "application/atom+xml" \

                                      "application/javascript" \

                                      "application/json" \

                                      "application/ld+json" \

                                      "application/manifest+json" \

                                      "application/rdf+xml" \

                                      "application/rss+xml" \

                                      "application/schema+json" \

                                      "application/vnd.geo+json" \

                                      "application/vnd.ms-fontobject" \

                                      "application/x-font-ttf" \

                                      "application/x-javascript" \

                                      "application/x-web-app-manifest+json" \

                                      "application/xhtml+xml" \

                                      "application/xml" \

                                      "font/eot" \

                                      "font/opentype" \

                                      "image/bmp" \

                                      "image/svg+xml" \

                                      "image/vnd.microsoft.icon" \

                                      "image/x-icon" \

                                      "text/cache-manifest" \

                                      "text/css" \

                                      "text/html" \

                                      "text/javascript" \

                                      "text/plain" \

                                      "text/vcard" \

                                      "text/vnd.rim.location.xloc" \

                                      "text/vtt" \

                                      "text/x-component" \

                                      "text/x-cross-domain-policy" \

                                      "text/xml"

        AddEncoding gzip              svgz

#hastaaquíparaoptimizacionhtaccess

Y recuerda siempre mantener una copia de seguridad del .htaccess antigua, en caso de errores con el servidor.

#7 Pon en marcha una CDN, como la de CloudFlare

Una CDN es otra de las soluciones definitivas para mejorar la velocidad (y seguridad) de tu página web de WordPress. Y en CDN’s, Cloudflare se lleva el premio gordo: es una de las más utilizadas y es gratuita.
Una CDN acelera tu sitio web al distribuir los contenidos por una red de servidores distribuidos geográficamente. Las siglas CDN son el acrónimo de Content Distribution Network (Red de Distribución de Contenidos) y lo que hace es crear una copia de tu web en la nube. Esto reduce los costes de ancho de banda y ofrece una entrega de contenido estático y dinámico ultrarrápida.
Para acceder a Cloudfare debes:

1. Registrar una cuenta en: https://www.cloudflare.com/es-es/
2. Dar de alta tu dominio.
3. Cambiar DNS de tu dominio por las de CloudFlare.
4. Ir a Configuración > Configuración recomendada y seguir los siguientes pasos:

#8 Instalar WP Fastest Cache

WP Fastest Cache es uno de los varios plugins para WordPress diseñados para acelerar el rendimiento de tu página web. Un sistema de caché optimiza los tiempos de carga creando y almacenando una copia estática de las páginas en la memoria del servidor, de modo que los visitantes recurrentes visitarán dichos archivos durante la segunda y siguientes visitas. Esto significa que la web se descargará más rápido en sus navegadores.
Dicho de otro modo: una caché web no es más que documentos web almacenados localmente para reducir el ancho de banda consumido, la carga de los servidores y el retardo en la descarga.
Para disfrutar todos los beneficios de Instalar WP Fastest Cache, es necesario instalar la versión PRO de este plugin. Para configurarlo, basta con sustituirlo por el plugin de caché que se tenga y configurarlo para que se complemente con el CDN de Cloudflare (y que no haya dos cachés solapándose).

#9 Configurar JS de Google Analytics localmente

Google Analytics es una herramienta de analítica web de Google que permite obtener información del tráfico, audiencia y comportamiento de los usuarios en tu página web.
Para configurar Google Analytics y optimizarlo para mayor velocidad y mejoras en el SEO, el plugin de WordPress CAOS (Complete Analytics Optimization Suite) es la herramienta perfecta:

CAOS | Host Google Analytics Locally

Aloja localmente el JS de Google Analytics, configura como ves en la imagen siguiente y ¡Listo!

#10 Pon en marcha un sistema de lazy-loading

El lazy loading es un sistema de mejora del rendimiento web. Con el lazy loading se carga el contenido de tu página solo cuando sea visible en la pantalla del usuario y se retrasa la carga del objeto hasta que el usuario se desplace para llegar a él.
Existen plugins de WordPress que permiten configurar la carga diferida, uno de ellos es Lazy Load for Videos:

https://es.wordpress.org/plugins/lazy-load-for-videos/

Para webs que tengan vídeos incrustados (YouTube, Vimeo, Twitter, etc.) selecciona la opcoón que sustituye la vista previa del video por una imagen ahorrando carga del script de la URL externa.

#11 Eliminar widgets de WordPress

WordPress viene por defecto con una serie de widgets que aportan poco o nada para el funcionamiento y comportamiento de la web. Así mismo sucede con los widgets que incluyen temas y plantillas que instales en tu backend.

Si hay widgets de RRSS, como twitter o facebook, que no hagan ningún favor a tu web, lo más recomendable es quitarlos.

#12 Instalar WP Optimize

WP Optimize es un plugin de WordPress todo-en-uno que busca mejorar el rendimiento de tu página web.

Limpia tu base de datos, comprime tus imágenes y almacena en caché tu sitio.

WP-Optimize – Cache, Clean, Compress.

Es recomendable para personas que usen mucho WordPress, o sean relativamente grandes.
Para usarlo basta con instalar, ver tablas a limpiar y optimizar (mira antes los cuadros para ver que no nos carguemos nada que después nos vaya a interesar).

#13 Elimina los iframes (como los de Google Maps)

iFrame es la abreviatura de Inline Frame. Básicamente y por no complicarnos con tecnicismos, un iFrame es una web dentro una web.

Permite incrustar documentos, videos y medios interactivos dentro de una página, como mapas de Google Maps o vídeos de YouTube. Esto significa que con un iFrame puedes mostrar una página web secundaria en tu página principal.

Si te planteas mejorar la velocidad de la web, lo más recomendable es quitar el iframe de Google Maps donde aparece la ficha de tu empresa, es decir, no hagas un embed sino simplemente pon una imagen con enlace a la ficha de Google My Business correspondiente.

#14 Optimiza las imágenes de WordPress

La optimización de imágenes es el proceso de disminuir el tamaño de tu archivo mediante el uso de un plugin o script de WordPress. Mejora un montón los tiempos de carga y son fáciles de usar.

Existen opciones como:

• Shortpixel
• Smush Image Compression and Optimization
• Imsanity
• TinyPNG

Solo basta instalarlos en tu consola de WordPress y configurarlos con el paso a paso de cada plugin.

Además, algunos de ellos no solo comprimen la imagen, sino que incluso reducen su tamaño automáticamente antes de la compresión.

#15 Configura la carga de scripts en en el footer de WordPress

Cargar los archivos JS en el footer en lugar de en el header hará mejorar la velocidad del tiempo de carga y el rendimiento de nuestro sitio web, mejorando las puntuaciones de WPO y ofreciendo una mejor experiencia de usuario.

Para hacerlo solo basta con copiar y pegar las siguientes directrices en el archivo functions.php de tu WordPress:

function footer_enqueue_scripts() {

remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);

add_action('after_setup_theme', 'footer_enqueue_scripts');

}

#16 El hosting

Revisa que el servidor donde tienes alojada tu web soporta los requerimiento y necesidades de tu proyecto. En prácticamente cualquier hosting, tienes un cpanel donde puedes ver todos los valores del hosting y ver cuánto estás usando de cada uno. Si en algún valor sobrepasas el 70% de la capacidad, te recomendaríamos hacer un upgrade o valorar un cambio de servidor que se adapte mejor a tus necesidades.

Si necesitas una sugerencia sobre un buen servidor para WordPress, nosotros recomendamos Webempresa (puedes conseguir el mejor precio aquí). Hace más de 10 años que trabajamos con ellos para centenares de proyectos y nunca hemos tenido mayor problema, y cuando lo hemos tenido lo han solucionado enseguida.

Conclusión WPO WordPress

Como has visto, el proceso de mejorar y optimizar la velocidad de tu WordPress no depende de una sola cosa y puede ser muy variable en función de tu proyecto y sus necesidades. Acelerar la carga de páginas web hechas en WordPress puede llevarse por diferentes caminos y cada caso puede ser diferente.

Por eso recomendamos ir haciendo ensayo – error, para ver qué puntos marcan la diferencia, y hacerlo siempre con una copia de seguridad de resguardo, que en caso de que en el proceso de optimización, falle alguna cosa, puedas volver atrás sin problema.

¿Contratar a una agencia WPO WordPress?

Si has llegado hasta aquí, y no lo ves claro, quizás lo que necesitas es la ayuda de un profesional o consultor WPO. 

En Rodanet llevamos más de 10 años y cientos de webs donde nos hemos visto en todas las casuísticas posibles, lo que nos da un background para poder optimizar la velocidad de WordPress de una manera mucho más ágil, y adaptado a las necesidades de tu web.

Por lo que si prefieres es contratar una agencia WPO WordPress, no dudes en contactarnos y hablamos.