Dcorbaxeo SEO

El nuevo estándar, HTML5, nos promete una larga lista de cambios grandes e interesantes, tanto para usuarios como para profesionales del medio. Vamos a ver algunos de especial relevancia.

HTML5 proporciona a los desarrolladores una manera más sencilla de crear aplicaciones Web con más potencia y menos fallos.

Los usuarios verán las aplicaciones Web en tiempo real de forma más suave y con menos errores. Ya que HTML5 promete un camino más fácil para los desarrolladores en la creación de sitios web que se actualizan en tiempo real.

Los desarrolladores deben realizar complejas tareas de codificación que, fácilmente, pueden acabar introduciendo errores y haciendo que las aplicaciones fallen.

Bruce Lawson, que evangeliza sobre los estándares web abiertos de Opera Software, señala que al grupo que trabaja en el HTML5, se le asignó la difícil tarea de hacer que la especificación fuera más tolerante que sus predecesores, para que los sitios web más antiguos o mal codificados funcionaran mejor en navegadores habilitados para ejecutar HTML5. 

• Web Sockets: conexión permanente entre una página y un servidor.
  Una de las mejoras más interesantes que puede ofrecer HTML5 es la característica Web Sockets: proporciona un sitio web con una interfaz de programación de aplicaciones (API) que abre una conexión permanente entre una página y un servidor, para que la información pase entre ellos en tiempo real, (sin tener que hacer una solicitud cada vez que se quiere una actualización). Web Sockets promete una forma fácil de que los desarrolladores creen páginas web que cambien en tiempo real.
• Mayor velocidad y mejor funcionamiento:
  Las páginas se cargan más rápido (sobre todo en dispositivos móviles), y funcionan mejor, gracias a la red de comunicaciones de HTML5 y a un navegador de almacenamiento.
• Web Storage
  HTML5 también puede ayudar a que las aplicaciones web funcionen mejor cuando los dispositivos están desconectados (o intermitentemente) de Internet, como los teléfonos inteligentes. Una característica llamada Web Storage permite a las aplicaciones Web almacenar más datos en el navegador, recuperarlos de forma más inteligente, y controlar cómo los navegadores guardan ciertas partes de páginas para agilizar la carga.

Una fórmula mágica:

• Mejor manejo de formularios, reduciendo el código javascript:
  HTML5 también mejorará el rendimiento de los navegadores con un mejor manejo de los formularios: menos javascript, más velocidad de carga de la página…
• Funciones CSS diseñadas para trabajar con HTML5:
  Además varias características de la nueva versión de CSS, están diseñadas para trabajar con HTML5, haciendo a las páginas Web más sensibles a la entrada del usuario y permitiendo gráficos de alta calidad.
• Muchas web profesionales funcionan como aplicaciones de escritorio (suite de oficina o herramientas de edición de fotografías p.e.). Pero las funciones más sofisticadas dependen de conexiones que los desarrolladores crean entre diferentes tecnologías Web, como HTML, JavaScript y hojas de estilo (CSS). Esto hace a esos sitios más lentos y vulnerables a los agujeros de seguridad.
  Con las nuevas características de HTML5, como Web Sockets, también estos sitios serán más rápidos, potentes y seguros.
• Más interoperabilidad entre navegadores:
  Otra importante mejora es el ‘parser’ del HTML5. Es un analizador del navegador que lee las etiquetas utilizadas para construir una página y busca cómo mostrarlo. Esto hace que los navegadores sean más interoperables en la forma en que manejan el código mal escrito: el analizador especifica cuáles son las respuestas a los errores, en lugar de dejar que cada creador del navegador decida cómo manejar el código imperfecto. Esto ofrece una experiencia de usuario más sólida, sin importar el navegador que se utilice.
• Vídeo en el navegador, sin plugin, gracias a HTML5:
  HTML5 ha atraído la atención por su capacidad de mostrar vídeo dentro de un navegador web, sin necesidad de plug-ins como Flash de Adobe. Aunque esta no es la característica más importante de HTML5, ni mucho menos, está claro que es una gran novedad y alivio para los usuarios y que podremos disfrutar de lo lindo de este nuevo formato para el vídeo.
  
  YouTube acaba de anunciar que cambia el código para embeber vídeos. El nuevo código utilizará un iframe que permitirá ver los vídeos embebidos tanto en Flash como enHTML5, en función de la configuración del navegador del usuario.
  Por defecto se mostrará HTML5, cambiando a Flash siHTML5no está disponible.
  El ejemplo del nuevo código, mucho más corto:
  <iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
  </iframe>

Naturalmente llevará su tiempo hasta que todo esto esté bien implementado.
Actualmente sólo Chrome, Safari, Firefox y Opera soportan la mayoría de las características de HTML5, (no todas).

Con este enlace podrás comprobar en qué medida tu navegador soporta HTML5. http://www.html5test.com/

Consideraciones personales:

"La base de HTML5 es implacablemente pragmática"

Bueno, sin duda un momento emocionante para los desarrolladores web, pero también los usuarios lo notarán bastante, sobre todo en algunos aspectos.

Y, sin duda, HTML5, también traerá nuevas normas.

Felicitemos al grupo de trabajo HTML5 y a todos los que están detrás de todo esto ya que estas innovaciones encaminadas a mejorar la web, no sólo permiten aumentar la sofisticación en el diseño y la funcionalidad de los sitios web, sino que contribuyen a reforzar la libertad del usuario y a abrir más el horizonte y las mentes…

…Alabados sean…!

Aquí te dejo algunos enlaces a contenidos muy interesantes sobre HTML5 para que vayas haciendo boca y te relajes ante lo que se nos viene con la implementación del nuevo lenguaje de marcas HTML5:

HTML5 gallery

Canvas Vídeo 3D

Chrome Experiments

SlidesHTML5Rocks – magnífica presentación y demo, en uno, (no se ve en IExplorer7).

Guía de HTML5 para desarrolladores web

Hojas de apoyo HTML5 y CSS3

fuente Technology Review

⁓ Código de seguimiento asincrónico de Google Analytics: mejor rendimiento

Google Analytics Asíncrono es una forma mejorada del seguimiento de los visitantes de nuestro sitio web con Google Analytics. A diferencia de la instalación tradicional, el seguimiento asincrónico optimiza la carga del “ga.js” por los navegadores para que el impacto sobre la velocidad de carga y sobre la experiencia de usuario sea mínima. También permite poner el fragmento de Analytics en la parte superior de la página sin que se retrase la carga del contenido.

Aunque el seguimiento asincrónico usa un snippet y una sintaxis diferente para el seguimiento, permite personalizaciones exactamente igual que el código tradicional. De hecho, la sintaxis de seguimiento asincrónica también es más flexible que la tradicional para estos menesteres.

El Snippet Asíncrono ⁓

El código de Google Analytics es una pequeña pieza de código JavaScript que deberemos pegar en nuestras páginas, para activar el seguimiento de Google Analytics, que a su vez proporciona una API para personalizar cómo se hace un seguimiento concreto para cada página.

El siguiente fragmento representa la configuración mínima necesaria para el seguimiento de una página de forma asincrónica:

<script type="text/javascript">// <![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']); (function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google
analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// ]]></script>

⁓ Cómo utilizar el código asincrónico:

1. Retira el fragmento de código de seguimiento existente y cualquier personalización que hayas realizado.
2. Inserta el código asincrónico en la parte más inferior del <head>, después del resto de scripts que uses en la página o en la plantilla. En la mayoría de páginas, la ubicación óptima para el código asincrónico es justo antes de </head>.
3. Modifica _setAccount con tu ID de Analytics.
4. Añade las personalizaciones de nuevo en el uso de la sintaxis asincrónica. La Guía de Uso y Ejemplos de migración de páginas ofrecen muchos ejemplos de estas conversiones.

Si necesitas hacer algo más que el seguimiento de la página de base, consulta esta referencia para obtener una lista de los métodos disponibles en la API y para obtener más información sobre el uso de la sintaxis asincrónica.

⁓ Mejoras que implica la gestión de captura asíncrona.

Mayor rapidez ⁓ El problema habitual al cargar ficheros JavaScript es que bloquean el refresco de pantalla hasta que están completamente cargados. Para evitarlo el nuevo “ga.js” de Google Analytics puede ser cargado de forma asíncrona y posteriormente ser procesado en el equipo, además tampoco agrega más contenidos a la página por lo que reduce los tiempos totales de presentación y no nos bloquea las imágenes ni las hojas CSS a procesar.

Mejora el tiempo de subida ⁓ Cuando un script tarda mucho tiempo en ser cargado o falla, puede bloquear la carga de una página. Con el nuevo “ga.js” estos problemas desaparecen de la lista de problemas de un desarrollador web. Ahora la web se carga más rápido y el contenido traslada la información sin bloquear nada.

Proporciona más datos ⁓ La recomendación que se daba antes para mejorar la experiencia de usuario es colocar el script de Google al final de la página, así vemos la página completa y queda un “cargando” en el navegador. Pero esto significa que si no termina de procesarse el “ga.js” y el usuario es rápido en clickar otro link no se contabiliza la visita y esto falsea las estadísticas del sitio. Con el nuevo proceso asíncrono, mantendremos el script en la parte inferior, pero el nuevo sistema traslada simplemente un indicativo para que sea procesado posteriormente por Google sin afectar a la navegación, con ello además puede incrementar la información a recopilar.

⁓ Consideraciones:

El anterior ga.js se mantiene, no es imprescindible el cambio. No obstante si queremos mejorar el rendimiento de nuestra web debemos realizarlo.
-Importante: Si deseamos utilizar el snippet asincrónico, debemos eliminar primero el código de seguimiento antiguo . No usar ambos fragmentos en la misma página.
-No hay pérdida ni interrupción en la recogida de datos.
-Es muy versátil y personalizable. Si queremos se puede modificar con jquery según nos cuenta Iñaki Huerta.
-Aunque Google recomienda colocar el tracking en la cabecera <head> hay algunos que después de hacer los test pertinentes piensan que sigue siendo mejor colocarlo al final justo antes de </body>, así siempre será lo último que se ejecute en la página, prefieren que primero se cargue adsense que analytics. Pa gustos los colores.

⁓ Conclusiones:

El cambio del código de seguimiento significará una mejora de un 10% de media en el tiempo de carga para la mayor parte de las páginas web que incorporan el script de Google Analytics, es decir, casi todas.

La implementación en páginas estáticas sigue los mismos protocolos (cuenta de Google Analytics y sigue la ruta: Analytics Settings > Profile Settings>Tracking Code y allí encontrarás un anuncio del nuevo código asincrónico), es igual que siempre.

Velocidad de carga: otro factor de posicionamiento SEO.

Con la inclusión de la velocidad de carga en los algoritmos de Google, los SEO se preguntan ansiosos si acabará primando la velocidad sobre la calidad o la relevancia en los resultados de nuestros amados buscadores.

Obviamente no, pero ha llegado la hora de centrase más en la aceleración de los procesos y reducir el peso del diseño y los tiempos de carga.

El gran éxito de los medios sociales y el que la televisión y radio sean tan populares a estas alturas, nos enseña que las interfaces usables e inmediatas siguen siendo caballo ganador.

En términos de velocidad, las interfaces tradicionales siguen siendo el punto de referencia para diseñadores web.

Apostemos por él: Velocidad y Usabilidad.

⁓ Herramientas para medir la velocidad de carga:

Lo primero es saber qué tiempo tarda nuestra página web en cargarse.

Estas son sólo algunas herramientas gratuitas (hay docenas) que puedes utilizar para medir la velocidad de carga tu sitio:

• Yahoo YSlow: Plugin gratuito de Yahoo para Firefox que se integra a Firebug. Evalúa el rendimiento de las páginas web y sugiere formas de mejorar la velocidad de carga del sitio web.

• Pingdom: Herramienta para medir la velocidad de carga. En Pingdom se guardan los registros de las consultas, por lo que puedes compararlas y comprobar el efecto de tus esfuerzos por mejorar el peso y la velocidad de carga de cada archivo. Puedes filtrar la información también por peso de archivo en vez de por tiempo.
  En su blog, Inkilino nos explica detalladamente su uso.

• WebPagetest Pagetest es una herramienta basada en Internet Explorer desarrollada por AOL. Aunque no es recomendable ejecutar directamente, tienen una versión de acceso público, con unos pocos lugares de alojamiento en todo el mundo. Usa un navegador web real para obtener el contenido por lo que es una medida mucho más precisa de la experiencia real del usuario. No es muy ágil, pero muy útil, (y bonita). Muestra una vista en cascada del tiempo de carga de las páginas y una lista de optimización.

• Google Webmaster Tools: La herramienta de Google muestra estadísticas del rendimiento de tu sitio sobre el total de las páginas web del mundo en un cuadro gráfico. Puedes utilizar esta información para mejorar la velocidad de carga del sitio y para ofrecer un servicio más rápido a los usuarios.

• Google Page Speed: Plugin de Google para Firefox que se integra en Firebug, analiza el rendimiento y también da sugerencias para mejorar la velocidad de carga, ofrece una puntuación según los factores que evalúa. Recomendado por Google.

• Web Page Analyzer: El script calcula el tamaño de los elementos individuales y resume cada tipo de componente de la página web, ofreciendo un análisis y recomendaciones.

• Hammerhead: Plugin que se integra con Firebug y muestra el tiempo de carga de las páginas.

• Webwait, una herramienta que crea una media de la velocidad de carga de un sitio web o un blog en diferentes navegadores mediante la creación de un enlace permanente.

⁓ Cómo acelerar la velocidad de carga de tu sitio web para mejorar el posicionamiento en los buscadores, SEO

1. Utilizar páginas HTML estáticas siempre que sea posible, es mucho más rápido y más fácil para el servidor. (Acelerará bastante la velocidad de carga).
2. Reducir el número de imágenes con CSS Sprites, para minimizar las peticiones HTTP. Se trata de combinar todas las imágenes de tu sitio en una, utilizando la propiedad CSS background-posición para mostrar la parte correcta de la imagen. Es muy fácil hacerlo con un bookmarklet llamado SpriteMe.
3. Optimizar las imágenes. Puedes usar un optimizador de imágenes online, como Webresizer. Las imágenes deben llevar texto "alt" y especificar el ancho y alto en el código.
4. Externalizar imágenes, JavaScript y CSS: Reunir todas las reglas de estilo CSS en archivos externos vinculados al html (hojas de estilo). Lo mismo con todo el contenido de Javascript que podemos externalizar (no el de Google Analytics, TweetMeme, etc). Las imágenes deben ser llamadas con reglas CSS.
5. Unir todos los archivos CSS externos en uno sólo: En lugar de un archivo CSS que importe tres, uno grande con el contenido de todos (copiar y pegar).
6. Unir todos los Scripts externos en uno sólo. (Anieto2k explica una buena forma de hacerlo). Esto acelerará bastante la velocidad de carga, si hay muchos.
7. Hojas de estilo en la parte superior. Scripts en la parte inferior. (En el caso de G. Analytics, además sólo contabilizará las visitas que dejen cargar toda lapágina).
8. Comprimir el CSS – Podemos mejorar también la velocidad de carga comprimiendo el CSS, por ejemplo con CSSDrive.
9. Minimizar los DNS Lookups y las redirecciones: Cada nombre de host adicional añade una consulta DNS para buscar su dirección IP, lo que suma un costo de 20-120 milisegundos por DNS. Esto incluye los nombres de host utilizados en la URL de la página, imágenes, archivos de script, hojas de estilo, objetos flash… Reducir el número de nombres de host único reduce el número de búsquedas de DNS.
10. Rutas relativas en vez de rutas absolutas: el servidor no tendrá que volver a establecer una conexión para cada imagen en la página.
11. Añadir un encabezado de expiración con una fecha futura lejana, para el almacenamiento en caché y reducir el número y tamaño de las peticiones HTTP, permitiendo que las páginas se carguen más rápido. (Esto tiene sentido si tu audiencia es mayoría de visitantes asíduos).
12. Comprimir con componentes Gzip: La compresión reduce los tiempos de respuesta al reducir el tamaño de la respuesta HTTP, esto acelera bastante la velocidad de carga.
13. Instalar el WP Super Cache. Es fácil de configurar y es más rápido que WP-Cache. Te permite administrar los archivos CSS y JavaScript por página. Este plugin genera archivos HTML estáticos desde tu blog WordPress dinámico, lo que ayuda a mejorar la velocidad de carga.
14. Optimizar nuestro theme de WordPress. Todas las consultas que tengamos dinámicas hay que ponerlas estáticas. Reemplazar todas las lineas dinámicas del header.php y el footer.php principalmente, (podemos copiar las rutas estáticas de Ver código fuente en el navegador).
15. Evitar las cookies.
16. Tener un buen Hosting, que proporcione la velocidad de carga necesaria, es fundamental para mejorar el posicionamiento SEO. Si es necesario, trasladar el sitio a un servidor dedicado con una conexión más rápida.

⁓ Algo a tener en cuenta:

El botón TweetMeme saca un archivo de JS de tweetmeme.com que a veces tarda más de cinco segundos en cargar. Si tienes unos cuantos en una página… suma.
Cada vez que alguien integra algunos contenidos en una página -YouTube, Google Analytics, Tweetmeme … – el tiempo total de carga de tu página está a su merced.

Desde el punto de vista de la experiencia del usuario vale la pena invertir algo de tiempo en mejorar todo lo que se pueda la velocidad de carga de las páginas web. Pero, sobre todo, para mejorar el funcionamiento global de la Web.

A correr!!