Informe de posicionamiento web. Caso práctico centrado en el Performance
Vamos a continuar con el informe de posicionamiento web para descargasandroid.net, en esta ocasión nos vamos a centrar en el Web Performance Optimization.
El Web Performance afecta de dos maneras al posicionamiento web de nuestra página:
- Indexación: Los buscadores tienen una gran cantidad de contenido que indexar y su tiempo es muy limitado, no nos pueden dedicar todo el tiempo a indexar todo nuestro contenido. Google asigna un tiempo a cada sitio para su indexación, cuando se agota este tiempo continua con otro sitio, sin importar si ha podido indexar todo nuestro contenido. Contra más rápido pueda indexar nuestro contenido más páginas podrá indexar.
- Ordenación: Los buscadores desean ofrecer los mejores contenidos a sus usuarios y una página que tarda en descargarse no es del gusto de nadie. Por esta razón uno de los muchos criterios de ordenación es la velocidad de carga. No se trata del factor más importante, pero sin duda es uno de los factores a tener en cuenta.
Finalmente a los usuarios no les gustan las páginas lentas si tu página se descarga de forma muy lenta puede aumentar el indice de rebote de tu sitio web.
Para la realización de este informe de el posicionamiento web centrado en el performance vamos a utilizar la nueva herramienta de Google Page Speed Online. En esta nueva vesión no es necesario instalar ningún tipo de software, unicamente es preciso introducir la URL de la página a analizar. Es preciso recordar, que está herramienta no análiza el sitio web, únicamente analliza la página indicada, si deseamos optimizar más páginas deberemos repetir el mismo proceso con cada una de las páginas que deseemos optimizar.
Page Speed ofrece una serie de sugerencias para optimizar el rendimiento del sitio y de este modo mejorar el posicionamiento web. Las sugerencias que ofrece la herramienta se encuentran clasificadas en 4 categorias:
- High priority: Son las sugerencias más urgentes de abordar y de las que se esperan obtener los mayores beneficios en nuestro posicionameinto web.
- Medium priority: Sugerencias de prioridad media.
- Low priority: Sugerencias de baja prioridad sin mucha relevancia en nuestro posicionamiento.
- Rules without suggestions: Reglas de optimización para las que no existen sugerencias, señal de que hemos hecho bien el trabajo de posicionamiento en esta área.
No se trata de obsesionarse por solucionar todas las alertas, pero debemos intentar atender las sugerencias por orden a su importancia y su facilidad de corección. En este informe únicamente vamos a comentar las reglas de prioridad alta y media identificadas para el sitio descargasandroid.net:
Serve scaled images
Se trata de un error muy importante y que afecta mucho al tiempo de descarga de la página, en este sitio web se están ofreciendo imágenes de gran tamaño para mostrarlas en un tamaño inferior. Esto se está realizando modificando el tamaño de la imagen en el propio HTML. Esta es una muy mala solución. Lo que debemos hacer es reducir el tamaño de la imagen en el servidor, reduciendo de este modo el tiempo de descarga del sitio.
Leverage browser caching - Aprobeche el almacenamiento en caché del navegador
Se debe establecer una caducidad o edad máxima para los recursos estáticos incluidos en la página, de este modo evitaremos la constante descarga de imágenes ya descargadas en visitas anteriores y también se reducirá aun más el tamaño de las páginas descargadas en visitas sucesivas.
Esta caché es gestionada por el navegador, el cual es el encargado de fijar para cada recurso si es preciso volver a descargar el contenido
Optimize images
Una forma muy sencilla de reducir el tamaño de las imágenes es guardar las imágenes en el formato más correcto para cada tipo de imágen y adicionalmente también es muy importante en imágenes de mayor tamaño utilizar una herramienta de compresión de imágenes.
Combine images into CSS sprites
Una muy buena alternativa para la inclusión de pequeñas imágenes en una página web es la utilización de CSS sprites. De este modo se incluye en un único archivo todas las imáges de la página y posteriormente por medio de la utilización de CSS se accede a cada una de las imágenes. Al incluir todas las imágenes en un único archivo se reduce el número de peticiones al servidor y de este modo se reduce el tiempo de carga.
Page speed en este caso nos recomienda incluir en un único archivo 9 imágenes. No se trata de ninguna locura es algo que ya utiliza google en su propia página home.
Minimize redirects
Se debe evitar realizar llamadas HTTP a otras URL dentro del propio código HTML. En este caso es el más complejo de solucionar ya que estás llamadas se realizan principalmente para incrustar publicidad o hacer uso de servicios internos. En este caso mi recomendación es no atender esta sugerencia.
- https://adserving.cpxinteractive.com/pixel?id=79470&t=2
- https://adserving.cpxinteractive.com/pixel?id=80185&t=2
Minify JavaScript y HTML
El tamaño de nuestro código JavaScript y HTML afecta lógicamente al tiempo de descarga de nuestro sitio web. Existen en la red varias herramientas interesantes que nos pueden ayudar a reducir facilmente el tamaño de nuestro código javascript y html. Estas herramientas lo que principalmente hacen es eliminar espacios innecesarios y saltos de líneas. Algunas de ellas son capaces de eliminar código que no hace nada e incluso sustituir algunas instrucciones html por otras más cortas (esta última optimización se debe realizar con mucho cuidado ya que podemos alterar el significado semántico de nuestro contenido).
Esta solución puede ser interesante especialmente en lo que respecta al código javascript propio, no podremos hacer nada con el código javascript externo. Respecto al código html dependerá de nuestro gestor de contenidos.