Articoli
Ottimizza le attività lunghe
Ti è stato detto di "non bloccare il thread principale" e di "interrompere le tue attività lunghe", ma cosa significa fare quelle cose?
Configurare un metodo di pagamento
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.
Precarica i moduli
Il precaricamento dei moduli offre un modo per caricare preventivamente i moduli JavaScript in modo dichiarativo.
Misurare la compilazione automatica del browser nei tuoi moduli
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.
Parte 2: crea un sistema di rilevamento della tossicità basato sull'IA lato client
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.
Parte 1: IA lato client per combattere la tossicità online
"Proteggi i tuoi utenti e crea un ambiente online più sicuro con il rilevamento di contenuti dannosi. Nella prima parte, condividiamo il contesto necessario per implementare l'IA al fine di ridurre la tossicità alla fonte: le tastiere degli utenti."
Tempo di blocco totale (TBT)
Questo post descrive la metrica Tempo di blocco totale (TBT) e spiega come misurarla
Web Vitals
Metriche essenziali per un sito sano
I modi più efficaci per migliorare i Core Web Vitals
Una raccolta di best practice che Chrome ha identificato come le maggiori opportunità per ottimizzare le prestazioni web e migliorare Core Web Vitals
Iniziare a misurare i Segnali web
Scopri come misurare i Segnali web del tuo sito in ambienti reali e di laboratorio.
Ottimizza visualizzazione elemento Largest Contentful
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 proprietà CSS content-visibility è ora disponibile come riferimento.
Confrontare la funzionalità LLM con il riepilogo
Valutare i risultati di diversi modelli e prompt utilizzando l'LLM come tecnica di giudice. Invece di fare affidamento sul giudizio umano, la convalida del modello viene delegata a un altro LLM.
Come sono state definite le soglie delle metriche di Core Web Vitals
La ricerca e la metodologia alla base delle soglie dei Segnali web essenziali
Diagnostica manuale delle interazioni lente nel lab
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.
Flussi di lavoro di Segnali web essenziali con gli strumenti Google
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.
Baseline
Questo articolo spiega la storia di Baseline, il coinvolgimento di Google e la proprietà del gruppo della community WebDX.
Cache back-forward
Scopri come ottimizzare le tue pagine per i caricamenti istantanei quando utilizzi i pulsanti Avanti e Indietro del browser.
Il nidificazione CSS migliora con CSSNestedDeclarations
La nidificazione CSS sta migliorando notevolmente.
Prestazioni del debug sul campo
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
First Input Delay (FID)
Questo post introduce la metrica First Input Delay (FID) e spiega come misurarla
Benchmarking del rendimento della proprietà @CSS
Che impatto ha @property sul rendimento del CSS?
Migliora le prestazioni e l'esperienza utente per l'IA lato client
Scopri i vantaggi dell'IA lato client, tra cui bassa latenza, costi lato server ridotti, nessun requisito di chiavi API, maggiore privacy degli utenti e accesso offline.
Correlare i Core Web Vitals e le entrate pubblicitarie con gli strumenti Google
Scopri come utilizzare gli strumenti Google per correlare Core Web Vitals alle entrate pubblicitarie.
È ora di eseguire il caricamento lento degli iframe fuori schermo.
Questo post spiega l'attributo di caricamento e come utilizzarlo per controllare il caricamento degli iframe.
Spazio di archiviazione per il Web
Sono disponibili molte opzioni diverse per l'archiviazione dei dati nel browser. Qual è il più adatto alle tue esigenze?
Il protocollo Web 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.
Creare più applicazioni web progressive nello stesso dominio
Scopri i modi consigliati e non consigliati per creare più PWA riutilizzando lo stesso dominio con i relativi pro e contro.
Modalità di gestione degli aggiornamenti del file manifest dell'app web in Chrome
Cosa serve per modificare icone, scorciatoie, colori e altri metadati nel file manifest dell'app web per la tua PWA.
Cosa serve per essere installabile?
Criteri di installabilità delle app web progressive.
Quali sono le caratteristiche di una buona app web progressiva?
Quali sono le caratteristiche di un'app web progressiva di qualità o di qualità?
Aggiungi un file manifest di un'app web
Il file manifest dell'app web è un semplice file JSON che indica al browser come dovrebbe comportarsi l'app web.
Mitiga il cross-site scripting (XSS) applicando un criterio di sicurezza del contenuto (CSP) rigoroso.
Scopri come eseguire il deployment di un CSP basato su nonce o hash di script come difesa in profondità contro il cross-site scripting.
Accesso a dispositivi hardware sul Web
Questo articolo aiuta gli sviluppatori web a scegliere l'API hardware giusta in base a un determinato dispositivo.
Consenti il riutilizzo delle passkey sui tuoi siti con richieste di origini correlate
Scopri come utilizzare le richieste di origine correlata per consentire il riutilizzo delle passkey nei tuoi siti.
Caricamento lento delle immagini a livello di browser per il Web
Questo post illustra l'attributo di caricamento e come può essere utilizzato per controllare il caricamento delle immagini.
Scegli il formato dell'immagine corretto
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.
Metriche personalizzate
Le metriche personalizzate ti consentono di misurare e ottimizzare gli aspetti dell'esperienza del tuo sito unici per il tuo sito.
Misura ed esegui il debug del rendimento con Google Analytics 4 e BigQuery
Scopri come inviare i dati di Web Vitals alle proprietà Google Analytics 4 ed esportarli per l'analisi in BigQuery e Looker Studio.
Best practice per le autorizzazioni web
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.
Best practice per le notifiche sui cookie
Scopri in che modo le notifiche relative ai cookie influiscono sul rendimento, sulla misurazione del rendimento e sull'esperienza utente.
Personalizza le notifiche multimediali e i controlli di riproduzione con l'API Media Session
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.
Trova interazioni lente sul campo
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.
Utilizzare tabindex
Utilizza l'attributo tabindex per impostare esplicitamente la posizione della scheda di un elemento.
Tempo per primo byte (TTFB)
Questo post presenta la metrica Time to First Byte (TTFB) e spiega come misurarla.
Ingegneria pratica del prompt per LLM più piccoli
Scopri come regolare i prompt per ottenere i tuoi risultati preferiti su modelli LLM, dimensioni e modelli diversi.
Ottimizza il tempo per il primo byte
Scopri come eseguire l'ottimizzazione in base alla metrica Time to First Byte.
Interaction to Next Paint (INP)
Questo post presenta la metrica Interaction to Next Paint (INP), spiega come funziona e come misurarla, oltre a offrire suggerimenti su come migliorarla.
Colori CSS dipendenti dallo schema di colori con light-dark()
descrizione: definisci i colori che reagiscono allo schema di colori utilizzato con la funzione light-dark().
Pattern delle prestazioni di WebAssembly per le app web
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.
Layout griglia animati CSS
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.
Gioca a Dino di Chrome con il tuo gamepad
Scopri come controllare i giochi web con l'API Gamepad.
L'attributo inerte
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à.
Che cos'è l'intelligenza artificiale?
L'acronimo AI viene spesso utilizzato in modo intercambiabile per rappresentare i vari tipi di tecnologie che compongono il campo dell'IA.
Conosci il team di IA di Web.dev
Conosci il team degli autori delle tecnologie e delle relazioni con gli sviluppatori.
Esegui l'upgrade della ricerca sul sito: risposte contestuali con l'IA generativa
Esistono numerose considerazioni etiche relative all'uso degli strumenti di IA e alla generazione di nuovi contenuti.
Etica e IA
Esistono numerose considerazioni etiche relative all'uso degli strumenti di IA e alla generazione di nuovi contenuti.
Determina il provider di passkey con AAGUID
Le parti affidabili possono determinare la provenienza della passkey esaminando AAGUID. Scopri come funziona.
Compilazione e ottimizzazione di Wasm con Binaryen
Utilizzando l'esempio di un linguaggio giocattolo sintetico chiamato ExampleScript, scopri come scrivere e ottimizzare moduli WebAssembly in JavaScript utilizzando l'API Binaryen.js.
Acquisisci audio e video in HTML5
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.
Il componente web <model-viewer>
Il componente web <model-viewer> ti consente di utilizzare modelli 3D su una pagina web in modo dichiarativo.
Approfondimento su user Verification
Scopri come utilizzare "userVerification" in WebAuthn
Perché i dati CrUX sono diversi da quelli RUM?
Scopri i motivi per cui i dati RUM possono mostrare valori di Segnali web essenziali diversi da quelli di CrUX.
Accessibilità per gli sviluppatori web
È 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.
Carica JavaScript di terze parti
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.
Largest Contentful Paint (LCP)
Questo post presenta la metrica Largest Contentful Paint (LCP) e spiega come misurarla
Impedisci la creazione di una nuova passkey se ne esiste già una
Scopri come impedire la creazione di una nuova passkey se ne esiste già una nel gestore delle password dell'utente.
Utilizza IndexedDB
Una guida alle nozioni di base su IndexedDB.
5 snippet CSS che ogni sviluppatore front-end dovrebbe conoscere nel 2024
CSS affidabile, potente e stabile al primo posto.
Quali sono le parti di un URL?
Qual è la differenza tra host, sito e origine? Che cos'è un eTLD+1? Questo articolo spiega.
Approfondimento sulle credenziali rilevabili
Scopri cosa sono le credenziali rilevabili e come creare esperienze utente adatte al tuo caso d'uso.
Prestazioni di rendering
Gli utenti notano se siti e app non funzionano correttamente, quindi ottimizzare le prestazioni del rendering è fondamentale.
RidimensionaObservationr: è come document.onresize per gli elementi
"RidimensionaObservationr" ti avvisa quando il rettangolo dei contenuti di un elemento cambia dimensione, in modo che tu possa reagire di conseguenza.
Ottimizza la codifica e le dimensioni di trasferimento degli asset basati su testo
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.
OffscreenCanvas: velocizza le operazioni del canvas con un worker web
Questo documento spiega come utilizzare l'API OffscreenCanvas per ottenere miglioramenti delle prestazioni durante il rendering delle immagini nella tua app web.
First Contentful Paint (FCP)
Questo post presenta la metrica First Contentful Paint (FCP) e spiega come misurarla
Reti CDN (Content Delivery Network)
Questo articolo fornisce una panoramica completa delle reti CDN (Content Delivery Network). Spiega, inoltre, come scegliere, configurare e ottimizzare una configurazione CDN.
Cosa favorisce una buona esperienza di uscita?
Indicazioni pratiche per gli sviluppatori su cosa fare quando un utente si disconnette dal sito web.
Tempo all'interattività (TTI)
Questo post presenta la metrica Tempo all'interattività (TTI) e spiega come misurarla
Ottimizza il caricamento delle risorse con l'API Fetch Priority
L'API Fetch Priority indica la priorità relativa delle risorse rispetto al browser. Può consentire un caricamento ottimale e migliorare i Segnali web essenziali.
Le pseudo-classi :user-valid e :user-invalid
Informazioni sulle pseudo-classi :user-valid e :user-invalid e su come utilizzarle per migliorare l'esperienza utente della convalida dell'input.
Ottimizza Core Web Vitals per i responsabili delle decisioni aziendali
Scopri in che modo i responsabili delle decisioni aziendali e i non sviluppatori possono migliorare i Segnali web essenziali.
Le sfumature delle stringhe di codifica Base64 in JavaScript
Comprendi ed evita i problemi comuni relativi all'applicazione della codifica e decodifica Base64 alle stringhe.
Griglia CSS
La griglia consente la condivisione della griglia, consentendo l'allineamento delle griglie nidificate ai predecessori e ai livelli di pari livello.
Caricare efficacemente gli annunci senza influire sulla velocità delle pagine
Nel mondo digitale di oggi, la pubblicità online è una parte fondamentale del Web senza costi che piace a tutti. Tuttavia, gli annunci implementati in modo errato possono rallentare l'esperienza di navigazione, frustrare gli utenti e diminuire il coinvolgimento. Scopri come caricare efficacemente gli annunci senza influire sulla velocità delle pagine, garantendo un'esperienza utente fluida e massimizzando le opportunità di profitto per i proprietari di siti web.
Quattro tipi comuni di copertura del codice
Scopri cos'è la copertura del codice e i quattro modi comuni per misurarla.
Testare o meno, una prospettiva tecnica
Determina gli elementi da testare e quelli da escludere.
Definizione di scenari di test e priorità
Stabilisci gli elementi da testare, definisci gli scenari di test e dai priorità.
Metriche sul rendimento incentrate sull'utente
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.
Precarica le immagini adattabili
Scopri le nuove ed entusiasmanti possibilità di precaricamento delle immagini adattabili al fine di garantire un'esperienza utente ottimale.
Adattare gli aspetti tipografici alle preferenze degli utenti con i CSS
Un metodo per adattare un carattere alle preferenze degli utenti, in modo che possano leggere i tuoi contenuti al massimo.
Piramide o granchio? Trova una strategia di test adatta
Scopri come combinare diversi tipi di test in una strategia ragionevole che si adatti al tuo progetto.
Tre tipi comuni di automazione dei test
Iniziamo dalle basi. Esplorazione delle due modalità di test generali e dei tre tipi comuni di automazione dei test.
Eliminazione dei download non necessari
Dovresti controllare periodicamente le risorse per assicurarti che ciascuna contribuisca a offrire un'esperienza utente migliore.
Che cos'è WebAssembly e da dove viene?
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.
Compilazione di mkbitmap in WebAssembly
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.
Il file system privato di origine
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
Hosting sicuro dei dati utente nelle moderne applicazioni web
Come visualizzare in modo sicuro i contenuti controllati dagli utenti su applicazioni web.
Implementazione di AVIF per siti web più reattivi
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.
Ottimizza l'interazione con la prossima visualizzazione
Scopri come ottimizzare l'interazione con Next Paint del tuo sito web.
Funzionalità di riferimento che puoi usare oggi
Scopri alcune delle funzionalità che fanno parte di Baseline.
Valutazione degli script e attività lunghe
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.
Rendering lato client di HTML e interattività
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.
Ottimizza ritardo input
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.
In che modo le dimensioni DOM di grandi dimensioni influiscono sull'interattività e che cosa puoi fare a riguardo
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.
Ottimizza Cumulative Layout Shift
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.
Utilizzare l'estensione Web Vitals per eseguire il debug dei problemi relativi ai Segnali web essenziali
L'estensione Web Vitals ora mostra ulteriori informazioni di debug per aiutarti a identificare le cause principali dei problemi relativi a Segnali web essenziali.
Crea esperienze WordPress nel browser con WordPress Playground e WebAssembly
L'intero WordPress basato su PHP in esecuzione esclusivamente nel browser con WebAssembly
Cumulative Layout Shift (CLS)
Questo post presenta la metrica Cumulative Layout Shift (CLS) e spiega come misurarla.
Nuove funzionalità per gli sviluppatori offerte da WebAssembly
Una presentazione degli strumenti ora disponibili sul web grazie a WebAssembly.
Che cosa sono le mappe di origine?
Migliora l'esperienza di debug web con le mappe di origine.
PWA negli store
Le app web progressive possono essere inviate ad app store come il Play Store Android o Microsoft Store e altri ancora.
6 snippet CSS che ogni sviluppatore front-end dovrebbe conoscere nel 2023
CSS affidabile, potente e stabile al primo posto.
Funzioni trigonometriche in CSS
Calcola il seno, il coseno, la tangente e altro in CSS.
Esegui operazioni efficienti per frame video sul video con requestVideoFrameCallback()
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.
In evidenza per la community GDE: Lars Knudsen
Una serie di interviste con i membri del programma Google Developers Interop (GDE).
Nuovi pattern per le app multimediali
Questo post del blog annuncia una nuova raccolta di pattern per le app multimediali.
Suggerimento CSS veloce. Testo sfumatura animato
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": Aggiungiamo un
Creo Chrometober!
Come ha preso vita il libro a scorrimento grazie alla condivisione di suggerimenti e trucchi divertenti e paurosi su questa Chrome.
Creazione di un componente della descrizione comando
Una panoramica di base su come creare un elemento personalizzato con descrizione comando adattabile e accessibile al colore.
Crea una passkey per gli accessi senza password
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.
Accedere con una passkey tramite la compilazione automatica dei moduli
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.
Creazione di un componente Pulsante di azione floating (FAB)
Una panoramica fondamentale su come creare componenti FAB adattabili al colore, reattivi e accessibili.
Best practice per i caratteri
Scopri come ottimizzare i caratteri web per i Segnali web essenziali.
Test del contrasto colore di Web Design
Una panoramica di tre strumenti e tecniche per testare e verificare il contrasto cromatico accessibile del tuo progetto.
In evidenza per la community GDE: Alba Silvente Fuentes
Una serie di interviste con i membri del programma Google Developers Interop (GDE).
Suggerimento CSS veloce. Caricatore animato
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
Creare la navigazione principale di un sito web
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.
È :modal?
Questo pratico pseudo-selettore CSS offre un modo per selezionare elementi modali.
Stili elenco creatività
Ecco alcuni modi utili e creativi per definire un elenco.
Creazione di un'illusione a griglia storta
Una divertente esplorazione dei modi per ricreare un'illusione ottica con CSS.
Best practice per tag e gestori tag
Ottimizza tag e tag manager per Core Web Vitals.
In che modo Nordhealth utilizza proprietà personalizzate nei componenti web
Vantaggi dell'utilizzo di proprietà personalizzate nei sistemi di progettazione e nelle librerie dei componenti.
Controllo più granulare sulle trasformazioni CSS con proprietà di trasformazione individuali
Scopri come utilizzare le singole proprietà CSS di traslazione, rotazione e scalabilità per affrontare le trasformazioni in modo intuitivo.
Animazioni dei bordi CSS
Vediamo diversi modi per animare un bordo in CSS
Scopri in che modo la BBC sta implementando HSTS per migliorare la sicurezza e le prestazioni.
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.
Perché i dati di prova controllati e sul campo possono essere diversi (e cosa fare al riguardo)
Scopri perché gli strumenti che monitorano le metriche di Segnali web essenziali possono indicare numeri diversi e come interpretare tali differenze.
Una situazione vantaggiosa per tutti
La GDE Enrique Fernandez Guerra sull'open sourcing della sua ONG HelpDev.
La fine di Internet Explorer
Cosa comportava l'interruzione del supporto di Internet Explorer per i clienti e gli sviluppatori di Maersk.com.
Addio a HTML5Rocks
Per quanto tempo HTML5Rocks, è stato bello conoscerti.
Ricette di biscotti originali
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.
Sincronizzare la riproduzione di audio e video sul Web
L'API Web Audio consente di ottenere correttamente la sincronizzazione AV.
Utilizza gradienti conici per creare un bordo freddo
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
Differenza tra librerie e framework JavaScript
Comprendi le differenze tra framework e librerie nel contesto di un ambiente JavaScript lato client.
Implementa la gestione degli errori durante l'utilizzo dell'API Fetch
Rilevamento di errori durante l'utilizzo dell'API Fetch.
Scegli una libreria o un framework JavaScript
Comprendere le decisioni in merito all'utilizzo di una libreria o di un framework JavaScript.
Guida al terminale per gli sviluppatori front-end
Questa risorsa può aiutarti a orientarti rapidamente all'interno del terminale.
Un'API per caratteri web accattivanti e veloci
Un aggiornamento sull'API CSS di Google Fonts: come funziona, come usarla e come può pubblicare in modo efficiente i tuoi caratteri web.
GOV.UK elimina jQuery dal front-end.
GOV.UK ha eliminato la dipendenza jQuery dal front-end. Non indovinerai mai cosa è successo. (Sì.)
Creazione di un componente di un pulsante
Una panoramica di base su come creare componenti adattabili al colore, adattabili e accessibili.
Non combattere lo scanner di precaricamento del browser
Scopri cos'è lo scanner di precaricamento del browser, in che modo migliora le prestazioni e come puoi evitare di intralciarlo.
Best practice per la misurazione dei Segnali web sul campo
Come misurare i Segnali web con il tuo attuale strumento di analisi
Annullare le distanze
Semplificare la creazione per il Web.
Trovare coraggio e ispirazione nella community di sviluppatori
Esperti di Google Developers sul Web che spiegano come i programmi di mentoring hanno permesso loro di diventare leader.
Caratteri variabili nella vita reale
Una guida pratica ai caratteri variabili, con molti esempi.
Crea rapidamente piacevoli gradienti CSS con CSS Gradient Creator
Questo strumento di Josh W Comeau rende estremamente semplice creare sfumature dall'aspetto accattivante.
Approfondire i principali punti deboli degli sviluppatori web
Una raccolta di approfondimenti sui principali punti deboli, raccolti da una serie di conversazioni individuali con gli sviluppatori web.
Perfeziona il tuo sito con images.tooling.report
Controlla lo stato degli strumenti per le immagini.
Ambito della variabile globale e locale
Scopri di più sull'ambito e su come funziona in JavaScript.
Creazione di un componente della finestra di dialogo
Una panoramica fondamentale su come creare mini e mega moda adattabili al colore, reattive e accessibili con l'elemento "".
Esegui il debug degli errori di riproduzione di contenuti multimediali sul web
Scopri come eseguire il debug degli errori di riproduzione dei contenuti multimediali sul web.
In evidenza per la community GDE: Nishu Goel
Una serie di interviste con i membri del programma Google Developers Interop (GDE).
Effetti sulle prestazioni di un caricamento troppo lento
Caricare con estrema attenzione le immagini all'interno dell'area visibile iniziale (mentre si carica liberamente il resto) può migliorare i Segnali web caricando meno byte.
Creazione di un componente della barra di caricamento
Una panoramica di base su come creare una barra di caricamento adattivo e accessibile per i colori con l'elemento "".
Salva le credenziali da Moduli
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
A breve Chrome e Firefox raggiungeranno la versione principale 100
Le modifiche alla stringa dello user agent, le strategie che Chrome e Firefox stanno adottando per mitigare l'impatto e come puoi aiutare.
Creare una favicon adattiva
Una panoramica di base su come creare una favicon adattiva.
Migliora la sicurezza e la privacy aggiornando la cache HTTP
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.
Disegno su canvas in Emscripten
Scopri come eseguire il rendering di grafica 2D su un canvas sul Web da WebAssembly con Emscripten.
Elementi HTML aggiuntivi
Metriche essenziali per un sito sano
Portare le applicazioni USB sul Web. Parte 2: gPhoto2
Scopri come gPhoto2 è stato trasferito in WebAssembly per controllare le fotocamere esterne tramite USB da un'app web.
Registrazione degli errori di rete (NEL)
Utilizza il logging degli errori di rete (NEL) per raccogliere gli errori di rete lato client.
Rilevamento delle funzionalità di WebAssembly
Scopri come utilizzare le funzionalità più recenti di WebAssembly e supportare gli utenti su tutti i browser.
Portare le applicazioni USB sul Web. Parte 1: libusb
Scopri come il codice che interagisce con dispositivi esterni può essere portato sul web con le API WebAssembly e Fugu.
Creazione di un componente per il cambio di tema
Una panoramica di base su come creare un componente per il cambio di tema adattivo e accessibile.
Incorporare snippet JavaScript in C++ con Emscripten
Scopri come incorporare codice JavaScript nella tua libreria WebAssembly per comunicare con il mondo esterno.
PWA su Oculus Quest 2
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.
Progettazione edifici
Uno sguardo al processo e agli strumenti utilizzati per creare l'esperienza di Designcember in stile calendario festivo.
Calcolatore Designcember
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.
Deep-copying in JavaScript utilizzando structuredClone
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.
Creazione di un componente toast
Una panoramica di base su come creare un componente toast adattivo e accessibile.
Fondo UI
Annuncio del fondo per l'UI di Chrome, progettato per fornire sovvenzioni alle persone che lavorano su strumenti di design, CSS e HTML.
Creazione di un componente del menu di un gioco 3D
Una panoramica di base su come creare un menu 3D reattivo, adattivo e accessibile.
Verso una metrica di fluidità dell'animazione
Scopri come misurare le animazioni, come valutare i frame dell'animazione e come regolare l'uniformità della pagina.
Novità di PageSpeed Insights
Scopri le ultime novità di PageSpeed Insights per poter misurare e ottimizzare meglio la qualità della tua pagina e del tuo sito.
Flussi utente di Lighthouse
Prova una nuova API Lighthouse per misurare le prestazioni e le best practice in un flusso utente.
Tutto annunciato al Chrome Dev Summit 2021
Una raccolta di tutte le principali comunicazioni del Chrome Dev Summit 2021, con i link per saperne di più.
Il viaggio di Photoshop sul Web
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.
Creare un componente a selezione multipla
Una panoramica di base su come creare un componente a selezione multipla, adattabile, adattivo e accessibile per ordinare e filtrare le esperienze utente.
Come valutare le prestazioni di caricamento sul campo con Navigation Timing e Resource Timing
Apprendi le nozioni di base sull'utilizzo delle API Navigation e Resource Timing per valutare le prestazioni di caricamento sul campo.
Manipolazione sicura del DOM con l'API Sanitizer
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.
Best practice per l'utilizzo di incorporamenti di terze parti
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.
In che modo le architetture SPA influiscono sui Segnali web essenziali
Risposte alle domande più comuni su SPA, Segnali web essenziali e sul piano di Google per affrontare gli attuali limiti di misurazione.
Approfondimento sugli eventi JavaScript
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
Raggruppamento di risorse non JavaScript
Scopri come importare e raggruppare vari tipi di asset da JavaScript in un modo che funzioni sia nei browser sia nei bundle.
Creazione di un componente Pulsante di suddivisione
Una panoramica di base su come creare un componente Pulsante di suddivisione accessibile.
Utilizzo degli script dei moduli CSS per importare i fogli di stile
Scopri come utilizzare gli script dei moduli CSS per importare i fogli di stile CSS utilizzando la stessa sintassi dei moduli JavaScript.
Colore intenso CSS
Aggiungi il colore del tuo brand agli input integrati nel modulo HTML con una sola riga di codice.
Creazione di un componente Switch
Una panoramica di base su come creare un componente Switch reattivo e accessibile.
Intestazioni dei client hint delle funzionalità multimediali preferenze dell'utente
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
Creazione di un componente breadcrumb
Una panoramica di base su come creare un componente breadcrumb adattabile e accessibile per consentire agli utenti di navigare nel tuo sito.
Utilizzo dei thread WebAssembly da C, C++ e Rust
Scopri come portare in WebAssembly applicazioni multithread scritte in altri linguaggi.
PWA con streaming offline
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à.
Crittografia per contenuti multimediali
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.
Framework multimediali
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.
Nozioni di base sullo streaming di contenuti multimediali
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.
Trova la strada con i dati sul campo nell'aggiornamento dell'estensione Web Vitals
L'estensione Web Vitals ora mostra dove si trovano le tue esperienze locali in relazione a quelle reali degli utenti sul campo.
Creazione di una combinazione di colori
Una panoramica di base su come definire una combinazione di colori dinamica e configurabile.
Aggiustamento delle dimensioni CSS per @font-face
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.
Utilizzo di AVIF per comprimere le immagini sul sito
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.
Evoluzione della metrica Cumulative Layout Shift negli strumenti 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.
CSS per Web Vitals
Questo articolo illustra le tecniche relative ai CSS per ottimizzare i Segnali web.
Nuovi selettori di pseudo-classi funzionali CSS :is() e :where()
Queste apparentemente piccole aggiunte alla sintassi del selettore CSS avranno un grande impatto.
Nuovo addestramento sulle app web progressive ora disponibile
È 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.
Il nuovo responsive design: il web design in un mondo basato sui componenti
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.
Esegui la migrazione ai client hint dello user agent
Strategie per eseguire la migrazione del tuo sito dalla stringa user agent ai nuovi User-Agent Client Suggerimento.
Riferimento rapido per le intestazioni di sicurezza
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.
Excalidraw e Fugu: migliorare i percorsi dell'utente principali
Un resoconto del discorso di Thomas Steiner su Google I/O 2021 dal titolo Excalidraw and Fugu: Migliorare i percorsi degli utenti principali
Moduli ES nei service worker
I service worker possono utilizzare le importazioni statiche dei moduli ES per importare codice aggiuntivo, in alternativa a importScripts().
Creazione di un componente scroller multimediale
Una panoramica di base su come creare una visualizzazione scorrimento orizzontale adattabile per TV, telefoni, computer e così via.
Ottimizzazione dei Segnali web tramite Lighthouse
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.
Utilizzo delle API web asincrone di WebAssembly
Scopri come richiamare le API web asincrone durante la compilazione di linguaggi tradizionalmente sincroni in WebAssembly.
Personalizza l'overlay dei controlli della finestra della barra del titolo della PWA
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.
Tieni sotto controllo gli script di terze parti
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.
Abbattere le barriere con l'API DataTransfer
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.
Compila i moduli OTP all'interno di iframe multiorigine con l'API WebOTP
L'API WebOTP ora può ricevere una OTP dall'interno di un iframe.
Creare animazioni di testo diviso
Una panoramica di base su come creare animazioni divisa di lettere e parole.
Evoluzione della metrica CLS
Piani per migliorare la metrica CLS per renderla più equo in relazione alle pagine di lunga durata.
Soddisfazione degli sviluppatori web
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à.
Creare un componente Impostazioni
Una panoramica di base su come creare un componente delle impostazioni con dispositivi di scorrimento e caselle di controllo.
Esegui il debug delle variazioni del layout
Scopri come identificare e correggere le variazioni del layout.
JavaScript: Qual è il significato di tutto questo?
Capire il valore di "this" può essere difficile in JavaScript, ecco come fare...
Applicazione dei principi di programmazione delle mini app a un progetto di esempio
Questo capitolo mostra un progetto di esempio che segue l'approccio della "programmazione della modalità delle mini app".
Componenti dell'app mini
Questo capitolo fornisce dettagli sui componenti resi disponibili da tutte le piattaforme di mini app.
Struttura, ciclo di vita e raggruppamento dei progetti
Questo capitolo illustra la struttura del progetto, il ciclo di vita e la creazione di pacchetti di mini app.
Considerazioni finali di uno sviluppatore web sulle 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.
Markup, stile, scripting e aggiornamento delle app mini
Questo capitolo illustra le opzioni di markup, stile, scripting e aggiornamento di varie piattaforme di mini app.
Che cosa sono H5 e QuickApp?
Questo capitolo fornisce informazioni di base su app H5 e QuickApp, che sono distinte dalle app mini.
Programmazione delle app mini
Questo capitolo introduce la modalità di programmazione delle app mini.
Progetti open source di mini app
Questo capitolo presenta una selezione di interessanti progetti open source per mini app.
Stream: la guida definitiva
L'API Streams consente a JavaScript di accedere in modo programmatico agli stream di dati ricevuti sulla rete ed elaborarli come desiderato.
Creazione di un componente Schede
Una panoramica di base sulla creazione di un componente Schede simile a quelli presenti nelle app per iOS e Android.
Una guida per attivare l'isolamento multiorigine
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.
Richiesta di isolamento delle prestazioni con l'intestazione Origin-Agent-Cluster
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.
La proprietà proporzioni CSS
Ora è più facile mantenere le proporzioni all'interno delle immagini e degli elementi con la nuova proprietà CSS delle proporzioni.
Best practice per i caroselli
Scopri come ottimizzare le prestazioni e l'usabilità dei caroselli.
WebRTC è ora uno standard W3C e IETF
Una breve panoramica della storia, dell'architettura, dei casi d'uso e del futuro di WebRTC.
Feedback desiderato: il percorso verso una migliore metrica di variazione del layout per le pagine di lunga durata
Scopri i nostri piani per migliorare la metrica Cumulative Layout Shift e inviaci il tuo feedback.
Quando utilizzare HTTPS per lo sviluppo locale
Utilizzare http://localhost per lo sviluppo locale è sempre accettabile, tranne che in alcuni casi speciali. Questo post spiega quando è necessario eseguire il sito di sviluppo locale con HTTPS. Consulta anche: Come utilizzare HTTPS per lo sviluppo
Utilizzare HTTPS per lo sviluppo locale
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
Creazione di un componente di navigazione laterale
Una panoramica di base su come creare una barra di navigazione laterale a scorrimento adattabile
Codelab: creazione di un componente di Barra di navigazione laterale
Scopri come creare un componente di layout di navigazione laterale adattabile a scorrimento.
Codelab: centratura in CSS
Scopri 5 diverse tecniche di centraggio con CSS.
Centratura in CSS
Segui 5 tecniche di centratura durante una serie di test per vedere quale è la più resiliente al cambiamento.
La tua cache ❤️
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.
Worklet di cross-browser e Houdini.how
Scopri come implementare le API Houdini Paint cross-browser ed esplora un mondo di worklet Houdini con Houdini.how.
Automazione dei controlli con AutoWebPerf
Un nuovo strumento modulare che consente la raccolta automatica dei dati sul rendimento da più origini.
Codelab sui moduli di pagamento
Scopri le best practice per le forme di pagamento.
Codelab sulle best practice del modulo degli indirizzi
Scopri le best practice per i moduli dell'indirizzo.
Best practice per i moduli per il pagamento e l'indirizzo
Massimizza le conversioni aiutando gli utenti a completare l'indirizzo e le forme di pagamento nel modo più semplice e veloce possibile.
Codelab sulle best practice per il modulo di registrazione
Utilizza le funzionalità del browser multipiattaforma per creare un semplice modulo di registrazione che sia sicuro, accessibile e facile da usare.
Best practice per il modulo di registrazione
Aiuta gli utenti a registrarsi, accedere e gestire i dati del proprio account con il minimo sforzo.
Best practice per il modulo OTP per gli SMS
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.
Trasmissione di aggiornamenti alle pagine con i service worker
In che modo i service worker possono comunicare in modo proattivo con la pagina per informarsi su determinati eventi.
Guida alla memorizzazione nella cache imperativa
Come comunicare finestre e service worker per eseguire attività relative alle prestazioni, alla memorizzazione nella cache e alla modalità offline.
Panoramica dei worker
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.
Comunicazione bidirezionale con i service worker
Come stabilire un canale di comunicazione bidirezionale tra la pagina e il service worker.
Disattiva l'accelerazione del mouse per offrire una migliore esperienza di gioco FPS
Ora le app web possono disattivare l'accelerazione del mouse durante l'acquisizione di eventi di puntatore.
Creare un componente Storie
Una panoramica fondamentale su come creare un'esperienza simile alle Storie di Instagram sul web.
Codelab: creazione di un componente Storie
Scopri come creare un'esperienza simile alle Storie di Instagram sul web.
Caricamento lento a livello di browser per i CMS
Questo post fornisce indicazioni su come adottare l'attributo di caricamento nei sistemi di gestione dei contenuti.
Stesso sito schematico
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.
Codelab: creare un client di notifica push
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.
Codelab: creare un server di notifica 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.
Panoramica delle notifiche push
Una panoramica delle notifiche push, del motivo per cui potresti utilizzarle e del loro funzionamento.
Misurazione dell'utilizzo offline
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.
Esempi di animazioni CSS ad alte prestazioni
Dimostrare come le tecniche ad alte prestazioni possono creare animazioni complesse e belle.
CSS min(), max() e clamp()
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.
Signed Exchange (SXG)
Un SXG è un meccanismo di distribuzione che consente di autenticare l'origine di una risorsa indipendentemente da come è stata consegnata.
Miglioramenti del layout logico con scorciatoie relative ai flussi
Nuovi comandi rapidi di proprietà logiche e nuove proprietà integrate per Chromium.
Perché alcune animazioni sono lente?
Una buona animazione è alla base di un'ottima esperienza web. Questo post spiega perché alcuni tipi di animazione hanno un rendimento migliore di altri.
Gestione delle richieste di intervalli in un service worker
Assicurati che il service worker sappia cosa fare quando viene richiesta una risposta parziale.
Come creare animazioni CSS ad alte prestazioni
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.
Controlla panoramica, inclinazione e zoom della videocamera
Le funzioni di panoramica, inclinazione e zoom delle fotocamere sono finalmente controllabili sul Web.
Cosa sono le prove dell'origine di terze parti?
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
Perdita di memoria da finestre scollegate
Le finestre scollegate sono un tipo comune di perdita di memoria particolarmente difficile da trovare e correggere.
Creare una pagina di riserva offline
Scopri come creare un'esperienza offline semplice per la tua app.
Applica effetti alle immagini con la proprietà mask-image del CSS
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.
Crea forme interessanti per le immagini con la proprietà clip-path del CSS
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.
Punti elenco personalizzati con CSS ::Indicatori
Utilizza il codice CSS per personalizzare il colore, le dimensioni o il tipo di numeri o punti elenco negli elementi "" o "".
Aiuta gli utenti a cambiare facilmente le password aggiungendo un URL noto per la modifica delle password
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.
Gestire i dati di pagamento facoltativi con un service worker
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.
Orchestrazione delle transazioni di pagamento con un service worker
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.
ARIA: veleno o antidoto?
Come mentire agli screen reader cura l'accessibilità, se non ci mette del sale!
Debug delle perdite di memoria in WebAssembly utilizzando Emscripten
Scopri come utilizzare WebAssembly per portare sul Web librerie scritte in altri linguaggi in modo sicuro e idiomatico.
content-visibility: la nuova proprietà CSS che migliora le prestazioni del rendering
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.
Sblocco dell'accesso agli appunti
L'API Async Clipboard semplifica il processo di copia e incolla per facilitare le autorizzazioni.
Best practice relative alle norme sui referrer e sui referrer
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.
Web su Android
Scopri come è possibile usare diversi componenti per eseguire il rendering dei contenuti web all'interno delle app per Android.
Creare una PWA in Google, parte 1
Che cosa ha imparato il team di bollettino sui service worker durante lo sviluppo di una PWA.
Monitoraggio delle prestazioni con Lighthouse CI
Scopri come configurare Lighthouse CI e integrarlo nei flussi di lavoro degli sviluppatori.
Progettare l'esperienza utente delle passkey sugli Account Google
Maggiore sicurezza e un'esperienza utente migliore per gli Account Google.
@property: aggiungere superpoteri alle variabili CSS
Scopri come implementare le proprietà CSS personalizzate con la digitazione semantica, un valore di riserva e altro ancora, direttamente nel tuo file CSS.
Memorizzazione nella cache del service worker e memorizzazione nella cache HTTP
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.
Correlazione della velocità del sito e delle metriche aziendali
Utilizza i test A/B per valutare l'impatto della velocità del sito sulle tue metriche aziendali.
Panoramica delle app di pagamento basate sul web
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.
Registrazione di un'app per pagamenti basata sul web
Scopri come registrare un'app di pagamento basata sul web nel browser di un cliente. Imparerai anche come eseguirne il debug.
Fornire dati di contatto e di spedizione da un'app per pagamenti Android
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.
Utilizzare il Report sull'esperienza utente di Chrome per esaminare le prestazioni sul campo
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.
Gestione delle richieste di navigazione
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.
Dieci layout moderni in una sola riga di CSS
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.
Rendering perfetto per i pixel con devicePixelContentBox
Da Chrome 84, RidimensionaOc Questo è fondamentale per ottenere una grafica con pixel perfetti, soprattutto nel contesto di schermi ad alta densità.
Riepilogo LIVE web.dev
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.
Migliorare progressivamente la tua app web progressiva
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.
Usa le funzionalità del browser multipiattaforma per creare un modulo di accesso
Utilizza le funzionalità del browser multipiattaforma per creare un modulo di accesso semplice, sicuro, accessibile e facile da usare.
Best practice per il modulo di accesso
Utilizza le funzionalità del browser multipiattaforma per creare moduli di accesso sicuri, accessibili e facili da usare.
Strumenti per sviluppatori web per il debug di problemi di JavaScript nella Ricerca Google
Come eseguire il debug dei problemi SEO su singole pagine o nell'intero sito.
Creazione di esperienze di ricerca resilienti con Workbox
Come implementare un'esperienza di ricerca resiliente con Workbox, utilizzando la sincronizzazione in background e l'API Push.
Aggiungere elementi multimediali a una pagina web
Incorporare un file multimediale in una pagina web utilizzando i tag and.
Link in grassetto dove nessuno ha mai aggiunto link prima: frammenti di testo
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.
Rendi la tua PWA più simile a un'app
Scopri come rendere la tua app web progressiva un'app "reale" imparando a implementare pattern di app specifici della piattaforma con le tecnologie web.
Come segnalare un bug corretto del browser
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.
Misura le prestazioni con il modello RAIL
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.
Velocizza le navigazioni in React con Quicklink
Quicklink è una libreria che consente di caricare le pagine in tempi più rapidi precaricando i link nell'area visibile durante i tempi di inattività.
Proteggi le tue risorse dagli attacchi web con i metadati di recupero
Recupera metadati è una nuova funzionalità della piattaforma web progettata per consentire ai server di proteggersi dagli attacchi multiorigine.
Riordinamento dei contenuti
Quando crei un layout utilizzando CSS, devi fare attenzione a non creare un'esperienza disconnessa per gli utenti che navigano con la tastiera.
Miglioramenti all'API Web Animations in Chromium 84
La gestione delle animazioni sul web sta per diventare molto più semplice.
Ciclo di vita di una transazione di pagamento
Scopri come i commercianti integrano le app di pagamento, come funzionano le transazioni di pagamento con l'API Payment Request e cosa è possibile fare nei pagamenti web.
Supporto delle app di pagamento con i pagamenti web
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.
Guida per gli sviluppatori di app per pagamenti Android
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.
Ulteriori opzioni variabili per il carattere dell'interfaccia utente di sistema macOS in Chromium 83
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.
Svolgi attività velocemente con le scorciatoie app
Le scorciatoie app consentono di accedere rapidamente ad alcune azioni comuni di cui gli utenti hanno bisogno più spesso.
In che modo le app web progressive possono favorire il successo aziendale
Crea un solido business case per la tua PWA. Scopri quando dovresti investire e come misurarne il successo.
Preparazione alla rimozione di AppCache
I dettagli di Chrome e di altri browser hanno intenzione di rimuovere AppCache.
Come definire la tua strategia per le installazioni
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.
Archiviazione persistente
L'archiviazione permanente può contribuire a proteggere i dati critici dall'eliminazione e a ridurre le probabilità di perdita.
In che modo CommonJS sta aumentando le dimensioni dei tuoi bundle
I moduli CommonJS sono molto dinamici, il che impedisce agli ottimizzatori e ai bundle JavaScript di eseguire ottimizzazioni avanzate.
Perché hai bisogno di un'opzione "con isolamento multiorigine" per funzionalità avanzate
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.
Profilazione delle app web Audio in Chrome
Scopri come profilare le prestazioni delle app Web Audio in Chrome utilizzando "about://tracing" e l'estensione **WebAudio** in Chrome DevTools.
Prestazioni migliorate per il caricamento delle pagine di Next.js e Gatsby con suddivisione granulare
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"
"same-site" e "same-origin" vengono spesso citati ma spesso fraintesi. Questa pagina spiega cosa sono e in cosa differiscono.
Rendere il sito web "isolato multiorigine" utilizzando COOP e COEP
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.
Monitora l'utilizzo totale della memoria della tua pagina web con MeasurementUserAgentSpecificMemory()
Scopri come misurare l'utilizzo della memoria della tua pagina web in produzione per rilevare le regressioni.
blog di ingegneria web.dev n. 1: Come creiamo il sito e utilizziamo i componenti web
In questo primo post del team di ingegneri di web.dev, scopri come realizziamo il sito, incluso l'uso di Eleventy e Web Components.
Miglioramento dello stile predefinito della modalità Buio con la proprietà CSS color-scheme e il meta tag corrispondente
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.
Assicurati che il tuo sito web sia disponibile e utilizzabile da tutti durante l'emergenza COVID-19
Come garantire che la funzionalità di base del sito web sia sempre disponibile, accessibile, sicura, utilizzabile, rilevabile e veloce.
responsive design accessibile
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à.
Accessibilità di colore e contrasto
Scopri come rendere più accessibili le tue pagine migliorando l'utilizzo di colori e contrasto.
Target dei tocchi accessibili
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.
Risolvere i problemi di sovraccarico del server
Come determinare e correggere rapidamente un collo di bottiglia del server, migliorare le prestazioni del server e prevenire le regressioni.
Previeni le vulnerabilità cross-site scripting basate su DOM con TrustedType
Introduzione ai tipi attendibili: un'API browser per impedire l'esecuzione di script tra siti basati su DOM nelle applicazioni web moderne.
Usare una PWA nell'app per Android
Come aprire un'app web progressiva in un'app per Android.
Impedisci lo spostamento del layout e i flash di testo invisibile (FOIT) precaricando i caratteri facoltativi
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 configurare SXG (Signed HTTP Exchanges) utilizzando nginx
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.
Come distribuire SXG (Signed HTTP Exchange) utilizzando nginx
Come ottenere e gestire i file SXG utilizzando nginx e le sfide relative al precaricamento delle sottorisorse.
Ottimizzare le immagini di sfondo CSS con query supporti
Utilizza query supporti per inviare immagini delle dimensioni necessarie, una tecnica comunemente nota come immagini adattabili.
Correggere la velocità del sito web in modo interfunzionale
In che modo altri dipartimenti possono contribuire a rendere più efficace il tuo progetto di ottimizzazione della velocità del sito web.
Aggancio scorrimento dopo modifiche al layout
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.
Come configurare Signed Exchange utilizzando Web Packager
Scopri come gestire Signed Exchange (SXG) utilizzando Web Packager.
Come offrire un'esperienza di installazione in-app personalizzata
Utilizza l'evento beforeinstallprompt per offrire ai tuoi utenti un'esperienza di installazione in-app personalizzata e senza interruzioni.
Realtà aumentata: potresti già conoscerla
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.
La realtà virtuale arriva sul Web, parte II
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.
Posizionamento di oggetti virtuali in viste del mondo reale
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.
Promuovere l'ecosistema del framework web
Scopri in che modo Chrome sta investendo in una serie di strumenti open source per far progredire l'ecosistema JavaScript
Che cosa sono le app web progressive?
Un'introduzione alle app web progressive (PWA) e ai tre pilastri che le distinguono dalle altre app web.
Supporto delle icone adattive nelle PWA con icone mascherabili
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.
Integrazione delle PWA nelle UI di condivisione integrate con Workbox
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.
Miglioramento della chiusura delle pagine nella funzione XMLHttpRequest() sincrono
È 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.
Thread sul Web con i worker dei moduli
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.
Caricamento adattivo: miglioramento delle prestazioni web sui dispositivi lenti
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.
Evoluzioni degli strumenti per la velocità: novità dal Chrome Developer Summit 2019
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.
Utilizza i web worker per eseguire JavaScript dal thread principale del browser
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.
Feedback dal sondaggio sull'ottimizzazione delle immagini dell'estate 2019
Commenti degli intervistati su varie tecniche di ottimizzazione delle immagini.
Crea un server per le notifiche push
In questo codelab, imparerai a creare un server di notifiche push.
Integrazione con l'interfaccia utente di condivisione del sistema operativo con l'API Web Share
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.
In che modo AMP può garantire la velocità dell'app Next.js
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
Suddivisione del codice con importazioni dinamiche in Next.js
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
Precaricamento del percorso in Next.js
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.
Prestazioni per impostazione predefinita con Next.js
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
La realtà virtuale arriva sul Web
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.
Ricette di biscotti SameSite
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.
Informazioni sui cookie
Scopri come funzionano i cookie e cosa sono i cookie proprietari e di terze parti.
Gli annunci veloci sono importanti
Scopri il valore degli annunci veloci e come valutarne la velocità.
Utilizza le notifiche push per coinvolgere e coinvolgere nuovamente gli utenti
Utilizza le notifiche push per coinvolgere gli utenti con aggiornamenti mirati e tempestivi.
Inizia a utilizzare l'API Notifications
In questo codelab, scopri come richiedere l'autorizzazione dell'utente e inviare notifiche.
Utilizzo di un service worker per gestire le notifiche
In questo codelab, scopri come gestire le notifiche con un service worker.
Correggere l'instabilità del layout
Una procedura dettagliata per l'utilizzo di WebPageTest per identificare e risolvere i problemi di instabilità del layout.
Tecniche per velocizzare il caricamento di un'app web, anche su un feature phone
I feature phone stanno rinascendo e sono molto diffusi, soprattutto nei mercati emergenti in cui il 2G è la norma. Ecco cosa abbiamo imparato dalla creazione di PROXX, un clone di Campo minato mobile, che si carica rapidamente sui feature phone 2G.
Proprietà personalizzate più intelligenti con la nuova API di Houdini
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.
Due modalità di precaricamento: tag <link> e intestazioni HTTP.
Scopri come velocizzare le navigazioni future precaricando le risorse.
Precarica le risorse per velocizzare le navigazioni future
Scopri di più sul suggerimento relativo alla risorsa rel=prefetch e su come utilizzarlo.
Correggere i contenuti misti
Scopri come correggere gli errori di contenuti misti sul tuo sito web per proteggere gli utenti e garantire che tutti i contenuti vengano caricati.
Che cos'è il contenuto misto?
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.
Andare oltre le immagini con video semplici per il Web
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.
Aggiungere un'icona touch Apple all'app web progressiva
Una dimostrazione interattiva di come specificare l'icona da visualizzare nelle schermate Home di iOS.
Ready Player - Web
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.
Applicazioni web progressive in siti multiorigine
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.
Ridurre le dimensioni dei caratteri web
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.
Ottimizza il caricamento e il rendering dei caratteri web
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.
Crea un'app web progressiva con l'interfaccia a riga di comando Angular
Scopri come creare applicazioni progressive Angular installabili.
Identifica codice JavaScript di terze parti lento
Scopri come utilizzare Lighthouse e Chrome DevTools per identificare le risorse di terze parti lente.
Utilizzare CDN immagine per ottimizzare le immagini
Valuta la possibilità di utilizzare una CDN immagine per ottimizzare le immagini del tuo sito e ridurre il costo dei dati per gli utenti.
Carica in modo efficiente JavaScript di terze parti
Scopri come migliorare i tempi di caricamento e l'esperienza utente evitando le insidie comuni degli script di terze parti.
Rendimento del codice JavaScript di terze parti
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.
Controlli del modulo più efficaci
Le nuove funzionalità della piattaforma web semplificano la creazione di elementi personalizzati che funzionano come controlli dei moduli integrati.
Ottimizza JavaScript di terze parti
Scopri le tecniche per ottimizzare le risorse di terze parti lente con l'aiuto di Lighthouse.
Stabilisci le connessioni di rete in anticipo per migliorare la velocità percepita delle pagine
Scopri gli hint relativi alle risorse rel=preconnect e rel=dns-prefetch e come utilizzarli.
Crea sfondi in stile sistema operativo con il filtro dello sfondo
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.
Mantenimento degli aggiornamenti con lo stale-while-revalidate
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.
Virtualizza elenchi di grandi dimensioni con la CDK di Angular
Scopri come rendere più reattivi elenchi di grandi dimensioni implementando lo scorrimento virtuale con il kit di sviluppo dei componenti Angular.
Ottimizza il rilevamento delle modifiche di Angular
Scopri come ottimizzare il rilevamento delle modifiche della tua app Angular per renderla più reattiva.
Strategie di precaricamento del routing in Angular
Scopri come utilizzare le strategie di precaricamento di Angular per app più veloci.
Navigazione web più veloce con precaricamento predittivo
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.
Adatta i video alla pubblicazione di immagini in base alla qualità della rete
Scopri come utilizzare l'API Network Information per adattare i tuoi contenuti alla qualità della rete.
Controlla l'accessibilità dell'app Angular con il codelyzer
Scopri come rendere accessibile la tua applicazione Angular utilizzando codelyzer.
Precauzione con il service worker Angular
Scopri come utilizzare il service worker Angular per pre-memorizzare nella cache le risorse statiche nella tua app.
Budget delle prestazioni con l'interfaccia a riga di comando Angular
Scopri come utilizzare i budget delle prestazioni direttamente nell'interfaccia a riga di comando Angular.
prefers-color-scheme: Ciao buio, amico mio
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.
Suddivisione del codice a livello di route in Angular
Scopri come ridurre le dimensioni dell'app bundle iniziale utilizzando la suddivisione del codice a livello di route.
Per iniziare: ottimizzare un'applicazione Angular
Scopri come rendere la tua applicazione Angular più veloce, affidabile, rilevabile, installabile e accessibile.
I migliori suggerimenti per il rendimento sul Web
Usa srcset per scegliere automaticamente le dimensioni corrette delle immagini.
Componenti del Web: l'ingrediente segreto per potenziare il Web
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.
Usa Lighthouse per i budget delle prestazioni
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.
Aggiornamenti alle API Web Payments
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.
Il valore della velocità
Dimostrare le entrate generate dai miglioramenti del sito escludendo i fattori esterni come le campagne di marketing.
Installazione della barra degli indirizzi per le app web progressive sul desktop
Le app web progressive sono facili da installare grazie a un nuovo pulsante di installazione nella barra degli indirizzi di Chrome (omnibox).
In che modo il rendimento può migliorare le conversioni?
Scopri quale impatto ha il rendimento del sito web sulle diverse fasi della canalizzazione di e-commerce
Modelli per promuovere l'installazione di PWA
Come promuovere l'installazione di app web progressive e best practice.
Mentalità dei service worker
Lavorare con i service worker è nuovo e non familiare per molti sviluppatori web. Questo post fornisce alcuni suggerimenti per comprendere meglio queste attività.
Come faccio a informare gli utenti che la mia PWA è installabile?
Come promuovere l'installazione di app web progressive e best practice.
Criteri relativi alle immagini per tempi di caricamento rapidi e altro ancora
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.
Estrai CSS critici
Scopri come migliorare i tempi di rendering con una tecnica CSS critica e come scegliere lo strumento migliore per il tuo progetto.
Estrai e incorpora CSS critici con le informazioni critiche
Scopri come utilizzare Critical per estrarre e incorporare CSS critici e migliorare i tempi di rendering.
Le attività JavaScript lunghe ritardano il Tempo all'interattività?
Impara a diagnosticare interazioni degli utenti costose e che impediscono il lavoro.
Velocità su larga scala: quali sono le novità nelle prestazioni web?
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.
Presentazione di PROXX
PROXX è un gioco simile a un campo minato realizzato come PWA. Funziona su una vasta gamma di dispositivi e migliora progressivamente l'aspetto visivo del dispositivo man mano che aumenta le sue funzionalità.
Spiegazione dei cookie SameSite
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.
Ricerca visiva con il Web Perception Toolkit
Non sarebbe bello se gli utenti potessero effettuare ricerche sul tuo sito utilizzando la loro fotocamera?
Pubblicazione adattiva basata sulla qualità della rete
Utilizza l'API Network Information per adattare gli asset mostrati agli utenti in base alla qualità della connessione.
Portali pratici: navigazione sul Web senza interruzioni
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.
Minimizza e comprimi i payload di rete con Brotli
In questo codelab, scopri come la compressione Brotli può ridurre ulteriormente i rapporti di compressione e le dimensioni complessive della tua app.
web.dev alla conferenza I/O 2019
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.
Che cos'è la velocità?
La velocità è importante, ma cosa intendiamo esattamente? Che cosa significa avere un sito veloce?
Come si misura la velocità?
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.
Come rimanere veloce?
I brand che ottimizzano la velocità spesso registreranno rapidamente. In questo post illustreremo come garantire un'esperienza rapida.
Virtualizzare elenchi di grandi dimensioni con la finestra di reazione
reagire-window è una libreria che consente di visualizzare in modo efficiente elenchi di grandi dimensioni.
Per iniziare: ottimizza la tua app React
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.
Precauzione nella cache nell'app Crea reazione con Workbox
Workbox è integrata nell'app Create React con una configurazione predefinita che memorizza nella cache tutti gli asset statici nell'applicazione per ogni build.
Aggiungi un file manifest dell'app web con l'app Create React
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.
Esegui il pre-rendering delle route con responsive-snap
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.
Controllo dell'accessibilità con react-axe ed eslint-plugin-jsx-a11y
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.
Suddivisione del codice con React.lazy e Suspense
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.
Codelab: precarica gli asset critici per migliorare la velocità di caricamento
In questo codelab, scopri come migliorare le prestazioni di una pagina precaricando e precaricando le risorse.
prefers-reduced-motion: a volte meno movimento è più
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.
Rimanda CSS non critico
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).
La fiducia è buona, l'osservazione è meglio: Intersection Exampler v2
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.
Nozioni di base sul Responsive Web Design
Crea siti che rispondano alle esigenze e alle funzionalità del dispositivo su cui vengono visualizzati.
Fogli di stile costruibili
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.
Rendering sul Web
Consigli per implementare la logica e il rendering nelle app.
Utilizzo di bundlesize con Travis CI
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.
Incorporare i budget delle prestazioni nel processo di creazione
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.
Impostazione dei budget delle prestazioni con Webpack
Scopri come impostare budget delle prestazioni e tenere sotto controllo le dimensioni del pacchetto con webpack.
Utilizzare il bot Lighthouse per impostare un budget delle prestazioni
Hai lavorato sodo per essere veloce, ora assicurati di essere veloce automatizzando i test delle prestazioni in Travis CI con Lighthouse Bot.
Emscripten e npm
Come fai a integrare WebAssembly in questa configurazione? In questo articolo, lo risolveremo prendendo come esempio C/C++ ed Emscripten.
La tua app è installata? getInstallRelatedApps() te lo comunicherà.
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.
Pubblica codice moderno per i browser moderni per caricare più velocemente le pagine
In questo codelab, scopri come migliorare le prestazioni di un'applicazione minimizzando la quantità di codice transpilato.
Adattarsi agli utenti con suggerimenti client
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.
Controlla lo stato attivo con tabindex
Gli elementi HTML standard hanno l'accessibilità della tastiera integrata. Quando crei componenti interattivi personalizzati, usa Tabindex per assicurarti che siano accessibili dalla tastiera.
Utilizzare l'HTML semantico per semplificare le vittorie sulla tastiera
L'utilizzo degli elementi HTML semantici corretti potrebbe essere in grado di soddisfare la maggior parte o tutte le esigenze di accesso alla tastiera. In questo modo, avrai meno tempo per modificare il valore dell'indice e gli utenti saranno più soddisfatti!
Concetti fondamentali relativi all'accesso da tastiera
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.
Messa a fuoco dello stile
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.
Etichette e alternative di testo
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à.
Semantica e screen reader
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?
Intestazioni e punti di riferimento
Utilizzando gli elementi corretti per intestazioni e punti di riferimento, puoi migliorare notevolmente l'esperienza di navigazione per gli utenti della tecnologia assiale.
Che cos'è l'accessibilità?
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.
Configurazione del comportamento di memorizzazione nella cache HTTP
In questo codelab, scopri come controllare il comportamento della memorizzazione nella cache delle risorse utilizzando le intestazioni HTTP.
Utilizzo di Imagemin con webpack
In questo codelab, scopri come utilizzare imagemin con webpack per ottimizzare le immagini JPEG e PNG e velocizzare il download.
Utilizzare Imagemin per comprimere le immagini
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.
Budget delle prestazioni - Guida introduttiva
Un buon rendimento è raramente un effetto collaterale. Scopri i budget delle prestazioni e come possono aiutarti a raggiungere i tuoi obiettivi.
Applicazione del caricamento istantaneo con il pattern PRPL
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.
Pubblica immagini con dimensioni corrette
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.
Utilizza immagini WebP
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.
Il tuo primo budget delle prestazioni
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.
Evitare richieste di rete non necessarie con la cache HTTP
La cache HTTP del browser è la prima linea di difesa contro richieste di rete non necessarie.
Precarica gli asset critici per migliorare la velocità di caricamento
All'apertura di una pagina web, il browser richiede un documento HTML a un server, analizza i contenuti del file HTML e invia richieste separate per altri riferimenti esterni. La catena di richieste critiche rappresenta l'ordine delle risorse a cui viene assegnata la priorità e che vengono recuperate dal browser.
Sostituisci le GIF animate con video per velocizzare i caricamenti delle pagine
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.
Service worker e API Cache Storage
La cache HTTP del browser è la prima linea di difesa. Non è necessariamente l'approccio più potente o flessibile e hai un controllo limitato sulla durata delle risposte memorizzate nella cache. Esistono però diverse regole generali che offrono un'implementazione sensata della memorizzazione nella cache senza molto lavoro, quindi dovresti sempre provare a seguirle.
Utilizza descrittori di densità
In questo codelab, impara a utilizzare i descrittori di densità e srcset per caricare immagini con la densità di pixel corretta per il dispositivo dell'utente.
Che cosa sono gli attacchi alla sicurezza?
Un'applicazione non sicura potrebbe esporre utenti e sistemi a vari tipi di danni. Quando un soggetto malintenzionato utilizza vulnerabilità o mancano di funzionalità di sicurezza a proprio vantaggio per causare danni, si parla di attacco. In questa guida analizzeremo i diversi tipi di attacco in modo che tu sappia cosa cercare quando proteggi la tua applicazione.
Riduci i payload JavaScript con la suddivisione del codice
In questo codelab, scopri come migliorare le prestazioni di una semplice applicazione attraverso la suddivisione del codice.
Creazione di immagini WebP con la riga di comando
In questo codelab, scopri come pubblicare immagini ottimizzate utilizzando WebP.
Pubblica immagini con dimensioni corrette
In questo codelab, scopri come pubblicare immagini con le dimensioni corrette per migliorare le prestazioni della rete.
Esplora il riquadro Rete DevTools
In questo codelab, scopri come inerpretare il traffico di rete usando Chrome DevTools.
Rendi l'app installabile
In questo codelab, scopri come rendere un sito installabile utilizzando l'evento beforeinstallprompt.
Come funziona la ricerca
I motori di ricerca sono la versione digitale di un bibliotecario. Utilizzano un indice completo per trovare le informazioni giuste per una query. La conoscenza delle nozioni di base della ricerca ti prepara a rendere i tuoi contenuti rilevabili per gli utenti.
Risolvere i problemi 404 non ammessi
In questo codelab, scopri come individuare un errore 404 non ammesso che potrebbe impedire l'indicizzazione corretta della tua pagina.
Criterio della stessa origine
Un browser può caricare e visualizzare risorse da più siti. Se non esistono limitazioni sulle interazioni tra queste risorse e se uno script viene compromesso da un utente malintenzionato, lo script potrebbe esporre qualsiasi cosa sul browser di un utente.
Rimuovi il codice inutilizzato
In questo codelab, scopri come migliorare le prestazioni di un'applicazione rimuovendo le dipendenze inutilizzate e non necessarie.
Richieste di recupero e norma stessa origine
In questo codelab, scopri come funziona il criterio della stessa origine durante il recupero delle risorse.