Como ya os contamos en nuestro QHEM #11 vamos a ‘trastear’ un poco con nuestro blog para aumentar la velocidad de carga en nuestro WordPress. Más de una vez habréis escuchado eso de ‘en casa del herrero, cuchillo de palo, ¿no?… Pues más o menos nos pasa igual. Las webs de nuestros clientes nos gusta cuidarlas, pero luego llegamos a la nuestra y está hecha una pena. Este artículo va a tener una peculiaridad: Va a ser en directo. Es decir, voy a hacer todo sin haberlo probado antes en esta web. Salga bien o salga mal, lo subiré. ¿Por qué tengo la ‘sospecha’ de que puede salir mal? Bueno, esta web está hecha con Orbital theme y este tema ya trae optimizador de HTML y CSS, lo mismo cuando instale uno de los tres plugin revienta. Pero en el peor de los casos tenemos copias de seguridad, no problem.
Velocidad actual de la página
Actualmente tenemos instalado el plugin LiteSpeed Caché, y estamos dando unos valores que podéis ver en el artículo de Pingdom. Grado de optimización A, más rápido que el 84% de los sitios y un peso de 1.1MB. Digamos que no son malos valores pero se podrían mejorar (o al revés, quién sabe…). Mientras estoy escribiendo estas líneas me está entrando un poco de caca por lo que pueda pasar, pero tenía que hacer este artículo… ¡Mi cuerpo pide salsa!
Hacer copia de seguridad
Lo primero que tenemos que hacer es realizar una copia de seguridad (voy a ser muy pesado con esto, pero es lo que hay). Una vez la tengamos la descargaremos y esperaremos no tener que utilizarla. Como ya hemos realizado este paso, vamos al lío.
Desinstalar antiguos plugins
Nuestro siguiente paso será desinstalar el plugin LiteSpeed Caché. Una vez hayamos hecho esto volveremos a Pingdom y analizaremos la velocidad de carga, a ver si realmente la ganancia estaba siendo muy alta o por el contrario no lo estaba siendo tanto. Vamos a probar…
Y los resultados son los siguientes: Grado de optimización A, más rápido que el 84% de los sitios y un peso de 1.3MB. O Pingdom ya tenía nuestra página en caché o este plugin es una castaña. Creemos que la primera opción es la más razonable, pero no descarto nada. Las paranoias cuando no me he tomado mi café mañanero…
WP Fastest Caché
Muchos le conoceréis, pero por si no lo hacíais, aquí os lo dejo. Un maravilloso plugin de caché para nuestro WordPress. Entre los más conocidos se encuentra este mismo, W3 Total Caché, WP Super Caché… Personalmente este nos ha encantado. Vamos a probarlo, ¿no?
Nos vamos a plugin, añadir nuevo, buscar e instalar. Una vez lo hayamos instalado y activado nos saldrá una pestaña en la barra lateral de nuestro backend con el icono de un león o tigre (que no sé si se está riendo o de mala leche…). Nos saldrá una tabla de opciones. Iremos hasta abajo y cambiaremos el idioma por español. Traduce las opciones que le da la gana, pero ahora os enseñaremos las que hemos marcado nosotros.
Como nota importante: No sabemos el resultado que nos dará la opción “Minify HTML“, ya que es una opción que lleva el propio Orbital y que aparte la tendrá el último plugin. En la opción “Preload” marcaremos todas las opciones.
Ya tenemos la configuración guardada. Copiamos el post (por si acaso) y lo probamos.
Después de hacer dos pruebas (en la primera siempre os saldrán números muy altos, no os preocupéis) nos da valores muy similares. Hemos reducido en 0,6 décimas de segundo el tiempo de carga. Como estos valores oscilan, podríamos decir que se ha quedado exactamente igual. Vamos con el siguiente…
WP Optimize
Muchas veces, sin darnos cuenta, acumulamos demasiada basura en nuestro WordPress: Revisiones de post, comentarios marcados como SPAM, etc… De vez en cuando viene bien darle un ‘barrido’ a la web. Con WP Optimize lo haremos en un par de clicks. Seguimos los mismos pasos para realizar la instalación y al lío. El siguiente plugin (autoptimize) está justamente a la derecha. Podemos descargar y activar los dos a la vez para ahorrar algo de tiempo.
Ya lo hemos instalado. Nos saldrá otra pestaña en la barra de herramientas llamada WP-Optimize. Pinchamos allí. Una vez estemos dentro nos aparecerán una serie de opciones ya marcadas por defecto. Aquí ES MUY IMPORTANTE REALIZAR UNA COPIA DE SEGURIDAD. Con este plugin vamos a tocar base de datos. No debería pasar nada, pero vamos, que no cuesta mucho hacerla… Como ya tenemos hecha una copia, vamos a ello.
Pinchamos en “Run all selected optimizations” y a ver lo que pasa…
Visitamos la página y… ¡funciona! (tenéis poca confianza en mi eh…). Le hemos quitado 13MB de basura a nuestra base de datos. Ahora repetimos la prueba.
Valores exactamente iguales. A excepción de que el peso de la página se ha reducido 0,1MB. Vamos con el tercero y último…
Autoptimize
Último plugin pero no por ello menos importante: Autoptimize. Este plugin es el que más me ‘preocupa’. Como ya he repetido más arriba, el propio Orbital está pensado para optimizar a tope la velocidad de carga de la web. Lo más grave que nos puede pasar es que haya incompatibilidad y estalle algo, pero no debería.
Seguimos otra vez los pasos. Pinchamos en ajustes de plugin y seleccionaremos “optimizar HTML” y “optimizar CSS“. También tenemos la opción de optimizar el JavaScript, pero no lo recomendamos, ya que puede interferir en efectos de la web. Eso ya es a vuestra elección…
Guardamos cambios y repetimos la prueba. La web funciona, que eso es lo importante. Ahora vamos a ver si apreciamos algo en la velocidad de carga.
Mismos resultados. Pero no es preocupante por una cosa… ¡Tarda en hacer efecto! Pero mola eh, os he tenido enganchados hasta el final… Venga va, no os enfadéis conmigo, voy a desglosar todo en el siguiente párrafo.
Resultados de la prueba
Si, a lo mejor ahora mismo estáis pensando: ‘Qué cabrón, nos ha tenido aquí enganchados y no ha habido cambios’. Esto es porque lleva su tiempo. La gracia de hacerlo en directo era descubrir posibles incompatibilidades con Orbital, posibles problemas que nos pudieran dar los plugin (con su respectiva solución en directo, lógicamente), etc. Ya hemos descubierto que no tiene incompatibilidades con este tema, por lo que no os preocupéis si optimizáis el HTML con varios plugins y aparte con este tema, no debería fallar. Dentro de unos días (o semanas) haremos otro post explicando los cambios que ha habido. Y si, la optimización de este theme es tremenda, pero si se puede mejorar un poco más mejor que mejor, ¿no? No os preocupéis que os iremos contando.
Conclusión de los plugins
En este artículo hemos visto que, instantáneamente, no hemos mejorado nada. Pero os lo digo y os lo repito, lo hará. En otras páginas webs (divi y bridge) hemos dejado la velocidad de carga en 0,5 segundos y 0,8 segundos respectivamente. Así que os puedo asegurar de primera mano que funciona. El factor de la velocidad de carga es muy importante, por lo que tenemos que optimizarlo a tope. Espero que os haya gustado y no os enfadéis conmigo por teneros en intriga hasta el final, sabéis que os aprecio. Un saludo monetes, continuará…
Edición (Julio 2018)
¡Hola de nuevo monetes! Ya ha pasado un tiempo desde que escribimos este post, y como ya sabéis soy un ‘culo inquieto’. Esta mañana me ha llegado un correo electrónico. Resulta que mi hosting (sered) me ha instalado otra vez el plugin LiteSpeed Caché. Antes de escribir este post ya sabía que podía no funcionar en esta web debido a que utilizamos Orbital theme, que ya viene muy optimizado de inicio. Quizá los plugins que instalé no estuviesen haciendo efecto. O si, pero el efecto contrario. De modo que me he puesto a toquetear, a ver si pasaba algo…
Desinstalación de Fastest Caché y Autoptimize
Lo primero que he hecho ha sido desinstalar estos dos plugins. ¿Por qué? Muy sencillo. Si mi proovedor de hosting insiste en instalarme este plugin de caché quizá sea porque funciona muy bien con sus servidores y tener dos plugins de caché lo veo contraproducente. Y por eso mismo he desinstalado Autoptimize. El propio Orbital te da la opción de optimizar el HTML y el CSS, y aunque no se pisen entre si (ya expliqué que una de las razones de hacer este artículo era descubrir posibles incompatibilidades) veo innecesario tener dos que hagan lo mismo y no se lleguen a complementar.
Instalación de WP Smush
Los que me leéis de manera habitual sabéis mi obsesión por la optimización. Antes de subir las imágenes las reduzco con Photoshop y después las paso por un compresor de imágenes. Según PageSpeed de Google las imágenes estaban optimizadas. Pero como yo soy muy cabezón he decidido pasar el WP Smush, por si acaso. Mi sorpresa ha sido cuando he reducido casi 20MB el tamaño de las imágenes. Una salvajada a mi parecer…
Y WP Optimize se queda
¡¡Se queda!!
¿Y por qué se queda WP Optimize? Se queda porque es un plugin muy útil para limpiar la base de datos de nuestro WordPress, eliminando todo lo que no necesitamos (comentarios marcados como SPAM, revisiones de post, etc…). Su funcionamiento es muy sencillo y lo que os he dicho, ¡optimización a saco Paco!
Resultados de la última prueba (23 de Julio de 2018)
Pasamos nuestra URL por Pingdom y…
A pesar de haber aumentado el tamaño de la página (probablemente debido al sidebar) los tiempos de carga se han reducido en un 5%. Lo que quiere decir que para un tema como Orbital esta última opción sería la mejor. Ya sabéis que cada theme es un mundo y alguno puede necesitar configuraciones de plugins diferentes. Espero que esta última actualización os haya servido.
¡Un saludo!
