Dovrei combinare i file js / css in un singolo file?

Sia YSlow che i componenti aggiuntivi di Google Page Speed raccomandano di combinare i file di script (e di stile) in un singolo file ciascuno per ridurre il numero di richieste HTTP, e posso certamente vedere il punto quando i file di script sono coerenti in tutto il sito, ma per un'applicazione Web che presenta requisiti diversi in tutto il sito.

Per come la vedo io ci sono alcune opzioni:

1. Combina tutti i file utilizzati nel sito e ogni pagina ottiene lo stesso file combinato: il rovescio della medaglia è il contenuto inutilizzato che ingombra lo script (e un primo carico più pesante (ricaricare anche quando uno script del componente cambia))

2. Combina i file in base alla pagina: il rovescio della medaglia è che ogni pagina con requisiti diversi ottiene un file combinato diverso (primo caricamento più pesante per ogni tipo di pagina)

3. Ignora la rigida interpretazione 'solo di un file' delle raccomandazioni e fai caricare la pagina in più file come appropriato, con la cache che si spera nega il numero di richieste HTTP nel caso generale - il rovescio della medaglia è il numero di richieste HTTP su ogni pagina

Pensieri?

L'opzione 2 è la peggiore; significa che ogni pagina con una diversa combinazione di script JS necessari genererà una richiesta HTTP. Renderà le prestazioni molto peggiori.

L'opzione 1 è la migliore. Alla fine la maggior parte degli utenti visiterà la maggior parte dei "tipi" di pagine del tuo sito Web, quindi è comunque vantaggioso combinare tutto in un singolo file, con l'eccezione dei grandi file JS necessari in poche pagine raramente visitate.

Il primo hit di pagina potrebbe essere più lento rispetto a file diversi, ma vale comunque la pena farlo poiché ogni altro hit di pagina utilizzerà il JS globale memorizzato nella cache.

Un consiglio però; uniscili automaticamente se non lo sei già!

Generalmente unisco "Javascript globale" - jQuery e plugin comuni - in un singolo file, e poi servo plugin extra come file separati quando richiesto.

Ad esempio, in un sito in cui eseguo molte pagine sono presenti tabelle di dati, quindi ne ho una global.jscon jQuery, DataTables e SuperFish (per il mio menu). Ci sono due pagine sul sito che usano un "lightbox", quindi ho uno script separato per quelle due pagine.

Per CSS, servo solo un singolo file per l'intero sito e provo a rendere il CSS il più generale possibile - la maggior parte delle pagine ha solo alcuni elementi CSS unici.

Sebbene sia decisamente consigliabile utilizzare il minor numero di file possibile, è possibile riscontrare una suddivisione tra funzionalità richiesta al caricamento della pagina e funzionalità che possono essere rinviate mediante caricamento asincrono.

Se un numero sufficiente di JS può essere inserito nella seconda categoria, puoi migliorare la velocità di caricamento iniziale percepita della pagina, creando un'esperienza migliore per i tuoi utenti.

Non consiglierei di combinarli tutti. Se stai utilizzando una libreria comune, puoi sfruttare un CDN per consegnare i tuoi javascript. È quindi possibile sfruttare la memorizzazione nella cache del browser (presupponendo che altri siti stiano utilizzando la stessa rete CDN) e la distribuzione distribuita. Microsoft e Google hanno ciascuna delle soluzioni (non l'ho nemmeno usata onestamente, ma sicuramente inizierò) e potrebbero essercene altre. In una nota correlata, SO ha questa domanda:

Quando il browser cancella automaticamente la cache JavaScript?

e la prima risposta è oro massiccio.