Ponga javascript y css inline en un solo archivo html minified para mejorar el rendimiento?

Un sitio web típico consiste en un archivo index.html y un montón de archivos javascript y css. Para mejorar el rendimiento del sitio web, uno puede:

  • Minimice los archivos javascript y css, para reducir el tamaño de los archivos.
  • Concatenar los archivos javascript en un archivo y similar para los archivos css, para reducir el número de solicitudes al servidor. Para bibliotecas de uso común (y compartidas) como jquery, tiene sentido dejarlas como externas, lo que permite que el navegador guarde en caché la biblioteca y la reutilice en diferentes aplicaciones web.

Me pregunto si tiene sentido poner el archivo concatenado javascript y css en línea en un solo archivo html, lo que reducirá el número de solicitudes aún más. ¿Mejorará esto el rendimiento de su sitio? ¿O funcionará al revés, por lo que es imposible que el navegador guarde en caché algo?

Concatenar sus archivos CSS y JS en un archivo reducirá el número de solicitudes y hará que se cargue más rápido. Pero como se comentó, no tendrá mucho sentido a menos que tenga un sitio de una página y el tiempo de carga de esa página es muy crítico. Así que es mejor que separe CSS de Javascript en mi opinión.

Aquí hay un libro donde puedes aprender más sobre el tema:

Sitios web de alto rendimiento

Esta no es una buena idea por las siguientes razones:

  1. No disfrutarás del beneficio de la memoria caché

  2. Cargará recursos innecesarios en todas sus páginas

  3. Tendrá dificultades para desarrollar su sitio web debido a archivos grandes con twigs de código no relacionadas.

  4. Si trabajas en un equipo, tendrás que trabajar siempre con tus compañeros de equipo en los mismos archivos, lo que significa que tendrás muchos conflictos de fusión.

estas herramientas tal vez te ayuden Convierte su página web en un único archivo HTML con todo incluido: perfecto para los manifiestos de aplicación en dispositivos móviles que desea reducir esas solicitudes http.

https://github.com/remy/inliner

Reduciría el número de solicitudes, pero también significaría que no se almacenarían en caché para utilizarlas en otras páginas. Piense en definir un archivo externo como también una forma de decirle al navegador “y esta sección del sitio es reutilizable”. Te estarías deshaciendo de esa habilidad y así se cargarían el CSS y el JS. Al igual que jackwanders, dijo que es genial si solo tienes una página.

Puede tener un único CSS para todas sus páginas y, dado que se almacenará en caché, las páginas siguientes lo derivarán de la caché sin enviar solicitudes adicionales.

Sin embargo, poner todos los archivos de Javascript en uno es contextual. Probablemente esté utilizando bibliotecas como jQuery y complementos relevantes. Esto ‘podría’ arrojar problemas conflictivos entre los complementos. Por lo tanto, antes de intentarlo todo de una vez, intente fusionar algunos archivos a la vez y comprobar si el error aparece o no.