30 Nov 2017
Guía SEO: WPO y velocidad de carga
Lectura: 10 mins.
|
Dificultad:

Guía SEO: WPO y velocidad de carga

Seguimos con nuestra extensa guía de cómo llevar a cabo un proyecto SEO (al final del post, encontrarás el índice de todos los artículos publicados y el enlace al ebook descargable con la guía completa), analizando todos los aspectos que influyen en el posicionamiento orgánico. En el post de hoy, nos ponemos un pelín más técnicos para analizar la velocidad de carga de un sitio web y cómo mejorar el proceso de carga. ¡Al lío!

Definición de WPO

Lo que nos gusta un buen acrónimo y más si éste es anglosajón. Las siglas WPO significan Web Performance Optimization y hace referencia a las diferentes técnicas destinadas a mejorar la velocidad de carga de una página web. ¿Cómo? Optimizando recursos para que sean menos pesadas y así mejorar la navegación.

¿Por qué es tan importante mejorar la velocidad de carga de una web?

Estas son algunas conclusiones de diferentes estudios realizados sobre cómo puede influir la velocidad de carga en los usuarios:

  • La gente visitará mucho menos un sitio web que es 250 milisegundos más lento que el de su competidor.
  • Los usuarios estarán dispuestos a esperar por la visualización de un video, pero no por un resultado de búsqueda.
  • El 40% de los usuarios abandona una página que tarda más de 3 segundos en cargar.
  • Para Amazon, 0,1 segundos de retraso implica una pérdida de 1,6 billones de dólares.

(Fuentes: http://www.nytimes.com y https://www.fastcompany.com)

Ahora que quizás te hemos convencido algo más sobre la importancia de optimizar un sitio web para que cargue lo más rápido posible, podemos empezar con la auditoría WPO.

Lo primero que haremos será analizar qué “score” o puntuación que me da Google en cuanto a la velocidad de mi página web, tanto en desktop como en mobile. Hay que tener en cuenta que el análisis se tendrá que hacer para las páginas principales: Home, landing de categoría, landing de ficha de producto o post. Esto es debido a que, probablemente, no haya la misma cantidad de recursos en la home que en la página de un post de blog, por ejemplo.

 

Una vez que sepamos la puntuación, iremos analizando cada uno de los aspectos que están influyendo en la carga de mi página web y que por lo tanto hay que mejorar:

TTFB (Time to first byte)

La métrica TTFB mide el tiempo que tarda un navegador en recibir el primer byte de una respuesta de un servidor web.

Existen varias herramientas que proporcionan este tipo de información, como GTmetrix o Web Page Test. En ambas podremos configurar desde qué navegador y país hacer la consulta.

En Web Page Test:

(Haciendo la petición desde París/Chrome para la home de una web ES): 0,53s

 

En GTmetrix:

(Haciendo la petición desde Canadá/Firefox para la home de una web ES): 1,1s

 

Lo normal será configurar la petición desde el país más cercano al mercado objetivo, en el caso de ser España, seleccionaríamos París, debido a su proximidad.

Hay tres factores fundamentales que influyen en el TTFB:

  • El tiempo que se tarda en difundir la solicitud a través de la red hasta el servidor web (espera, que voy).
  • El tiempo que tarda el servidor web en procesar la petición y generar una respuesta (espera que busque lo que te quiero mostrar).
  • El tiempo que tarda el servidor en propagar esa respuesta a través de la red hasta el navegador (espera, que vuelvo).

Lo recomendable es que el tiempo del primer byte no supere los 500 milisegundos. De hecho, los últimos estudios señalan que las páginas que están posicionadas en primeros puestos del ranking de las SERPs tienen un ttfb menor a 300 ms.

Si el alojamiento de nuestro servidor está geográficamente lejos de nuestro mercado objetivo (desde donde estoy recibiendo más peticiones), esto puede estar afectando en la latencia de los datos/información que tiene que viajar desde mi servidor hacia el navegador. Otro factor puede ser los tiempos de búsqueda de DNS.

Una solución recomendable es el uso de CDNs (Content Delivery Networks): son redes de entrega de contenidos para que un usuario reciba el contenido o información desde un servidor más cercano a su zona geográfica.

Número y tamaño de peticiones HTTP al servidor

La mayor parte de las peticiones dependen del front-end, es decir, de la descarga de todos los elementos de la página. Si reducimos el número de dichas peticiones estaremos ayudando a mejorar los tiempos de carga. Se puede ahorrar hasta una petición por cada imagen, archivo CSS o Javascript que suprimas.

¿Cómo puedo reducir el número de peticiones http?

  • Para disminuir el número de peticiones, podemos combinar archivos Javascript y CSS:
    • Unificando todos los CSS en una única hoja de estilo (más información).
    • Combinar los recursos Javascript o cargar de manera asíncrona para mejorar la renderización de la página.
  • Para minimizar el tamaño de recursos CSS, JavaScript podemos utilizar herramientas como JSMI o Closure Complier destinadas a eliminar caracteres o espacios innecesarios. Además, para minificar HTML, existe una extensión de Page Speed para Chrome que genera una versión optimizada de tu código HTML.

TIPS!

  • Insertar los CSS en el área del <head>. En relación a la optimización de CSS te recomendamos este artículo de nuestra compañera Agurtzane 😉

<style type=”test/css”> CÓDIGO DE LOS ESTILOS CSS </style>

  • Los archivos Javascript al final (antes de la etiqueta </body>) o hacer una carga asíncrona.

<script async type="text/javascript" src="script.js" ></script>

Compresión GZIP o Deflate

Una de las prácticas más útiles para disminuir el tiempo de respuesta del servidor es habilitando el método Gzip o Deflate. De esta forma, mejoraremos el tiempo de carga ya que al comprimir el código fuente de la web, llegará antes la petición al destino final. Para implementar este método de compresión, hay que añadir las siguientes líneas al fichero .htaccess (teniendo en cuenta el tipo de servidor).

Para servidor Apache

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

Para servidor Nginx

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

Para comprobar que una web está siguiendo esta directiva de compresión, lo podemos ver  clicando botón derecho > inspeccionar página > Network > Headers > Response Header.

Compresión de imágenes

La optimización de imágenes tiene un impacto directo en la velocidad de carga, pudiendo reducir hasta un 75% el tamaño de descarga de la web.

En cuanto al peso óptimo de las imágenes, se recomienda que no superen los 300kb o 500kb en casos excepcionales. La herramienta de  Web Page Test incluye un módulo para analizar las imágenes de una web y su grado de optimización: https://webspeedtest.cloudinary.com

 

Existen una serie de recomendaciones orientadas a lograr una adecuada optimización de imágenes:

  • Ajustar el tamaño de cada imagen al tamaño real y así evitar que el navegador tenga que redimensionar la imagen. Para ello, es recomendable ajustar el tamaño de cada imagen al tamaño real especificando el alto y ancho.
  • Simplificar la paleta de colores de las imágenes secundarias o de menor relevancia.
  • Utilizar formato jpg o png que son compatibles con todos los navegadores.
  • Optimizar las imágenes a través de herramientas como Web Resizer o it
  • Utilizar CSS Sprites para combinar imágenes pequeñas en una sola imagen para que la página web pueda mostrarlas mucho más rápido.

 

Caché del navegador para recursos estáticos

La primera vez que visitas una página web, el navegador tiene que descargarse todos los recursos, y claro, le lleva algo de tiempo. Sin embargo, las siguientes veces que vaya a visitar la misma página web, la caché del navegador habrá guardado algunos recursos (estáticos) y no tardará tanto en procesar y mostrar el contenido. Para ello, es necesario configurar el servidor web para almacenar los recursos estáticos en local.

Hay dos maneras de cachear recursos:

  • Establecer el valor Expires (mínimo una semana, máximo un año): Indica al navegador la fecha en que dicho recurso caduca o deja de ser válido.
  • Caché-Control: Sirve para especificar el periodo en el que el navegador puede utilizar el recurso en caché sin comprobar que haya una nueva versión disponible en el servidor web.

Esta última opción te permite tener un cacheo más controlado.

 

Otros factores que pueden influir en la velocidad de carga

Habilitar Keep Alive

Se trata de un método que permite la misma conexión tcp para la comunicación con el servidor en vez de abrir una a una para cada petición. Es una comunicación entre el navegador y el servidor que dice: “Ey, puedes coger más de un archivo al mismo tiempo”.

Se habilita en la cabecera http a través del archivo .htaccess.

Ubicación geográfica del servidor

Como hemos visto al principio, la ubicación del servidor web puede influir en la velocidad de carga. Si tenemos nuestra web alojada cerca de nuestro mercado potencial, será mucho mejor. Por ejemplo, si mi web está orientada al público de Reino Unido, lo ídeal es que tengamos el hosting en el mismo país, ya que esto beneficiará en la velocidad de carga de mi web. Sin embargo, como hemos comentado, a través de CDNs se puede solventar la latencia de respuesta.

Bonus-track:  Plugins y herramientas

Plugins de WordPress

  • Smush it: Este plugin sirve para reducir el tamaño de las imágenes sin que éstas pierdan calidad.
  • WP-Minify: Reducir el tamaño de los archivos CSS y JS

Herramientas útiles para analizar la velocidad de carga de mi web

 

 

Una vez hayamos optimizado los diferentes recursos y seguido las recomendaciones del test de velocidad de carga, tendremos que volver a evaluar la página a través de Page Speed Insights de Google para ver si el score de mi página ha mejorado tanto en desktop como en versión móvil.

En la próxima entrega de la guía hablaremos sobre cómo auditar otros aspectos técnicos de alta importancia como la indexación, rastreabilidad, etc.. ¡Os esperamos! 🙂