Scopri di più su vari eventi relativi a Baseline durante febbraio 2025.

ruby-align ora fa parte di Baseline

Pubblicata il 20 febbraio 2025 Scaricare in modo affidabile modelli di IA di grandi dimensioni è un'attività impegnativa. Se gli utenti perdono la connessione a internet o chiudono il tuo sito web o la tua applicazione web, perdono i file del modello

Scopri di più sul suggerimento relativo alla risorsa rel=prefetch e su come utilizzarlo.

Cumulative Layout Shift (CLS) è una metrica che quantifica la frequenza con cui gli utenti riscontrano cambiamenti improvvisi nei contenuti della pagina. In questa guida illustreremo l'ottimizzazione delle cause comuni della metrica CLS, come immagini e iframe senza dimensioni o contenuti dinamici.

Scopri come identificare e correggere le variazioni del layout.

I CSS scrollbar-color e scrollbar-gutter sono stati implementati in tutti i principali motori dei browser, quindi sono disponibili come base di riferimento.

In questa prima edizione, il digest mensile di Baseline illustra gli eventi di Baseline sia in Google che nella community di sviluppatori web a gennaio 2025.

Le ottimizzazioni della garbage collection e delle chiamate al termine di Wasm di WebAssembly sono ora disponibili in tutti i principali motori dei browser, il che le rende di nuova disponibilità come base di riferimento.

Questo post presenta la metrica Largest Contentful Paint (LCP) e spiega come misurarla

Promise.try è ora disponibile in tutti i principali motori dei browser, quindi è stato inserito nella categoria Base: appena disponibile.

Descrizione breve

Data di pubblicazione: 13 gennaio 2024 Esistono molti progetti straordinari che puoi realizzare con l'IA, con i classici modelli di machine learning e i più recenti modelli linguistici di grandi dimensioni (LLM). Con gli LLM, i computer possono

Ti è stato detto di "non bloccare il thread principale" e di "interrompere le tue attività lunghe", ma cosa significa fare quelle cose?

Il mascheramento CSS offre la possibilità di utilizzare un'immagine come livello maschera. Ciò significa che puoi utilizzare un'immagine, un SVG o un gradiente come maschera per creare effetti interessanti senza un editor di immagini.

set di dati delle funzionalità web, dashboard dello stato della piattaforma web, widget dello stato del valore di riferimento e altro ancora. Dai un'occhiata al 2024 di Baseline.

Questo post spiega il caricamento lento e le opzioni a tua disposizione per implementarlo nei video.

Il precaricamento dei moduli offre un modo per caricare preventivamente i moduli JavaScript in modo dichiarativo.

Per ottimizzare l'esperienza utente, è essenziale capire in che modo gli utenti interagiscono con i tuoi moduli. La compilazione automatica del browser svolge un ruolo significativo in questo processo. Scopri come raccogliere e analizzare i dati sul modo in cui gli utenti utilizzano la compilazione automatica nei tuoi moduli.

Il rilevamento della tossicità protegge gli utenti e crea un ambiente online più sicuro. Nella seconda parte, impariamo a creare uno strumento di AI lato client per rilevare e mitigare la tossicità alla fonte.

Questo post descrive la metrica Tempo di blocco totale (TBT) e spiega come misurarla

Scopri come misurare i Web Vitals del tuo sito sia in ambienti reali che di laboratorio.

Una raccolta di best practice che Chrome ha identificato come le maggiori opportunità per ottimizzare il rendimento del web e migliorare i Core Web Vitals

Metriche essenziali per un sito sano

Una guida passo passo su come suddividere l'LCP e identificare le aree chiave da migliorare.

La proprietà CSS content-visibility è ora disponibile come riferimento.

La ricerca e la metodologia alla base delle soglie dei Segnali web essenziali

Hai esaminato i dati sul campo e hai scoperto che le tue interazioni sono lente. Il passaggio successivo consiste nell'ottenere ulteriori informazioni su come testare manualmente queste interazioni e identificare le cause alla base.

Data la crescente importanza di Core Web Vitals, i proprietari di siti e gli sviluppatori si concentrano sempre di più sulle prestazioni e sulle esperienze utente chiave. Google offre molti strumenti per valutare, ottimizzare e monitorare le pagine, ma gli utenti spesso sono confusi dalle diverse fonti di dati e da come utilizzarle in modo efficace. Questa guida propone un flusso di lavoro che combina diversi strumenti e chiarisce dove e come hanno senso durante il processo di sviluppo.

Questo articolo spiega la storia di Baseline, il coinvolgimento di Google e la proprietà del gruppo della community WebDX.

Scopri come ottimizzare le tue pagine per i caricamenti istantanei quando utilizzi i pulsanti Avanti e Indietro del browser.

La nidificazione CSS sta migliorando notevolmente.

Scopri come attribuire i dati sulle prestazioni con informazioni di debug che ti aiutano a identificare e risolvere i problemi degli utenti reali con l'analisi

Questo post introduce la metrica First Input Delay (FID) e spiega come misurarla

Che impatto ha @property sul rendimento del CSS?

Scopri come utilizzare gli strumenti Google per correlare Core Web Vitals alle entrate pubblicitarie.

Sono disponibili molte opzioni diverse per l'archiviazione dei dati nel browser. Qual è il più adatto alle tue esigenze?

Questo post spiega l'attributo di caricamento e come utilizzarlo per controllare il caricamento degli iframe.

Scopri i modi consigliati e non consigliati per creare più PWA riutilizzando lo stesso dominio con i relativi pro e contro.

Un tutorial interattivo passo passo che mostra come creare un server per gestire le iscrizioni alle notifiche push e inviare richieste di protocollo web push a un servizio push.

Cosa serve per modificare icone, scorciatoie, colori e altri metadati nel file manifest dell'app web per la tua PWA.

Criteri di installabilità delle app web progressive.

Quali sono le caratteristiche di un'app web progressiva di qualità o di qualità?

Il file manifest dell'app web è un semplice file JSON che indica al browser come dovrebbe comportarsi l'app web.

Scopri come eseguire il deployment di un CSP basato su nonce o hash di script come difesa in profondità contro il cross-site scripting.

Questo articolo aiuta gli sviluppatori web a scegliere l'API hardware giusta in base a un determinato dispositivo.

Scopri come utilizzare le richieste di origine correlata per consentire il riutilizzo delle passkey nei tuoi siti.

Questo post illustra l'attributo di caricamento e come può essere utilizzato per controllare il caricamento delle immagini.

La selezione del formato dell'immagine giusto è il primo passo per pubblicare immagini ottimizzate sul tuo sito web. Questo post ti aiuta a fare la scelta giusta.

Le metriche personalizzate ti consentono di misurare e ottimizzare gli aspetti dell'esperienza del tuo sito unici per il tuo sito.

Scopri come inviare i dati Web Vitals alle proprietà Google Analytics 4 ed esportarli a fini di analisi in BigQuery e Looker Studio.

Questa guida illustra le best practice da seguire per i siti web quando chiedono agli utenti l'autorizzazione ad accedere a funzionalità sensibili (come la fotocamera, il microfono e la posizione) per ridurre al minimo i prompt non necessari e il blocco dell'accesso.

Scopri in che modo le notifiche relative ai cookie influiscono sul rendimento, sulla misurazione del rendimento e sull'esperienza utente.

Gli sviluppatori web possono personalizzare le notifiche dei contenuti multimediali e rispondere a eventi relativi ai contenuti multimediali, come la ricerca o il cambio di traccia, con l'API Media Session.

Utilizza l'attributo tabindex per impostare esplicitamente la posizione della scheda di un elemento.

Prima di poter riprodurre le interazioni lente in laboratorio per ottimizzare l'interazione con Next Paint del tuo sito web, dovrai fare affidamento sui dati sul campo per trovarle. Scopri come farlo in questa guida.

Questo post presenta la metrica Time to First Byte (TTFB) e spiega come misurarla.

Scopri come regolare i prompt per ottenere i tuoi risultati preferiti su modelli LLM, dimensioni e modelli diversi.

Questo post presenta la metrica Interaction to Next Paint (INP), spiega come funziona e come misurarla, oltre a offrire suggerimenti su come migliorarla.

descrizione: definisci i colori che reagiscono allo schema di colori utilizzato con la funzione light-dark().

In questa guida, rivolta agli sviluppatori web che vogliono trarre vantaggio da WebAssembly, imparerai a utilizzare Wasm per esternalizzare attività ad alta intensità di CPU con l'aiuto di un esempio in esecuzione.

Nella griglia CSS, le proprietà "grid-template-columns" e "grid-template-rows" ti consentono di definire i nomi delle linee e il dimensionamento delle righe e delle colonne della griglia, rispettivamente. Il supporto dell'interpolazione per queste proprietà consente ai layout della griglia di passare facilmente da uno stato all'altro, invece di agganciarsi al punto a metà di un'animazione o transizione.

Scopri come controllare i giochi web con l'API Gamepad.

La proprietà inerte è un attributo HTML globale che semplifica la procedura di rimozione e ripristino degli eventi di input utente per un elemento, inclusi gli eventi di focus e gli eventi delle tecnologie per la disabilità.

Le parti affidabili possono determinare la provenienza della passkey esaminando AAGUID. Scopri come funziona.

Utilizzando l'esempio di un linguaggio giocattolo sintetico chiamato ExampleScript, scopri come scrivere e ottimizzare moduli WebAssembly in JavaScript utilizzando l'API Binaryen.js.

Il componente web <model-viewer> ti consente di utilizzare modelli 3D su una pagina web in modo dichiarativo.

La registrazione audio/video è stata il "Santo Graal" dello sviluppo web per molto tempo. Per molti anni abbiamo dovuto fare affidamento su plug-in per browser ( Flash o Silverlight ) per svolgere il nostro lavoro. Dai! HTML5 viene in soccorso.

Scopri come utilizzare "userVerification" in WebAuthn

Scopri i motivi per cui i dati RUM possono mostrare valori di Segnali web essenziali diversi da quelli di CrUX.

È importante creare siti inclusivi e accessibili a tutti. Ci sono almeno sei aree chiave di disabilità che possono essere ottimizzate: visiva, uditiva, mobilità, cognitiva, vocale e neurale.

Gli script di terze parti offrono una vasta gamma di funzionalità utili, rendendo il web più dinamico. Scopri come ottimizzare il caricamento degli script di terze parti per ridurne l'impatto sul rendimento.

Scopri come impedire la creazione di una nuova passkey se ne esiste già una nel gestore delle password dell'utente.

Una guida alle nozioni di base su IndexedDB.

CSS affidabile, potente e stabile al primo posto.

Scopri come eseguire l'ottimizzazione in base alla metrica Time to First Byte.

Qual è la differenza tra host, sito e origine? Che cos'è un eTLD+1? Questo articolo spiega.

Scopri cosa sono le credenziali rilevabili e come creare esperienze utente adatte al tuo caso d'uso.

Gli utenti notano se siti e app non funzionano correttamente, quindi ottimizzare le prestazioni del rendering è fondamentale.

"RidimensionaObservationr" ti avvisa quando il rettangolo dei contenuti di un elemento cambia dimensione, in modo che tu possa reagire di conseguenza.

Oltre a eliminare i download di risorse non necessarie, la soluzione migliore per migliorare la velocità di caricamento della pagina è ridurre al minimo le dimensioni di download complessive ottimizzando e comprimendo le risorse rimanenti.

Questo documento spiega come utilizzare l'API OffscreenCanvas per ottenere miglioramenti delle prestazioni durante il rendering delle immagini nella tua app web.

Questo post presenta la metrica First Contentful Paint (FCP) e spiega come misurarla

Questo articolo fornisce una panoramica completa delle reti CDN (Content Delivery Network). Spiega, inoltre, come scegliere, configurare e ottimizzare una configurazione CDN.

Indicazioni pratiche per gli sviluppatori su cosa fare quando un utente si disconnette dal sito web.

Questo post presenta la metrica Tempo all'interattività (TTI) e spiega come misurarla

L'API Fetch Priority indica la priorità relativa delle risorse rispetto al browser. Può consentire un caricamento ottimale e migliorare i Segnali web essenziali.

Informazioni sulle pseudo-classi :user-valid e :user-invalid e su come utilizzarle per migliorare l'esperienza utente della convalida dell'input.

Scopri in che modo i responsabili delle decisioni aziendali e i non sviluppatori possono migliorare i Segnali web essenziali.

Comprendi ed evita i problemi comuni relativi all'applicazione della codifica e decodifica Base64 alle stringhe.

La griglia consente la condivisione della griglia, consentendo l'allineamento delle griglie nidificate ai predecessori e ai livelli di pari livello.

Nel mondo digitale di oggi, la pubblicità online è una parte fondamentale del web senza costi di cui tutti usufruiamo. Tuttavia, gli annunci implementati in modo inadeguato possono rallentare l'esperienza di navigazione, frustrare gli utenti e ridurre il coinvolgimento. Scopri come caricare gli annunci in modo efficace senza influire sulla velocità della pagina, garantendo un'esperienza utente ottimale e massimizzando le opportunità di entrate per i proprietari di siti web.

Scopri cos'è la copertura del codice e i quattro modi comuni per misurarla.

Determina gli elementi da testare e quelli da escludere.

Stabilisci gli elementi da testare, definisci gli scenari di test e dai priorità.

Le metriche sul rendimento incentrate sull'utente sono uno strumento fondamentale per comprendere e migliorare l'esperienza sul tuo sito a vantaggio degli utenti reali.

Scopri le nuove ed entusiasmanti possibilità di precaricamento delle immagini adattabili al fine di garantire un'esperienza utente ottimale.

Un metodo per adattare un carattere alle preferenze degli utenti, in modo che possano leggere i tuoi contenuti al massimo.

Scopri come combinare diversi tipi di test in una strategia ragionevole che si adatti al tuo progetto.

Iniziamo dalle basi. Esplorazione delle due modalità di test generali e dei tre tipi comuni di automazione dei test.

Dovresti controllare periodicamente le risorse per assicurarti che ciascuna contribuisca a offrire un'esperienza utente migliore.

Il programma mkbitmap C legge un'immagine e vi applica una o più delle seguenti operazioni, in questo ordine: inversione, filtro passa-alto, scalabilità e soglia. Ogni operazione può essere controllata e attivata o disattivata singolarmente. Questo articolo mostra come compilare mkbitmap in WebAssembly.

Un'introduzione a WebAssembly (a volte abbreviata Wasm), il formato di codice binario portatile e il formato di testo corrispondente per i programmi eseguibili, nonché le interfacce software per facilitare le interazioni tra questi programmi e l'ambiente host.

Lo standard File System introduce un file system privato dell'origine (OPFS) come endpoint di archiviazione privato dell'origine della pagina e non visibile all'utente che fornisce l'accesso facoltativo a un tipo speciale di file altamente

Come visualizzare in modo sicuro i contenuti controllati dagli utenti su applicazioni web.

Una panoramica su come AVIF viene adottato nell'ecosistema e sui vantaggi in termini di prestazioni e qualità che gli sviluppatori possono aspettarsi da AVIF per immagini statiche e animazioni.

Scopri come ottimizzare l'interazione con Next Paint del tuo sito web.

Scopri alcune delle funzionalità che fanno parte di Baseline.

Il ritardo di input può contribuire in modo significativo alla latenza totale di interazione e influire negativamente sull'INP della tua pagina. In questa guida scoprirai cos'è il ritardo dell'input e come puoi ridurlo per un'interattività più rapida.

Le grandi dimensioni del DOM possono essere un fattore determinante per determinare se le interazioni sono rapide o meno. Scopri di più sulla relazione tra le dimensioni del DOM e l'INP, su cosa puoi fare per ridurre le dimensioni del DOM e su altri modi per limitare il lavoro di rendering quando la pagina ha molti elementi DOM.

Il rendering del codice HTML con JavaScript è diverso dal rendering dell'HTML inviato dal server, che può influire sulle prestazioni. Scopri le differenze in questa guida e cosa puoi fare per preservare il rendimento del rendering del tuo sito web, in particolare per quanto riguarda le interazioni.

Durante il caricamento degli script, il browser impiega del tempo per valutarli prima dell'esecuzione, il che può causare attività lunghe. Scopri come funziona la valutazione degli script e cosa puoi fare per evitare che causi attività lunghe durante il caricamento della pagina.

L'intero WordPress basato su PHP in esecuzione esclusivamente nel browser con WebAssembly

Questo post presenta la metrica Cumulative Layout Shift (CLS) e spiega come misurarla.

Una presentazione degli strumenti ora disponibili sul web grazie a WebAssembly.

Migliora l'esperienza di debug web con le mappe di origine.

Le app web progressive possono essere inviate ad app store come il Play Store Android o Microsoft Store e altri ancora.

CSS affidabile, potente e stabile al primo posto.

Calcola il seno, il coseno, la tangente e altro in CSS.

Il metodo requestVideoFrameCallback() consente agli autori web di registrare un callback che viene eseguito nei passaggi di rendering quando un nuovo frame video viene inviato al compositore.

Una serie di interviste con i membri del programma Google Developers Interop (GDE).

Questo post del blog annuncia una nuova raccolta di pattern per le app multimediali.

Creiamo l'effetto di testo con sfumatura animata con proprietà personalizzate basate sugli ambiti e background-clip Vai su CodePen e crea un nuovo pen. Crea il markup per il testo. Utilizziamo un titolo con la parola "Veloce": Poi, diamo al nostro

Come ha preso vita il libro a scorrimento grazie alla condivisione di suggerimenti e trucchi divertenti e paurosi su questa Chrome.

Una panoramica di base su come creare un elemento personalizzato con descrizione comando adattabile e accessibile al colore.

Le passkey rendono gli account utente di un sito web più sicuri, semplici, facili da usare e senza password. Questo articolo spiega come consentire agli utenti di creare passkey per il tuo sito web.

Le passkey rendono gli account utente di un sito web più sicuri, semplici, facili da usare e senza password. Questo articolo spiega come progettare un accesso senza password con passkey al fine di supportare gli utenti con password esistenti.

Una panoramica fondamentale su come creare componenti FAB adattabili al colore, reattivi e accessibili.

Scopri come ottimizzare i caratteri web per i Segnali web essenziali.

Una panoramica di tre strumenti e tecniche per testare e verificare il contrasto di colore accessibile del design.

Una serie di interviste con i membri del programma Google Developers Interop (GDE).

Creiamo un caricamento CSS animato con proprietà personalizzate basate sugli ambiti e animation-timing-function Vai su CodePen e crea un nuovo pen. Crea il markup per il nostro caricatore. Tieni presente l'utilizzo delle proprietà personalizzate in

Questo tutorial descrive come creare una navigazione principale accessibile in un sito web. Scoprirai l'HTML semantico, l'accessibilità e come l'utilizzo degli attributi ARIA a volte può fare più male che bene.

Questo pratico pseudo-selettore CSS offre un modo per selezionare elementi modali.

Una divertente esplorazione dei modi per ricreare un'illusione ottica con CSS.

Ottimizza tag e tag manager per Core Web Vitals.

Ecco alcuni modi utili e creativi per definire un elenco.

Vantaggi dell'utilizzo di proprietà personalizzate nei sistemi di progettazione e nelle librerie dei componenti.

Scopri come utilizzare le singole proprietà CSS di traslazione, rotazione e scalabilità per affrontare le trasformazioni in modo intuitivo.

Vediamo diversi modi per animare un bordo in CSS

La BBC sta implementando HSTS per il proprio sito web al fine di migliorare la sicurezza e le prestazioni. Scopri cosa significa e in che modo HSTS può aiutarti.

Scopri perché gli strumenti che monitorano le metriche di Segnali web essenziali possono indicare numeri diversi e come interpretare tali differenze.

La GDE Enrique Fernandez Guerra sull'open sourcing della sua ONG HelpDev.

Cosa comportava l'interruzione del supporto di Internet Explorer per i clienti e gli sviluppatori di Maersk.com.

Per quanto tempo HTML5Rocks, è stato bello conoscerti.

Scopri come impostare i cookie proprietari per garantire la sicurezza, la compatibilità tra i browser e ridurre al minimo le possibilità di interruzione una volta eliminati i cookie di terze parti.

L'API Web Audio consente di ottenere correttamente la sincronizzazione AV.

I gradienti conici possono essere utilizzati per creare effetti interessanti, come questo bel bordo. Questo CodePen creato da Adam Argyle, originariamente condiviso tramite questo tweet su Twitter, mostra come utilizzare un gradiente conico

Scopri le decisioni relative all'utilizzo di una libreria o un framework JavaScript.

Comprendi le differenze tra framework e librerie nel contesto di un ambiente JavaScript lato client.

Rilevamento di errori durante l'utilizzo dell'API Fetch.

Un aggiornamento sull'API CSS di Google Fonts: come funziona, come usarla e come può pubblicare in modo efficiente i tuoi caratteri web.

Questa risorsa può aiutarti a orientarti rapidamente all'interno del terminale.

GOV.UK ha eliminato la dipendenza jQuery dal front-end. Non indovinerai mai cosa è successo. (Sì.)

Una panoramica di base su come creare componenti adattabili al colore, adattabili e accessibili.

Scopri cos'è lo scanner di precaricamento del browser, in che modo migliora le prestazioni e come puoi evitare di intralciarlo.

Semplificare la creazione per il Web.

Come misurare i Segnali web con il tuo attuale strumento di analisi

Esperti di Google Developers sul Web che spiegano come i programmi di mentoring hanno permesso loro di diventare leader.

Una guida pratica ai caratteri variabili, con molti esempi.

Questo strumento di Josh W Comeau rende estremamente semplice creare sfumature dall'aspetto accattivante.

Una raccolta di approfondimenti sui principali punti deboli, raccolti da una serie di conversazioni individuali con gli sviluppatori web.

Controlla lo stato degli strumenti per le immagini.

Scopri di più sull'ambito e su come funziona in JavaScript.

Una panoramica di base su come creare mini e mega modali adattabili al colore, adattabili e accessibili con l'elemento ".

Scopri come eseguire il debug degli errori di riproduzione dei contenuti multimediali sul web.

Una serie di interviste con i membri del programma Google Developers Interop (GDE).

Il caricamento delle immagini all'interno dell'area visibile iniziale, con il caricamento lento del resto, può migliorare i Core Web Vitals caricando meno byte.

Una panoramica di base su come creare una barra di caricamento adattivo e accessibile per i colori con l'elemento "".

Mantieni i moduli di registrazione e di accesso il più semplici possibile. Salva le credenziali dai moduli di accesso in modo che gli utenti non debbano accedere di nuovo quando tornano. Per memorizzare le credenziali utente dai moduli: Prima di

Le modifiche alla stringa dello user agent, le strategie che Chrome e Firefox stanno adottando per mitigare l'impatto e come puoi aiutare.

Una panoramica di base su come creare una favicon adattiva.

Scopri come eseguire il rendering di grafica 2D su un canvas sul Web da WebAssembly con Emscripten.

Dimenticare o utilizzare in modo improprio l'intestazione Cache-Control potrebbe influire negativamente sulla sicurezza del tuo sito web e sulla privacy dei tuoi utenti. Ricevi consigli per siti web di alto valore.

Metriche essenziali per un sito sano

Scopri come gPhoto2 è stato trasferito in WebAssembly per controllare le fotocamere esterne tramite USB da un'app web.

Utilizza il logging degli errori di rete (NEL) per raccogliere gli errori di rete lato client.

Scopri come utilizzare le funzionalità più recenti di WebAssembly e supportare gli utenti su tutti i browser.

Scopri come il codice che interagisce con dispositivi esterni può essere portato sul web con le API WebAssembly e Fugu.

Una panoramica di base su come creare un componente per il cambio di tema adattivo e accessibile.

Scopri come incorporare codice JavaScript nella tua libreria WebAssembly per comunicare con il mondo esterno.

Oculus Quest 2 è un visore per la realtà virtuale (VR) creato da Oculus, una divisione di Meta. Ora gli sviluppatori possono creare e distribuire app web progressive (PWA) 2D e 3D che sfruttano la funzionalità multitasking di Oculus Quest 2. Questo articolo descrive l'esperienza e come creare, installare tramite sideload e testare la tua PWA in Oculus Quest 2.

Uno sguardo al processo e agli strumenti utilizzati per creare l'esperienza di Designcember in stile calendario festivo.

Un tentativo stravagante di ricreare sul web un calcolatore solare che utilizzi il sensore della luce ambientale e la funzionalità di sovrapposizione dei controlli delle finestre.

Per molto tempo, hai dovuto ricorrere a soluzioni alternative e librerie per creare una copia completa di un valore JavaScript. La piattaforma ora include "StructuredClone()", una funzione integrata per il deep-copy.

Una panoramica di base su come creare un componente toast adattivo e accessibile.

Annuncio del fondo per l'UI di Chrome, progettato per fornire sovvenzioni alle persone che lavorano su strumenti di design, CSS e HTML.

Una panoramica di base su come creare un menu 3D reattivo, adattivo e accessibile.

Scopri come misurare le animazioni, come valutare i frame dell'animazione e come regolare l'uniformità della pagina.

Una raccolta di tutte le principali comunicazioni del Chrome Dev Summit 2021, con i link per saperne di più.

Scopri le ultime novità di PageSpeed Insights per poter misurare e ottimizzare meglio la qualità della tua pagina e del tuo sito.

Prova una nuova API Lighthouse per misurare le prestazioni e le best practice in un flusso utente.

Negli ultimi tre anni, Chrome ha lavorato per supportare le applicazioni web che vogliono superare i limiti di ciò che è possibile fare nel browser. Una di queste applicazioni web è stata Photoshop. Solo pochi anni fa sarebbe stato difficile eseguire software complessi come Photoshop direttamente nel browser. Tuttavia, grazie all'utilizzo di varie nuove tecnologie web, Adobe ha ora reso disponibile sul web una versione beta pubblica di Photoshop.

Una panoramica di base su come creare un componente a selezione multipla, adattabile, adattivo e accessibile per ordinare e filtrare le esperienze utente.

Apprendi le nozioni di base sull'utilizzo delle API Navigation e Resource Timing per valutare le prestazioni di caricamento sul campo.

La nuova API Sanitizer mira a creare un processore robusto per stringhe arbitrarie da inserire in modo sicuro in una pagina. Questo articolo presenta l'API e ne spiega l'utilizzo.

Questo documento illustra le best practice per le prestazioni che puoi utilizzare durante il caricamento di incorporamenti di terze parti, tecniche di caricamento efficienti e lo strumento Terminatore della variazione del layout, che aiuta a ridurre le variazioni del layout per gli incorporamenti più diffusi.

Risposte alle domande più comuni su SPA, Segnali web essenziali e sul piano di Google per affrontare gli attuali limiti di misurazione.

preventDefault e stopPropagation: quando utilizzarli e che cosa fa esattamente ciascun metodo. La gestione degli eventi JavaScript è spesso semplice. Questo è particolarmente vero quando si ha a che fare con una struttura HTML semplice (relativamente

Scopri come importare e raggruppare vari tipi di asset da JavaScript in un modo che funzioni sia nei browser sia nei bundle.

Una panoramica di base su come creare un componente Pulsante di suddivisione accessibile.

Scopri come utilizzare gli script dei moduli CSS per importare i fogli di stile CSS utilizzando la stessa sintassi dei moduli JavaScript.

Una panoramica di base su come creare un componente Switch reattivo e accessibile.

Aggiungi il colore del tuo brand agli input integrati nel modulo HTML con una sola riga di codice.

Un insieme di intestazioni di suggerimenti client consente ai siti di ottenere le preferenze multimediali dell'utente, se necessario, al momento della richiesta, consentendo ai server di inserire in linea il CSS corretto per motivi di prestazioni. Le

Una panoramica di base su come creare un componente breadcrumb adattabile e accessibile per consentire agli utenti di navigare nel tuo sito.

Scopri come portare in WebAssembly applicazioni multithread scritte in altri linguaggi.

Impara i concetti di gestione dei diritti digitali e i comandi necessari per passare da un file mov non elaborato a contenuti multimediali criptati in pacchetti per MPEG-DASH o HLS utilizzando la crittografia Clear Key o Widevine.

I framework multimediali sono sia proprietari che open source e si basano su un insieme di API che supportano la riproduzione audio e/o video per vari formati di container e protocolli di trasmissione.

Creare una PWA con lo streaming offline ha le sue sfide. In questo articolo, scoprirai le API e le tecniche che offrono agli utenti un'esperienza multimediale offline di alta qualità.

Lo streaming di contenuti multimediali è il metodo per la distribuzione continua di contenuti multimediali da un server in cui i contenuti sono stati suddivisi in singoli blocchi di dati che possono essere uniti di nuovo durante la riproduzione in un ordine specifico tramite una richiesta di intervallo utilizzando protocolli come DASH e HLS.

Una panoramica di base su come definire una combinazione di colori dinamica e configurabile.

Durante il caricamento di un carattere web, ora puoi regolare la scala per normalizzare le dimensioni dei caratteri del documento e impedire la variazione del layout quando passi da un carattere all'altro.

Pubblicare immagini di dimensioni desktop sui dispositivi mobili può comportare il consumo di dati da 2 a 4 volte superiore al necessario. Anziché adottare un approccio "universale" per le immagini, pubblica immagini di dimensioni diverse per dispositivi diversi.

Questo articolo illustra le tecniche relative ai CSS per ottimizzare i Segnali web.

A partire da oggi, è stata implementata una modifica a CLS su diverse piattaforme di strumenti web di Chrome, tra cui Lighthouse, PageSpeed Insights e Report sull'esperienza utente di Chrome.

Queste apparentemente piccole aggiunte alla sintassi del selettore CSS avranno un grande impatto.

È ora disponibile un nuovo corso di formazione sulle app web progressive in sei parti, completo di una nuova serie di codelab per imparare a creare PWA affidabili, installabili ed efficaci.

Le funzionalità multimediali basate sulle preferenze degli utenti, le query dei container e le query supporti per nuovi tipi di schermi, come quelli pieghevoli, ci consentiranno di entrare in una nuova era del Responsive Web Design.

Strategie per eseguire la migrazione del tuo sito dalla stringa user agent ai nuovi User-Agent Client Suggerimento.

Un resoconto del discorso di Thomas Steiner su Google I/O 2021 dal titolo Excalidraw and Fugu: Migliorare i percorsi degli utenti principali

Questo articolo elenca le intestazioni di sicurezza più importanti che puoi utilizzare per proteggere il tuo sito web. Utilizzalo per comprendere le funzionalità di sicurezza basate sul Web, scoprire come implementarle sul tuo sito web e come riferimento per quando hai bisogno di un promemoria.

I service worker possono utilizzare le importazioni statiche dei moduli ES per importare codice aggiuntivo, in alternativa a importScripts().

Una panoramica di base su come creare una visualizzazione della scheda orizzontale adattabile per TV, telefoni, computer e così via.

Oggi parleremo delle nuove funzionalità degli strumenti di Lighthouse, PageSpeed e DevTools per aiutarvi a identificare in che modo il vostro sito può migliorare i Segnali web.

Scopri come richiamare API web asincrone durante la compilazione di linguaggi tradizionalmente sincroni in WebAssembly.

Con la funzionalità Overlay di controlli per le finestre, gli sviluppatori possono personalizzare la barra del titolo delle PWA installate in modo che risultino più simili alle app.

Gli script di terze parti o "tag" possono essere una fonte di problemi di rendimento sul tuo sito e, di conseguenza, un obiettivo per l'ottimizzazione. Tuttavia, prima di iniziare a ottimizzare i tag aggiunti, accertati di non ottimizzare quelli di cui non hai bisogno. Questo articolo spiega come valutare le richieste di nuovi tag, nonché gestire e rivedere quelle esistenti.

L'oggetto DataTransfer contiene i dati che vengono trascinati durante un'operazione di trascinamento. Può contenere uno o più elementi di dati, ciascuno di uno o più tipi di dati. Questo articolo spiega che cosa puoi fare con l'API DataTransfer.

L'API WebOTP ora può ricevere una OTP dall'interno di un iframe.

Una panoramica di base su come creare animazioni divisa di lettere e parole.

Piani per migliorare la metrica CLS per renderla più equo in relazione alle pagine di lunga durata.

Web Developer Satisfaction è un progetto Google per raccogliere informazioni sulle esigenze degli sviluppatori web. L'obiettivo è una piattaforma web più affidabile, prevedibile e interoperabile, che consenta agli sviluppatori di investire e fidarsi della piattaforma, nonché di adottare e utilizzare nuove funzionalità per far crescere la piattaforma e la propria attività.

Una panoramica di base su come creare un componente delle impostazioni di cursori e caselle di controllo.

Capire il valore di "this" può essere difficile in JavaScript, ecco come fare...

Questo capitolo presenta una selezione di interessanti progetti open source per mini app.

Questo capitolo fornisce informazioni di base su app H5 e QuickApp, che sono distinte dalle app mini.

Questo capitolo mostra un progetto di esempio che segue l'approccio della "programmazione della modalità delle mini app".

Questo capitolo illustra le opzioni di markup, stile, scripting e aggiornamento di varie piattaforme di mini app.

Questo capitolo fornisce dettagli sui componenti resi disponibili da tutte le piattaforme di mini app.

Questo capitolo introduce la modalità di programmazione delle app mini.

Questo capitolo illustra la struttura del progetto, il ciclo di vita e la creazione di pacchetti di mini app.

Questo capitolo conclude la raccolta delle mini app con l'osservazione che pensare fuori dagli schemi e prendere input e ispirazione al di fuori del proprio fumetto può sicuramente essere di aiuto per costruire un futuro migliore sul web.

L'API Streams consente a JavaScript di accedere in modo programmatico agli stream di dati ricevuti sulla rete ed elaborarli come desiderato.

Una panoramica di base sulla creazione di un componente Schede simile a quelli presenti nelle app per iOS e Android.

L'isolamento multiorigine consente a una pagina web di utilizzare funzionalità avanzate come SharedArraybu. Questo articolo spiega come attivare l'isolamento multiorigine sul tuo sito web.

L'intestazione Origin-Agent-Cluster interrompe l'accesso sincrono ad altre origini sullo stesso dominio e fornisce suggerimenti al browser per fornire risorse dedicate all'origine.

Ora è più facile mantenere le proporzioni all'interno delle immagini e degli elementi con la nuova proprietà CSS delle proporzioni.

Scopri come ottimizzare le prestazioni e l'usabilità dei caroselli.

Una breve panoramica della storia, dell'architettura, dei casi d'uso e del futuro di WebRTC.

Nella maggior parte dei casi, http://localhost si comporta come HTTPS per scopi di sviluppo. Tuttavia, esistono alcuni casi speciali, come i nomi host personalizzati o l'utilizzo di cookie sicuri su più browser, in cui devi configurare esplicitamente

L'utilizzo di http://localhost per lo sviluppo locale è accettabile nella maggior parte dei casi, tranne in alcuni casi speciali. Questo post spiega quando devi eseguire il tuo sito di sviluppo locale con HTTPS. Consulta anche Come utilizzare HTTPS

Scopri i nostri piani per migliorare la metrica Cumulative Layout Shift e inviaci il tuo feedback.

Scopri come creare un componente di layout di navigazione laterale adattabile a scorrimento.

Una panoramica di base su come creare una barra di navigazione laterale a scorrimento adattabile

Scopri 5 diverse tecniche di centraggio con CSS.

Segui 5 tecniche di centratura durante una serie di test per vedere quale è la più resiliente al cambiamento.

Le prestazioni al primo caricamento sono importanti, ma non tutto. Gli utenti che caricano il tuo sito una seconda volta utilizzeranno la cache per accedere ai tuoi contenuti, quindi è fondamentale assicurarsi che funzioni correttamente, sia per velocità che per correttezza.

Scopri come implementare le API Houdini Paint cross-browser ed esplora un mondo di worklet Houdini con Houdini.how.

Scopri le best practice per i moduli dell'indirizzo.

Un nuovo strumento modulare che consente la raccolta automatica dei dati sul rendimento da più origini.

Utilizza le funzionalità del browser multipiattaforma per creare un semplice modulo di registrazione che sia sicuro, accessibile e facile da usare.

Massimizza le conversioni aiutando gli utenti a compilare i moduli di indirizzo e pagamento nel modo più semplice e veloce possibile.

Aiuta i tuoi utenti a registrarsi, accedere e gestire i dettagli del loro account senza problemi.

Scopri le best practice per le forme di pagamento.

Chiedere a un utente di fornire una OTP (password unica) inviata tramite SMS è un modo comune per confermare il numero di telefono di un utente. Questo post fornisce le best practice per creare un modulo OTP per SMS con un'esperienza utente ottimale.

In che modo i web worker e i service worker possono migliorare le prestazioni del tuo sito web e quando utilizzare un web worker rispetto a un service worker.

Come stabilire un canale di comunicazione bidirezionale tra la pagina e il service worker.

Come comunicare finestre e service worker per eseguire attività relative alle prestazioni, alla memorizzazione nella cache e alla modalità offline.

In che modo i service worker possono comunicare in modo proattivo con la pagina per informarsi su determinati eventi.

Ora le app web possono disattivare l'accelerazione del mouse durante l'acquisizione di eventi di puntatore.

Una panoramica fondamentale su come creare un'esperienza simile alle Storie di Instagram sul web.

Scopri come creare un'esperienza simile alle Storie di Instagram sul web.

Questo post fornisce indicazioni su come adottare l'attributo di caricamento nei sistemi di gestione dei contenuti.

La definizione di "same-site" si sta evolvendo per includere lo schema URL, pertanto i link tra le versioni HTTP e HTTPS di un sito ora vengono conteggiati come richieste tra siti. Esegui l'upgrade a HTTPS per impostazione predefinita per evitare problemi, ove possibile, oppure continua a leggere per conoscere i dettagli dei valori dell'attributo SameSite necessari.

Un tutorial interattivo passo passo che mostra come creare un client che iscrive l'utente alle notifiche push, visualizza i messaggi push come notifiche e annulla l'iscrizione dell'utente alle notifiche push.

Un tutorial interattivo passo passo che mostra come creare un server per gestire le iscrizioni alle notifiche push e inviare richieste di protocollo web push a un servizio push.

Una panoramica delle notifiche push, del motivo per cui potresti utilizzarle e del loro funzionamento.

Come monitorare l'utilizzo offline del tuo sito in modo da poter verificare il motivo per cui il sito ha bisogno di una migliore esperienza offline.

Dimostrare come le tecniche ad alte prestazioni possono creare animazioni complesse e belle.

I valori minimo, massimo e di blocco forniscono funzionalità CSS efficaci che consentono di applicare stili più reattivi con meno blocchi di codice. Questo post illustra come controllare il dimensionamento degli elementi, mantenere una spaziatura appropriata e implementare una tipografia fluida usando queste funzioni matematiche CSS ben supportate.

Un SXG è un meccanismo di distribuzione che consente di autenticare l'origine di una risorsa indipendentemente da come è stata consegnata.

Nuove abbreviazioni delle proprietà logiche e nuove proprietà di inset per Chromium.

Assicurati che il service worker sappia cosa fare quando viene richiesta una risposta parziale.

Una buona animazione è alla base di un'ottima esperienza web. Questo post spiega perché alcuni tipi di animazione hanno un rendimento migliore di altri.

Per migliorare le prestazioni delle animazioni CSS, utilizza il più possibile le proprietà CSS di trasformazione e opacità ed evita qualsiasi evento che attivi il layout o la colorazione.

Le funzioni di panoramica, inclinazione e zoom delle fotocamere sono finalmente controllabili sul Web.

Le prove dell'origine consentono di testare una funzionalità della piattaforma web nuova o sperimentale. Una prova dell'origine di terze parti consente ai fornitori di contenuti incorporati di provare una nuova funzionalità su più siti. Le prove

Le finestre scollegate sono un tipo comune di perdita di memoria particolarmente difficile da trovare e correggere.

Scopri come creare un'esperienza offline semplice per la tua app.

L'uso di ritagli in CSS può aiutarci ad abbandonare la struttura che assomiglia a un riquadro. Puoi creare un percorso di ritaglio utilizzando varie forme di base o un file SVG. Quindi taglia le parti di un elemento che non vuoi mostrare.

Utilizza il codice CSS per personalizzare il colore, le dimensioni o il tipo di numeri o punti elenco negli elementi "" o "".

Reindirizzando le richieste a /.well-known/change-password all'URL di modifica della password, puoi consentire agli utenti di aggiornare le proprie password più facilmente.

Una volta registrata, un'app di pagamento basata sul web è pronta per accettare richieste di pagamento da parte dei commercianti. Questo articolo spiega come orchestrare una transazione di pagamento da un service worker durante il runtime.

Una volta registrata, un'app di pagamento basata sul web è pronta per accettare richieste di pagamento da parte dei commercianti. Questo articolo spiega come orchestrare una transazione di pagamento da un service worker durante il runtime.

Come mentire agli screen reader cura l'accessibilità, se non ci mette del sale!

Scopri come utilizzare WebAssembly per portare le librerie scritte in altri linguaggi sul web in modo sicuro e idiomatico.

La proprietà CSS content-visibility consente di migliorare il rendimento del rendering dei contenuti web ignorando il rendering dei contenuti fuori dallo schermo. Questo articolo spiega come utilizzare questa nuova proprietà CSS per velocizzare i tempi di caricamento iniziali utilizzando la parola chiave automatica. Scoprirai anche la specifica di contenimento CSS e altri valori per la visibilità dei contenuti che ti offrono un maggiore controllo sul rendering dei contenuti nel browser.

L'API Async Clipboard semplifica il processo di copia e incolla per facilitare le autorizzazioni.

Potresti impostare un criterio per il referrer "strict-origin- when-cross-origin". Mantiene gran parte dell'utilità del referrer, riducendo al contempo il rischio di fuga di dati multiorigine.

Scopri come è possibile usare diversi componenti per eseguire il rendering dei contenuti web all'interno delle app per Android.

Che cosa ha imparato il team di bollettino sui service worker durante lo sviluppo di una PWA.

Scopri come configurare Lighthouse CI e integrarlo nei flussi di lavoro degli sviluppatori.

Maggiore sicurezza e un'esperienza utente migliore per gli Account Google.

Scopri come implementare le proprietà CSS personalizzate con la digitazione semantica, un valore di riserva e altro ancora, direttamente nel tuo file CSS.

Scopri come adattare la tua app per i pagamenti basata sul web in modo che funzioni con Web Payments e che offra una migliore esperienza utente ai clienti.

Utilizza i test A/B per valutare l'impatto della velocità del sito sulle tue metriche aziendali.

I pro e i contro dell'utilizzo di una logica di scadenza coerente o diversa nella cache dei service worker e nei livelli della cache HTTP.

Scopri come registrare un'app di pagamento basata sul web nel browser di un cliente. Imparerai anche come eseguirne il debug.

Scopri come modificare la tua app per pagamenti Android per fornire l'indirizzo di spedizione selezionato dell'utente e i dati di contatto quando il commerciante li ha richiesti tramite l'API Payment Request.

Le richieste di navigazione sono richieste di HTML effettuate ogni volta che inserisci un nuovo URL nella barra di navigazione o segui un link in una pagina. È qui che i Service worker producono il loro maggiore impatto sulle prestazioni: utilizzando un service worker per rispondere senza attendere la rete, puoi garantire che le navigazioni siano rapide e resilienti in modo affidabile.

Il report sull'esperienza utente di Chrome (in precedenza CrUX) è un set di dati pubblico di dati reali sull'esperienza utente su milioni di siti web. A differenza dei dati di prova controllati, i dati CrUX provengono in realtà da utenti che hanno accettato di partecipare sul campo.

In questo post vengono messe in evidenza alcune potenti linee di CSS che svolgono un lavoro pesante e ti aiutano a creare layout moderni e solidi.

Da Chrome 84, RidimensionaOc Questo è fondamentale per ottenere una grafica con pixel perfetti, soprattutto nel contesto di schermi ad alta densità.

Un riepilogo delle notizie e degli aggiornamenti più importanti annunciati durante il nostro evento della community online di tre giorni, oltre a un promemoria sui prossimi eventi regionali.

Utilizza le funzionalità dei browser multipiattaforma per creare un semplice modulo di accesso sicuro, accessibile e facile da usare.

Scopri come migliorare progressivamente la tua applicazione web progressiva in modo che rimanga utile su tutti i browser moderni, ma offre un'esperienza avanzata sui browser che supportano nuove funzionalità web come l'accesso al file system, l'accesso agli appunti di sistema, il recupero dei contatti, la sincronizzazione periodica in background, il wakelock dello schermo, le funzionalità di condivisione web e molte altre.

Utilizza le funzionalità del browser multipiattaforma per creare moduli di accesso sicuri, accessibili e facili da usare.

Come eseguire il debug dei problemi SEO su singole pagine o nell'intero sito.

Come implementare un'esperienza di ricerca resiliente con Workbox, utilizzando la sincronizzazione in background e l'API Push.

Incorporare un file multimediale in una pagina web utilizzando i tag and.

I frammenti di testo consentono di specificare uno snippet di testo nel frammento di URL. Durante la navigazione verso un URL con un frammento di testo di questo tipo, il browser può metterlo in risalto e/o portarlo all'attenzione dell'utente.

Informare i fornitori di browser dei problemi riscontrati nel loro browser, su un dispositivo o una piattaforma specifica è parte integrante del miglioramento della piattaforma web.

Scopri come rendere la tua app web progressiva un'app "reale" imparando a implementare pattern di app specifici della piattaforma con le tecnologie web.

Il modello RAIL consente a designer e sviluppatori di scegliere come target in modo affidabile il lavoro di ottimizzazione delle prestazioni che ha il massimo impatto sull'esperienza utente. Scopri quali obiettivi e linee guida definisce il modello RAIL e quali strumenti puoi utilizzare per raggiungerli.

Quicklink è una libreria che consente di caricare le pagine in tempi più rapidi precaricando i link nell'area visibile durante i tempi di inattività.

Recupera metadati è una nuova funzionalità della piattaforma web progettata per consentire ai server di proteggersi dagli attacchi multiorigine.

Quando crei un layout utilizzando CSS, devi fare attenzione a non creare un'esperienza disconnessa per gli utenti che navigano con la tastiera.

La gestione delle animazioni sul web sta per diventare molto più semplice.

Una transazione di pagamento tramite Web Payments inizia con il rilevamento della tua app per pagamenti. Scopri come configurare un metodo di pagamento e come preparare l'app per consentire a commercianti e clienti di effettuare pagamenti.

L'obiettivo di Web Payments è offrire un'esperienza di pagamento semplice sul Web. Scopri come funziona e quali vantaggi offre e preparati a integrare la tua app per pagamenti con Web Payments.

Scopri come adattare la tua app per i pagamenti Android in modo che funzioni con Web Payments e per offrire una migliore esperienza utente ai clienti.

Scopri come i commercianti integrano le app di pagamento, come funzionano le transazioni di pagamento con l'API Payment Request e cosa è possibile fare in Pagamenti web.

Chromium 80 aveva una regressione dello spessore del carattere dell'interfaccia di sistema su macOS. Il motivo per cui ha rotto e i nuovi superpoteri post-risoluzione, valgono l'attesa in Chromium 83.

Crea un solido business case per la tua PWA. Scopri quando dovresti investire e come misurarne il successo.

Le scorciatoie app consentono di accedere rapidamente ad alcune azioni comuni di cui gli utenti hanno bisogno più spesso.

I dettagli di Chrome e di altri browser hanno intenzione di rimuovere AppCache.

L'archiviazione permanente può contribuire a proteggere i dati critici dall'eliminazione e a ridurre le probabilità di perdita.

Best practice per combinare diverse offerte di installazione al fine di aumentare le tariffe di installazione ed evitare la concorrenza e la cannibalizzazione della piattaforma.

I moduli CommonJS sono molto dinamici, il che impedisce agli ottimizzatori e ai bundle JavaScript di eseguire ottimizzazioni avanzate.

Scopri come profilare le prestazioni delle app Web Audio in Chrome utilizzando "about://tracing" e l'estensione **WebAudio** in Chrome DevTools.

Alcune API web aumentano il rischio di attacchi side-channel come Spectre. Per ridurre questo rischio, i browser offrono un ambiente isolato basato su attivazione, denominato con isolamento multiorigine. Scopri perché è necessario l'isolamento multiorigine per usare funzionalità potenti come "SharedArraybuffer", "performance.measureUserAgentSpecificMemory()" e timer ad alta risoluzione con maggiore precisione.

Scopri come Next.js e Gatsby hanno migliorato l'output della build per ridurre al minimo il codice duplicato e migliorare il rendimento del caricamento delle pagine

"same-site" e "same-origin" vengono spesso citati ma spesso fraintesi. Questa pagina spiega cosa sono e in cosa differiscono.

Alcune API web aumentano il rischio di attacchi side-channel come Spectre. Per ridurre questo rischio, i browser offrono un ambiente isolato basato su attivazione, denominato con isolamento multiorigine. Utilizza COOP e COEP per configurare un ambiente di questo tipo e attivare con maggiore precisione funzionalità potenti come "SharedArraybuffer", "performance.measureUserAgentSpecificMemory()" o timer ad alta risoluzione.

Scopri come misurare l'utilizzo della memoria della tua pagina web in produzione per rilevare le regressioni.

In questo primo post del team di ingegneri di web.dev, scopri come realizziamo il sito, incluso l'uso di Eleventy e Web Components.

La proprietà CSS color-scheme e il meta tag corrispondente consentono agli sviluppatori di attivare nelle proprie pagine i valori predefiniti specifici del tema del foglio di stile dello user agent, come, ad esempio, i controlli del modulo, le barre di scorrimento e i colori di sistema CSS. Allo stesso tempo, questa funzionalità impedisce ai browser di applicare autonomamente eventuali trasformazioni.

Come garantire che la funzionalità di base del sito web sia sempre disponibile, accessibile, sicura, utilizzabile, rilevabile e veloce.

Come determinare e correggere rapidamente un collo di bottiglia del server, migliorare le prestazioni del server e prevenire le regressioni.

Sappiamo che è una buona idea progettare in modo reattivo per offrire la migliore esperienza multi-dispositivo, ma il responsive design si rivela vincente anche in termini di accessibilità.

Scopri come rendere più accessibili le tue pagine migliorando l'utilizzo di colori e contrasto.

Quando vengono utilizzati su un dispositivo mobile o touchscreen, è importante che gli elementi interattivi abbiano abbastanza spazio intorno a loro. Sarà utile a tutti, ma in particolar modo a chi ha disabilità motorie.

Introduzione ai tipi attendibili: un'API browser per impedire l'esecuzione di script tra siti basati su DOM nelle applicazioni web moderne.

Come aprire un'app web progressiva in un'app per Android.

Ottimizzando i cicli di rendering, Chrome 83 elimina lo spostamento del layout durante il precaricamento dei caratteri facoltativi. La combinazione con font-display: optional è il modo più efficace per garantire un rendering senza interruzioni dei caratteri personalizzati.

Come ottenere e gestire i file SXG utilizzando nginx e le sfide relative al precaricamento delle sottorisorse.

Come generare un certificato TLS con estensioni SXG, installare gli strumenti per la generazione di file SXG e configurare nginx per la pubblicazione di file SXG.

Utilizza query supporti per inviare immagini delle dimensioni necessarie, una tecnica comunemente nota come immagini adattabili.

In che modo altri dipartimenti possono contribuire a rendere più efficace il tuo progetto di ottimizzazione della velocità del sito web.

A partire da Chrome 81, gli scorrimenti rimangono agganciati quando il layout della pagina cambia. In altre parole, non devi più aggiungere listener di eventi per forzare il nuovo aggancio.

Scopri come gestire Signed Exchange (SXG) utilizzando Web Packager.

Utilizza l'evento beforeinstallprompt per offrire ai tuoi utenti un'esperienza di installazione in-app personalizzata e senza interruzioni.

L'API WebXR Hit Test è un miglioramento della realtà aumentata del web che ti consente di posizionare oggetti virtuali in una vista del mondo reale.

La realtà virtuale è apparsa sul Web con Chrome 79. Basato sull'API WebXR Device, questo lancio è la base sia per la realtà aumentata che per la realtà virtuale. Questo articolo è il secondo di una serie e incentrato sul loop di frame, la parte di una sessione XR in cui le immagini vengono mostrate a uno spettatore. Altri browser supporteranno presto l'API WebXR Device, tra cui Firefox Reality, Oculus Browser, Edge e il browser Helio di Magic Leap.

Se hai già utilizzato l'API WebXR Device, sarai felice di sapere che c'è molto poco da imparare. L'accesso a una sessione WebXR è sostanzialmente la stessa. L'esecuzione di un loop di frame è sostanzialmente la stessa. Le differenze riguardano le configurazioni che consentono di mostrare i contenuti in modo appropriato per la realtà aumentata.

Scopri in che modo Chrome sta investendo in una serie di strumenti open source per far progredire l'ecosistema JavaScript

Un'introduzione alle app web progressive (PWA) e ai tre pilastri che le distinguono dalle altre app web.

Le icone mascherabili sono un formato che offre maggiore controllo e consente alla tua app web progressiva di utilizzare icone adattive. Un'icona mascherabile può essere visualizzata perfettamente su tutti i dispositivi Android.

Come registrare i percorsi in Workbox in modo che la tua app web progressiva venga visualizzata nelle UI di condivisione a livello di sistema, insieme alle app specifiche della piattaforma.

È comune che una pagina o un'app non invii dati di analisi o altri dati nel momento in cui l'utente la chiude. I siti utilizzano una chiamata sincrona a XMLHttpRequest() per mantenere aperta la pagina o l'app fino a quando i relativi dati non vengono trasmessi al server. Compromette l'esperienza utente e ignora i modi migliori per salvare i dati. Chrome 80 implementa una recente modifica alle specifiche per risolvere questo problema.

I worker dei moduli semplificano lo sblocco del thread principale spostando il codice costoso in un thread in background mantenendo i vantaggi ergonomici e in termini di prestazioni dei moduli JavaScript standard.

Leggi gli ultimi sviluppi negli strumenti per la velocità, tra cui nuove metriche delle prestazioni, aggiornamenti a PageSpeed Insights e Chrome User Experience Report (CrUX) e approfondimenti derivanti dall'analisi dell'almanacco web dell'ecosistema web.

Scopri di più sul pattern di caricamento adattivo, su come implementarlo e su come Facebook, Tinder, eBay e altre aziende utilizzano il caricamento adattivo in produzione.

Il thread principale del browser è incredibilmente sovraccarico. Utilizzando i web worker per spostare il codice fuori dal thread principale, puoi migliorare notevolmente l'affidabilità e l'esperienza utente della tua app.

Commenti degli intervistati su varie tecniche di ottimizzazione delle immagini.

In questo codelab, imparerai a creare un server di notifiche push.

In che modo Next.js accelera le navigazioni con il pre-caricamento delle route e come personalizzarlo. In questo post scoprirai come funziona il routing in Next.js, come è ottimizzato per la velocità e come personalizzarlo in base alle tue esigenze.

Con l'API Web Share, le app web possono utilizzare le stesse funzionalità di condivisione fornite dal sistema delle app specifiche per la piattaforma. L'API Web Share consente alle app web di condividere link, testo e file con altre app installate sul dispositivo, proprio come le app specifiche della piattaforma.

Scopri i vantaggi e gli svantaggi del supporto di AMP nell'app Next.js AMP è un framework dei componenti web che garantisce un caricamento rapido delle pagine. Next.js offre il supporto integrato per AMP. Questa guida descrive brevemente in che modo

Next.js si occupa di molte ottimizzazioni nella tua app React, quindi non devi Next.js è un framework React con una serie di ottimizzazioni del rendimento integrate. L'idea principale dietro il framework è garantire che le applicazioni inizino e

Come velocizzare l'app Next.js con la suddivisione del codice e le strategie di caricamento intelligenti. Questo post illustra diversi tipi di suddivisione del codice e come utilizzare le importazioni dinamiche per velocizzare le app Next.js. Per

La realtà virtuale è apparsa sul Web con Chrome 79. Basato sull'API WebXR Devicer, questo lancio è la base sia per la realtà aumentata che per la realtà virtuale. Questo articolo è il primo di una serie, in cui vengono illustrati i concetti di base e viene spiegato come accedere a una sessione XR. Altri browser supporteranno presto l'API WebXR Device, tra cui Firefox Reality, Oculus Browser, Edge e il browser Helio di Magic Leap.

I siti ora possono contrassegnare esplicitamente i cookie per l'utilizzo tra siti. Scopri come eseguire il markup dei cookie per assicurarti che i cookie proprietari e di terze parti continuino a funzionare dopo l'implementazione di questa modifica.

Scopri come funzionano i cookie e cosa sono i cookie proprietari e di terze parti.

Scopri il valore degli annunci veloci e come valutarne la velocità.

Utilizza le notifiche push per coinvolgere gli utenti con aggiornamenti mirati e tempestivi.

In questo codelab, scopri come richiedere l'autorizzazione dell'utente e inviare notifiche.

In questo codelab, scopri come gestire le notifiche con un service worker.

Una procedura dettagliata per l'utilizzo di WebPageTest per identificare e risolvere i problemi di instabilità del layout.

I feature phone stanno tornando di moda e sono molto apprezzati, soprattutto nei mercati emergenti in cui il 2G è la norma. Ecco cosa abbiamo imparato dal caricamento rapido di PROXX, un clone di Minesweeper per dispositivi mobili, su cellulari 2G.

Sebbene siano utili, le variabili CSS sono difficili da lavorare perché possono assumere qualsiasi valore ed essere sostituite e non puoi utilizzare le transizioni con esse. Il livello 1 dell'API Proprietà e valori CSS risolve questi problemi.

Scopri come velocizzare le navigazioni future precaricando le risorse.

Il contenuto misto si verifica quando l'HTML iniziale viene caricato tramite una connessione HTTPS sicura, mentre altre risorse vengono caricate tramite una connessione HTTP non sicura.

Scopri come correggere gli errori di contenuti misti sul tuo sito web per proteggere gli utenti e garantire che tutti i contenuti vengano caricati.

Le ricerche dimostrano che i video sul web generano un maggiore coinvolgimento e vendite. Anche se non hai ancora aggiunto video ai tuoi siti, è solo questione di tempo prima di farlo.

Una dimostrazione interattiva di come specificare l'icona da visualizzare nelle schermate Home di iOS.

Al giorno d'oggi la piattaforma web è molto matura per lo sviluppo di giochi. La chiave per creare un moderno gioco web è adottare le best practice relative alla progettazione e alla monetizzazione dei giochi. Questo post fornisce indicazioni in merito a questo obiettivo.

Le architetture multiorigine presentano molte sfide durante la creazione delle PWA. Scopri gli utilizzi positivi e negativi di più origini e alcune soluzioni alternative per creare PWA in siti multiorigine.

Questo post spiega come caricare caratteri web per evitare variazioni del layout e pagine vuote quando i web font non sono disponibili al caricamento della pagina.

Questo post spiega come ridurre le dimensioni dei web font che utilizzi sul tuo sito, in modo che una tipografia corretta non implichi un sito lento.

Scopri come creare applicazioni progressive Angular installabili.

Scopri come migliorare i tempi di caricamento e l'esperienza utente evitando le insidie comuni degli script di terze parti.

Valuta la possibilità di utilizzare una CDN immagine per ottimizzare le immagini del tuo sito e ridurre il costo dei dati per gli utenti.

Scopri come utilizzare Lighthouse e Chrome DevTools per identificare le risorse di terze parti lente.

Questo post descrive i tipi comuni di JavaScript di terze parti e i problemi di prestazioni che possono causare. Fornisce inoltre indicazioni generali su come ottimizzare gli script di terze parti.

Scopri le tecniche per ottimizzare le risorse di terze parti lente con l'aiuto di Lighthouse.

Le nuove funzionalità della piattaforma web semplificano la creazione di elementi personalizzati che funzionano come controlli dei moduli integrati.

Scopri gli hint relativi alle risorse rel=preconnect e rel=dns-prefetch e come utilizzarli.

Scopri come aggiungere effetti di sfondo, come la sfocatura e la trasparenza, agli elementi dell'interfaccia utente sul Web utilizzando la proprietà del filtro dello sfondo CSS.

stale-while-revalidate aiuta gli sviluppatori a trovare un equilibrio tra l'immediatezza, il caricamento immediato dei contenuti memorizzati nella cache, e l'aggiornamento, assicurando che gli aggiornamenti ai contenuti memorizzati nella cache vengano utilizzati in futuro.

Scopri come rendere più reattivi elenchi di grandi dimensioni implementando lo scorrimento virtuale con il kit di sviluppo dei componenti Angular.

Scopri come ottimizzare il rilevamento delle modifiche della tua app Angular per renderla più reattiva.

Scopri come utilizzare le strategie di precaricamento di Angular per app più veloci.

La suddivisione del codice consente di velocizzare le applicazioni, ma potrebbe rallentare la navigazione successiva. Il precaricamento predittivo è un modo efficiente di utilizzare l'analisi dei dati per precaricare in modo intelligente ciò che l'utente probabilmente utilizzerà successivamente, ottimizzando l'utilizzo della rete.

Scopri come utilizzare l'API Network Information per adattare i tuoi contenuti alla qualità della rete.

Scopri come rendere accessibile la tua applicazione Angular utilizzando codelyzer.

Scopri come utilizzare i budget delle prestazioni direttamente nell'interfaccia a riga di comando Angular.

Scopri come utilizzare il service worker Angular per pre-memorizzare nella cache le risorse statiche nella tua app.

Molti dispositivi ora supportano l'esperienza con la modalità Buio o il tema scuro del sistema operativo. Questo post spiega in che modo la modalità Buio può essere supportata nelle pagine web, elenca le best practice e introduce un elemento personalizzato denominato modalità Buio che consente agli sviluppatori web di offrire agli utenti un modo per ignorare la preferenza a livello di sistema operativo su pagine web specifiche.

Scopri come rendere la tua applicazione Angular più veloce, affidabile, rilevabile, installabile e accessibile.

Scopri come ridurre le dimensioni dell'app bundle iniziale utilizzando la suddivisione del codice a livello di route.

Utilizza srcset per scegliere automaticamente le dimensioni dell'immagine corrette.

Questo post riassume un discorso sullo stato dei componenti web nel 2019, tenuto da Kevin Schaaf del Polymer Project e Caridy Patiño di Salesforce.

Lighthouse ora supporta i budget delle prestazioni. Questa funzione, LightWallet, può essere configurata in meno di cinque minuti e fornisce un'indicazione delle dimensioni e della quantità di risorse della pagina.

Dimostrare le entrate generate dai miglioramenti del sito escludendo i fattori esterni come le campagne di marketing.

Dal lancio dell'API Payment Request in Chrome 53 e dell'API Payment Handler in Chrome 68, sono state apportate alcune modifiche alle rispettive specifiche. Questo post riassume questi aggiornamenti e continuerà ad accumulare le modifiche all'API.

Le app web progressive sono facili da installare grazie a un nuovo pulsante di installazione nella barra degli indirizzi di Chrome (omnibox).

Scopri quale impatto ha il rendimento del sito web sulle diverse fasi della canalizzazione di e-commerce

Lavorare con i service worker è nuovo e non familiare per molti sviluppatori web. Questo post fornisce alcuni suggerimenti per comprendere meglio queste attività.

Come promuovere l'installazione di app web progressive e best practice.

Come promuovere l'installazione di app web progressive e best practice.

Le immagini occupano una quantità significativa di spazio visivo e costituiscono la maggior parte dei byte scaricati su un sito web. Utilizza le nuove norme relative alle funzionalità per identificare le immagini di grandi dimensioni.

Scopri come utilizzare Critical per estrarre e incorporare CSS critici e migliorare i tempi di rendering.

Impara a diagnosticare interazioni degli utenti costose e che impediscono il lavoro.

Scopri come migliorare i tempi di rendering con una tecnica CSS critica e come scegliere lo strumento migliore per il tuo progetto.

In occasione della conferenza Google I/O 2019, abbiamo presentato tre nuove iniziative relative alle prestazioni web che speriamo porteranno a migliori esperienze utente per tutti.

PROXX come gioco simile a Campo minato creato come PWA. Funziona su una vasta gamma di dispositivi e migliora progressivamente l'aspetto visivo in base alle capacità del dispositivo.

Non sarebbe bello se gli utenti potessero effettuare ricerche sul tuo sito utilizzando la loro fotocamera?

Scopri come contrassegnare i cookie per l'utilizzo da parte di proprietari e di terze parti con l'attributo SameSite. Puoi migliorare la sicurezza del tuo sito utilizzando i valori Lax e Strict di SameSite per migliorare la protezione dagli attacchi CSRF. Se specifichi il nuovo attributo None, puoi contrassegnare in modo esplicito i cookie per l'utilizzo tra siti.

L'API Portals appena proposta ti aiuta a mantenere semplice il tuo front-end, consentendo al contempo navigazioni senza interruzioni con transizioni personalizzate. In questo articolo, fai un'esperienza pratica con l'utilizzo dei portali per migliorare l'esperienza utente sul tuo sito.

Utilizza l'API Network Information per adattare gli asset mostrati agli utenti in base alla qualità della connessione.

In questo codelab, scopri come la compressione Brotli può ridurre ulteriormente i rapporti di compressione e le dimensioni complessive della tua app.

In occasione di Google I/O 2019, i membri del team web.dev hanno inviato una serie di aggiornamenti, tra cui un design rinnovato, altri documenti su Lighthouse e un blog completamente nuovo.

Le prestazioni reali sono altamente variabili a causa delle differenze a livello di dispositivi degli utenti, connessioni di rete e altri fattori. In questo post esploriamo gli strumenti che possono aiutarti a raccogliere dati di prova controllati o reali per valutare le prestazioni delle pagine.

La velocità è importante, ma cosa intendiamo esattamente? Che cosa significa avere un sito veloce?

I brand che ottimizzano la velocità spesso registreranno rapidamente. In questo post illustreremo come garantire un'esperienza rapida.

reagire-axe è una libreria che controlla un'applicazione React e registra eventuali problemi di accessibilità nella console Chrome DevTools. eslint-plugin-jsx-a11y è un plug-in ESLint che identifica e applica una serie di regole di accessibilità direttamente in JSX. L'utilizzo combinato può fornire un approccio di controllo completo per individuare e risolvere eventuali problemi di accessibilità nella tua applicazione.

Crea app React include un manifest di app web per impostazione predefinita. Modificando questo file potrai cambiare il modo in cui la tua applicazione viene visualizzata quando è installata sul dispositivo dell'utente.

reagire-window è una libreria che consente di visualizzare in modo efficiente elenchi di grandi dimensioni.

React è una libreria open source che semplifica la creazione di UI. Questo percorso di apprendimento tratterà all'interno dell'ecosistema di API e strumenti diversi che dovresti prendere in considerazione per migliorare le prestazioni e l'usabilità della tua applicazione.

Workbox è integrata nell'app Create React con una configurazione predefinita che memorizza nella cache tutti gli asset statici nell'applicazione per ogni build.

Il metodo React.lazy semplifica la suddivisione del codice di un'applicazione React a livello di componente utilizzando le importazioni dinamiche. Utilizzala insieme al messaggio Suspense per mostrare agli utenti gli stati di caricamento appropriati.

reagire-snap è una libreria di terze parti che esegue il pre-rendering delle pagine del tuo sito in file HTML statici. Questo può migliorare i tempi di First Paint nell'applicazione.

In questo codelab, scopri come migliorare le prestazioni di una pagina precaricando e precaricando le risorse.

La query supporti di movimento prefers-ridotto rileva se l'utente ha richiesto che il sistema riduca al minimo la quantità di animazioni o movimenti utilizzati. Si rivolge agli utenti che richiedono o preferiscono animazioni ridotte. ad esempio, le persone con disturbi vestibolari preferiscono spesso che le animazioni siano limitate al minimo.

Scopri come rimandare il CSS non fondamentale con l'obiettivo di ottimizzare il percorso di rendering critico e migliorare la prima visualizzazione con contenuti (FCP).

L'osservatore di incroci v2 aggiunge la capacità non solo di osservare gli incroci in sé, ma anche di rilevare se l'elemento che si interseca era visibile al momento dell'intersezione.

Crea siti che rispondano alle esigenze e alle funzionalità del dispositivo su cui vengono visualizzati.

I fogli di stile costruibili offrono un modo semplice per creare e distribuire stili ai documenti o alle radici ombreggiate senza doversi preoccupare del FOUC.

Consigli per implementare la logica e il rendering nelle app.

Il modo migliore per tenere d'occhio il budget del rendimento è automatizzarlo. Scopri come scegliere lo strumento più adatto alle tue esigenze e alla tua configurazione attuale.

Definisci i budget per le prestazioni con una configurazione minima e applicali come parte del tuo flusso di lavoro di sviluppo utilizzando la dimensione dei pacchetti con Travis CI.

Scopri come impostare budget delle prestazioni e tenere sotto controllo le dimensioni del pacchetto con webpack.

Hai lavorato sodo per essere veloce, ora assicurati di essere veloce automatizzando i test delle prestazioni in Travis CI con Lighthouse Bot.

Come fai a integrare WebAssembly in questa configurazione? In questo articolo, lo risolveremo prendendo come esempio C/C++ ed Emscripten.

L'API getinstalledRelatedApps() è un'API della piattaforma web che ti consente di verificare se la tua app iOS/Android/desktop o PWA è installata sul dispositivo dell'utente.

In questo codelab, scopri come migliorare le prestazioni di un'applicazione minimizzando la quantità di codice transpilato.

I client hint sono un insieme di intestazioni di richieste HTTP che possiamo utilizzare per modificare il modo in cui forniamo le risorse delle pagine in base alle caratteristiche del dispositivo e della connessione di rete di un utente. Questo articolo fornisce informazioni dettagliate sui suggerimenti per i clienti, sul loro funzionamento e su alcune idee su come utilizzarli per rendere il sito più veloce per gli utenti.

L'indicatore di messa a fuoco (spesso indicato da un "anello di messa a fuoco) identifica l'elemento attualmente attivo. Per gli utenti che non possono utilizzare il mouse, questo indicatore è estremamente importante, in quanto funge da sostituto del puntatore del mouse.

Utilizzando gli elementi HTML semantici corretti, potresti essere in grado di soddisfare la maggior parte o tutte le tue esigenze di accesso da tastiera. Ciò significa meno tempo per modificare il valore tabindex e utenti più soddisfatti.

Affinché uno screen reader presenti un'interfaccia utente vocale, gli elementi significativi devono avere etichette o alternative di testo appropriate. Un'alternativa di etichetta o testo assegna a un elemento il suo nome accessibile, una delle proprietà chiave per esprimere la semantica dell'elemento nell'albero dell'accessibilità.

Molti utenti diversi si affidano alla tastiera per navigare tra le applicazioni, da utenti con disabilità motorie temporanee e permanenti a utenti che utilizzano scorciatoie da tastiera per essere più efficienti e produttivi. Una buona strategia di navigazione da tastiera per l'applicazione crea un'esperienza migliore per tutti.

Gli elementi HTML standard hanno l'accessibilità della tastiera integrata. Quando crei componenti interattivi personalizzati, usa Tabindex per assicurarti che siano accessibili dalla tastiera.

Utilizzando gli elementi corretti per intestazioni e punti di riferimento, puoi migliorare notevolmente l'esperienza di navigazione per gli utenti della tecnologia assiale.

Ti sei mai chiesto come le tecnologie per la disabilità, come uno screen reader, sanno cosa annunciare agli utenti? La risposta è che queste tecnologie si basano sugli sviluppatori che eseguono il markup delle loro pagine con HTML semantico. Ma che cos'è la semantica e come le usano gli screen reader?

Un sito accessibile è un sito i cui contenuti sono accessibili indipendentemente dalla disabilità dell'utente e la cui funzionalità può essere gestita anche da una gamma più diversificata di utenti.

In questo codelab, scopri come inerpretare il traffico di rete usando Chrome DevTools.

Hai mai visto una GIF animata su un servizio come Imgur o Gfycat, l'hai ispezionata nei tuoi strumenti di sviluppo per scoprire che la GIF era davvero un video? Esiste un buon motivo per questo. Le GIF animate possono essere davvero enormi. Grazie alla conversione di GIF di grandi dimensioni in video, puoi risparmiare notevolmente sulla larghezza di banda degli utenti.

Per difendersi dagli attacchi, uno sviluppatore deve mitigare le vulnerabilità e aggiungere funzionalità di sicurezza a un'applicazione. Fortunatamente, sul Web, il browser offre molte funzionalità di sicurezza, tra cui l'idea di una "sandbox".

In questo codelab, scopri come utilizzare imagemin con webpack per ottimizzare le immagini JPEG e PNG e velocizzare il download.

Quando ti viene in mente la parola "sicurezza", di solito è nel contesto di cattive notizie. Ma la sicurezza è una parte da considerare una parte positiva e necessaria dello sviluppo web, proprio come l'"esperienza utente" o l'"accessibilità".

In questo codelab, scopri come migliorare le prestazioni di una semplice applicazione attraverso la suddivisione del codice.

Un buon rendimento è raramente un effetto collaterale. Scopri i budget delle prestazioni e come possono aiutarti a raggiungere i tuoi obiettivi.

In questo codelab, scopri come pubblicare immagini con le dimensioni corrette per migliorare le prestazioni della rete.

Ci siamo passati tutti: hai dimenticato di ridimensionare un'immagine prima di aggiungerla alla pagina. L'immagine sembra a posto, ma spreca i dati degli utenti e influisce negativamente sulle prestazioni della pagina.

In questo codelab, scopri come funziona il criterio della stessa origine quando accedi ai dati all'interno di un iframe.

Le immagini non compresse gonfiano le pagine di byte inutili. Esegui Lighthouse per verificare se ci sono opportunità per migliorare il caricamento delle pagine comprimendo le immagini.

Il criterio della stessa origine del browser blocca la lettura di una risorsa da un'origine diversa per motivi di sicurezza. L'attivazione di CORS consente al server di indicare al browser che può utilizzare un'origine aggiuntiva.

In questo codelab, scopri come rendere affidabile un'applicazione registrando un service worker.

In questo codelab, scopri come controllare il comportamento della memorizzazione nella cache delle risorse utilizzando le intestazioni HTTP.

PRPL è un acronimo che descrive un pattern utilizzato per caricare le pagine web e diventare interattive e interattive. In questa guida scoprirai in che modo ognuna di queste tecniche si integra perfettamente, ma può comunque essere utilizzata in modo indipendente per ottenere risultati in termini di rendimento.

In questo codelab, scopri come visualizzare immediatamente il testo utilizzando Font Face Annotar.

In questo codelab, scopri come utilizzare l'attributo dimensioni per ridimensionare le immagini correttamente in base all'area visibile dell'utente.

In questo codelab, scopri come pubblicare immagini ottimizzate utilizzando WebP.

In questo codelab, scopri come migliorare le prestazioni di un'applicazione rimuovendo le dipendenze inutilizzate e non necessarie.

Assicurati che il tuo sito si carichi rapidamente con una guida passo passo alla definizione delle soglie per le metriche di rendimento significative per il tuo sito.

Le immagini WebP sono più piccole rispetto alle controparti JPEG e PNG, solitamente con una riduzione del 25-35% delle dimensioni dei file. Questa opzione riduce le dimensioni delle pagine e migliora il rendimento.

Workbox è un toolkit di service worker di alto livello basato sulle API Service Worker e Cache Storage. Fornisce un set di librerie pronto per la produzione per aggiungere il supporto offline alle app web.