5 pasos para optimizar la carga de tu WordPress

5 pasos para optimizar la carga de tu WordPress

| Última Modificación: 23 marzo, 2017 a las 10:29 am

A veces, nuestra web de WordPress tiene demasiados archivos estáticos que hacen que el tiempo de carga no sea el más óptimo. Podemos tener un hosting superveloz pero no lo aprovecharemos si tenemos una web que no tenemos optimizada al 100%. Estos archivos estáticos, son los archivos que nunca cambian si hacemos una actualización de WordPress en un futuro. Podemos nombrar algunos de ellos: imágenes (.jpg,.png,.gif), archivos css de las hojas de estilos (.css), archivos javascript (.js). Es necesario optimizar la carga de WordPress para ganar puestos en la indexación de Google y mejorar notablemente nuestro SEO.

Te explicamos con un ejemplo real cómo mejorar la velocidad de carga de nuestro sitio WordPress a través de varios plugins gratuitos. En este caso, usamos la web de un cliente www.creacionescharo.com para su análisis.

IMPORTANTE: Este tutorial puede aplicarse a cualquier alojamiento web externo a Tropical Server. Si tu web está alojada en nuestros servidores debes obviar la configuración del CDN virtual porque no es necesario y seguir nuestro tutorial para instalar el plugin LiteSpeed Caché.

1. Análisis previo de la velocidad de nuestra página

Existen varias herramientas en el mercado que nos ofrecen una idea muy detallada de cómo carga actualmente nuestro sitio web. Nos vamos a centrar para este análisis en 3 gratuitas: PageSpeed de Google, GTmetrix y Pingdom

1.1 PageSpeed Insights

Nos calcula la velocidad de carga de nuestra web, además de darnos consejos para mejorarla. Valora la velocidad de carga de nuestro dominio para dispositivos móviles u ordenadores de sobremesa.

Este análisis está disponible en la url: https://developers.google.com/speed/pagespeed/insights

Si análizamos nuestro sitio de ejemplo vemos que la velocidad de carga que nos da en un primer intento es de 39/100 para móviles y 69/100 para ordenadores.

1.2 GTmetrix

En GTmetrix, el análisis se basa en el Pagespeed de Google (el mismo que el paso anterior) y en el YSlow de Yahoo, otro sistema de medición. Observamos que la velocidad que mide es de 63% y 83%.

Este análisis está disponible en la url: https://gtmetrix.com/

Velocidad de la página inicial en GTmetrix

Velocidad de la página inicial en GTmetrix

1.3 Pingdom Website Speed Test

Este test es muy interesante y es el que nos va a servir para ver realmente la velocidad de carga de nuestra web. Podemos analizarla desde varios puntos distintos del planeta: Amsterdam, Dallas, Melbourne, New York y Estocolmo. En este caso la analizamos desde sitio más cercano con respecto al servidor y nos da un resultado de 9.29 segundos. Es un tiempo bastante alto pero vemos que la web sirve 264 peticiones y ocupa 1.8Mb. Esto es demasiado para una web, sin embargo en este ejemplo se está usando un slider en la portada con fotos bastante pesadas que hace que los tiempos de carga sean muy altos. Vamos a ver cómo optimizar la carga de este wordpress.

Este análisis lo puedes usar en: http://tools.pingdom.com

Velocidad de la página inicial en Pingdom

Velocidad de la página inicial en Pingdom

2. Habilitar la Compresión GZIP en cPanel

Comenzamos nuestra optimización de carga de WordPress. Como primer paso, vamos a activar la compresión de Gzip en nuestro dominio, para ello accedemos a nuestro cPanel, vamos a la sección “Software” y pinchamos en “Optimizar sitio Web”, entraremos en las opciones de compresión a nivel de servidor. En la siguiente pantalla, marcamos la opción “Comprimir todo el contenido”. Finalmente hacemos click en el botón “Actualizar configuración”.

Habilitar la compresión Gzip en cPanel para optimizar WordPress

Habilitar la compresión Gzip en cPanel para optimizar WordPress

3. Habilitar la compresión de WordPress

Para habilitar que los archivos que servimos en nuestra web estén comprimidos y por tanto tarden menos en cargar en los navegadores de los visitantes debemos también habilitar la compresión en WordPress.  Para ello, añadimos las siguientes líneas en nuestro .htaccess

# BEGIN GZIP
<ifmodule mod_deflate.c>
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
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png
</ifmodule>
# END GZIP

4. Habilitar un CDN Virtual en nuestro dominio

Continuamos con la optimización de nuestro sitio, para ello vamos a habilitar la carga paralela de archivos estáticos. Todos los navegadores web, debido al estandar HTTP/1.1 de 1.999, ofrecen limitaciones en los elementos que pueden descargar al mismo tiempo (.css, .js, .jpg, .png, etc.) Lo normal es que tu navegador admita como mucho 6 conexiones a la vez. Para solucionar esta limitación podemos habilitar subdominios en cPanel que nos permitan tener más conexiones simultáneas para bajar estos archivos estáticos al ordenador del visitante en menos tiempo, generando así descargas paralelas de todos los archivos que componen nuestro sitio. Dentro de pocas fechas, con la llegada del estándar HTTP/2 esta limitación no existirá, pero mientras esto ocurre este método nos ayudará a optimizar nuestro WordPress. En Tropical Server contamos ya con HTTP/2 en nuestros servidores compartidos y este paso no sería necesario.

Te lo explicamos con un ejemplo: si tenemos en nuestra web 18 imágenes,  el navegador web de la persona que nos visita las descargará en bloques de 6. Supongamos que cada bloque de 6 imágenes tarda un segundo en descargarse, de esta forma, al tratarse de 3 bloques, el navegador tardaría 3 segundos en decargarlas y mostrarlas todas. Si creamos 3 subdominios en nuestro alojamiento, el navegador las bajará en sólo un segundo, ya que bajará 6 imágenes a la vez por subdominio al distribuir la carga, lo que hará que ganemos un importante tiempo a la hora de servir nuestros contenidos.

Sin embargo, este método tiene a su vez un problema y es que hay que contar con la resolución DNS de los subdominios, ya que el navegador debe hacer una llamada a 1+3 dominios. Hay, por tanto que generar un número limitado de subdominios para que lo que ganamos repartiendo las cargas de archivos estáticos no la perdamos con un número alto de resoluciones DNS. Por tanto, recomendamos que el número de subdominios a crear sea de 2 a 4. En el ejemplo que vamos a ver el este tutorial será de 3.

Para crear los subdominios en cPanel iremos a la Sección Subdominios, y entraremos en la sección correspondiente para generarlos. Podemos usar el nombre que más nos guste para crear el cdn virtual dentro de nuestro propio hosting, se suelen usar nombres como cdn, estaticos, img, etc. En nuestro caso vamos a usar el nombre cdn1, cdn2 y cdn3.

IMPORTANTE: Cuando introduzcas el nombre del subdominio en la casilla habilitada para ello, cPanel rellenará automáticamente el campo “Raíz de Documento”. Debes modificar este parámetro y dejar la ruta solo en “public_html” (eliminando “/cdn1”)

Habilitar un CDN Virtual en nuestro dominio

Habilitar un CDN Virtual en nuestro dominio

4.1 Modificación de los subdominios a CNAME

Por defecto, cPanel crea las entradas de los subdominios como una entrada A, deberás modificarla y ponerla como CNAME. Esto lo debes hacer desde cPanel > Dominios > Editor de zonas avanzado.

Una vez dentro de esta sección elegirás el dominio y realizarás los siguientes cambios:

  • Modificación de las entradas cdn1.tudominio.com, cdn2.tudominio.com y cdn3.tudominio.com para cambiarlas de A a CNAME, introduciendo el valor www.tudominio.com
  • (Opcional): Eliminación de las entradas www.cdn1.tudominio.com, www.cdn2.tudominio.com y www.cdn3.tudominio.com que se han generado, estas entradas no nos interesan.
  • (Opcional): Eliminación de las entradas de webdisk.cdn1.tudominio.com, cpcalendars.cdn1.tudominio.com, webdisk.cdn2.tudominio.com, cpcalendars.cdn2.tudominio.com, cpcontacts.cdn2.tudominio.com, webdisk.cdn3.tudominio.com, cpcalendars.cdn3.tudominio.com, cpcontacts.cdn3.tudominio.com
  • (Opcional): Eliminación de las entradas TXT generadas, tampoco nos sirven para nada. OJO solo eliminar las que pertenecen a las entradas “cdn”, si eliminamos otras tendremos problemas con el envio de emails.

 

Entradas DNS en cPanel para crear CDN Virtual

Entradas DNS en cPanel para crear CDN Virtual

4.2 Modificación del .htaccess de nuestro sitio

Una vez que tengamos creados nuestros 3 subdominios para servir nuestros contenidos estáticos, necesitamos configurarlos para que no sirvan cookies al visitante ya que pueden ralentizar la carga. Al crearlos de modo CNAME nos aseguramos que no van a servir cookies, pero vamos a asegurarnos aún más estableciendo unas reglas básicas en el htaccess de nuestro hosting. Para ello, abriremos nuestro .htaccess del raíz del hosting (www) y añadiremos las siguientes líneas al final del mismo:

<FilesMatch "\.(js|css|jpg|png|jpeg|gif|xml|json|txt|pdf|mov|avi|otf|woff|ico|swf)$">
Header set Cache-Control "max-age=2592000"
RequestHeader unset Cookie
Header unset Cookie
Header unset Set-Cookie
Header unset Pragma
FileETag None 
Header unset ETag
</FilesMatch>

4.3 Definir solo dominio principal con cookies

Además, nos aseguramos que solo el dominio principal va a servir las cookies, y no nuestros subdominios. Para ello abrimos nuestro archivo de configuración de WordPress (wp-config.php) que está en el root de nuestro sitio y añadimos al final la línea:

define('COOKIE_DOMAIN', 'www.tudominio.com');

Aquí debemos sustituir “www.tudominio.com” por nuestro dominio. Guardamos y cerramos el archivo. Osrecomendamos la edición del mismo con el Administrador de Archivos de cPanel.

5. Plugins de WordPress para optimizar la carga

Antes de empezar a la optimización de WordPress propiamente dicha, debemos tener muy claro que nuestra web se ralentiza si tenemos muchos plugins, debemos asegurarnos por tanto de eliminar los plugins que no usemos.

Una vez hacemos una limpia de estos plugins vamos a instalar cuatro plugins que nos van a dar un plus para optimizar la carga de wordpress.

5.1 Minificar archivos estáticos

Una de las advertencias que nos hace el PageSpeed de Google y cualquier otro optimizador web es que intentemos combinar y minificar los archivos html, css y javascript para minimizar las peticiones realizadas a nuestro sitio. Es muy recomendable que el número de archivos estáticos de cada tipo no supere en número el 5 en cada página. Es decir, no servir más de 5 archivos .js y 5 archivos .css. Esto solo lo podemos cambiar si editamos nuestra plantilla de WordPress y nuestros plugins a mano para combinarlos unos con otros. Sin embargo, existen plugins en WordPress que nos ayudarán a esta tarea sin tener que editar estos archivos de nuevo. Uno de ellos, el que vamos a usar en este tutorial, es el “Better WordPress Minify“.

Este plugin, además de combinar nuestros archivos estáticos, va a minificarlos, es decir, comprimirlos y optimizarlos para que carguen más rápido. lo instalamos en nuestro WordPress como cualquier plugin:

Plugins –  Añadir plugin – Buscar Plugins, introduciremos “Better WordPress Minify”,  y lo activamos. En los ajustes del plugin, habilitaremos las siguientes opciones:

  • Minificar los ficheros JS automáticamente
  • Minificar los ficheros CSS automáticamente
  • Leave external files at their original positions
  • Cache directory: Configuraremos aquí la ruta donde se almacenará el caché de los archivos estáticos. Recomendamos configurar una carpeta caché. Para esto pondremos la ruta de nuestro hosting con la carpeta “cache” al final: /home/nombreusuariocpanel/public_html/cache
  • Enable bubble CSS import

EXPERIMENTAL: Hay una opción en la siguiente pestaña, en opciones avanzadas, la llamada “Enable friendly Minify urls”, que acorta las urls generadas en la combinación de archivos estáticos (las demás opciones avanzadas nos permitirán tener una mejorar carga pero necesitaremos tener contratado un CDN real, por lo que este tutorial las vamos a obviar). Esta opción la hemos probado y da algunos problemas y peores resultados por lo que deberás testearla antes de dejarla activada como definitiva.

IMPORTANTE: Este plugin no es compatible con todos los temas de WordPress, por lo que deberás desactivarlo si ves que la plantilla se descompone al unificar los archivos .css y .js

Para que funcione correctamente, deberemos añadir unas líneas al final de nuestro .htaccess del raíz del hosting. Estas líneas las puedes ver si pinchas en el enlace “Show rewrite rules for Apache”. En este ejemplo, hemos puesto las siguientes que nos muestra el sistema:

# BEGIN BWP Minify Rules
# BEGIN BWP Minify Headers
<Files "*.js.gz">
ForceType application/x-javascript
</Files>
<Files "*.css.gz">
ForceType text/css
</Files>
<IfModule mod_mime.c>
AddEncoding gzip .gz
AddCharset utf-8 .js .css
</IfModule>
<IfModule mod_deflate.c>
    <IfModule mod_setenvif.c>
    SetEnvIfNoCase Request_URI "\.gz$" no-gzip
    </IfModule>
</IfModule>
<IfModule mod_headers.c>
Header set Cache-Control "public, max-age=86400"
Header set Vary "Accept-Encoding"
Header unset ETag
</IfModule>
# END BWP Minify Headers
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteRule .* - [E=ZIP_EXT:.gz]
RewriteCond %{HTTP:Cache-Control} !no-cache
RewriteCond %{HTTP:If-Modified-Since} !no-cache
RewriteCond %{REQUEST_FILENAME}%{ENV:ZIP_EXT} -f
RewriteRule (.*) $1%{ENV:ZIP_EXT} [L]
RewriteRule ^minify-b(\d+)-([a-zA-Z0-9-_.]+)\.(css|js)$ /index.php?blog=$1&min_group=$2&min_type=$3 [L]
</IfModule>
# END BWP Minify Rules

Una vez activado el plugin, si observamos el código fuente de nuestro sitio antes y después veremos que se ha reducido el número de archivos estáticos al ser combinados.

minificar-archivos-estaticos

Si no aparecen, prueba primero a limpiar la caché de tu navegador y repite la prueba. (Si quieres que estas líneas no aparezcan en tu código fuente para ocultar que usas Super Cache, deshabilita esta opción desde la pestaña Debug del plugin, la opción “Cache Status Messages“.)

Vamos a analizar ahora las cargas en Pagespeed Insights, GTmetrix y Pingdom para ver si hemos mejorado.

6.1 PageSpeed Insights

Repetimos el test en la web de Google y vemos que ahora nos sale mucho más favorable:

– De 39 a 63 en móviles.

– de 69 a 83 para ordenadores de sobremesa.

6.2 GTmetrix

Visitamos la web de GTmetrix y vemos que el cambio es impresionante. Hemos pasado de 63% a 90%. El plugin de Lazy Load hace aquí su función y el slider de la portada no lo carga de primeras por lo que el test también se hace mucho más rápido.

Optimizar carga de wordpress en GTmetrix

Optimizar carga de wordpress en GTmetrix

6.3 Pingdom Website Speed Test

El último test el de Pingdom es el más claro, ¡¡ hemos reducido la carga de la web hasta la cuarta parte !

Las peticiones también han bajado de las 264 del test inicial a las 33 de ahora.

Optimizar carga de wordpress en Pingdom

Optimizar carga de wordpress en Pingdom

7. Conclusiones

A veces saturamos nuestros sitios de WordPress con plugins innecesarios y plantillas que cargan demasiados archivos estáticos sin optimizar. Nuestro consejo siempre es eliminar los plugins que no usemos y que no instalemos plugins por instalar. Si queremos testear alguno, eliminarlo si no lo vamos a usar finalmente. Si tienes una web en producción que contiene archivos pesados como los que hemos visto en este ejemplo, te aconsejamos que sigas las recomendaciones de este tutorial para mejorar la carga de tu web. Sin necesidad de tener que retocar los archivos estáticos de la plantilla y los plugins, podremos optimizar la carga de WordPress y ganaremos en visitas, velocidad y posicionamiento.

5 pasos para optimizar la carga de tu WordPress
5 (100%) 3 votes