Saltar al contenido
Experiencias en Red

Optimiza tu web, la fina linea que separa la gloria del fracaso

acelera tu Wordpress

Lo que puede separar la gloria del desastre en una web puede ser una fina linea de dos segundos. Deja que tu página web tarde tres segundos o cuatro en cargar en dispositivos móviles y más del 50% de los usuarios se marchará a tu competencia, siempre que ésta tenga webs que carguen en menos de dos segundos.

No estamos en el tiempo de la paciencia.

Busca en cualquier periódico económico o generalista de nuestro país información sobre navegabilidad móvil y te encontrarás con noticias como éstas:


Pasamos tres horas al día mirando el móvil o la tableta


Los españoles aumentan el consumo de datos móviles más del 70% en un año

La Vanguardia / El Economista

La fina linea que separe el éxito del fracaso en tu proyecto web pueden ser tres simples segundos.

Y algo debemos hacer si no queremos que nuestros usuarios nos abandonen o que Google nos penalice por no tener nuestra web adaptada a móviles.

Cómo acelerar nuestro WordPress

Optimización de imágenes

Lo primero son las imágenes de tu site.

Si estás comenzando, empieza por utilizar cualquier herramienta online que reduzca el tamaño de las imágenes que cargues en tus artículos.

Yo uso Squosh, pero hay muchas más de las que puedes echar mano.

Squosh reduce las imágenes una a una, mientras que otras herramientas disponibles online y gratuitas lo hacen en paquetes de 20 como es el caso de
Tinypng.

Si ya tienes tu web con un montón de imágenes y necesitas rebajarlas de peso, puedes usar cualquier plugin de optimización de imagen como Smush.it . Este lo he usado y funciona realmente bien.

Panel de control de Smush.it

Una vez instalado como cualquier otro plugin, puedes configurar los Ajustes como te convenga, además de pulsar el Botón reducir que te permite rebajar el peso de 50 imágenes de golpe en su versión gratuita, y para continuar con otras 50 simplemente tendrás que volver a darle al botón. Además, cada vez que subes una imagen te la optimiza.

La imagen anterior, por ejemplo, pesa 20 ks. La he reducido primero con Squosh y luego la he subido a WordPress.

He probado otro plugin como Image Optimizer, también de los más populares, pero su cuenta gratuita tiene, desde mi punto de vista, más limitaciones que en el anterior. Te da una cuota mensual gratuita en número de imágenes que, en mi caso, enseguida quedó agotada, así que volví a Smush.

La optimización de imágenes es una de las primeras medidas que te tienes que plantear para reducir el peso de tu web.

Activa la compresión zip

Teóricamente, tu servidor Apache debería tener archivada la compresión Gzip. Al hacerlo, se reduce el consumo de ancho de banda y mejora el tiempo de carga de la página.

Podemos activar manualmente la compresión Gzip a través del archivo htaccess, del cual ya hablé en un artículo anterior. En ese archivo podrás introducir el siguiente código para introducir la compresión Gzip.

# BEGIN 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> 
# END GZIP COMPRESSION

A continuación, también puedes probar con la orden Deflate:

# BEGIN DEFLATE COMPRESSION 
 <IfModule mod_deflate.c> 
AddOutputFilterByType DEFLATE text/text 
AddOutputFilterByType DEFLATE text/html 
AddOutputFilterByType DEFLATE text/plain 
AddOutputFilterByType DEFLATE text/xml 
AddOutputFilterByType DEFLATE text/css 
AddOutputFilterByType DEFLATE text/javascript 
AddOutputFilterByType DEFLATE application/javascript 
AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xml application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml 
AddOutputFilterByType DEFLATE application/x-httpd-php 
AddOutputFilterByType DEFLATE application/x-httpd-fastphp 
</IfModule>
# END DEFLATE COMPRESSION 

En el artículo de este mismo blog en el que hablé del artículo htaccess puedes ver dónde introducir esas órdenes. Accede al punto titulado «dónde escribir en el archivo htacces» .

CONSEJO:

Guarda siempre una copia tu archivo htaccess antes de introducir ningún cambio. Prueba primero a introducir el código de compresión Gzip, guarda los cambios y comprueba que tu web no se ha caído. Después introduce el código Deflate y haz lo mismo. Hay themes que no soportan la compresión de archivos Deflate, así que …

TOMA PRECAUCIONES

Minimiza los estilos css y combina javascript

Tu web tiene estilos css y recursos java que ralentizan el funcionamiento. El servidor tiene que responder a un montón de órdenes en cuestión de pocos segundos, así que para mejorar su rendimiento tenemos que minimizar y combinar los estilos CSS y el javascript.

Para minimizar estos recursos te recomiendo directamente un plugin. No vale la pena introducir código en htaccess. Yo he probado varios plugins que reducen los estilos y combinan javascript: W3SuperCaché y WTotal cache. Y el que me da mejores resultados es el primero y con diferencia.

Puedes probar con WP Super Caché, testearlo y valorarlo tú mismo. Aquí debajo tienes un enlace donde descargarlo.

Cuando comprobé las diferencias en Page Speed Insights entre los dos plugins, los resultados fueron mucho mejores con W3Total Caché.