Mejorar velocidad de WordPress [TUTORIAL 10 PASOS]

Buenas y cordiales tardes!
En este tutorial vamos a ver cómo mejorar y optimizar la velocidad de tu WordPress, porque más tarde o más temprano, te va a tocar hacerlo, como nos ha tocado a todos, y me incluyo.
Empiezo con un resumen de ventajas que te otorga el que tu página Web o blog en WordPress, te vaya igual de rápido que cuando se ponen a correr el superhéroe Flash, Clark Kent o Usain Bolt  😀 .

​Ventajas

 ¿Qué consigues con que tu página web o blog carque rápido?. Pues que ese vistante no se largue de tu web o blog, por culpa de tardar en cargar más de 5 segundos.

Ahora dirás: !Venga ya, no te pases, que 5 segundos en cargar una web, no es nada!.

Y voy yo y te digo: vale, cuando quieras hacemos una prueba con mismo contenido, yo con mi página que tarda en cargar menos de 1 segundo, y tú con la tuya que te tarda 5 segundos. Y a ver si tus visitantes no se cansan y cierran el Chrome por que no tienen paciencia. Y no solo eso, también luego comprobamos a ver si Don GoogleBot, te posiciona mejor a tí o a mí.

Google le da mucha importancia ahora a la velocidad de carga de las páginas, lo mismo que al diseño responsive. Por tanto si lo dice Google, será por algo. Así que te aconsejo que vayas empezando por hacer estos 10 pasos muy sencillos y que no te supondrán mucho esfuerzo. Yo intentaré explicártelo lo mejor posible para que no necesites unos superconocimientos para implementarlos.

!Y solo son 10 pasitos mujer/hombre!  😛 

1

ANALIZAR TU WEB

​Lo primero que vamos a hacer es analizar nuestra web, para saber en qué estado se encuentra de velocidad.

Para ello nos vamos a valer de 2 herramientas de las muchas que existen:

​PageSpeed

Una vez que estemos en PageSpeed, pondremos nuestra url en la caja de texto y le damos al botón analizar:

Nos saldrá información sobre nuestra página, donde veremos un número sobre 100, relacionado con nuestra velocidad de nuestra web:


  • ​Si nos sale en rojo o en ámbar, nos indicará que nuestra web necesita optimizarse y mejorar la velocidad.
  • ​Si nos sale en verde, nos indicará que nuestra web está perfecta y carga bastante rápido.

Pingdoom

​Con Pingdom, tenemos que fijarnos bien, en estos datos:

  • Performance grade: es el número sobre 100 de PageSpeed de Google que vimos antes. Puede que no nos salga parecido a si lo hacemos directamente con la herramienta de PageSpeed, pero se acerca algo.
  • Load time: el tiempo en segundos que tarda en cargar nuestra web. Aquí como consejo, debería de tener no más de 1 segundo y medio. Más de 1 segundo y medio o de 2 segundos, quiere decir que vuestra página tarda algo en cargar, y hay que optimizarla.
  • Page size: es el tamaño que ocupa tu página web. Si es muy pesada, probablemente tarde más segundos en cargar en "Load time". Y por eso hay que intentar reducirla y minimizar los archivos lo máximo posible.
  • Faster than XX% of tested sites: Cuanto más tanto por ciento nos salga, más rápida será nuestra web. Un buen % sería del 70% hacia arriba.

2

DESINSTALAR PLUGINS INNECESARIOS

Algunos plugins, por lo general al instalarlos, lo que hacen es cargar hojas de estilos, fuentes, librerías de javascript,...

A veces necesitan también que se carguen ciertas imágenes, e incluso necesitan cada vez que carga tu página, realizar peticiones a la base de datos, para realizar determinadas acciones.

Todo este proceso, lo que hace es ralentizar tu página. Y bueno si es un plugin que lo usas y necesitas a diario, no te queda otra que aceptarlo. Pero si es uno que lo tienes ahí instalado y activado, porque lo probaste un día que lo viste para ver cómo funcionaba, pues una vez probado, y no dándole ya uso, tienes que desactivarlo y desinstalarlo para que no te haga ralentizar tu WordPress.

3

ACTUALIZAR WORDPRESS Y PLUGINS

Después de desactivar y borrar los plugins que no usemos, lo primero que vamos a hacer es actualizar nuestro WordPress y plugins.

Tenerlo todo actualizado y al día nos ayuda a que todo vaya mucho mejor y más rápido, ya que puede que hayan corregido algún error o bug que estaba provocando que fuera más despacio WordPress o algún plugin, o que lo hayan mejorado y optimizado para que no tarde tanto en cargar.

Por ello, actualizar, siempre es sinónimo de mejora, y por tanto de optimización.​

4

OPTIMIZAR LA BASE DE DATOS

Optimizar la base de datos, te ayudará y mucho, a que tu WordPress vaya mucho más rápido.

El motivo es debido a que WordPress, genera mucho residuo, por ejemplo cuando editamos nuestros artículos, es decir, crea multitud de revisiones, autoguardados y autoborradores, por si acaso quisieras recuperar lo que habías escrito. Otro tipo de residuos son el spam de comentarios

O también, cada vez que instalamos y desactivamos plugins, se nos queda mierdecilla en nuestra base de datos (algunos crean nuevas tablas, otros dejan configuraciones y datos que no se borran al desinstalarlo,...).

Por tanto, lo recomendable es que al menos una vez al mes, le hagas una optimización a dicha base de datos.​

​Para optimizarla, yo te recomendaría que lo hicieras con este plugin, que para mí es de lo mejorcito:

​https://es.wordpress.org/plugins/wp-optimize/

5

OPTIMIZAR IMÁGENES & MINIFICAR CSS & JS & HTML

​Para optimizar las imágenes y minificar los archivos de CSS y Javascript, lo que vamos a hacer es comprobar si nuestra web, necesita que se optimicen dichos recursos y sabér qué tipo de archivos son los que no tenemos optimizados.

En el análisis que hicimos anteriormente en el paso 1 con la herramienta PageSpeed, podemos ver cómo si tenemos imágenes que requieran de ser optimizadas, o archivos CSS y JSS que nos piden que tienen que ser minificados, nos saldría un mensajito de "Elementos que puedes plantearte corregir" con todos los tipos de recursos que tenemos que optimizar y minificar:

​Haciendo clic en el enlace de "Mostrar cómo corregirlo" nos saldrá el listado de recursos para corregir dependiendo de lo que se trate.

Podríamos ir uno a uno, optimizando y minificando dichos recursos con diferentes herramientas para optimizar imágenes o archivos, pero PageSpeed ya nos lo da todo incluído, y nos lo hace automático. Solamente tenéis que buscar el enlace que os pone abajo del todo y descargaros esos recursos ya optimizados:

​Una vez tengamos descargados dichos recursos, tendríamos que sustituirlos por ejemplo via ftp, por los que ya tenemos subidos en nuestro hosting.

​​Para la minificación HTML, lo mejor y más sencillo, es hacerlo con la funcionalidad que nos traen casi todos los plugins de caché para poder minificar HTML, CSS y JS.

NOTA: Otro método para optimizar imágenes, sería instalarnos el maravilloso plugin Imagify, con el cual se nos optimizarán automáticamente las imágenes cada vez que las subamos a la biblioteca de WordPress.

Resumen del paso 5:

  • Optimizar Imágenes: optimizaríamos solo las imágenes que lo necesiten, y que nos ofrece PageSpeed como recursos para descargar, como hemos visto en las imágenes. O usaríamos el plugin Imagify.
  • Minificar CSS&JS: Lo podríamos hacer de 2 maneras:
  1. Con los recursos ya minificados que nos ofrece PageSpeed​ para descargar
  2. Mediante algún plugin de caché que veremos en el siguiente paso.
  • Minificar HTML: Lo haríamos directamente con la funcionalidad que nos viene en los plugins de caché que veremos en el siguiente paso.

6

USAR UN PLUGIN DE CACHÉ

​Los plugins de caché, están especialmente dedicados para optimizar la velocidad de nuestro WordPress.

Lo que hacen es, que cuando cargamos una determinada página, entrada,​ etc de nuestro web en WordPress, evitan tener antes que andar realizando una consulta a la base de datos para poder mostrar los datos o cargar archivos como imágenes u otros archivos. Éste proceso, lo que evita es que se ralentice la carga de esa página, ya que lo que hace es mostrarte como una especie de "foto" de dicha página realizada previamente a que tú escribieras la url.

​Pero algunos plugins, no solamente se encargan de ofrecerte la opción de realizarte el mencionado caché, sino que algunos van mucho más allá y vienen equipados con un sistema de minificación de archivos, como hemos visto en el paso anterior.

Podremos minificar tanto archivos JS, CSS como archivos HTML.

La minificación de JS y CSS, como hemos​ visto en el paso anterior, lo podríamos hacer también con PageSpeed, lo cual yo te lo recomendaría mucho antes que mediante estos plugins, para evitar conflictos que a veces ocurren.

Ahora bien, la minificación HTML, sí tendríamos que realizarla con uno de estos plugins, ya que PageSpeed no te la ofrece.

​Para elegir un plugin de caché, puede echarle un vistazo al siguiente artículo donde analizo en un bonito duelo, los 3 mejores plugins de caché que hay actualmente en WordPress:

http://ejemplocodigo.com/w3-total-cache-vs-wp-super-cache-vs-wp-rocket-mejor/

7

HABILITAR COMPRESIÓN

​La compresión gzip que muchos servidores web traen incorporada, nos ayuda a comprimir archivos antes de ser descargados para cargar una determinada página.

​Antes de todo, tenemos que verificar si tenemos habilitada la compresión en nuestro WordPress. Para ello, nos vamos a la siguiente herramienta: http://www.gidnetwork.com/tools/gzip-test.php

Si al analizar nuestro dominio, nos saliera no en Web Page Compressed:

​, entonces no está indicando que:

  • O bien no tenemos habilitado el módulo mod_deflate en nuestro servidor apache
  • O bien no tenemos habilitada dicha compresión en las opciones de WordPress.

Para saber si está habilitado dicho módulo en nuestro servidor apache, podríamos hacerlo:

  • Si tenemos acceso al servidor apache: ejecutando el comando httpd -M
  • Si no tenemos acceso al servidor: habilitando la compresión en las opciones de WordPress y volviendo a analizar con la herramienta gzip-test que vimos anteriormente.

​Por tanto, como lo más común es que no tengas acceso al servidor apache, vamos a habilitar la compresión en WordPress y comprobarlo.

​Habilitar compresión Gzip mediante .htaccess

​Para habilitar la compresión a través del archivo .htaccess, lo editamos y añadimos el siguiente apartado:

# BEGIN Gzip compression
<IfModule mod_deflate.c>
# Active compression
SetOutputFilter DEFLATE
# Compress all output labeled with one of the following MIME-types
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml
application/javascript
application/json
application/rss+xml
application/vnd.ms-fontobject
application/x-font-ttf
application/xhtml+xml
application/xml
font/opentype
image/svg+xml
image/x-icon
text/css
text/html
text/plain
text/x-component
text/xml
</IfModule>
</IfModule>
# END Gzip compression

​Habilitar compresión Gzip mediante plugins de caché

​Otra manera de habilitar dicha compresión, es hacerlo mediante las opciones que traen la mayoría de los plugins de caché que vimos en el paso 3.

​Realmente lo que hacen es lo mismo que si editas el archivo .htaccess como hemos visto en el punto anterior, pero ya se encarga el plugin de editarlo. Eso sí, ten en cuenta que si lo habilitas con un plugin de caché, no lo hayas habilitado tú ya manualmente en el archivo .htaccess.

Paso final

​Una vez habilitada la compresión, verificamos nuevamente si lo tenemos habilitado, con las herramientas: 

​ó

http://checkgzipcompression.com​

Si después de hacer el test, nos sigue saliendo que NO está habilitado, entonces ya sí nos está indicando que no tenemos habilitado el módulo mod_deflate en nuestro servidor apache. Deberás contactar con tu proveedor de hosting para ver si te lo pueden activar, o activarlo tú si tuvieras acceso a la configuración de tu servidor apache.

8

INSTALAR UN THEME LIGERO

Muchas veces, nos cegamos con instalar un theme por su aspecto visual y por tener un diseño super mega bonito, pero no prestamos atención a lo realmente importante, y es que sea un theme que ofrezca un buen rendimiento en cuanto a velocidad y a que esté preparado para el SEO.

​Esto lo que provoca es que si ese theme está mal programado por los que lo han creado, no está bien optimizado, y tampoco se actualiza muy a menudo para corregir errores y bugs, pues al final nos va a repercutir en nuestro rendimiento de WordPress, y por tanto en mejorar la velocidad que es lo que nos importa.

​Existen themes ligeros, bien optimizados y además con un buen diseño. La clave es, antes de ponerse a buscar un theme solamente por su diseño, informarse cuáles son los más ligeros y rápidos, y después elegir uno que te guste su diseño.

​En mi caso, el theme que estoy usando aquí, es el theme best, de MyThemeShop, el cual según muchos análisis, es uno de los themes más rápidos y optimizados que existen en el mercado:

9

ENVIAR AL FOOTER LO "GORDO"

​De manera habitual, muchos themes y plugins, cargan en el header de WordPress, muchas hojas de estilo CSS o scripts de javascript en JS.

Esto lo que provoca es, que cuando cargas la página, si estos archivos ocupan mucho tamaño, hasta que no los descarga, no se carga todo lo demás, con lo que la percepción que le llega al visitante de tu blog o web, es que tu página tarda bastante en cargar, y puede hasta provocar que antes de que cargue, cierren tu web y se vayan a otra (la gente cada vez tiene menos paciencia jeje).​

​Una solución o truco, es enviar al footer de WordPress, todos esos archivos que se cargan en el header, y no son tan esenciales.

Puedes echarle un vistazo a este ejemplo, donde verás cómo enviar al footer todo eso:​

​http://ejemplocodigo.com/ejemplo-wordpress-cargar-estilos-css-scripts-js-footer/

10

CONTRATAR UN BUEN HOSTING Y UNA CDN

​Hosting

Como sabrás, existen multitud de hostings para alojar tu web con WordPress, pero no todos ofrecen la misma calidad a la hora de ofrecerte el serivicio de hosting.

​Y por mucho que tengas optimizado tu WordPress, con los 9 pasos que hemos visto anteriormente, si tu hosting te está ofreciendo un pésimo servicio o con versiones ya obsoletas y desactualizadas, pues al final, no vas a poder mejorar la velocidad al máximo.

​Yo te voy a listar los 3 mejores hostings que he probado con WordPress y que nunca me dieron problemas, y en los cuales mis páginas con WordPress siempre fueron bastante rápidas, verificadas con la herramienta PageSpeed de Google:

​Elegir uno u otro, ya es cuestión de preferencias, ya que sus precios son muy parecidos.

Hostgator, por ejemplo, es un servicio de hosting de los más conocidos internacionalmente y muy económico, con un servicio bastante aceptable. La pega: pues que es en inglés. Pero vamos hoy en día quién no sabe inglés...

​1&1, a parte de ser en español, ofrecen las últimas tecnologías en sus servidores, con discos duros SSD que harán que tu velocidad aumente. Además de ofrecerte otras características muy recomendables como el protocolo SSL, que si tienes una tienda online con Woocommerce por ejemplo, lo agradecerás y mucho.

Webempresa, es de los últimos hostings que están sonando mucho por Internet, y si suena y es mega-recomendado, será por algo. La verdad es que te ofrecen también lo más actual en tecnología, discos SSD, multitud de ofertas y características, y un soporte técnico envidiable. Además de ser también en español, que se agradece bastante.1&1 Web Hosting

1&1 Web Hosting

​CDN

​Una CDN es una Red de Entrega de Contenidos, que para que lo entiendas, es una especie de "hosting en la nube", para almacenar caché de páginas web.

Anteriormente, en el paso 6, vimos como era esencial usar un plugin de caché para mejorar la velocidad. Ese caché se puede guardar en el disco de tu propio hosting, pero, si dicho hosting es bastante limitado en cuanto a prestaciones, a veces es mejor que guardes ese caché en una CDN, ya que tienen servidores mucho más potentes y veloces, los cuales te ofrecerán un mejor servicio, y así no saturarás tu propio hosting.

​Imagínate, que tu web tiene multitud de fotos e imágenes, que ocupan mucho espacio porque las necesitas a la mayor calidad y resolución (ejemplo te dedicas a la fotografía). Si usas tu propio hosting donde tienes tu blog, para cachear todas esas fotografías, dependerás de los recursos del servidor donde esté alojado tu blog o página web, y del plan que hayas contratado con ellos.

Con una CDN, usarás servidores super potentes en la nube, para cachear dichas fotos, y no dependerás para nada del hosting de tu web.​

​CDNs hay muchas, pero yo te aconsejo MAXCDNuna de las mejores CDN y más conocidas del mercado, que a la vez, viene incluida para configurarla en la mayoría de los plugins de caché y para que te hagas una idea, es la que actualmente usa el creador del famoso plugin YOAST para el SEO.

Si quisieras contratarlo, en el enlace de abajo podrás disfrutar de un descuento del 25%:

Valoración General

[Valoraciones:  4    Promedio:  5 de 5]