El tamaño de página o también llamada el peso de de página se refiere al al tamaño general de una página web en particular. El tamaño de esta incluye todos los archivos que son usados para crear la página: el documento HTML, las imágenes, los stylesheet (páginas de estilos), scripts y otros medios.
¿Por qué reducir el tamaño de página?
Es de suma importancia el lograr una carga de página rápida ya que es un factor considerado por los SERPs (Google, Yahoo,etc) para determinar la calidad y la posición de un sitio web en el rank.
¿Que tan grande es grande?
Según un estudio reciente de la empresa Soasta la página promedio en internet pesa un poco más de 2 MB o 2099 KB. Sin embargo es importante recordar que el peso de tus páginas también es dependiente de tu industria, ya que si tienes un sitio de ecommerce con muchas imágenes es probable que el peso sea mucho mayor.
Ahora si vamos a darles 5 tips para ayudarles a reducir el tamaño de sus páginas web.
-
Comprime y cambia el tamaño de tus imágenes
Cuando tratamos de reducir tamaños de página las imágenes son uno de los mayores contribuidores al tiempo de carga por su gran tamaño. Por eso uno de los primeros pasos para reducir el tiempo de carga es de una sitio es el modificar el tamaño de las imágenes que usamos.
Cuando carguemos fotos debemos procurar no subir fotos con una dimensión mayor a la del contenedor de la imagen. Si aún deseas mantener imagenes en alta resolución entonces lo que podemos hacer es subir la foto del tamaño del container y simplemente agregar un hyperlink a la imagen en alta para evitar agregar demasiado peso a la página.
Además de la dimensión de la imagen también podemos reducir el tamaño de esta al comprimirla. Comprimir imagenes reduce el tamaño del archivo lo cual se traduce en tiempos de carga más rápidos. Para comprimir imagenes puedes utilizar muchas herramientas cómo Compressor.io y Jpegmini.com o irfranview.
-
Utiliza CSS Sprites
Ahora que sabes que las imágenes afectan mucho el tiempo de carga y el tamaño de las imágenes, debes saber que esto también es a causa de que cada imagen genera una solicitud al servidor (server request) lo cual alenta el proceso de carga, es por eso que usamos CSS sprites.
Los CSS sprites son colecciones de imágenes que se combinan para crear un solo archivo de imágenes. Y solo usamos CSS para mostrar la parte de la imagen combinada que queremos, al hacer esto reducimos el número de request al servidor para cargar la página.
-
Remueve fuentes personalizadas innecesarias
Las fuentes personalizadas dan una apariencia mejor a tu sitio y te ayudan a diferenciar tu negocio del de otros. sin embargo el problema de las fuentes personales es que pueden llegar a agregar mucho peso al sitio.
Si un usuario visita un sitio con fuentes personalizadas las cuales no están en las fuentes preinstaladas del sistema operativo, entonces se tienen que descargar los archivos de la fuente junto con el resto del sitio web.
Es por eso que para ayudar a remover peso del sitio es recomendable no utilizar fuentes personalizadas en exceso, ya que el utilizar un poco no va afectar demasiado el tiempo de carga.
-
Minificar Recursos
El término Minificación o?Minification? en inglés se refiere al proceso de remover datos redundantes o innecesarios sin afectar cómo el navegador procesa los recursos. En otras palabras puede ser el eliminar comentarios y formato del código, remover codigo sin usar o utilizar variables más cortas y nombres de funciones por ejemplo para poder reducir la cantidad de código que usamos.
Intenta optimizar tu versión de código HTML utilizando herramientas como PageSpeed Insight de Google o YSlow.
Comprueba tu CSS con herramientas como cssmin.js y también tu código JavaScript con Closure Compiler o YUI Compressor.
-
Utiliza una CDN o red de entrega de contenidos
Utiliza una CDN (content delivery network), al utilizar una red de entrega de contenidos los elementos de tu sitio web se almacenan en múltiples locaciones alrededor del mundo para asegurar que cualquier persona pueda cargar el sitio a buena velocidad. Esto no reduce el tamaño de tu página pero si la velocidad de carga del mismo.
Una vez que hayas reducido el tamaño de tu sitio y optimizado el tiempo de carga de los varios elementos que lo componen puedes utilizar el Analizador de Sitios Web para ver el resultado.
Fuente: Hubspot