Migliorare le prestazioni del sito Web tramite download CSS paralleli?

Stavo ottimizzando il tempo di caricamento della pagina di un sito Web. Uno dei modi era combinando più richieste HTTP per CSS in una richiesta HTTP combinata. Ma uno dei revisori ha posto una domanda interessante: la paralizzazione del download di più file CSS non ridurrebbe i tempi di caricamento della pagina?

Non ho mai preso in considerazione questa opzione, poiché l'unica cosa che leggo su Internet è che ridurre il numero di (bloccando) richieste HTTP è la chiave per una pagina web più veloce (anche se Google Pagespeed Insights non sembra dichiararlo chiaramente 1 ).

Vedo alcuni motivi per cui la parallelizzazione non migliorerebbe le prestazioni, o conta solo pochissimo (compensata dal vantaggio di utilizzare un minor numero di richieste HTTP):

La creazione di una nuova connessione è costosa. Mentre l'impostazione di più connessioni può essere eseguita in parallelo, i browser utilizzeranno al massimo circa 4-6 connessioni (a seconda del browser), quindi il download di CSS in parallelo bloccherebbe il download di altre risorse come JavaScript e immagini.
L'impostazione di una connessione HTTPS richiede alcuni dati extra. Ho letto che possono essere facilmente pochi KB di dati. Questi sono alcuni dati extra che devono essere inviati via cavo, anziché i CSS che vogliamo effettivamente inviare.
A causa dell'algoritmo TCP Slow Start, più dati sono stati inviati tramite una connessione, più veloce sarà la connessione. Quindi connessioni più a lungo inviate in realtà invierebbero i dati molto più velocemente rispetto alle nuove connessioni. Vedi ad esempio il protocollo SPDY, che utilizza una singola connessione per migliorare i tempi di caricamento della pagina.
TCP è un'astrazione: c'è ancora (normalmente) solo una connessione sottostante. Pertanto, mentre vengono utilizzate più richieste, i dati inviati tramite il filo potrebbero non trarre necessariamente vantaggio da più connessioni per migliorare la velocità.
Le connessioni Internet sono intrinsecamente inaffidabili, soprattutto su dispositivi mobili. Una richiesta può essere completata in modo significativamente più veloce dell'altra. L'uso di più richieste per CSS significa che il rendering della pagina Web è bloccato fino al termine dell'ultima richiesta, che può essere significativamente più tardi della connessione media.

Quindi, c'è qualche vantaggio nel parallelizzare le richieste HTTP per i file CSS?

Nota / aggiornamento: tutti i file CSS bloccano il rendering. I file CSS che non sono già stati spostati al di fuori del percorso critico.

css performance

— ayke
fonte

Ho visto qualcosa sul codice di etsy come sito di artigianato in cui mi hanno consigliato di utilizzare un solo dominio senza cookie per oggetti statici (css, imgs, js). Si scopre che i browser moderni fanno un ottimo lavoro con download paralleli da un singolo dominio. Per quanto riguarda più file dello stesso dominio (10 file css contro 1 grande), penso che tu sia meglio di combinare e minimizzare un file di grandi dimensioni e farne solo una richiesta. Specialmente con CSS in cui il tuo sito probabilmente avrà bisogno di tutti i CSS per apparire corretti.

— Frank,

In un certo senso, i browser scaricano già in parallelo in base al numero di connessioni disponibili per l'uso. Si basa sull'HTML che il browser sta leggendo.

— Dom

I file CSS collegati da documenti HTML vengono aggiunti alla coda di download parallela durante l'analisi dell'HTML; la cosa fondamentale è che i collegamenti JavaScript non asincroni bloccano il parser HTML, impedendo che i tag successivi vengano aggiunti alla coda di download fino a quando JavaScript non viene scaricato, analizzato ed eseguito. ^[1]

Ecco un esempio che obbliga il browser a scaricare in sequenza tre dei quattro file (almeno tre round trip):

<head>
  <script src="js/fizz.js"></script>
  <link rel="stylesheet" href="css/foo.css"/>
  <script src="js/buzz.js"></script>
  <link rel="stylesheet" href="css/bar.css"/>
</head>

Ecco l'esempio rielaborato in modo che tutti e 4 i file vengano scaricati in parallelo (almeno un round-trip):

<head>
  <link rel="stylesheet" href="css/foo.css"/>
  <link rel="stylesheet" href="css/bar.css"/>
  <script async src="js/fizz.js"></script>
  <script src="js/buzz.js"></script>
</head>

Un'altra nota: i file CSS sono (per impostazione predefinita) il blocco del rendering, non il blocco del parser; la pagina continuerà ad essere analizzata e il DOM costruito, ma il rendering non inizierà fino a quando non verrà creato il CSSOM.

Il motivo principale per suddividere il tuo CSS è quello di ottenere le regole minime necessarie per rendere il contenuto above the fold al client e analizzato il prima possibile. Il resto delle regole, per cose che non sono immediatamente visibili, può essere contrassegnato come non necessariamente-rendering-blocco con mediaquery nel tag link o aggiunto alla pagina da JavaScript caricato in modo asincrono.

Quindi, non vi è alcun chiaro vantaggio nel parallelizzare i download CSS solo per se stesso. Ma come sempre, misura e prova!

Per ulteriori approfondimenti, raccomando questi articoli su "Fondamenti Web: ottimizzazione delle prestazioni" di Google: https://developers.google.com/web/fundamentals/performance/

[1]: questo ignora la funzionalità di analisi speculativa di alcuni browser:

https://docs.google.com/document/d/1JQZXrONw1RrjrdD_Z9jq1ZKsHguh8UVGHY_MZgE63II/preview?hl=en-GB&forcehl=1

https://developer.mozilla.org/en-US/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing

— Robert K. Bell
fonte

Un'altra buona lettura, su come mantenere i propri script di scaricare contemporaneamente, è qui: stackoverflow.com/questions/436411/...

— joshreesjones

Vale la pena notare che tutti i file .js devono essere collegati alla fine del codice appena prima del tag body di chiusura, in questo modo non bloccano nulla.

— Chaoley,

puoi elaborare "Quindi, non vi è alcun chiaro vantaggio nel parallelizzare i tuoi download CSS solo per se stesso"? In qualche modo non sono riuscito a capirlo dalla risposta di cui sopra

— gaurav5430,

@ gaurav5430 Non sembrano esserci buone ragioni per dividere i file CSS, oltre all'ottimizzazione per il tempo di rendering above the fold (e forse l'ottimizzazione della cache?)

— Robert K. Bell