graficadver diseño web velocidad wordpress

Guía para mejorar la velocidad de WordPress. Parte 1

Escrito el

Tener una web en WordPress no es solo añadirle contenido y ya está. Tu web tiene que estar bien optimizada. Y esto es una guerra que nunca termina. Cuando tenemos una web ya sea un blog, un portfolio o una tienda, siempre estamos buscando cosas nuevas que mejoren nuestra posición en internet. Esto tiene sus efectos positivos pero, ¿nos paramos a pensar como afecta a nuestra web en términos de carga?.

Como usuario, si una web tarda más de 2 segundos en cargar, lo más probable es que me haya ido a buscar lo que quería a otro sitio y probablemente no vuelva (fallo de experiencia de usuario). La velocidad es algo fundamental en una web no solo para los usuarios, también para Google. ¿Y esto es cierto? Pues sí, ya que Google posiciona mejor las webs que tienen una mejor velocidad de carga. Al usuario no le gusta esperar y Google siempre se adapta a ello mostrando webs más rápidas.

 

Herramientas para medir la velocidad web

 

Ahora te preguntarás, ¿Y como sé si mi web esta bien optimizada y carga a la velocidad de la luz? Pues es tan sencillo como utilizar una de las múltiples herramientas online. Aquí te recomendamos las siguientes:

Todas funcionan igual: insertas la url de tu web y le das al botón de analizar. Una vez ha terminado el proceso, te dará un calificación de la F a la A o de 0 a 100. Con esa calificación ya sabrás si tienes una web rápido o no. Pero la cosa no queda aquí, ya que estas herramientas proporcionan información adicional para mejorar tu web. Nosotros vamos a ver la información que nos da Google PageSpeed Insights.

Una vez introduzcas y rastrees tu web, PageSpeed Insights te ofrecerá 2 pestañas: una con la puntuación para móviles y otra para la versión de escritorio de tu web. Mediante un código de colores podemos saber las cosas que están mal (rojo) y hay que darles prioridad, las cosas que tenemos que mejorar (amarillo) y lo que esta bien en nuestra web (verde). En los móviles hay un extra que es la experiencia de usuario, que puntúa de la misma forma.

google pagespeed insights

Cuantas más reglas cumplamos y estemos en verde, mejor valoración tendremos. Lo interesante de Google PageSpeed Insights, es que nos dice exactamente lo que tenemos mal y como mejorarlo. Vamos a centrarnos en estos avisos y la forma de solucionarlos en WordPress.

 

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

 

Esta recomendación es, probablemente, la más común de todas. Hace referencia a la forma en la que se cargan los elementos de la web. Podríamos decir que Google es un poco caprichoso y, como siempre, da prioridad al contenido y que el resto de cosas se ejecuten al final de la web.

Si has desarrollado la web desde 0 o has añadido tu mismo el CSS  y el JavaScript, puede que este problema no lo tengas, pero si utilizas una plantilla (y no esta optimizada) seguramente tengas este problema. Es complicado de solucionar ya que depende mucho de la plantilla elegida y de los plugins que tengamos. Puedes usar un plugin como JavaScript to Footer  que mueve la carga de JavaScript al footer de la web, aún así, si tu web tiene mucha cosa probablemente se te desconfigure la misma, así que copia de seguridad y úsalo bajo tu propio riesgo.

 

Optimizar imágenes WordPress

 

Quizá sea lo mas sencillo de hacer y sin riesgo. Lo interesante es que PageSpeed Insights te ofrece un listado de imágenes que ocupan más de lo necesario y deberías optimizarlas.Para ello puedes hacer 2 cosas:

  • Descargar todas las imágenes que te recomienda PageSpeed Insights y optimizarlas mediante Photoshop o alguna herramienta similar. Luego las subimos de nuevo.
  • Utilizar un plugin (un clásico) como WP Smush o EWWW Image Optimizer que optimizan las imágenes nada más subirlas. También puedes optimizar las que ya hay subidas.

Esta primera opción es la mejor ya que siempre hay que limitar el uso de plugins.

 

Habilitar compresión

 

Esto consiste en comprimir los recursos de tu web con gzip, tecnología que tiene que estar habilitada en tu servidor. Puedes añadirlo mediante un plugin como WP Super Cache (hablaremos de el en otro momento) o añadir el siguiente código a tu archivo .htaccess

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

Recuerda haz una copia de seguridad del archivo .htaccess antes de tocar nada.

 

Minificar HTML, CSS y JavaScript

 

Esto nos dice que tenemos que compactar nuestros archivos HTML, CSS y JavaScript eliminando espacio innecesario, comentarios, etc. PageSpeed Insights te recomienda que archivos tienes que modificar y, lo mejor, es que te da la opción de descargar las versiones ya preparadas de dichos archivos.

google pagespeed insights

Con Google PageSpeed Insights podrás mejorar el rendimiento de tu web gracias a su información intuitiva y fácil de aplicar, además de que es una herramienta gratuita. De todos modos, no te vuelvas loco si no puedes aplicar todas las recomendaciones ya que algunas no dependen de tí.

En el próximo post veremos como configurar el plugin de caché WP Super Cache

Deja una comentario

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Pin It on Pinterest