Le prestazioni web sono un aspetto cruciale dello sviluppo web, che si concentra sulla velocità di caricamento delle pagine e sulla loro reattività in base all'input degli utenti. Se ottimizzi il tuo sito web per il rendimento, offri agli utenti un'esperienza migliore. Esperienze utente migliori sono molto utili per raggiungere gli obiettivi che cercavi per il tuo sito web.
Il rendimento sul web può sembrare un argomento di nicchia, ma è in realtà sia ampio che abbastanza approfondito. Data la sua profondità come argomento, è fondamentale che un corso sul rendimento web sia accessibile, ma informativo. La versione iniziale di questo corso è incentrata sugli aspetti fondamentali delle prestazioni sul web che i principianti dovrebbero trovare informativi.
Ogni modulo di questa serie mira a includere, laddove praticamente possibile, un insieme di demo che integrano i contenuti di ciascun modulo e mostrano i concetti chiave del rendimento. Poiché questo corso è un'offerta iniziale, la pubblicazione di moduli aggiuntivi è in programma nei prossimi mesi.
Ecco di cosa tratta l'offerta iniziale del corso per Imparare il rendimento:
Perché la velocità è importante
Prima di iniziare a utilizzare il rendimento dell'apprendimento, devi comprenderne il ruolo nell'esperienza utente e come può determinare risultati migliori per gli utenti. Questo corso inizia con una breve introduzione a questi argomenti, fornendo un contesto fondamentale sul perché è importante apprendere il rendimento.
Considerazioni generali sulle prestazioni HTML
Ogni sito web inizia con la richiesta di un documento HTML, che ha un ruolo importante nella velocità di caricamento del sito. Questo modulo tratta concetti importanti come la memorizzazione nella cache HTML, il blocco dell'analizzatore sintattico, il blocco del rendering e altro ancora, in modo che tu possa assicurarti che la prima richiesta di codice HTML del tuo sito web venga disattivata dal piede giusto.
Comprensione del percorso critico
Il percorso di rendering critico è un concetto delle prestazioni web che si occupa della velocità con cui il rendering iniziale di una pagina viene visualizzato nel browser. Questo modulo analizza la teoria alla base del percorso di rendering critico, illustrando concetti quali le risorse di blocco del rendering e del parser, e spiegando come queste svolgono un ruolo chiave nella velocità con cui una pagina viene visualizzata nel browser.
Ottimizza il caricamento delle risorse
Durante il caricamento di una pagina, all'interno del codice HTML fanno riferimento molte risorse che forniscono una pagina con aspetto e layout tramite CSS, nonché la sua interattività tramite JavaScript. In questo modulo vengono trattati una serie di concetti importanti relativi a queste risorse e al modo in cui influiscono sul tempo di caricamento di una pagina.
Assisti il browser con suggerimenti sulle risorse
Gli hint delle risorse sono una raccolta di funzionalità disponibili in HTML che possono aiutare il browser a caricare le risorse in anticipo e possibilmente anche con priorità delle risorse più elevata. In questo modulo vengono trattati alcuni suggerimenti sulle risorse che possono aiutarti a caricare le pagine ancora più velocemente.
Rendimento delle immagini
Le immagini rappresentano una grande porzione dei dati trasferiti oggi su molte pagine web. Questo modulo spiega come ottimizzare le immagini e gestirle in modo efficiente, in modo da ridurre al minimo lo spreco di byte, indipendentemente dal dispositivo dell'utente.
Rendimento dei video
I video sono un tipo multimediale utilizzato spesso nelle pagine web, ma sapere come servirli in modo efficiente è un aspetto del rendimento da non sottovalutare. Questo modulo illustra alcune tecniche chiave per incorporare i video in modo da garantire la velocità del tuo sito web, nonché considerazioni sulle prestazioni simili che possono emergere in relazione al loro utilizzo.
Ottimizza i caratteri web
I caratteri web sono una risorsa di uso comune sul web e, giustamente, si aggiungono al design di un sito web in modi diversi da altre risorse. Nonostante ciò, i caratteri web hanno comunque un costo in termini di prestazioni. In questo modulo esamineremo una serie di considerazioni sulle prestazioni e tecniche relative ai caratteri web.
JavaScript con suddivisione del codice
Alcune risorse non sono fondamentali per il caricamento iniziale di una pagina web. JavaScript è una risorsa di questo tipo che può essere differita fino al momento del bisogno mediante una tecnica nota come suddivisione del codice. In questo modo, puoi migliorare le prestazioni riducendo la larghezza di banda e la contesa della CPU, un aspetto fondamentale per migliorare sia la velocità di caricamento iniziale della pagina sia la reattività all'input durante l'avvio.
Immagini con caricamento lento ed elementi <iframe>
Le immagini e gli elementi <iframe> possono consumare larghezza di banda e tempo di elaborazione della CPU significativi. Tuttavia, non tutte le immagini e gli elementi <iframe> devono essere caricati durante il caricamento iniziale della pagina e possono essere rimandati a un momento successivo in cui è più probabile che l'utente le veda. Questa tecnica è nota come caricamento lento. In questo modulo vengono spiegate le immagini con caricamento lento e gli elementi <iframe> in modo che le pagine si carichino più rapidamente e utilizzi larghezza di banda e tempo di elaborazione solo quando necessario.
Precaricamento, prerendering e precaricamento dei service worker
Sebbene gran parte delle prestazioni si adatti a ciò che puoi fare per ottimizzare ed eliminare le risorse superflue, può sembrare un po' paradossale suggerire che alcune risorse debbano essere caricate prima di essere necessarie. Tuttavia, in alcuni casi potrebbe essere opportuno caricare determinate risorse in anticipo. In questo modulo viene esaminato questo aspetto delle prestazioni, così come il precaricamento, il prerendering e il precaching dei service worker.
Una panoramica dei web worker
Gran parte di ciò che l'utente vede nel browser si verifica in un singolo thread noto come thread principale. Tuttavia, è possibile avviare nuovi thread per svolgere operazioni costose dal punto di vista del calcolo, in modo che il thread principale possa soddisfare attività importanti rivolte all'utente. L'API che esegue questa operazione è nota come API Web Worker e in questo modulo vengono trattate le nozioni di base.
Un caso d'uso concreto dei web worker
Ora che hai una conoscenza di base dei web worker e delle loro capacità e limitazioni, è il momento di esaminare un caso d'uso concreto per un web worker. In questa demo, un web worker viene utilizzato per recuperare un file JPEG, estrarre i relativi metadati e inviarli di nuovo al thread principale in modo che l'utente possa vederlo nel browser.
Vuoi iniziare a imparare il rendimento sul web? Per iniziare, leggi prima Perché la velocità è importante.