Cómo hacer optimizaciones de velocidad básicas en WordPress

Cuando me animé a pasar de hospedar este humilde blog en un hosting «de verdad» a una simple Raspberry pi situada encima de mi mesa noté una reducción de velocidad en la navegación considerable.

¡Hombre! Es que no puedes comparar la velocidad que puede darte un hosting, que tendrá servidores y líneas dedicadas, a la que te puede dar una Raspberry, que es un equipo muy simple. Claro que tiene que ir mucho más lento

¿Otra vez tú dando la nota, Usuario Anónimo? A decir verdad en un principio, tal y cómo dices, achaqué la reducción de velocidad a la falta de potencia de estos dispositivos y la verdad es que no me importaba demasiado puesto que el objetivo de este blog no es ni ganar dinero (ya veis que no tengo publicidad) ni tener miles y miles de visitas, así que debido a esto nunca dediqué el suficiente tiempo a optimizar la velocidad del blog… hasta ahora.

Y es que resulta que cuando hablamos de una página con un reducido número de visitas (y cuando hablo de reducido me refiero a unas pocas miles al día) si la página en cuestión está bien optimizada, los usuarios no deberían notar ninguna reducción de velocidad en la navegación por el hecho de hospedarse en un servidor poco potente como es una Raspberry. El problema que tenía yo no era tanto haber pasado a albergar la web en una Raspberry como el no haberme dedicado a optimizarla antes de la migración.

Ya... pero ponerse a picar código y a revisar tablas y configuraciones no es tan sencillo. Al fin y al cabo mucha gente usa WordPress porque es instalar y punto y habrá que tener conocimientos muy avanzados para hacer una optimización así. 

Para nada. Optimizar mínimamente la velocidad de una página realizada en WordPress no tiene por qué complicarse en demasía. Y hazme caso: cuando digo mínimamente me refiero a optimizaciones básicas y sencillas. Si tienes conocimientos avanzados vas a poder optimizar aún mucho más la velocidad, pero con las indicaciones que os voy a dar, que ya os digo que son muy simples, en muy poco tiempo vuestra web podrá disfrutar de una navegación mucho más rápida y fluída.

1) Optimizaciones básicas en el servidor.

1.1- Actualizad PHP a la última versión

Si tenéis acceso al servidor de páginas web (por ejemplo si hospedáis vuestra página en un servidor propio, o si tenéis comunicación fluída con el encargado de vuestro hosting) una de las mejoras que más vais a notar es tener instalada la última versión de PHP. Hay muchos hostings en los que incluso nos permiten escoger desde el panel de control la versión de PHP que va a usar nuestra página. Las versiones de la 7.0 en adelante presentan mejoras de velocidad muy grandes respecto a las versiones anteriores así que intentad usar siempre las últimas versiones de este software (en el momento de escribir este artículo, lo más actual es la rama 7.3 de PHP). No voy a explicar cómo se realiza la instalación de estas versiones en este artículo. No es el objetivo del mismo y además la instalación es diferente para cada sistema operativo. Pero os voy a remitir a esta página si vuestro servidor es una Raspberry y a esta otra en caso de que tengáis un servidor basado en Ubuntu o Debian.

Como anécdota, comentaros que la primera vez que hospedé este blog en mi Raspberry, lo hice sobre Raspbian Jessie (ahora corre sobre otra instalación más moderna). Esa versión de Raspbian corría por defecto PHP 5.6. En una actualización de Nextcloud (que también lo tengo instalado en el mismo equipo) se me pidió aumentar la versión de PHP y fue en ese momento cuando me di cuenta de que no siempre es buena idea usar las versiones de software que tu distribución te pone por defecto. Subir la versión de PHP supuso un incremento de la velocidad de navegación espectacular en todas las páginas que tenía albergadas en la raspberry y en ningún momento ocasionó un incremento del consumo de recursos, así que os animo a hacerlo sea cual sea vuestra distribución o equipo.

1.2- Activad la caché en vuestro servidor web.

Es importantísimo tener activada la caché en el Apache del servidor (bueno… Apache, Nginx, Lighttpd… cualquiera que sea vuestro servidor de páginas web). De nada nos servirá activar la caché en nuestro blog si estas opciones no están habilitadas en el servidor. Tampoco es objetivo explicar en este artículo cómo se hace, pero podéis ver instrucciones de cómo habilitar la caché en vuestro servidor en esta página web.

Oye, ya que estamos, mójate. ¿Apache, Ngninx, Litespeed, Lighttpd? Cuál es mejor para un rendimiento óptimo. 

Pues esa es una pregunta muy interesante. Si tu único objetivo es el rendimiento, está claro que posiblemente Apache sea el servidor más pesado de todos y el primero en ser descartado. Por ejemplo, Nginx suele tener un tiempo de respuesta mejor que Apache. Sin embargo Apache tiene mucho mejor soporte para características avanzadas. Otros servidores web se pueden atrancar con alguna característica, pero Apache está más que probado, puedes hacer de todo con él y es sólido como una roca. Para el uso que le doy a mis servidores web siempre he preferido un sistema completamente libre y compatible con cualquier cosa (por si en algún momento quiero instalar algo raro), así que mi elección es Apache aún sabiendo que podría mejorar tiempos de respuesta con otro tipo de servidor. En todo caso podéis comprobar que la navegación por esta web es completamente fluida mediante Apache (siempre se puede mejorar, pero para el tipo de web creo que es más que suficiente, por lo que la ganancia de velocidad que podría tener con otros servidores no me compensa la carencia de funcionalidades). Pero hay que rendirse a la obviedad: con los otros se obtiene más velocidad y un menor uso de recursos. Creo que lo más sensato es decir que dependiendo del tipo de proyecto habría que escoger el servidor: Si quiero características avanzadas Apache. Si quiero velocidad pura y dura Lighttpd o Litespeed. Si quiero un mix Nginx. Se podría decir que soy un Fan-boy de Apache (o un Nginx-hater), así que casi todo lo que hago en lo que haya por el medio una página web suele usar Apache, pero esa decisión depende de cada uno.

1.3- Instalad todas las extensiones que requiera WordPress.

WordPress requiere determinadas características en vuestro servidor para funcionar correctamente. Podéis consultar si vuestro servidor cumple todas ellas directamente del panel de control de wordpress. Sólamente tenéis que dirigiros al menú de «herramientas» y pulsar en «salud del sitio». Esta opción os dirá si necesitáis instalar alguna característica a mayores en vuestro servidor. Por ejemplo, este apartado a mi me indicó que en mi raspberry faltaba por instalar la extensión «bcmath» de PHP.

2) Seguid las indicaciones de Google Insights.

Voy a daros la dirección de una página que debéis agregar a vuestros marcadores de inmediato si queréis optimizar alguna web. Es ésta.

https://developers.google.com/speed/pagespeed/insights/

Esta página de Google os va a decir cómo de optimizada está nuestra página web. Algo muy importante es que al buscador de Google «le gustan» más las páginas que obtienen un buen resultado en Insights, por lo que si obtenemos una buena puntuación en Insighs vamos a conseguir que acabe más gente en nuestra web a través de Google.

¿Cómo se usa Insights? Pues es algo tan sencillo como poner la dirección de la web que quieras analizar en la barra dónde pone «Escribe una URL de página web». Lo primero en lo que nos tenemos que fijar es en el apartado que nos dice «Móvil» y «ordenador»:

Esta herramienta analiza cómo de fluída es la web para dispositivos móviles y para ordenadores. Por ejemplo, esta página usa una plantilla para dispositivos móviles y otra completamente distinta para ordenadores, por lo que puede que la navegación esté muy optimizada para un tipo de dispositivos y no lo esté tanto para otros. Si os da un resultado de «100», vuestra página está completamente optimizada para el tipo de dispositivo seleccionado.

Vamos a comparar las estadísticas de mi web con una muy famosa en España con miles de visitas, como es «finofilipino.org«. Luego os comentaré por qué he elegido estas dos webs y no otras cualquiera.

Vamos a ver primero qué estadísticas tiene mi humilde página en este momento. Esta es la puntuación que me muestra a la hora de navegar por la web desde un dispositivo móvil.

Y esta es la puntuación que me muestra a la hora de navegar desde un ordenador.

Como podéis ver, mi página no está tan optimizada para la navegación a través de dispositivos móviles como para navegar a través de ordenadores, y eso se debe a que la plantilla que estoy usando para mostrar la página en los móviles no está tan pulida como la plantilla que uso para la visualización en ordenadores.

Si revisáis alguna página web que hayáis hecho vosotros y os da unos resultados muy inferiores no os asustéis. Antes de aplicar las optimizaciones que voy a explicar en los puntos siguientes, mi web tenía una puntuación de 20 para la visualización en ordenadores, y aplicándolas he llegado a un 96. De hecho vamos a ver qué resultados obtenemos en finofilipino, que es una web realizada en wordpress con muchos miles de visitas diarias. Estos son los resultados que obtiene esa web para la navegación desde dispositivos móviles…

… y estos son los resultados que obtiene para la navegación desde ordenadores.

Como podéis ver son muy inferiores a los resultados obtenidos en mi blog.

¡Para el carro! ¿Me estás comparando tu cutri-blog alojado en una cutri-Raspberry con una página con cientos de miles de visitas diarias, famosa en toda españa, que estará alojada en un servidor "de verdad" y google puntúa mejor tu blog que esa página? O eres un hacha o aquí hay gato encerrado. 

Por eso he elegido esta página en concreto. Según Google la optimización de finofilipino.org (al menos a la fecha de escribir este artículo) es muy mala. Al final da igual que tengamos la web en un servidor dedicado con 16 núcleos y 32 gigas de ram, porque si cada vez que carga nuestra página nuestro ordenador debe procesar 10 megas de «javascripts» la navegación va a ser lenta y la experiencia del usuario no va a ser buena.

En insights debemos fijarnos debajo de las puntuaciones en los apartados «Oportunidades» y «Diagnósticos» para saber cómo atacar estos problemas. Lo ideal es coger el primer resultado de cada uno de esos apartados y analizar cómo podemos mejorarlo.

Os pongo un ejemplo. Cojamos el apartado «evita cargas útiles de red de gran tamaño». En la página de FinoFilipino nos encontramos este resultado:

Insights nos está diciendo que al cargar la web se cargan al inicio dos archivos gif (imágenes en movimiento) que pesan cada uno una barbaridad (el primero más de dos megas y medio). Imaginaos que estáis consultando la web desde un móvil. Sólo para cargar esos dos gif, tendréis que esperar a que se descarguen casi 4 megas (con el tiempo que conlleva), y una vez cargados, vuestro móvil tendrá que reproducirlos (y el formato gif no es de los más eficientes, precisamente). Si eliminamos esos dos archivos o les cambiamos el formato a algo más eficiente (Que ocupe menos tamaño y que nuestro dispositivo tarde menos tiempo en procesar) habremos mejorado el tiempo de carga de la página y con ello habremos mejorado también la puntuación de Insights. Por supuesto, si podemos atacar a todos los archivos que suman los 8 megas de este apartado (y no sólo a los dos primeros), habremos mejorado un montón la carga de la página.

Por tanto la teoría es clara. Si por ejemplo Insights nos dice que no estamos usando imágenes en un formato correcto para publicar en una web (por ejemplo usamos imágenes en PNG en lugar de en JPG), pues tendremos que cambiar el formato de las imágenes que usamos y ese problema quedará resuelto, y así con todos los problemas que encuentre. Muchas veces Insights nos va a aconsejar cosas que son sencillas de entender y cambiar (como en el ejemplo que acabo de poner), y que nos van a hacer mejorar la puntuación y la experiencia de nuestros usuarios con la página web.

El problema es que lo que nos indica insight no siempre es demasiado claro y fácil de resolver para alguien que se dedique diseñar webs, por lo que…

Para, para, para. A ver... alguien que se dedica a diseñar webs tendrá que conocer sus herramientas. Si Insights te dice que tienes que revisar la junta de la trócola, tendrás que revisarla ¿no? 

Sí y no. Desde hace muchos años he visto unos cuantos diseñadores web que realizan diseños espectaculares y que dotan a sus páginas de funcionalidades increíbles, pero que a veces pecan de conocimientos acerca del funcionamiento interno de sus webs.

No, no, no. Esta no me la cuelas. Si sé hacer una web del copón, es que sé cómo funciona por dentro. Si no sé cómo funciona mi propia web no podría haberla hecho. 

No tiene por qué y eso se entiende muy bien con el concepto de «capas de abstracción».

¿¿¿Lo qué???

Te lo explico: alguien a quien le guste el diseño de páginas web se puede centrar perfectamente en los aspectos estéticos de la misma. Por ejemplo cómo combinar los elementos de una página para que no desentonen entre ellos, saber cuáles son los mejores plugins para hacer tal o cual efecto, especializarse en algún CMS (entorno de desarrollo web como WordPress) que sea bueno en el área que le gusta… Pero hoy en día con la existencia de herramientas como WordPress, plugins, etc… ese diseñador no tiene por qué saber gran cosa de cómo funciona un javascript, un CSS o incluso cómo hacer algo en PHP. Esa persona se centra en su «capa de abstracción»: Se dedica a coger herramientas ya creadas (CMS completos como WordPress o Joomla, plugins y temas que han hecho otros desarrolladores, imágenes de stock…) y las combina para realizar su trabajo, pero no tiene por qué conocer el funcionamiento íntegro de sus herramientas (de los otros niveles de abstracción). Fíjate, este vídeo explica ese concepto perfectamente. Lo pongo para que empiece la reproducción justo en el momento que nos interesa.

Resumiendo: a veces es preferible dominar un campo en concreto (tu nivel de abstracción) centrándote en él. Por ello no es difícil encontrar diseñadores web que no tienen ni idea de cómo optimizar una web (porque se centran íntegramente en el diseño) o programadores que son capaces de optimizarla al 100% pero que no son capaces de tener un nivel de diseño aceptable.

En todo caso lo que no deberíamos hacer es matar moscas a cañonazos. ¿que no tengo bien optimizada la web y que va lentísima? Pues en lugar de optimizar el código la pongo en un servidor dedicado más potente y a tirar millas, hombre… que ¿pa’qué nos vamos a matar?

Volviendo al tema que nos interesa, la forma óptima de proceder con cada incidencia que os marque Insights es ver cada una de las líneas donde el sistema nos marca problemas e intentar resolverlos, pero si no tenemos un conocimiento importante en programación porque vuestra «capa de abstracción» no es esa (por ejemplo, si sois más diseñadores que programadores) no siempre vamos a saber cómo enfrentarnos a estos problemas. Os voy a dar un par de trucos para resolver o al menos intentar mejorar la puntuación en las incidencias más habituales que nos puede reflejar Insights.

3) Huíd en la medida de lo posible del contenido alojado en otros sitios.

Este es, por ejemplo, uno de los problemas que tiene en estos momentos Finofilipino y que posiblemente esté reduciendo enormemente su puntuación. Es habitual que en muchas páginas el autor quiera mostrar publicidad que, evidentemente, no está alojada en la propia web sino que está albergada en los servidores del servicio en el que la ha contratado (como adsense u otros servicios). Puede que también se quieran mostrar vídeos colgados de Youtube o Vimeo, enlaces a tweets colgados en Twitter, o simplemente usar Google analytics para las estadísticas de la web. Todo ese contenido alojado en otros sitios va a ocasionar que el tiempo de carga de nuestra web y su optimización no sólo dependa de que nosotros hayamos hecho los deberes y de que todo lo tengamos bien optimizado, sino que también va a depender de que todos estos servicios estén también correctamente dimensionados y optimizados… y desgraciadamente esto es mucho pedir. Es habitual ver que Insights se queja de que hay «cosas» que no están bien optimizadas y cuando intentamos resolverlas no podemos hacer nada porque están alojadas en otros sitios. Incluso aunque esas páginas tengan una optimización correcta, cada una de ellas intentará cargar sus CSS, javascripts, etc… y hará que el navegador tarde en mostrarnos los diferentes elementos (que son cada uno de su padre y de su madre).

No resulta sencillo atacar este problema. Lo más obvio y efectivo es no publicar contenido de páginas que reducen nuestra puntuación o al menos no publicar demasiado contenido de esos sitios, pero puede que necesitemos mostrar sí o sí contenido de Twitter o de alguna otra web, o que necesitemos utilizar algún servicio que nos inserta código en nuestra página (Adsense, doubleclick, disqus…), por lo que tendremos que pensar bien si nos compensa arreglarlo y prescindir de estos servicios o dejarlo como está a pesar de reducir la puntuación. Por ejemplo, Finofilipino vive de contenido publicado en otras plataformas (twitter, vimeo, youtube, etc…) por lo que cumplir este punto puede serle muy complicado.

Mi recomendación es que si necesitamos incluir contenidos de terceros lo hagamos pero sin abusar. Antes de poner la página en producción podemos mirar la puntuación de Insights y si vemos que alguno de estos servicios nos tumba la puntuación, hay que plantearse eliminarlo (o al menos reducir el número de llamadas a él).

4) Instalad estos módulos de WordPress para mejorar la optimización de forma automática.

Muchos de los problemas que nos va a marcar Insights la primera vez que analicemos una web realizada en WordPress son comunes a la gran mayoría de páginas: caché no activada, imágenes en formato no adecuado, recomendaciones acerca de hacer la carga de las imágenes en diferido… Los creadores de plugins lo saben, por lo que podemos encontrar algunos (en el apartado «plugins» de nuestro Worpdress) que nos ayudarán a mejorar nuestra puntuación de forma sustancial. Vamos a ver los que mejor resultado me han dado en este sentido (y os voy a decir cómo los he configurado yo).

4.1- Jetpack

Jetpack es un plugin que debería ser obligatorio en cualquier instalación de WordPress bajo pena de cárcel por no instalarlo. Además de ofrecernos servicios tan útiles como protección del sitio ante ataques, eliminación automática de spam en comentarios o un sistema muy completo para visualizar estadísticas de uso de nuestra web, nos permite activar también algunas opciones que mejoran el rendimiento de entrega de las imágenes y archivos estáticos a nuestros usuarios, además de permitir la carga diferida de las mismas (algo en lo que Insithgs insiste mucho), y todo ello de forma gratuíta. Si no lo has instalado aún estás tardando en instalarlo. Hazlo cuanto antes, porque además de resolver el rendimiento con las imágenes, va a darte muchas otras funcionalidades interesantes.

4.2- Autoptimize

Con Autoptimize vamos a poder atacar a un montón de cosas a mejorar que nos marca Insights. Autoptimize se trata de un plugin para wordpress cuya funcion es únicamente mejorar el código de nuestro sitio para elevar su velocidad de carga y conseguir mejores puntuaciones de Insights. La mayor parte de todo lo que hace autoptimize es gratis (con la excepción de una parte de la optimización de imágenes, que ya está realizando JetPack), así que también estás tardando en instalar este plugin. No creo que haga falta pena de cárcel si no lo instalas, pero una condena a trabajos comunitarios no la vería con malos ojos.

Una vez instalado el plugin, vamos a irnos a su primera pestaña (JS, CSS y HTML) en la que en primer lugar nos permite optimizar el javascript que tengamos «disperdigado» por nuestra página. Nos permite unificar todos los JS en uno sólo y otros ajustes. Ésta es la configuración que tengo yo.

Os recomiendo probar la configuración antes de activar más cosas. Si va bien, entonces seguís activando optimizaciones. Es mejor hacerlo así porque algunas de estas optimizaciones os puede estropear algún elemento de diseño. Así, si váis aplicándolas poco a poco, podréis saber cuál os está fallando y debéis desactivar.

Autoptimize nos permite hacer más o menos lo mismo con los CSS. Permite optimizarlos, unificarlos y otras opciones. De nuevo vamos activando opciones y comprobando que la página no se despatarra.

Lo mismo para el código html. Marcamos la opción para que nos optimice también esta parte.

Al final de todo de la primera pestaña tenemos también una mezcla de opciones que también nos interesa tener activadas.

Nos vamos a la siguiente pestaña (imágenes). La primera opción nos permite optimizar el formato de las imágenes y cargarlas desde un servidor distinto, pero parte de esa opción es de pago, así que no creo que merezca la pena activarla. La única opción que puede merecer la pena es la de la carga diferida de imágenes, pero si me habéis hecho caso ya la habréis activado en Jetpack, por lo que podemos dejar todas estas opciones sin activar.

Nos vamos ahora a la tercera pestaña, llamada «Extras». La única opción que tengo activada aquí es la que se llama » Quitar cadenas de petición de recursos estáticos «.

Este plugin sí que os hará dar un salto enorme en las puntuaciones de Insights, y sin tener que tocar vosotros absolutamente nada en el código de vuestra página. El plugin es el que hace el trabajo y vosotros os podéis despreocupar.

4.3- Cache enabler

Este pequeño plugin únicamente nos sirve para optimizar la caché de las páginas de nuestra web. En él sólo tengo activadas las opciones de caducidad de la caché (lo tengo configurado para que caduque a las dos horas) y las dos primeras opciones acerca del comportamiento de la caché (Estas dos opciones permiten autovaciar la caché en caso de que haya cambios en la página).

4.4- Async JavaScript

Este plugin (Del creador de autoptimize) permite realizar optimizaciones adicionales en los archivos JavaScript que tengamos en nuestra página. En la pestaña Settings lo primero que debemos hacer es marcar la opción «activar Async JavaScript» para poder empezar a trabajar con él.

Después debemos marcar el método que va a usar el plugin para tratar JavaScript y jQuery. Después de hacer algunas pruebas (con despatarre de mi web incluída), en mi caso el método ideal es Async.

Y personalmente no tengo nada más configurado en este plugin. Dejad el resto como ya está y hará su trabajo a la perfección.

Si seguís estas indicaciones podéis tener garantizado un aumento del rendimiento considerable al acceder a vuestra página, además de una puntuación muy buena en Insights (Con el consiguiente aumento del tráfico proveniente de Google, claro).