En este tutorial vamos a ver cómo optimizar WordPress ✓ para que no te vaya lento ⌛ y poder mejorar la velocidad de carga consiguiendo que tu página o blog sea más rápido.
Empiezo con un resumen de ventajas que te otorga que tu página Web o blog en WordPress, mejore en velocidad y te vaya tan rápido como cuando se ponen a correr los superhéroes "Flash", "Superman" o "Usain Bolt" (este último también parece un superhéroe jeje).
Ventajas...
¿Qué consigues con que tu página web o blog tenga una velocidad óptima y cargue bastante rápido?. Pues sencillamente, que tus visitantes no se larguen de tu web, por 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 con velocidad de menos de 1 segundo, y tú con la tuya que te tarda con una velocidad de 5 segundos. Y a ver si tus visitantes no se desesperan y o una de dos, o cierran el navegador/pestaña para volver a buscar en Google porque no tienen paciencia, o se centran más en la otra página web que abrieron junto con la tuya, que seguramente sea de la competencia. Y también luego comprobamos a ver si Don GoogleBot, te posiciona mejor a tí o a mí con diferente velocidad.
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, en una tarde que te pongas, lo dejas como si le pasaras la ITV al coche.
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, actualizaremos nuestro WordPress y sus plugins.
Tenerlo todo actualizado y al día nos ayuda a que todo vaya mucho mejor y más rápido.
Esto es debido a que puede que hayan corregido algún error o bug que estaba provocando esa lentitud, tanto por WordPress como por algún plugin, o que los 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 aumente la velocidad de tu WordPress y te 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:
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 "Optimizaciones posibles" 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 vía 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.
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:
- Con los recursos ya minificados que nos ofrece PageSpeed para descargar
- 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 la ofrece.
Para elegir un plugin de caché, puedes echarle un vistazo al siguiente artículo donde analizo en un bonito duelo, los 3 mejores plugins de caché que hay actualmente en WordPress:
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 nos 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:
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
# Active compression
SetOutputFilter DEFLATE
# Compress all output labeled with one of the following MIME-types
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
# END Gzip compressionHabilitar compresión Gzip mediante plugins de caché
Otra manera, es hacerlo mediante las opciones que traen 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://www.gidnetwork.com/tools/gzip-test.php
ó
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 bonito.
Pero no prestamos atención a lo realmente importante, que sea un theme con buen rendimiento de velocidad.
Lo ideal es que esté optimizado para el SEO y para la carga rápida, con muchos de los pasos que hemos visto anteriormente "de fábrica".
Si ese theme está mal desarrollado, 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 o bien optimizados, y después elegir uno que te guste su diseño.
A continuación te voy a listar unos de los themes que en mi opinión son de lo mejorcito en cuanto a que están o muy bien optimizados o tienen bastante fama de ser muy veloces:
9
ENVIAR AL FOOTER LO "GORDO"
De manera habitual, muchos themes y plugins, cargan en el header de WordPress, muchos estilos CSS o scripts 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.
Un plugin bastante bueno para realizar todo esto, se llama: WP Scripts & Styles Optimizer . Pero ya estamos con la misma cantaleta de siempre, la de que cuantos más plugins instales, más mierda te generan, y más ralentizan nuestro WordPress.
Así que, si no quieres instalar tanto plugin, échale un vistazo a este tutorial, para hacerlo de manera manual:
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.
Esto de los hostings, como hay tantos, pues es complicado saber cuál es el mejor o si va bien o mal. A veces lo mejor es como en la vida, o una de dos, o probarlos todos, o guiarse de recomendaciones de otras personas que ya lo hayan usado.
Yo por si estás con dudas, te voy a dejar aquí mis recomendaciones de los dos que pienso que actualmente tienen mucho potencial en base a 2 premisas que para mí son fundamentales a la hora de escoger un hosting:
- Que te ofrezcan un buen soporte técnico
- Que te ofrezcan un buen servicio de seguridad
Por eso, en base a estas dos premisas anteriores, los 2 hostings de los que te hablo serían estos:
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 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.
Siteground, es otro hosting maravilloso a la hora de la seguridad con nuestro WordPress. Algo que agradeceremos bastante cuando se produzca alguna vulnerabilidad en WordPress o tengamos que levantar nuestro blog entero debido a algún ataque. Además de ofrecerte un servicio técnico muy aceptable.
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 MAXCDN, una 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%:
 |
Hola, una cuestión: respecto al paso uno, he observado que puede haber una diferencia bastante apreciable entre los resultados de testeo del mismo sitio web en Pagespeed y por ejemplo GTmetrix. ¿Crees que los resultados de GTmetrix u otras webs de análisis son menos confiables que los de Pagespeed?
No es que sean menos confiables, por lo general no varía mucho el PageSpeed Score entre unas u otras. Por ejemplo para mi blog, me da estos resultados:
PageSpeed: 76 / 100
Gtmetrix: 78%
Pingdom: 72
Como ves, están todos entre el 70%-80%, aunque los que más se asemejan son PageSpeed y Gtmetrix. Lo que sí te digo, es que yo siempre en el que más me fijo es en el de PageSpeed de Google, porque al final es el que más nos importa, ya que son ellos los que te van a posicionar o no posicionar, según ese grado.
Gracias por la mención Javier 🙂
De nada! 🙂
Un saludo.
Hola, me sucede que en bastantes ocasiones el contenido de Adsense es detectado por el mismo PageSpeed como perjudicial para el rendimiento, generalmente por la falta de optimización de anuncios, eso hace que los resultados puedan variar apreciablemente (reduciendo la puntuación, claro). ¿Qué opinas respecto a esto?¿en general es perjudicial la inserción de Adsense?
Con los scripts externos cargados por Google Analytics, Adsense, Facebook, Twitter,…, lo mejor es ignorarlos, aunque luego PageSpeed te muestre como que realentizan la página. PageSpeed lo que hace es analizar al 100% que tu web no se ralentice, pero para ese caso, tendría que tratarse de una página muy muy estática, sin redes sociales, sin publicidad, sin analítica, etc. Pero como me atrevería a decir que el 99% usamos scripts externos para este tipo de servicios, pues al final aunque te baje el grado en PageSpeed, lo sacrificas porque para tu página son imprescindibles. Y bueno si me dijeras que usas publicidad o scripts de empresas poco conocidas, te podría decir que te ralentizarán la página debido a que sus servidores son mediocres, pero con empresas como Google, Facebook, Twitter, y compañía, no nos tenemos que preocupar mucho, ya que utilizan lo más potente en servidores o cdns, y por tanto como te digo, aunque te baje el grado en PageSpeed, se compensa.
Buen tutorial!. Me ayudó bastante para optimizar mi wordpress. Gracias compadre!
Hola. He probado a optimizar WordPress con tus pasos, y parece que ahora va mucho mejor. Gracias por el tutorial. Saludos
Me alegra que te haya servido, Mónica.
Un saludo