SEO mediante optimización de código

Más allá de las técnicas de SEO tradicional, existen otras técnicas que permiten mejorar el posicionamiento de nuestras páginas web en los buscadores y simultáneamente mejorar la velocidad de carga de la web mediante la optimización y racionalización de las infraestructuras. Desde que Google anunciara que valoraba la velocidad de carga de las páginas a la hora de indexarlas mucho se ha trabajado para analizar y proponer cambios para optimizar la velocidad de carga de una web. Aunque realmente la velocidad de carga tiene un peso bajo en el logaritmo de Google (básicamente penaliza en páginas lentas), reducir el tiempo en el que los usuarios pueden visualizarla completamente ayuda a mejorar su experiencia de navegación lo que se traduce para la empresa en un incremento de sus ganancias. Es lo que algunos expertos llaman WPO (Web Performance Optimization).

 

Conseguir mayor velocidad de carga

El WPO se basa exclusivamente en la tecnología. Es decir en las mejoras referentes a la conectividad de redes, la optimización de los servidores web y la mejora de los diferentes elementos que tienen los propios sitios web, desde el HTML hasta el JavaScript, pasando por los CSS o la cantidad de peticiones a servidores DNS.

En este aspecto, la programación de las páginas y las infraestructuras que lo alojan juegan un papel determinante, especialmente en sitios destinados a e-commerce. Según algunos expertos las empresas deberían invertir al menos un 5% de sus ingresos obtenidos vía web en las infraestructuras de la propia web. Seleccionar correctamente el proveedor de alojamiento, disponer del ancho de banda apropiado, asegurar la escalabilidad, disponer de balanceadores y distribuidores de contenidos, … son elementos básicos asegurar una buena velocidad de carga. Pero independientemente del ancho de banda contratado y de las características de nuestros servidores, podemos aumentar significativamente la velocidad de carga de una página mediante una correcta gestión del código de la web y del servidor.

A continuación enumeramos algunas técnicas o estrategias que pueden aplicarse a nivel de programación de la web que pueden ayudar a mejorar la velocidad de carga de una página.

 

Buenas prácticas de optimización de código

Reducir y paralelizar peticiones HTTP

Reduciendo el número de peticiones HTTP a realizar, el tiempo de descarga se reduce bastante. Hay que tener presente que en IPv4 se consume en muchos casos más tráfico en la petición de la información que en la transferencia de la información en sí. Entre otras acciones podemos:

  • Combinar varios CSS o JavaScripts en uno y colocarlos en la parte superior del código. Los JS sin CSS mejor al pie.
  • Externalizar contenidos CSS y JS para que puedan ser cacheados.
  • Reducir el tamaño de los CSS y JS, y comprimirlo.
  • Combinar imágenes o iconos en CSS sprites.
  • Incluir imágenes en HTML o CSS con el método ‘data:’.
  • Uso de GET y JSON en peticiones AJAX.
  • Mejor una unidad de código grande que varias de pequeñas.
  • Racionalización de Scripts: ‘defer’, ‘non-blocking scripts’,…
  • Evitar enlaces a contenidos ‘404’ con el fin de evitar peticiones HTTP extras.
  • Configurar redirecciones 301 mediante HTACCESS para evitar peticiones estériles (básico para SEO).
optimizacion codigo
Reducir el tamaño de las cookies

Aunque las cookies se guardan en texto plano y no suelen ocupar mucho tamaño, cada vez que se hace una petición, el navegador envía la información de las cookies que coincida con el dominio solicitante. Para reducir el número de peticiones podemos:

  • Reducir al mínimo su tamaño y eliminar aquellas que no sean necesarias.
  • Aplicar las cookies al nivel de dominio-subdominio necesario.
  • Aplicar una fecha de eliminación intermedia (ni lejana ni próxima).
  • Generar dominios sin cookies para contenidos estáticos.
Evitar redirecciones

Las redirecciones son un tipo de código del HTTP que permite pasar de una página a otra manteniendo determinada información. Cada vez que hacemos una redirección añadimos una petición extra.

  • Evitar más de 1 redirección
  • Redirecciones acompañadas de ‘expires’ o ‘cache-control’
  • Automatizar la barra ‘/’ al final de la URL
  • Utilizar Meta-refresh
Comprimir contenidos

Una forma de hacer que los sitios web vayan más rápidos es hacer que la velocidad de descarga sea menor. Para eso muchos servidores y navegadores permiten el uso de la compresión Gzip / Deflate que comprime los contenidos antes de enviarlos y los descomprime al ser recibidos.

  • Usar protocolo ‘http/1.1
  • Activar el Deflate en Apache
Usar ETags

Aunque cachear contenidos es un buen sistema para evitar peticiones extras, otro sistema es el de indicar la última vez que se modificó el documento. Gracias a esta información tanto el servidor como los navegadores podrán definir si el usuario debe descargar una nueva versión del contenido o no. Este sistema es totalmente compatible y complementario con las cachés, por lo que su uso, sobre todo en contenidos dinámicos, se vuelve casi imprescindible.

  • Devolver la cabecera ETag
  • Cabecera ETag en DCN o Domain Sharding
Control de caché y almacenaje estático

Sin duda alguna una de las formas de reducir la cantidad de tráfico no-útil en un sitio es utilizando sistemas de caché. Gracias a esto, y de varias formas, podremos reducir la cantidad de peticiones contra el servidor si el usuario utiliza navegadores mínimamente nuevos. Igualmente separando los sitios/contenidos estáticos de los dinámicos nos permitirá hacer muchas mejoras en cuanto al uso de tecnologías adecuadas para cada uno de los casos. Algunas ideas:

  •  Distribución geográfica de contenidos estáticos mediante herramientas de distribución de contenidos (CDN).
  •  Cabeceras con control de cache y expiración.
  • Cache para contenidos estáticos
  • Usar ‘cache control: public’ para cachear conexiones seguras ‘https’.
  • En apache usar ‘MOD_CACHE’, ‘MOD_DISK_CACHE’, ‘MOD_MEM_CACHE’, ‘MOD_FILE_CACHE’ y ‘HTCACHECLEAN’.
Carga previa de elementos

Una forma de hacer que un sitio web vaya más rápido es precargando / cacheando elementos que permitan avanzarse a la navegación del usuario. Esta técnica puede ser muy útil sobre todo si sabemos que el usuario tiene que navegar de una cierta manera y podemos predecir sus pasos.

Reducir las peticiones de DNS

Cada vez que necesitamos saber la dirección IP de un dominio o subdominio tenemos que realizar una consulta a los servidores DNS, lo que significa que el usuario pierde cierto tiempo en estas peticiones. Para reducir el número de peticiones podemos:

  • Configuración de los DNS: gestionar el TTL, evitar dominios exóticos, distribuir DNS geográficamente (mediante CDN), separar DNS públicas de las privadas o desactivar la recursividad.
  •  Minimizar las peticiones externas.
  •  Utilizar Scripts asíncronos.
  •  Reducir el uso de CNAME.

-         DNS prefetching: anticipar las peticiones de los dominios resolviendo las DNS antes que se cargue la página o el elemento en cuestión en páginas siguientes o en elementos de la propia página.

Optimización de las imágenes y contenidos multimedia.

Dentro de las técnicas de WPO y de SEO en general, las imágenes ocupan un lugar muy relevante a la hora de definir los contenidos de una página. Videos, flash y otros elementos multimedia suelen ser elementos externos y pueden representar una sobrecarga. Algunas recomendaciones serían:

  • Reducir el peso de las imágenes
  • Codificar los JPG y PNG
  • Escalar las imágenes al tamaño de visualización
  • Utilizar ‘favicon.ico’ pequeños y cacheables
  • Comprimir ficheros Flash
Optimización de elementos

Optimización del código fuente para evitar que el navegador tenga que gestionar más elementos de los necesarios.

  • Limpiar el código HTML y cerrar todos lo elementos.
  • Reducir el número de <iframes>.
  • Usar tablas con ancho fijo

Estos son sólo algunos de los elementos que podemos trabajar a nivel de programación, aunque hay muchos otros, también a nivel de servidor que pueden ayudarnos a mejorar la capacidad de carga de nuestras páginas web y, como consecuencia, obtener una mayor satisfacción del usuario. Y es que hoy en día para que una estrategia de SEO sea exitosa debe centrarse en el usuario y en cómo mejorar su experiencia durante su visita.

 

Seminario sobre Técnicas de Optimización de Código

Para más información referente a como mejorar la velocidad de carga a través de código y sin tener que modificar las características del hosting de la página web, inscríbete al seminario gratuito ‘Técnicas de Depuración de Código’ que se celebrará el próximo 27 de Marzo o contacta con nosotros.