Guía para optimizar WordPress correctamente

WordPress

Guía para optimizar WordPress correctamente

Una parte muy importante del posicionamiento en buscadores tiene mucho que ver con la velocidad de carga de nuestras páginas web. Podemos tener una web con un diseño excelente, preparada para dispositivos móviles y con un contenido trabajado y de calidad, que todo esto dará igual si nuestra web tarda mucho en cargar.

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

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

Metiéndole mano al .htaccess

En este primer paso vamos a utilizar el archivo .htaccess, que encontraremos en el archivo 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>

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 y mejoraremos la velocidad de carga de nuestro WordPress.

Para que Gzip funcione tendremos que tener el módulo activado en nuestro servidor.

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 está haciendo su trabajo, para ello accederemos a la web Check GZIP compression.

Especifica la caché del navegador

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 los siguientes:

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

Personalmente suelo utilizar ZenCache, 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, 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.

Plugins como WordPress SEO by Yoast viene con una opción para poder realizar el mismo proceso desde el panel de administración.

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.

Cómo habéis podido comprobar, optimizar WordPress correctamente es una tarea que no lleva más de 10 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

David

Diseñador y desarrollador front-end por vocación. Escribo sobre diseño, desarrollo, WordPress o mi vida. TwitterGoogle+

9 comentarios en “Guía para optimizar WordPress correctamente”

  1. Hey David! Le he pegado un repaso rápido a tus últimas publicaciones al ver que has vuelto. Me anoto esta guía porque aunque ya conocía algunos “trucos” que mencionas, no he probado el WP-Sweep. A ver qué tal!

    Saludos!

  2. No sabía de la existencia del Plugin “WP-Sweep”, y paso mucho en el directorio oficial. Uso “WP-Optimize” desde hace mucho y es una maravilla. Gracias por esta entrada, nos será muy útil.

    1. ¡Hola! yo te digo que estoy empezando a utilizar más WP-Sweep que WP-Optimize, trae alguna opción más y funciona realmente bien. Además, WP-Sweep, ocupa bastante menos (unos 90kb) lo que también ayuda.

  3. Hola, encantado de encontrar otro playboy en la Alianza, creo que van a formar un ala de combate nueva exclusiva para nosotros.

    Me ha gustado mucho el post, es un tema que interesa sobremanera, y además de la optimización on-page también juego con varias empresas de hosting a ver dónde gano unos milisegundos.
    No conocía WP-Sweep pero voy a solucionar ese déficit ahora mismo.

    Un saludo Rebelde.

    1. Hola Huberto, cierto que la optimización en WordPress es un tema muy importante. Como no andemos al loro podemos crear verdaderos monstruos (sobre todo si instalamos plugins como locos).

      Sobre el tema del hosting. Creo, porque no lo he probado, que Raiola Networks va muy bien para WordPress. Yo ahora mismo estoy con OVH y muy contento de momento.

      Un saludo y ¡que la fuerza te acompañe!

  4. Hola David,

    Un post muy interesante. En cuanto a Autoptimize, me surge una duda, lo llevo usando durante un tiempo en una web y me he dado cuenta que en el servidor me deja diariamente 10-15 archivos css y js “optimizados” de unos 300kb. La carpeta cache ya me ocupa más de 1.7GB…y sigue creciendo… no se si eso es normal.

    Gracias!

    1. Hola Jose, ese problema puede deberse a que los archivos .js cambien mucho y te genere un nuevo archivo cada poco. Ya que Autoptimize no tiene un sistema automatizado para limpiar el caché, una solución rápida es que vayas a las opciones del plugin y le des a “Guardar cambios y vaciar caché”. En el propio FAQ del plugin reconocen este problema y dan alguna solución al respecto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *