Reducir el tiempo de carga de una web I: Imágenes y CSS

Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Pin on Pinterest0

Google ya anunció hace unos meses que uno de los factores que crecían en relevancia para el posicionamiento en buscadores era el tiempo de carga del sitio web. El tiempo de carga de una página, es el tiempo total desde el momento en que el usuario clica el enlace a la página hasta el momento en que la página se acaba de cargar y se muestra en el navegador.

Matizando aquí que Google tiene en cuenta el tiempo promedio de carga, que es el tiempo medido por Google en función del tráfico (o sea, el tiempo medio de carga de las páginas con mayor tráfico).

En esta serie de artículos intentaré sintentizar diversas sugerencias que de aplicarse ayudarán a reducir el tiempo promedio de carga de las páginas de una web.

A nivel interno es importante destacar que como base de desarrollo de una web optimizada en tiempos de carga es necesario que contenga un código HTML limpio y ordenado. Además debemos tener en cuenta que todas aquellas llamadas a terceros como widgets de redes sociales, videos de YouTube, Analytics, etc… harán que el tiempo de carga de las páginas dependan de los tiempos de acceso a servidores de terceros.

IMÁGENES Y CSS:

  • Utilizando imágenes optimizadas cuyo peso sea el menor posible sin renunciar a la calidad. Además, no es recomendable reescalar las imágenes mediante HTML por lo que deberían tener los tamaños en pixeles que vayan a ser utilizados por la página.
  • Reducir la cantidad de imágenes a cargar mediante CSS Sprites que consiste en unificar el mayor número de imágenes de la web en una única. De esta manera se reducen los accesos al servidor a la hora de cargarlas.
  • Se debe implementar la llamada al CSS al inicio del código.
  • Se recomienda la partición y uso de los archivos CSS de una manera óptima, dividiendo los CSS en dos archivos: Uno que contenga el código mínimo necesario para renderizar la página al inicio y otro CSS que contenga el código que no es necesario hasta que la página se haya cargado completamente.
  • Los estilos CSS que se deben utilizar deben ser los justos, evitando cargas innecesarias y duplicadas. En este punto se pueden utilizar compresores de CSS que reducen los archivos de estilo entre un 15 y un 30%.
  • Se debe evitar el uso de las CSS expressions ya que el uso de este método afecta en los tiempos de carga y  respuesta a medida que se navega por una página ya que llama a otras expresiones JavaScript.
  • La colocación en código de las llamadas a CSS externos debe tenerse en cuenta si también se tienen que cargar Scripts, para que lo hagan de manera óptima reduciendo los tiempos de carga.
    Primero se deben cargar las hojas de estilo y posteriormente los Scripts.

tiempo de carga

  • Se debe evitar el uso de CSS @import ya que cuando se carga desde una hoja de estilos externa mediante esta función, el navegador no es capaz de descargar estas hojas de estilo en paralelo y aumentan inevitablemente los tiempos de carga.
Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Pin on Pinterest0
<< Post Anterior
Post Siguiente >>

Leave A Response

* Denotes Required Field