tribal
Mejorar el rendimiento web con WPO: menos es más

El WPO (Web Performance Optimization) es una de las principales áreas en las que se divide el SEO On-Page. Es la técnica que se encarga de mejorar la experiencia de usuario (UX) en la página, a través de la optimización del tiempo de carga de la misma.

Cada vez más gente consulta internet desde su dispositivo móvil que, en ocasiones tiene una velocidad limitada. Por eso cada milisegundo que podamos acortar en la carga de nuestra web es de vital importancia. Si a esto sumamos que 2015 fue el año del “Mobilegeddon” (cambio en el algoritmo de Google por el cual se bonifica en los rankings a los sitios optimizados para móvil), hace que el tiempo de carga de la página se convierta en un factor crítico.

Hoy te voy a contar varias acciones sencillas que puedes llevar a cabo en tu página web o blog para mejorar su rendimiento y con ello hacer que tus visitas permanezcan más tiempo en tu site, disminuyendo así la tasa de rebote, aparte de los factores comentados anteriormente.

Hay varios elementos que influyen directamente en el tiempo de carga de un sitio web:

  • Código HTML
  • Javascript
  • CSS
  • Imágenes

Simplificando la carga de estos elementos, conseguiremos reducir el tiempo de espera de los usuarios mientras ven nuestro sitio web.

Para comparar el tiempo de respuesta de la página antes y después de algún cambio, podemos visitar Google Page Speed Insights.

Te recomiendo chequear el aspecto visual de tu web después de hacer cada cambio, comparar con el estado anterior y sacar tus propias conclusiones :)

Los principales puntos que podemos atacar para llevar a cabo estas tareas son los siguientes:

Reducción de llamadas http

Cuantas menos llamadas http al servidor, menor será la carga de éste y por lo tanto se reducirá el tiempo de carga.

Una manera fácil de disminuir las llamadas http es concatenar (unir) los ficheros Javascript y CSS con los que está construida nuestra web. Si tenemos 3 ficheros CSS podremos hacer una llamada a cada fichero (3 llamadas) o unirlos y hacer solo una. De esta manera le daremos menos trabajo al servidor con el consecuente aumento de velocidad.

Te dejo 2 utilidades que te ayudarán con esta labor.

Merge + Minify + Refresh (WP) Grunt

 

Minimizar el html, CSS y JS (y CSS Sprites)

Esta tarea consiste básicamente en eliminar los caracteres en blanco que contiene el código de nuestros ficheros HTML, CSS o Javascript.

Eliminando esos caracteres reduciremos el tamaño del archivo y por lo tanto el servidor tendrá que invertir menos recursos en manejarlo.

Los CSS sprites son archivos que contienen varias imágenes de pequeño tamaño. En cierto modo es como “concatenar imágenes” en un mismo archivo. En lugar de hacer 20 llamadas a 20 iconos, hacemos solo una llamada a un fichero que contiene los 20 iconos.

Better WordPress MinifyHTML CompressorCSS Sprites

 

Optimización de imágenes

El primer paso para optimizar una imagen para la web es ajustar el tamaño de la imagen al espacio que vaya a ocupar en la web. Parece obvio, pero si te fijas un poco, encontrarás en la red miles de sitios que no cumplen con esta regla.

Independientemente de esto, existen herramientas que reducirán al máximo el peso de tus imágenes y sin que esta rebaja de calidad sea perceptible por el ojo humano. De esta manera nuestra web será mucho mas ligera, aumentando la experiencia de usuario a la vez que optimizamos la carga de trabajo del servidor.

Compressor.ioWP Smush

Compresión Gzip

Como ya habrás supuesto, es un sistema que comprime las páginas de nuestro site para enviarlas al servidor. Utilizar este método de compresión es bueno por 3 motivos:

    • Es compatible con todos los servidores web
    • Reduce el consumo del ancho de banda
    • Aumenta la rapidez en la carga de la web

Para activarlo, dependiendo del tipo de servidor web que tengas deberás actuar de una manera diferente:

Cachear la web

Este sistema consiste en hacer que nuestra web almacene de manera estática una versión del recurso al que queremos acceder y así no lo tienes que descargar cada vez que hacemos una petición.De esta manera consumimos mucho menos ancho de banda y aumentamos la velocidad de respuesta.

Normalmente se suele utilizar para los elementos estáticos de la web, aquellos que siempre son iguales aunque puedas configurar la frecuencia de “cacheo” para cada página del site.

La implementación de este método se hace añadiendo un trozo de código al fichero .htaccess del servidor. Te adjunto un ejemplo de como podría quedar, pero te aconsejo que no toques este fichero si no tienes conocimientos, ya que es algo muy peligroso.

<ifModule mod_expires.c>

ExpiresActive On

ExpiresDefault “access plus 5 seconds”

ExpiresByType image/x-icon “access plus 2592000 seconds”

ExpiresByType image/jpeg “access plus 2592000 seconds”

ExpiresByType image/png “access plus 2592000 seconds”

ExpiresByType image/gif “access plus 2592000 seconds”

ExpiresByType application/x-shockwave-flash “access plus 2592000 seconds”

ExpiresByType text/css “access plus 604800 seconds”

ExpiresByType text/javascript “access plus 216000 seconds”

ExpiresByType application/javascript “access plus 216000 seconds”

ExpiresByType application/x-javascript “access plus 216000 seconds”

ExpiresByType text/html “access plus 600 seconds”

ExpiresByType application/xhtml+xml “access plus 600 seconds”

</ifModule>

Si utilizas WordPress, el plugin W3 Total Cache funciona a las mil maravillas. Además permite múltiples posibilidades de configuración.

Lazy load

Sistema por el cual los elementos de la web se van cargando a medida que hacemos scroll down, mostrándose solamente cuando son necesarios.

Lazy Load

Si trabajas con WordpPress, aparte de las soluciones que te ofrezco, existen multitud de plugins que harán este trabajo por nosotros, solo tienes que Googlear un poco :) .

Si a pesar de todo lo que te he contado sigues teniendo alguna duda que despejar, deja un comentario abajo y trataremos de ayudarte entre todos.

Tribal Spain is a proud official partner of

Aviso de Cookies