wordpress guia optimizacion

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. Actualmente 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.

¿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:

Autoptimize: opciones de Javascript
Opciones de Javascript
Autoptimize: opciones de CSS
Opciones de CSS
Autoptimize: opciones de HTML
Opciones de HTML
Autoptimize: otras opciones
Otras 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.

Cada vez que se publique un artículo debemos borrar la cache para que aparezca a nuestros visitantes.

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:

WP Fastest Cache
Opciones de WP Fastest Cache

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 cuanto al rendimiento, al activar la opción de aceleración de sitio disminuiremos los tiempos de carga al activar el CDN gratuito, que optimiza y publica nuestras imágenes desde una potente red de servidores de JetPack así como los ficheros estáticos de Javascript y CSS.

El problema de JetPack es que dispone de muchas opciones que no son tan necesarias y pueden relentecer nuestra página, sobre todo las referidas a monitorización y elaboración de estadísticas del sitio. A continuación vamos a indicar cuales nos hacen ganar rendimiento y cuales no, para desactivarlas.

Después de registrarte para hacer uso de JetPack saldrá un configurador solicitado ciertos datos para lograr la conexión entre JetPack y tu sitio en WordPress. Para esta parte inicial puedes utilizar esta excelente guía de los chicos de Raiola. La parte que me atañe es la configuración posterior.

Una vez que entramos en el apartado del plugin vamos a proceder a desactivar las opciones innecesarias, para ello debemos ir al final de la página y veremos un enlace a los módulos de JetPack. Si no lo encuentras puedes poner la URL a mano, https://www.tusitio.com/wp-admin/admin.php?page=jetpack_modules

Si marcamos el botón «Activo» solo debe aparecer lo siguiente:

JetPack: opciones
Módulos activos en JetPack

Yoast SEO

Para este plugin de optimización en motores de búsqueda hay documentación más que de sobra en webs especializadas. Es tan completo que tendría que hacer todo un post solo para su configuración y uso. En este caso me voy a referir solamente al motivo por el que se hace indispensable para el posicionamiento web en los motores de búsqueda, sobre todo en Google.

Yoast genera el sitemap para nuestra web, muy útil para brindarlo a Google Search Console. También permite editar las metadescripciones y los snippet (cajas de resultados) que aparecen en las búsquedas en Google, por ejemplo:

Yoast SEO: snippet google
Snippet en Yoast

Por otra parte, el plugin va notificando de los aciertos y errores en el post que se está editando. No tenemos que cumplir al cien por cien con las indicaciones, pero de hacerlo nos aseguramos un mejor resultado en el posicionamiento SEO de nuestro artículo y por tanto de seguirlo habitualmente, en nuestra web.

Yoast SEO: Análisis SEO
Análisis SEO de Yoast

Conclusiones

El mundo del SEO y el correcto uso de las herramientas es infinito ya que es muy cambiante. Un verdadero profesional debe invertir horas y horas en realizar pruebas para ver que combinación es la más acertada. Lo que da un resultado a alguien no tiene por qué darlo a otra persona. Esta guía es muy básica y solo pretende mostrar que siendo metódicos y pacientes se pueden lograr unos resultados más que aceptables. Espero que con esta contribución pueda ayudar a sentar las bases a las personas que se inicien en el posicionamiento web, como ha sido mi caso. Si te ha gustado el artículo no dudes en valorarlo o realizar cualquier pregunta o aportación.

Valoración: 1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…

Deja tu comentario...