¿Cuál es el tamaño de página ideal para páginas de carga rápida? | Programar Plus

En primer lugar, ¿qué es “Tamaño de página”?

El tamaño de la página se refiere a la suma de todos los elementos necesarios para representar su página. Eso incluye el archivo HTML, los archivos CSS, las imágenes, los scripts, el multimedia… todo. Generalmente hablando, debe orientar los anuncios a 200 k para el tamaño total de la página. También es importante el número total de objetos (o solicitudes http totales). Una página que tiene solo 100k pero tiene 92 solicitudes http probablemente esté peor que una página de 200k con solo 21 solicitudes http.

¿Cómo puedo saber cuál es mi tamaño de página?

websiteoptimization.gif

Siempre puedes mirar el tamaño de archivo de cada elemento que usa tu página y sumarlos. Afortunadamente, existe una forma mucho más sencilla. Simplemente use el Informe de velocidad de la página web, que es un servicio muy agradable y gratuito. Este servicio no solo le indica el tamaño total de su página, sino que también le brinda los tiempos de descarga para varias velocidades de conexión a Internet y consejos / advertencias sobre áreas particulares de su página en las que podría mejorar. Mi característica favorita es que enumera todos los objetos en su página en orden de mayor a mayor, para que pueda ver rápidamente cuáles son los principales culpables de tamaño en su página y abordarlos primero.

¿Cómo se apilan las diferentes páginas?

Programar Plusllega a 217k relativamente saludable hoy. Me parece bien que sea un poco pesado, ya que gran parte de mi audiencia es bastante conocedora de la tecnología y es probable que me visite con una conexión rápida.

css-trucos-tamaño.jpg

Un gran ejemplo de optimización extrema es BBC.com. Su página se ve tan grande, llamativa y llena de contenido como cualquier otro sitio web importante, pero su peso es de 141k.

bbc-size.jpg

Digg.com no es un sitio que espere que sea muy pesado, ya que en realidad no usan muchas imágenes. Bueno, este es un gran ejemplo de cómo no solo hay que tener cuidado con las imágenes. Los 14 elementos de página más grandes de digg.com no son imágenes. Digg usa bibliotecas javascript JQuery y Prototype y esas son, con mucho, las mayores culpables con 85k y 71k respectivamente. ¿Importa para Digg? ¿Su página se carga lentamente? Bueno no. Están en servidores tan ultrarrápidos que, aunque el cuello de botella está del lado de los usuarios, compensa la diferencia.

digg-size.jpg

Recuerda que el Tamaño de la página cambia, especialmente en tu blog.

En los blogs, el tamaño de su página fluctuará bastante, ya que algunas publicaciones serán más grandes y contendrán más imágenes que otras. Cada vez que incluyas una imagen en una publicación, considera qué tan bien optimizada está. Incluso un archivo JPG relativamente pequeño (dimensionalmente) guardado con su máxima calidad puede tener ~ 100k. ¡Eso es la mitad del tamaño ideal solo en esa imagen! Para obtener más información sobre la optimización de imágenes, tengo un artículo sobre cuándo usar diferentes formatos de imagen. Descargo de responsabilidad: desde que escribí ese artículo, comencé a adoptar mucho más el formato de imagen PNG-8. Es bastante bueno y puede hacer la mayor parte de lo que puede hacer GIF, solo que mejor y en tamaños de archivo más bajos.

No siempre es culpa de los tamaños de página.

A veces, el tamaño de la página no es lo único que puede hacer que una página se cargue lentamente. Si la página es dinámica, podría ser la base de datos lenta, no optimizada o simplemente hay muchas llamadas a la base de datos. El código del lenguaje dinámico también puede ser el culpable. Si la página tiene que hacer un poco de cálculo y análisis para averiguar qué mostrar, puede experimentar retrasos. En estos casos, tengo un ejemplo de cómo crear un cargador de páginas CSS (ejemplo aquí).