Guía de optimización en WordPress

Introducción

Esta guía comprende la configuración básica y herramientas gratuitas necesarias para una correcta optimización de un sitio web basado en WordPress.

La filosofía de trabajo ha consistido en el uso de plugins gratuitos y la correcta configuración entre ellos para lograr un sitio web completamente optimizado para las actuales métricas de Google PageSpeed. Para ello vamos a hacer uso de plugins de SEO, cache y optimización con técnicas como el uso de un CDN, minificación y combinación de código, etc…

Aunque parezca un trabajo complicado no lo es si sigues los pasos de la guía. Con un conocimiento básico de WordPress puedes lograr resultados espectaculares como los que he conseguido en esta misma web. En el momento de realizar esta guía los datos de PageSpeed arrojan un 97% de optimización para la versión de ordenador y un 56% para la versión móvil, más difícil de optimizar.

¿Por qué optimizar?

Si escribes esta pregunta en Google obtendrás mil razones, y todas ellas muy válidas para cada caso en particular. Casi todas comparten una meta común, dar a conocer nuestra web apareciendo en las primeras posiciones de búsqueda.

Para dar a conocer nuestra web tenemos dos opciones: pagar publicidad o facilitar el trabajo a Google. Para una web de empresa recomiendo al principio una campaña de publicidad pagada y luego ir reduciendo el coste de la misma cuando se vaya logrando un buen posicionamiento en el buscador, es decir, cuando la búsqueda orgánica nos haga aparecer en las primeras páginas de Google.

Optimizar una web no es solo utilizar imágenes ligeras o tener un hosting con discos SSD, Google nos premia si le preparamos nuestra web para que su red de arañas lo tenga fácil (spiders, bots que rastrean el contenido de las webs). El algoritmo de posicionamiento también cambia muchísimas veces, por lo que debemos realizar una labor de mantenimiento en nuestras webs optimizadas.

Material necesario

Partiremos de la siguiente lista de requisitos. Se dará por hecho de que se tienen nociones básicas de WordPress, al menos para instalarlo y conocer la estructura y funcionalidad mínima. En caso contrario mejor consultar antes alguna guía más básica.

• Hosting WordPress: Es muy importante contar con un buen hosting. La velocidad de carga de la web incide directamente en la experiencia de usuario y, como no, en la métrica de optimización de Google. No hay que gastar mucho dinero, en mi caso pago alrededor de 50 euros al año por un hosting europeo, con espacio ilimitado, 5 bases de datos, cuentas emails ilimitadas, etc…
• WordPress: Evidentemente, intentando tener siempre la última versión. Partiremos de una instalación limpia sin ningún tipo de plugin instalado.
• Plantilla de WordPress: La plantilla a utilizar nos puede facilitar o complicar mucho las cosas. WordPress tiene infinidad de plantillas, la mayoría de ellas gratuitas. En mi caso estoy utilizando un pack de plantillas que he comprado pero simplemente lo hago para ahorrar tiempo en los desarrollos que me piden los clientes. Busquen una plantilla ligera, responsive, y que esté optimizada para SEO. Mi recomendación es que prueben exhaustivamente el comportamiento de la plantilla, sobre todo en modo móvil, ya que normalmente atrae a más del 90% de las visitas.
• Plugins: Los justos y necesarios! Cada plugin que se instale añade multitud de ficheros Javascript y CSS, complicando la optimización, cargando más la web y añadiendo recursos a descargar. Todo esto penaliza. Los plugins básicos para este tutorial son:
  • Autoptimize
  • WP Fastest Cache
  • JetPack
  • Yoast SEO

Configurando las herramientas

Cabe destacar que esto es una receta, y como cada receta hay que adaptarla a cada necesidad. Este es el resultado de muchas horas de pruebas y errores y búsquedas en foros para intentar que casi todo funcione correctamente. Existe un plugin de pago llamado WPRocket que tiene muy buena crítica y, en caso de pagar seguramente toda esta guía sería innecesaria. La optimización es un proceso muy complejo en el que es bastante fácil romper algo, por lo que siempre se recomienda hacer una copia de seguridad, por muy simple que sea el cambio a aplicar. ¡Advertido estás!

En lo referido a la optimización, el verdadero reto ha sido lograr combinar la versión gratuita de las herramientas Autoptimize y WP Fastest Cache para lograr tener una funcionalidad parecida a WPRocket. En muy pocos blogs se explica como hacer este trabajo. De JetPack, un plugin muy completo, se han desactivado muchas funcionalidades para hacer uso solo de lo necesario. Para el posicionamiento, Yoast sin duda es el plugin por excelencia.

Autoptimize

Permite optimizar el código HTML, optimizar código Javascript y optimizar código CSS. En nuestro sitio, cada plugin y tema contiene multitud de ficheros independientes. Cada vez que un visitante pide ver nuestra web debe descargarse cada uno de ellos, muchas veces generando tiempos de espera al saturar el número máximo de conexiones. Google penaliza todo esto, por lo que vamos a tratar de combinar y minificar todos los ficheros en uno, eliminando todo lo innecesario como comentarios en el código, lineas en blanco, etc.

En la pestaña de JS, CSS y HTML debes marcar solo las siguientes opciones:

En la pestaña Imágenes NO marcamos nada. Para ello, más adelante, vamos a configurar el CDN gratuito de JetPack.

En la pestaña Extra solo marcamos las siguientes opciones:

• Google Fonts: Combinar y cargar las fuentes asíncronamente con webfont.js
• Quitar cadenas de petición de recursos estáticos: Quitar cadenas de petición de recursos estáticos.

WP Fastest Cache

Es uno de los mejores plugins de cache, bastante simple y con las suficientes funcionalidades gratuitas para nuestras necesidades. Vamos a hacer solo uso de la parte de cache pura, ya que la optimización la hemos delegado en la herramienta anterior.

Cuando un visitante entra en un sitio hecho con WordPress el servidor tiene que devolver una página estática en HTML puro, pero WordPress utiliza PHP para lograr su funcionamiento dinámico (acceso a bases de datos, funciones, etc…). La cache lo que hace es realizar una «foto» de nuestro sitio y mostrar ese contenido estático al usuario, por tanto evita la conversión dinámica a estática. A Google le gusta que el contenido se sirva rápido, y a los usuarios también, ¡muchos abandonan la web si tarda demasiado!

Para que WP Fastest Cache haga su magia solo debes marcar las siguientes opciones:

Nota: Hemos quitado los emojis que trae por defecto WordPress, en nuestro caso no eran necesarios y se logra cierta optimización con ello. También hemos desactivado la cache para usuarios loggeados, así podemos ver los post sin necesidad de refrescar la cache. En mi caso mi web no tiene registro de usuarios, por lo que aseguro que mis visitantes siempre ven la web en cache mientras que cuando trabajo con mi usuario veo el contenido real sin cachear.

JetPack

Es un plugin multipropósito gratuito enfocado a la gestión, rendimiento y seguridad de los sitios WordPress.

Vamos a sacar partido de su sistema de seguridad, que incluye protección contra los ataques de fuerza bruta, malware y un potente filtro antispam para los comentarios.

En cua