¿Cómo puedo saber si mis archivos js/CSS son demasiado grandes?

Question

¿Cuál es el tamaño de archivo óptimo de los archivos JavaScript y CSS de un sitio web?

Answer 1

Cero bytes. Suena gracioso, pero no existe el tamaño de archivo "óptimo". Cuanto más grande sea, más tiempo demorará tu página en renderizar. ¿Qué tan rápido es la conexión a su sitio web para sus visitantes? Si se trata de un sitio orientado a videos, por ejemplo, es relativamente rápido, ya que las personas con módems de 64 kbps no intentarán transmitir algo tan grande. Si se trata de un sitio de texto simple que muestra información a usuarios de satélites en Zimbabwe, podría ser bastante lento.

Imaginemos que la velocidad promedio es de 1.5 Mbps. De manera realista, divida eso a 750 Kbps. Eso es alrededor de 94 KBps. Entonces, si su archivo CSS es de 50 KB y su archivo javascript es de 50 KB, su visitante tardará un poco más de un segundo en descargarlo. ¿Su sitio es altamente interactivo y se espera que los usuarios hagan clic rápidamente de una cosa a otra? Si es así, ese segundo retraso podría ser extremadamente irritante. Si no, entonces podría ser perfectamente razonable.

Si encuentra que el tamaño de su archivo es demasiado grande, puede considerar buscar algunas utilidades "minificantes"; estas son utilidades que tomarán su código, reemplazarán nombres de variables ("my_descriptive_variable") con nombres más cortos ("a"), eliminarán espacios en blanco y comentarios, etc. Algunas veces estas utilidades pueden reducir su código al 10% de lo que era antes.

En última instancia, sin embargo, "óptimo" es completamente subjetivo. Intente diseñar archivos de script/CSS mínimos, agréguelos un montón de comentarios y cargue su página en conexiones de bajo nivel hasta que lo considere demasiado lento. Eso te dará una idea bastante buena de cuál debería ser tu límite superior.

Answer 2

El tamaño total de una página mientras el usuario la está viendo debe ser de aproximadamente ~ 100kb. Esto hace que sea más fácil para la vista del usuario y los motores de búsqueda rastrear su sitio web.

El concepto de "tamaño de página" se define como la suma de los tamaños de todos los elementos que componen una página, incluido el archivo HTML definidor y todos los objetos incrustados (por ejemplo, archivos de imagen con GIF y JPG imágenes). Es posible salirse con la suya con diseños de página que tienen tamaños de página más grandes siempre que el archivo HTML sea pequeño y esté codificado para reducir el tiempo de renderizado del navegador.

Answer 3

Cuanto más pequeños sean sus archivos externos, mejor.

Pero quizás más importante que tener un tamaño más pequeño está teniendo fewer separate resources, lo que significa un menor número de peticiones HTTP. Por ejemplo, un solo archivo de 1MB a menudo carga más rápido que diez archivos de 100KB. Es mejor que combine múltiples archivos CSS (o JavaScript, imagen, etc.) en uno solo.

Answer 4

Lo único que realmente quiere aprovechar, es el almacenamiento en caché. Así que coloque todas sus utilidades y estilos compartidos en un solo archivo, minimícelo e inclúyalo en cada página. La mayoría de los navegadores modernos lo descargarán solo una vez y lo descargarán rápidamente (se minimizarán). Luego, minimice las páginas específicas también y listo.

Answer 5

Normalmente el archivo JavaScript debe ser menor de 25 kb y el archivo CSS debe ser inferior a 10 kb, cuanto menor sea el mejor, estos números pueden variar dependiendo de los recursos y artículos. A veces esto no es posible, pero puede minimizar el espacio en blanco (espacios, devoluciones y eliminación de comentarios). Idealmente, cada línea debe ser una definición de estilo en su CSS y su Javascript debe ser embellecido (código redundante eliminado y código que se usa una y otra vez para ser puesto en funciones) y minimizado para estar en una línea si es posible.

Normalmente, su CSS debe cargarse en el encabezado de la página y el JS justo antes de la etiqueta de cierre del cuerpo.Esto es para que la página aún pueda cargarse mientras espera que se cargue CSS o JS. La mayoría de los navegadores y servidores solo cargarán aproximadamente 4 recursos de un servidor a la vez. Si es posible, puede separar sus recursos en múltiples servidores/subdominios para crear una carga asíncrona.

La carga asíncrona se aplica a todos los aspectos de una página web; imágenes, CSS, JS y html. Todo mi conocimiento ha sido recopilado y aprendido al trabajar en sitios durante más de 10 años.