Cómo optimizar WordPress correctamente

Una parte muy importante del posicionamiento en buscadores tiene que ver directamente con optimizar WordPress de forma correcta ya que esto mejorará la velocidad de carga, siendo este un factor SEO muy importante. Podemos tener una web con un diseño excelente, preparada para dispositivos móviles y con un contenido de calidad, que todo esto dará igual si nuestra web es lenta y tarda mucho en cargar.

Necesitamos volcar nuestros esfuerzos en optimizar WordPress de forma correcta para que la velocidad de carga sea lo más óptima posible. En esta pequeña guía os explicaré que pasos seguir y cómo sacarle el máximo partido a nuestro CMS favorito.

Antes de nada, dirígete a las páginas que te propongo a continuación, analiza tu página web y apunta los resultados.

• GTMetrix
• Pingdom Speed Test
• Google PageSpeed Insights
• Byte Check

Optimizando el .htaccess de WordPress

En este primer paso vamos a utilizar el archivo .htaccess con el fin de optimizarlo. Este archivo lo encontraremos en el directorio raíz de nuestra instalación de WordPress.

Activa la cabecera keep-alive

Al activar esta cabecera ayudaremos al navegador a comunicarse con el servidor, mejorando la conexión y velocidad de carga de nuestro WordPress.

# enable keep-alive
<ifModule mod_headers.c>
  Header set Connection keep-alive
</ifModule>

Si tu servidor está preparado para soportar la cabecera keep-alive entonces tan sólo tendremos que añadir el código anterior en nuestro .htaccess y listo.

Comprime WordPress gracias a Gzip

Gzip es una utilidad que comprime nuestras páginas web para que su tamaño se vea reducido. Sería el equivalente a crear un archivo .zip en nuestro ordenador. De esta manera ahorraremos ancho de banda (hasta el 50%) y mejoraremos la velocidad de carga de nuestro WordPress.

Existen plugins que habilitan Gzip para WordPress pero siendo tan sencillo no merece hacer uso de ellos.

Lo primero que haremos será abrir nuestro archivo .htaccess y a continuación añadir las siguientes líneas.

# enable gzip compression
<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Justo después insertaremos el siguiente texto, que se encargará de comprimir los distintos archivos:

# compress text, html, javascript, css, xml
<IfModule mod_deflate.c>
  # insert filters
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php
  AddOutputFilterByType DEFLATE application/x-httpd-fastphp
  AddOutputFilterByType DEFLATE image/svg+xml

  # drop problematic browsers
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

  # make sure proxies don't deliver the wrong content
  Header append Vary User-Agent env=!dont-vary
</IfModule>

Ahora solo nos quedará comprobar que Gzip funciona con nuestro WordPress. Para ello accederemos a la web Check GZIP compression.

Especifica la caché del navegador en WordPress

Cuando cargamos por primera vez una página, nuestro navegador tiene que descargarse varios archivos (imágenes, CSS o JavasCript) y recursos. Posteriormente guardará en caché determinados archivos para que la próxima vez que visitemos esa misma web no tenga que cargar todo de nuevo. Dando como resultado un aumento de la velocidad de carga de la página web, ahorrando tiempo a servidor y usuario.

Añadiremos a nuestro .htaccess lo siguiente:

<IfModule mod_expires.c>
  ExpiresActive On

  # perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault "access plus 1 month"

  # cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest "access plus 0 seconds"

  # your document html
  ExpiresByType text/html "access plus 0 seconds"

  # data
  ExpiresByType text/xml "access plus 0 seconds"
  ExpiresByType application/xml "access plus 0 seconds"
  ExpiresByType application/json "access plus 0 seconds"

  # rss feed
  ExpiresByType application/rss+xml "access plus 1 hour"

  # favicon (cannot be renamed)
  ExpiresByType image/x-icon "access plus 1 week"

  # media: images, video, audio
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/jpg "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType video/ogg "access plus 1 month"
  ExpiresByType audio/ogg "access plus 1 month"
  ExpiresByType video/mp4 "access plus 1 month"
  ExpiresByType video/webm "access plus 1 month"

  # htc files  (css3pie)
  ExpiresByType text/x-component "access plus 1 month"

  # webfonts
  ExpiresByType font/truetype "access plus 1 month"
  ExpiresByType font/opentype "access plus 1 month"
  ExpiresByType application/x-font-woff "access plus 1 month"
  ExpiresByType image/svg+xml "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

  # css and javascript
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"

  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>

  <ifModule mod_headers.c>
    Header unset ETag
  </ifModule>
 </IfModule>

Además, también hemos aprovechado para desactivar las ETags y así evitar ralentizar la carga debido a las comprobaciones que realiza en los archivos de nuestro servidor.

Cachea tu WordPress

A día de hoy tener un sistema de caché en nuestros WordPress se hace imprescindible, no solo mejora el rendimiento de la página web sino que la protege en caso de que tengamos un pico de tráfico.

Cachear es, básicamente, guardar copias del contenido dinámico de nuestra página web en forma de contenido estático HTML.

En este punto tendremos varias opciones, todas muy buenas y con versión gratuitas. A continuación os dejo un listado con los plugins de caché para WordPress más importantes:

1. LiteSpeed Cache
2. ZenCache
3. WP Super Cache
4. W3 Total Cache
5. WP Fastest Cache
6. WP Rocket

Personalmente suelo utilizar LiteSpeed Cache, me parece una opción muy interesante ya que su configuración es super sencilla y se «lleva de maravilla» con otros plugins.

Optimiza las imágenes que subes a WordPress

Una parte muy importante en la optimización y mantenimiento de nuestros WordPress se apoya sobre la gestión de las imágenes que subimos a nuestro servidor. Tenemos que ser conscientes de que cuanto más optimizadas estén mejor. De esta manera ganaremos espacio y velocidad.

Existen varios plugins que realizan el trabajo por nosotros. En este caso, os aconsejaría utilizar WP Smush o bien EWWW Image Optimizer.

Minimiza tus archivos CSS y JavasCript

Otra buena práctica es la de minimizar los recursos de nuestra página web (HTML, CSS y Javascript) para eliminar datos innecesarios como son los espacios, los saltos de línea o las tabulaciones. De esta manera aceleraremos la descarga y la ejecución de estos recursos.

Para ello contamos con un plugin llamado Autoptimize que se encarga de optimizar WordPress, de forma automática, el código HTML y nuestros archivos CSS y JavaScript.

Elimina la versión de tus archivos CSS y JavaScript

Debido al control que tiene WordPress sobre las versiones de CSS o JavaScript, que utiliza una determinada plantilla, la velocidad de carga de nuestras páginas web se ve puede ver comprometida. Mención a parte, le estamos dando pistas a los curiosos de las versiones que utilizamos.

Saltarse el protocolo y eliminar el rastro es muy sencillo, tan solo tendremos que abrir el archivo functions.php de nuestra plantilla y añadir el siguiente código.

/**
 * Remove query strings from static resources
 */
function _remove_script_version($src) {
  global $wp_version;
  parse_str(parse_url($src, PHP_URL_QUERY), $query);
  if (!empty($query['ver']) && $query['ver'] === $wp_version) {
    $src = remove_query_arg('ver', $src);
  }
  return $src;
}
add_filter('script_loader_src', '_remove_script_version');
add_filter('style_loader_src', '_remove_script_version');

Limpia la cabecera de tu página web

WordPress añade un montón de información inútil en las cabeceras de las páginas web que genera. Por ello, es una buena práctica eliminar esta información. Esto nos ayuda a optimizar aun más nuestras plantillas y nos dará un plus de seguridad.

Igual que en punto anterior, abriremos el archivo functions.php de nuestra plantilla y añadiremos lo siguiente:

/**
 * Remove WordPress header information
 */
function _remove_wp_header_info() {
  remove_action('wp_head', 'rsd_link'); // Display the link to the Really Simple Discovery service endpoint
  remove_action('wp_head', 'wlwmanifest_link'); // Display the link to the Windows Live Writer manifest file.
  remove_action('wp_head', 'wp_generator');// Display the XHTML generator that is generated on the wp_head hook, WP version
  remove_action('wp_head', 'feed_links_extra', 3); // Display the links to the extra feeds such as category feeds
  remove_action('wp_head', 'feed_links', 2); // Display the links to the general feeds: Post and Comment Feed
  remove_action('wp_head', 'index_rel_link'); // index link
  remove_action('wp_head', 'parent_post_rel_link', 10, 0); // prev link
  remove_action('wp_head', 'start_post_rel_link', 10, 0); // start link
  remove_action('wp_head', 'adjacent_posts_rel_link', 10, 0); // Display relational links for the posts adjacent to the current post.
}
add_filter('init', '_remove_wp_header_info');

Sanea y optimiza tu base de datos

WordPress tiene funciones muy útiles como el auto-guardado, el problema viene cuando nos detenemos un segundo a mirar nuestra base de datos y nos encontramos cientos de revisiones de noticias que WordPress ha generado.

No pasa nada, existe un plugin llamado WP-Optimize que se encarga de sanear nuestra base de datos eliminando revisiones, comentarios sin aprobar, archivos de la papelera, pingbacks o trackbacks. Pero eso no es todo ya que también elimina opciones transitorias y optimiza nuestra base de datos.

Como alternativa tenemos WP-Sweep, que hace lo mismo que WP-Optimize pero además busca y elimina opciones huérfanas que dejan plugins que no utilizamos o hemos eliminado.

Como habéis podido comprobar, optimizar WordPress correctamente es una tarea que no lleva más de 30 minutos. Ahora vamos a ver los resultados, ¿recuerdas los análisis que realizaste al principio de la guía? es momento de volver a realizarlos. Puedes contarme la experiencia en los comentarios.

Imagen cedida por @viktorhanacek