Guía definitiva para mejorar el rendimiento de WordPress

21 de agosto, 2020 @ 10:07 — 0 comentariosDescargar PDF

1 - Cuantos menos plugins, mejor

El núcleo de WordPress es un software de gran calidad creado por desarrolladores profesionales, que no solo buscan que WordPress funcione bien; también tienen en cuenta su velocidad y consumo de recursos. Gracias a su esfuerzo, WordPress permite crear sitios webs ligeros y veloces.

Desgraciadamente, la mayoría de plugins disponibles para WordPress no son especialmente buenos en ese aspecto. Muy frecuentemente, el uso de un plugin aparentemente simple tiene consecuencias muy negativas en la velocidad de carga de una web.

Normalmente, la perdida de velocidad provocada por un único plugin no se suele apreciar a simple vista, pero cuando el número de visitas a tu web aumenta o la cantidad de plugins ineficientes crece, la perdida de rendimiento se hace patente.

La conclusión es clara: usa el menor número posible de plugins.

Además, tras activar un nuevo plugin siempre debes medir su efecto en la velocidad de carga de tu web, para así descartar desde el principio cualquier plugin que penalice mucho el rendimiento.

2 - Usa la versión más reciente posible de PHP

En los últimos años los desarrolladores de PHP han introducido mejoras importantes en la velocidad y rendimiento de PHP. Cada nueva versión de PHP es un poco más rápida y hace un uso más eficiente de los recursos disponibles.

Por tanto, si te importa el rendimiento de tu web, procura usar la versión de PHP más moderna disponible. Actualmente, PHP 7.4 sería la mejor opción.

Una de las ventajas de alojar tu WordPress en guebs, es que siempre ofrecemos las versiones más modernas de PHP tan pronto están disponibles. Por tanto, sigue las indicaciones de nuestra guía Como elegir la versión de PHP y fuerza el uso de la mejor versión de PHP para tu web.

3 - Unificar, minimizar y comprimir recursos estáticos

Hoy por hoy, una web creada con WordPress suele tener varios plugins activos y un theme que muchas veces no está optimizado desde el punto de vista del rendimiento. Esto se traduce en que un WordPress medio puede incluir en cada página 30 imágenes, 20 archivos CSS, 15 archivos JavaScript, 3 fuentes y más cosas.

Es decir, cada vez que accedas a una página cualquiera de tu WordPress tu navegador no solo descargará el HTML de la propia página, también descargará varias decenas de archivos estáticos. La consecuencia es lentitud en la visualización de la página.

Esta situación se puede mejorar bastante unificando y minimizando los archivos JavaScript y CSS. Y para llevar a cabo esta tarea nada mejor que usar el plugin Autoptimize.

Existe también el plugin Async JavaScript que te ayudará a aumentar los beneficios que aporta Autoptimize.

4 - Cacheo eficiente a nivel de servidor

Existen infinidad de plugins de caché para WordPress y muchos funcionan bien. Nosotros hemos evaluado muchos de ellos y hemos concluido que WP Super Cache y W3 Total Cache son los plugins que mejores resultados ofrecen en nuestra plataforma.

Ambos plugins hacen la compresión de las páginas de forma correcta, sirven la caché de forma directa sin que PHP tenga que intervenir, permiten el unificado/minimizado de los recursos estáticos y son compatibles con el uso de CloudFlare en un subdominio.

El plugin W3 Total Cache ofrece mucha más funcionalidad y posibilidad de ajustes que WP Super Cache, pero dado que para el unificado/minimizado de archivos JavaScript y CSS creemos que la mejor opción es usar el plugin Autoptimize, nuestra recomendación es que optes por Wp Super Cache como plugin de cacheo.

Por tanto, no tienes más que seguir las indicaciones dee nuestra guía Como configurar WP Super Cache para mejorar el rendimiento de tu WordPress.

5 - Forzar el cacheado del lado del usuario

Cuando un usuario accede a cualquier página de tu web, su navegador web descarga el HTML de la propia página y otros muchos recursos estáticos: hojas de estilo, archivos JavaScript, imágenes, etc.

En principio, el navegador web del usuario descargará esos recursos estáticos una y otra vez según vaya navegando por tu web. Dado que son recursos estáticos que no cambian frecuentemente o incluso nunca, resulta inútil que el navegador web los descargue varias veces.

Para evitarlo puedes forzar a que el navegador web de tus usuarios almacene los recursos o archivos estáticos de tu WordPress durante el tiempo que consideres adecuado, de forma que se reducirán las peticiones a tu web y tus usuarios experimentarán una importante mejora en la velocidad de carga de tu web.

Para forzar el cacheado de recursos estáticos por parte del usuario, añade las siguientes líneas al archivo .htaccess de tu WordPress:

<IfModule mod_expires.c>
  ExpiresActive On
  
  # Imagenes
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/webp "access plus 1 month"
  ExpiresByType image/svg+xml "access plus 1 month"
  ExpiresByType image/x-icon "access plus 1 month"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  
  # Video
  ExpiresByType video/webm "access plus 1 year"
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # Fuentes
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType font/otf "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"

  # Otros
  ExpiresByType application/pdf "access plus 1 month"

  # Predeterminado
  ExpiresDefault "access 2 days"
</IfModule>

6 - Evitar que WordPress sirva errores 404

Aunque no debería suceder, es muy frecuente que una web incluya imágenes u otro tipo de archivos estáticos que realmente no existen, provocando uno o más errores 404. Este hecho que, a priori, parecería no tener relación con en el rendimiento de tu web, es una de las causas más habituales de consumos elevados de CPU/RAM/IO.

Tal y como funciona un WordPress normal, esos errores 404 son servidos por el propio WordPress, provocando un consumo de recursos CPU/RAM/IO totalmente innecesario que termina afectando a la capacidad y rendimiento de tu web.

Por ejemplo, si una página concreta de un WordPress provoca 3 errores 404, un único acceso a dicha página es equivalente a 4 accesos a tu web. Es decir, puede implicar multiplicar por 3 o 4 el consumo de recursos.

Por suerte, existe una solución sencilla que consiste en añadir las siguientes reglas ModRewrite al inicio del archivo .htaccess de tu WordPress:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} wp-content
RewriteRule .* - [L]

Estas reglas hacen que sea el servidor web Apache quien sirva los errores 404 de forma directa, sin necesidad de lanzar un proceso PHP que cargue todo el WordPress.

7 - Usar CloudFlare como CDN en subdominio

El uso de un CDN como CloudFlare aporta diversas ventajas a cualquier sitio web, pero la que nos interesa es la mejora en la velocidad de descarga de los recursos estáticos ( imágenes, videos, CSS, fuentes, etc. )

Para lograr ese fin, en lugar de apuntar todo el dominio de tu web a CloudFlare ( lo cual tiende a generar ciertos problemas ) nuestra recomendación es que crees un subdominio, lo apuntes a CloudFlare y configures tu WordPress para que sirva los recursos estáticos a través del subdominio. En la siguiente guia se explica como hacerlo.

8 - Utiliza WebP como formato de imagen

A la hora de reducir el tiempo de carga de una web es muy importante no utilizar imágenes excesivamente grandes y que estás estén en el formato adecuado.

Por ejemplo, no tiene sentido usar una fotografía de 6000 pixeles de ancho cuando lo vamos a mostrar con 800 pixels de ancho. Cuando subes una imagen a WordPress este se encarga automáticamente de crear varias copias de diferente resolución, precisamente para que no utilicemos fotos enormes cuando no es necesario.

Y de forma paralela, tampoco tiene sentido usar el formato de imagen JPEG para un logo, ni el formato PNG para una fotografía. Este problema tiene fácil solución si usamos el formato de imagen WebP, que ofrece una buena relación entre calidad y peso para todo tipo de imagen.

De hecho, el formato WebP está desarrollado por Google y es el que suele recomendar la herramienta PageSpeed de Google. Por tanto, nuestra recomendación es que uses el formato WebP de forma general y para ello nada mas fácil que utilizar un plugin como WebP Converter for Media.

9 - Mantén la base de datos limpia

Simplificando un poco la realidad: cuantos más datos contenga la base de datos de tu WordPress, más lenta será tu web.

Por eso es importante que de vez en cuando limpies la base de datos de tu WordPress y para ello lo mejor es usar algún plugin como WP-Sweep o Optimize Database after Deleting Revisions.

Por otro lado, puedes reducir la necesidad de hacer limpieza si configuras tu WordPress de tal forma que no almacene mucha "basura". Para ello añade el siguiente código PHP al inicio del archivo wp-config.php de tu WordPress:

// Borrar de la papelera todo lo que tenga ms de 10 das
define( 'EMPTY_TRASH_DAYS', 10 );

// Almacenar nicamente las 5 revisiones ms recientes de cada entrada o pgina
define( 'WP_POST_REVISIONS', 5 );

10 - Usa el motor InnoDB en lugar de MySQL

Si tu WordPress es antiguo es posible que el motor de almacenamiento de las tablas de tu base de datos MySQL no sea el adecuado. Originalmente WordPress creaba las tablas usando el motor MyISAM, cuando el que deberías estar usando es InnoDB.

Por tanto, desde el panel de Hosting, pincha en el icono phpMyAdmin y asegurate de estar usando InnoDB. Si tienes tablas en MyISAM nuestra recomendación es que los conviertas a InnoDB:

11 - Usa un theme ligero y responsivo

WordPress es un software muy flexible y fácilmente extensible. Gracias a ello y a la existencia de una gran comunidad de desarrolladores alrededor de WordPress, el número de themes y plugins disponibles es extraordinariamente grande.

Por ejemplo, en el repositorio oficial existen más de 7.000 themes gratuitos que puedes instalar y utilizar en tu web. Tanto en el repositorio oficial como en otras colecciones de themes existen themes de todo tipo: gratuitos, de pago, de diseño minimalista, con funcionalidad especifica, de diseño adaptable, etc.

En lo que respecta a esta guía, hay themes que ofrecen un buen rendimiento y otros que penalizan en exceso la velocidad de tu WordPress. Desgraciadamente, hasta que activas un theme y completas el diseño de tu web, es difícil valorar el efecto que dicho theme tiene sobre el rendimiento.

En cualquier caso, si estás buscando un theme de pago potente y veloz, Astra tiene una buena reputación en este aspecto. Por otro lado, si estás montando una tienda online, el theme gratuito Storefront para Woomerce, es una buena elección.

Lo que sí es fácil y al mismo tiempo de gran importancia, es el hecho de elegir un theme que tenga un diseño responsivo o adaptable. Es decir, debes elegir un theme que se visualize de forma óptima en todo tipo de dispositivos, desde las pantallas de ordenador más grandes a las pantallas de móvil más pequeños. Hoy en día la mayoría de themes nuevos son responsivos y así lo suelen indicar en su descripción, por lo que es fácil elegir un theme correcto.

Que una web se vea correctamente en todo tipo de dispositivos tiene un efecto directo y beneficioso en la experiencia de usuario y en el posicionamiento en buscadores de tu sitio web. Por tanto, no te despistes: elige un theme responsivo.

Etiquetas: