WPO: Web Performance Optimization aplicada al SEO

Definición de WPO: Web Performance Optimization define la forma de hacer que una web sea más rápida y eficiente. Algo fundamental para el SEO sobre todo en e-commerce. A la hora de optimizar debemos de tener en cuenta la tecnología que usamos para crear nuestra web, desde el lenguaje de programación, hasta el servidor que usamos para mostrarla. La velocidad ha de ser un elemento diferenciador.

La premisa de cualquier sitio web debe de ser la de descargar y mostrar la información en menos de 2.5 segundos. Hacer que un sistema sea más lento provoca que sitios como Facebook caiga un 3% al ir 0.5 segundos más lento, o que Yahoo pierda entre el 5% y 9% de su tráfico por 0.4 segundos de retraso.

En el mercado existen muchas herramientas gratuitas que te irán aconsejando como ir mejorando el rendimiento de tu sitio web.

WPO: Web Performance Optimization aplicada al SEO

Veamos algunas acciones para optimizar tu sitio web.

Peticiones HTTP:

Es importante reducir el número de elementos que tenemos que descargar del código HTML. Se ha de tener en cuenta que por lo general los navegadores no pueden descargar más de dos o cinco elementos al mismo tiempo y que cada vez que se realiza una petición del tipo “muestra esta imagen” o “descarga este CSS”, son tiempos de ejecución que hacen que cada vez sea más lento, sobre todo si realizamos una petición a un elemento que no existe o tarda en descargar, puesto que ese recurso de descarga queda bloqueado, queda anulado hasta la respuesta del mismo.

Una forma fácil de hacer menos conexiones HTTP es haciendo un mix, con los elementos que necesitamos. Por ejemplo, podemos combinar varios CSS o .JS en uno sólo, e incluso combinar imágenes y luego mostrar un solo fragmento de la misma por CSS (CSS Sprite), reduciendo el número de solicitudes de imágenes, para ahorrar conexiones.

En un sitio web se está constantemente comunicando el visitante del sitio web con el servidor web que está ofreciendo la información. Es importante definir la forma de comunicar el cliente con el servidor. Lo normal es usar GET, ya que de esta manera se envía y recibe toda la información en una sola instancia.

Es preferible hacer una conexión HTTP grande que muchas pequeñas, principalmente porque cada conexión es certificada y se pierde tiempo en esto. También es importante saber donde has de colocar los elementos para que se descarguen, por ejemplo, muchas veces he visto los CSS al final del documento, gran error, el navegador una vez compilado ha de volver a configurar el aspecto de la página, por lo que colocar los archivos CSS en la parte superior aumenta la velocidad. En cambio los ficheros .JS han de colocarse en la parte inferior del site, puesto que suelen bloquear la descarga si no se procesa en un tiempo razonable.

Otro elemento a tener en cuenta es tener cuidado con las conexiones que no llevan a ninguna parte porque están mal enlazadas, por lo general los navegadores paran la conexión de petición de datos para procesar correctamente el error. Un clásico es no colocar el faveicon.ico ya que los navegadores esperan que le des este dato y si no se lo das se bloquean, no olvidemos que son unos y ceros.

Externalizar contenido:

Los navegadores permiten introducir contenido externo al documento, metiendo en cache dicho documento externo podemos aumentar la velocidad de descarga de una forma simple.

Minimizar contenido:

Cada bit cuenta y por eso una buena práctica tras terminar un proyecto, es el de minificar todo lo que podamos. Este concepto consiste en eliminar todo el contenido que no sea necesario, como pueden ser elementos duplicados en las propiedades CSS, comentarios de los programadores o espacios en blanco innecesarios. Pueden usar la herramienta Minify para simplificar el código y terminar dejando todos los CSS en uno sólo mediante programación.

También se pueden usar técnicas de ofuscasión de código, que consiste en sacarle mayor rendimiento a las funciones que se usan en programación. Te puedes divertir con el CSS reducir los valores de los colores de hexadecimal a texto plano. Pero no te compliques y usa una herramienta, suelen funcionar muy bien y cada una tiene su peculiaridad.

Lo ideal una vez tengamos nuestro código optimizado es dejar todos los archivos de un mismo tipo en uno sólo, principalmente para reducir el número de solicitudes HTTP.

Las Cookies:

Estas galletitas lo que hacen es almacenar información de los procesos de un sitio web, tales como usuario, contraseña … cuando se realiza cualquier petición HTTP la información de las cookies va en dicha transacción. De ahí la importancia real de estas, no suelen pesar más que unos kb pero en ocasiones pueden pesar más. Se recomienda trabajar con ellas sólo para variables de sesión, otra cosa que ayuda es ponerle una fecha de expiración de uso.

Apache Mod_rewrite:

El módulo de Apache Mod_rewrite se usa para hacer que todas las URL tengan de forma predeterminada la “/” al final de cada URL.

Las URL son un punto en las cuales debemos de invertir tiempo. Uno de los problemas principales para el SEO y la caché es la creación de URL no amigables. Crear un link con “/” al final o no, es algo que los navegadores aún entienden como páginas diferentes.

Comprimir el contenido:

Los navegadores no son más que simples intérpretes de texto plano y el texto plano se puede comprimir perfectamente con los compresores actuales, cosa que a penas pasa con las imágenes o videos. Actualmente muchos CMS ya tienen implementados la compresión GZip, una vez terminado el proyecto es aconsejable activarlo, reduce y mucho los tiempos de descarga.

CDN o Domain Sharding:

Esto es algo para los que quieren diferenciar su proyecto y convertirlo en algo interesante de verdad.

Esta técnica consiste en hacer llamadas a diferentes servidores para componer todos los archivos de una web. De manera que en el caso de un bloqueo el navegador continúa sirviendo información. Esto no se debe de hacer nunca con más de dos servidores simultáneamente y para que sea eficiente se han de llamar por lo menos tres veces por servidor.

La idea es que termine quedando algo como esto:

  • dominio.com/img01.jpg        <– Este sería el servidor web primario
  • ww1.dominio.com/img02.jpg <– Servidor 1 de imágenes
  • ww1.dominio.com/img03.jpg <– Servidor 1 de imágenes
  • ww2.dominio.com/img04.jpg <– Servidor 2 de imágenes
  • ww2.dominio.com/img05.jpg <– Servidor 2 de imágenes

Otra cosa que se puede hacer es distribuirlo geográficamente y ofrecer en función de tu IP, la web coge información de un servidor u otro, el más cercano. Enviar un dato a cruzar el océano tiene su tiempo, por lo que ofrecer contenido desde en mismo continente o país puede llegar a tener su influencia.

Optimizar imágenes:

Las imágenes son parte muy activa en la web de hoy, por lo que un correcto uso puede facilitar la descarga de las misma. Lo principal es reducir el número de los colores para disminuir su peso y usar un tamaño correcto, los CMS reducen casi automáticamente los dimensiones de las imágenes y dejamos de prestar atención a su tamaño.

Lo mejor es usar programas como http://www.smushit.com/ysmush.it/ mucho cuidado luego a la hora del ver el HTML en colocar correctamente las etiquetas de “alt” y “title”.

Optimizar contenido:

Como todo termina siendo HTML, no debemos de sobresaturarlo con más de 1.000 elementos (DOM) para su correcto uso. Al igual que el documento no debe de pesar más de 25 Kb, sobre todo si tu objetivo es el móvil. Y ya que he dicho la palabra móvil comentar que se ha de usar una plantilla adaptable al dispositivo, lo que se conoce como “responsive”.

Optimizar el servidor:

Otro punto que casi nadie controla es la máquina en la cual se encuentra alojado el sitio web y es de lo primero que debes de controlar. Si el servidor no es capaz de dar respuesta de nada te vale todo lo demás y esto es un tema económico, que mínimo que un servidor que no tenga cortes (malísimo para el SEO) y que tenga RAM de sobra para evitar bloqueos momentáneos. Si pretendes hacer algo más con él como copias de seguridad o envíos de mail procura mediante Google Analytic las horas de menor uso y programa las tareas en dichas horas para despejar el camino a los visitantes.

Anuncios

3 comentarios en “WPO: Web Performance Optimization aplicada al SEO

  1. Pingback: Como hacer SEO para móviles - MKCheck

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s