Análisis en los Motores de Búsqueda

El primer paso es verificar que la información de nuestro web esta indexada correctamente en los motores de búsqueda.

• Busca en Google: site: tudominio.com, esto devolverá todas la páginas indexadas de tu dominio. Compara el total de páginas indexadas con el total de páginas que tienes alojadas en tu servidor.
• Prueba buscar el nombre de tu web o marca y verificar tu posición en los buscadores. Si no existen resultados de tu web es probable que hayas sido penalizado.
• Revisa la versión en cache que tienen los buscadores y verifica que sea la misma versión de tu página actual, si no es así entonces el buscador tiene indexado una versión antigua de tu página.

Análisis Contenido Duplicado

Verifica que tu dominio tenga canonicalización. Es decir que la versión no-www (http://tudominio.com) de tu web haga una redirección 301 a la versión www (http://www.tudominio.com) o viceversa. Si no existe esta redirección 301 ambas versiones puedes considerarse como dominios diferentes y una considerada como contenido duplicado.

Para hacer una revisión de contenido, realiza la búsqueda exacta de una frase (Entre comillas dobles) que se encuentre en tu web y analizar la cantidad y tipo de resultados devueltos. Tambíen puedes utilizar el la palabra clave intitle para indicar la búsqueda solo en los títulos.

• Buscar en el contenido: "Frase a buscar"
• Buscar en los titulos: intitle: "Frase a buscar"

Si tienes varias páginas con el mismo contenido, puedes utilizar la propiedad canonical para indicar a los buscadores cual de estas páginas debe ser considerada como contenido original:

Análisis de los URLs

Revisar que los URLs de tu página sean cortos, limpios y descriptivos (Descriptivos: que contienen keywords indicadores del contenido hay en la página). Evitar incluir parámetros adicionales como identificadores, códigos de sesión entre otros. En resumen los URLs deben ser sencillos de recordar y deben indicar directamente el contenido que están alojando.

Ejemplos:

• Incorrecto: http://blog.unijimpe.net/?p=1268
• Correcto: http://blog.unijimpe.net/depurar-flash-con-firebug/

Análisis de la etiqueta <title>

Asegúrate que todas las páginas tengan títulos únicos y descriptivos. Recuerda que los títulos deben ser únicos pues de lo contrario los motores de búsqueda no distinguirán la diferencia entre las diferentes páginas. Deben ser descriptivos de forma que explique sin opción a dudas cual es el contenido de la página.

No es necesario incluir el nombre de tu marca en el titulo, pero si deciden hacerlo debe ser al final de titulo y con un carácter separador, esto para obtener mejores beneficios en el ranking de los buscadores. Además hay que verificar que los títulos deben ser de menos de 70 caracteres de longitud en lo posible.

Análisis de los Metatags

Revisa el metatag robots en todas las páginas de tu sitio. Ten en cuenta que si el metatag robots tiene asignado el valor NoIndex o NoFollow evitará que tu contenido sea indexado en los buscadores. El uso no intencionado de estos tags hará que el contenido no sea indexado. El siguiente código debe ser utilizado sólo cuando se quiera evitar que la página sea indexada, por ejemplo cuando el contenido es accesible sólo para usuarios registrados.

También es necesario revisar que el metatag description sea único y contenga un resumen del contenido de la página. El contenido de este tag será mostrado en los resultados de la búsqueda por lo que ayuda a los usuarios a obtener una idea del contenido de nuestra página. Si no puedes crear un resumen de la página elimina el metatag description y Google hará un resumen automático.

Analisis de robots.txt y sitemap.xml

En el archivo robots.txt se incluye un listado de las páginas o archivos que incluir o bloquear según el tipo de buscador. Es necesario verificar que este archivo no contengan enlaces que deseamos sean indexadas.

El archivo sitemap.xml es un documento XML que contiene todas las rutas con su respecto intervalo de tiempo a rastrear que deseamos enviar a los buscadores. Revisar que todas nuestras páginas estén incluidas con el intervalo de tiempo adecuado.

Para analizar estos dos archivos pueden utilizar las herramientas de Google Webmaster Tools.

Análisis de Redirecciones
Los buscadores interpretan el contenido de nuestra página pero no interpretan javascript, por lo que las redirecciones se deben hacer utilizando headers a nivel de servidor de lo contrario los motores de búsqueda no llegarán a la página de destino. Además de ello si se hace una redirección esta debe ser del tipo 301 para indicar que el contenido ha sido movido definitivamente a la nueva dirección. También hay que evitar el uso excesivo de las redirecciones pues estas incrementan el tiempo de carga de la página debido al tiempo que se toman los servidores para resolver las direcciones.

Se puede utilizar la herramienta HTTP Redirect Viewer para el análisis del tipo y cantidad de redirecciones.

Análisis de las Enlaces Internos

Revisa que las páginas no tengan enlaces excesivos. Google informa que se debe utilizar una máximo de 100 enlaces por cada página, por que debes incluir sólo las páginas que consideres mas importantes para no exceder es límite.

También es necesario verificar el uso correcto de los textos anchor en los enlaces internos. Esta es una oportunidad para informar a los usuarios y motores de búsqueda el contenido del enlace de destino, por lo cual debes elegir correctamente el texto del enlace.

Tener en cuenta que Google no interpreta Javascript por lo cual los enlaces hechos de esta forma no serán interpretados y los buscadores nunca llegarán a la página de destino.

Si tus visitantes pueden publicar comentarios u otro tipo de contenido que incluyan enlaces, utiliza el la propiedad rel="nofollow" para evitar que estemos enlazando a sitios de baja calidad o sitios de spam lo que afectaría negativamente nuestro posicionamiento.

Análisis del Tiempo de Carga

Si el tiempo de carga de tu página es excesivo los motores de búsqueda lo considerarán como un factor en contra y en el peor caso no lo indexarán debido a la dificultad para acceder a nuestra información. Para hacer un análisis de la velocidad de carga se puede utilizar el plugin para Firebug YSlow o también la herramienta online Page Speed Online de Google.

Para resolver este problema, revisa que las imágenes de tu web no sean muy pesadas, utiliza los headers de expiración, minifica tus archivos js y css, utiliza gzip para enviar contenido. Para mas tips para acelerar la velocidad de carga pueden leer Optimizar Carga de Paginas Web.

Análisis del Código HTML

Los motores de búsqueda interpretan nuestra página como un texto plano y los tags HTML indican la forma como debe ser interpretado, pero estos no pueden interpretar imágenes, vídeos, flash. Interpretan texto pero no tienen la capacidad de interpretar código Javascript por lo cual lo que vemos en pantalla no es necesariamente lo que puede ser interpretado por el motor de búsqueda.

Entonces hay que asegurarse que nuestro código HTML sea redactado adecuadamente y muestre al buscador el contenido correcto de nuestro web. Se puede hacer un análisis de como interpretan los buscadores una página con SEO Parser la cual esta en estado beta pero que permite hacer una análisis de como nos ven los buscadores.

Mas Información

• The Art of SEO - Chapter IV: Auditing an Existing Site to Identify SEO Problems
• Demystifying the "duplicate content penalty"
• Specify your canonical
• Acerca de rel="nofollow"
• Optimizar Carga de Paginas Web

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.

Page Speed Online ofrece un reporte agrupado en tres bloques:

• High priority son puntos con los cuales puedes acelerar de gran manera tu web. Es recomendable implementar todas estas sugerencias. Entre estos puntos están: optimizar las imágenes, generar thumbnails de las imágenes, activar keep-alive, combinar CSS en sprites.
• Medium priority estos puntos son menos decisivos para la velocidad de tu web pero puede beneficiarse con estas sugerencias. Entre estos puntos tenemos: Minificar CSS y JS, reducir la cantidad de redirecciones, configurar cache de contenido.
• Low priority son puntos que tienen poco impacto en la velocidad de carga pero pueden ayudar en algo a acelerar nuestra web. En este bloque se encuentran: Evitar peticiones erroneas, eliminar query string en peticiones estáticas, etc.

Adicionalmente Page Speed ofrece dos tipos de análisis, el primero para la versión de escritorio de tu web y el otro es para la versión móvil de tu web. Siguiendo las sugerencias que ofrece esta herramienta podremos acelerar la carga de nuestra web con pequeños cambios que harán que nuestros visitantes tengan una mejor experiencia en nuestra web.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.

Cada librería incluida ha sido minificada, luego se la envía al usuario utilizando compresión GZIP y además con los headers necesarios para ser guardados en el cache del usuario. Esto significa que han sido correctamente optimizados para cargarse rápidamente y por consiguiente acelerar la carga de nuestra web.

Como utilizar Cached Commons

Para utilizar cualquier librería alojada en Cached Commons solo debes copiar la ruta de la librería e incluirla directamente en tu proyecto.

Por ejemplo si deseamos utilizar la librería SWFObject podemos hacerlo mediante:

También podemos utilizar la versión minificada:

Este proyecto es semejante al Google Ajax Libraries API el cual también aloja a las principales librerías javascript, pero tiene la ventaja que aloja a muchas mas librerías y plugins más populares. Si aún así no encuentras la librería que necesitas puedes solicitar qu la agreguen al directorio.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.

En la actualidad la mayoría de los browsers soportan dos formatos de compresión, ello lo podemos observar en los headers que envía el browser al hacer una petición. En la propiedad Accept-Encoding con dos valores:

• gzip es un formato de compresión libre, desarrollado por el proyecto GNU, es el mas popular pues la mayoría de los browsers lo soportan, además ofrece un ahorro del 66% en promedio.
• deflate menos efectivo que gzip pues ofrece un ahorro de 60%, uno de los pocos sitios que lo utiliza es msn.com.

Que archivos comprimir con GZIP

Es recomendable comprimir solo los archivos html, php, css, js y algunos otros archivos en formato texto. En el caso de archivos jpg, png, gif, pdf estos ya están comprimidos y aplicarle gzip puede incrementar el tamaño de los archivos e incluso el consume de CPU del servidor. Otra regla que hay que tener en cuenta es que se recomienda comprimir archivos de mas de 1Kb.

Utilizar GZIP con Apache 1.3

En el caso de Apache 1.3 la compresión gzip es manejada por el módulo mod_gzip. Para ello se pueden utilizar las sentencias mod_gzip_item_include para incluir archivos a comprimir y mod_gzip_item_exclude para excluir archivos. Luego editamos el archivo .htaccess e incluimos el siguiente código.

Utilizar GZIP con Apache 2.x

Para versiones de Apache 2.x la compresión es gestionada por el módulo mod_deflate (No confundir el nombre del módulo con la compresión, pues esta genera compresión gzip). Para comprimir los archivos podemos utilizar la sentencia AddOutputFilterByType de la siguiente forma:

En nuestro caso tenemos Apache 2.0.54 por lo cual aplicamos el segundo método. Hemos creados dos ejemplos uno sin compresión (http://samples.unijimpe.net/optimization/no-gzip/), en el cual podemos observar que toda la pagina tiene un tamaño de 135.4 Kb y demora en cargar 3.46 segundos.

Ahora si agregamos la compresión gzip (http://samples.unijimpe.net/optimization/gzip/) podemos observar una reducción significante en el tamaño de los archivos. Ahora toda la página tiene un tamaño de 38.8KB con lo cual hemos ahorrado un 71.3%.

Mas Información
Se puede habilitar la compresión con PHP e incluso controlar mas al detalle la compresión de los archivos, para ello les dejo algunos enlaces para encontrar mas información.

• How gzip compression works
• Apache Module mod_deflate
• How To Optimize Your Site With GZIP Compression
• How to enable gzip compression with PHP
• 3 ways to compress CSS files using PHP

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.

Para ello se pueden utilizar los headers: Expires que contiene la fecha en la cual expira el archivo y Cache-Control, se pueden agregar estos dos headers por separado pero si agregamos el Expires este agregará también el header Cache-Control.

Expiración Utilizando htaccess

Los servidores web Apache son muy versátiles y permiten configurar de forma sencilla los headers de expiración, para ello debes incluir las directivas en el archivo .htaccess. Para el caso de la expiración se puede utilizar ExpiresDefault, para ello tenemos las siguientes directivas de tiempo: years, months, weeks, days, hours, minutes, seconds.

Lo recomendables es colocar una expiración de 30 días para los archivos estaticos (jpg, png, gif, swf, js, css), entonces podríamos agregar el siguiente código:

Además de ello la expiración también se puede expresar en segundos, entonces modificando el ejemplo anterior tendríamos (30 dias = 60*60*24*30 = 2592000):

Otra forma para agregar la expiración es el uso de la directiva ExpiresByType mediante la cual se le puede asignar tiempos diferentes dependiendo del tipo de archivo. Con esta directiva tendríamos el ejemplo anterior transformado en:

Pueden ver el ejemplo funcionando en http://samples.unijimpe.net/optimization/expiration/, si utilizanFirebug para ver el trafico de red observarán como se cargan las imágenes la primera vez, las siguientes estas se leen del cache del browser. Les dejo los archivos de ejemplo con el .htaccess para cada ejemplo con el cual pueden hacer sus pruebas.

Expiración Utilizando PHP

PHP también es otra solución para agregar los headers de expiración. Para ello haremos uso de la función header. El formato del header de expiración en:

Creando dinámicamente la expiración, utilizando las funciones de fecha tendríamos un ejemplo con la expiración de 30 dias (60*60*24*30 = 30 dias expresados en segundos)

Mas Información
Hemos presentado una breve explicación utilizando .htaccess y PHP, pueden tener mas información y conceptos mas desarrollados en:

• Add an Expires or a Cache-Control Header
• Apache Module mod_expires
• Use Server Cache Control to Improve Performance
• PHP: Howto control page caching

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.

Combinar archivos CSS y JS

Si tenemos una pagina que carga múltiples archivos JS para lograr efectos e interactividad o tal vez utilizamos múltiples archivos CSS (Esto generalmente ocurre al utilizar librerías de terceros que vienen con sus archivos JS y CSS). Podríamos combinar todos los archivos JS y CSS con lo cual podríamos disminuir la cantidad de peticiones HTTP .

Por ejemplo si tenemos una página que carga múltiples archivos Javascript tendríamos un código de la forma:

Uniendo todo el contenido CSS en un archivo y el contenido JS en un solo archivo podríamos tener el siguiente código:

Utilizar Mapa de Imágenes

Si utilizas varias imágenes como enlaces, una solución es unir las imágenes y utilizar mapa de imágenes para los enlaces, entonces en lugar de cargar una imagen por cada enlace, cargaremos una sola imagen para todos los enlaces y utilizamos un mapa de imágenes. Por ejemplo podríamos tener un menú de la forma:

Uniendo las imágenes y reemplazando los enlaces por un mapa de imágenes se tendría:

Uso de CSS Sprites

Si utilizamos botones con rollover es típico hacerlo con dos imágenes una para el estado normal y otra para el rollover. Una técnica llamada CSS Sprites consiste en utilizar una sola imagen como fondo que contenga todas las imágenes a utilizar y para hacer el efecto de cambio de imagen se cambia la posición de la imagen de fondo.

Entonces al combinar las imágenes logramos disminuir la cantidad de peticiones HTTP con el consiguiente ahorro en el tiempo de carga. Pueden leer mas acerca de como funcionan los CSS Sprites en CSS Sprites: Image Slicing’s Kiss of Death

Imágenes Inline

Otra forma de disminuir la cantidad de peticiones es incluir las imágenes pequeñas como texto en el HTML, para ello se convierte la imagen en base64 y se incluye como texto. Por ejemplo normalmente incluimos una imagen con el siguiente código:

Convirtiendo la imagen en base64 podremos incluir la imagen sin llamar a un archivo externo de la siguiente forma:

Donde R0lGODlhEAAQAJEAAAAAAN3d3...XZ texto resumido, resultado de convertir la imagen en texto codificado en base64. Ahora para reemplazar esta imagen tenemos que codificar la imagen, esto lo podemos hacer con la función base64_encode de PHP, entonces el código PHP que imprime la imagen como texto sería:

Otra opción para convertir las imágenes en base64 es utilizar un convertidor online como por ejemplo Online Image to Base64 Converter. Hay que tener en cuenta que este método es recomendable para imágenes pequeñas de preferencia en formato GIF y menores a 100KB por que la codificación en base64 incrementa el tamaño del archivo.

Mas Información
Con estos pequeños cambios podemos incrementar la velocidad de carga de nuestra web. No son muy complejos de implementar y además no interfieren con el backend de la página web. Pueden encontrar mas información en:

• Minimize HTTP Requests
• How to reduce the number of HTTP requests
• Tutorial: Creating Image Maps
• CSS Sprites: Image Slicing’s Kiss of Death
• Inline Images with Data URLs

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.

Sólo el 10-20% del tiempo de respuesta se utiliza en descargar el documento HTML.
El otro 80-90% está empleado en descargar todos los componentes en la página.

Esto significa que si logramos optimizar la carga de todos los elementos de la pagina web, tendríamos el 80% de la velocidad de carga bajo nuestro control, con el consiguiente aumento considerable en la velocidad de carga de una web.

Reglas para Optimización

Para acelerar la carga de las paginas web podemos seguir algunas reglas que hemos recopilado de Exceptional Performance de Yahoo y de Web Performance Best Practices de Google.

• Reducir las peticiones HTTP
  Reduciendo la cantidad de elementos externos a nuestra página podemos reducir el tiempo de carga, para ello podemos combinar archivos JS, CSS, utilizar sprites para los botones, etc.
• Agregar headers de Expiración
  Agregando los headers indicando cuando expiran los archivos evitaremos la carga innecesaria de archivos que ya han sido cargados.
• Utilizar compresión Gzip
  Al comprimir los archivos con gzip antes de enviarlos al browser conseguiremos disminuir la cantidad de datos a transmitir.
• Colocar los Estilos en el Header
  Se recomienda colocar los archivos de estilos en el header para que se carguen primero y renderear rápidamente el web.
• Colocar los Scripts en el Footer
  Cuando se carga un archivo JS, este bloquea la carga de otros archivos hasta que se complete la carga, si el archivo JS es pesada hará que nuestra página se vea en blanco mientras se carga el Javascript.
• Poner Javascript y CSS en archivos externos
  Al colocar en archivos externos los javascripts y hojas de estilos, en la primera vez cargaremos estos archivos y en la siguientes peticiones las leeremos del cache del browser.
• Reducir las búsquedas DNS
  Se recomienda no utilizar varios dominios en la carga de los elementos del web, por cada dominio habrá un tiempo para resolver la dirección IP.
• Minificar archivos Javascript y CSS
  Minificar es eliminar los espacios en blanco y los saltos de linea innecesarios, minificar ayuda a reducir el tamaño de los archivos.
• Evitar las Redirecciones
  El hacer una redirección toma un tiempo para resolver el URL de destino, utilizar correctamente los tipos de redirecciones ayudará a mantener rápida la carga de nuestras paginas.
• Configurar los eTags
  Los eTags se agregan en los header para indicar si el archivo se ha modificado, para ello se compara el valor del eTag guardado en el browser con el eTag del archivo en el servidor.
• Remover Scripts duplicados
  Al eliminar los scripts duplicados conseguiremos disminuir la carga de nuestros archivos.
• Optimizar las Imagenes
  Podemos optimizar las imágenes, para ello hay que escoger adecuadamente el formato del archivo de imagen para reducir el tamaño del archivo.
• Utilizar dominios libre de Cookies
  Es recomendable colocar las imagenes, js y css en dominios que no utilizen cookies, esto ayudará a disminuir el trafico de contenido.

Herramientas para la Optimización

Existen herramientas que nos pueden ayudar a hacer un diagnostico del estado de optimización de nuestra página, ello nos dará una guia de lo que podemos optimizar para mejorar la velocidad de nuestra web.

• Firebug
  Firebug es el complemento básico para todo desarrollador web, esta extensión permite ver todos los archivos que se cargan con la pagina y los tiempos de carga.
• YSlow
  Este es una extensión para Firebug creada por Yahoo que permite hacer un diagnostico de la velocidad de carga de una pagina basado en reglas definidas por YSlow.
• Page Speed
  Este plugin creado por Google permite diagnosticar que puntos de nuestra web podemos mejorar para acelerar la carga de nuestras paginas.

Mas Información
Hay mucha información y muy bien documentada de todas las formas para optimizar nuestras paginas.

• High Performance Web Sites: Essential Knowledge for Front-End Engineers
• Best Practices for Speeding Up Your Web Site
• Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests
• Web Performance Best Practices

En futuros posts desarrollaremos uno a unos los puntos mencionados para optimizar nuestras páginas, las pondremos en práctica y analizaremos algunos casos prácticos.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.