All Things Smashing: aggiornamento mensile
Pubblicato: 2022-03-10Non possiamo ripetere abbastanza quanto sia meravigliosa la community delle prestazioni web! Ci sono brave persone che aiutano a rendere il web più veloce e i loro sforzi contano davvero. Con l'arrivo del nuovo anno e le risoluzioni di tutti ancora messe alla prova, obiettivi personali come la riproduzione di bug e la risoluzione dei problemi diventano improvvisamente qualcosa che tutti abbiamo in comune: migliorare il web per tutti i soggetti coinvolti.
Man mano che varie aree di prestazione diventano sempre più sofisticate e complicate nel corso degli anni, Vitaly perfeziona e aggiorna la sua lista di controllo delle prestazioni front-end ogni anno. Questa guida copre praticamente tutto, dai budget per le prestazioni alle app a pagina singola fino alle ottimizzazioni di rete. Negli ultimi anni si è rivelato molto utile per le persone: chiunque può modificarlo (PDF, MS Word Doc e pagine Apple) e adattarlo alle proprie esigenze personali o persino usarlo per la propria organizzazione.
Ora, senza ulteriori indugi, vediamo cosa sta cucinando a Smashing!
Tempi Emozionanti: Nuovo Smashing Book
Sei pronto per il prossimo libro di Smashing? Bene, proprio come tutti i libri stampati che abbiamo pubblicato, ognuno è realizzato per fornire conoscenze e competenze approfondite condivise da esperti e professionisti del settore. Il Manuale di progettazione etica non sarà diverso. Scritto da Trine Falbe, Martin Michael Frederiksen e Kim Andersen, il libro sarà pre-pubblicato a fine gennaio.
Come sempre, ci sarà uno sconto pre-ordine disponibile . Prevediamo di spedire le copie stampate con copertina rigida alla fine di febbraio, ma nel frattempo, sentiti libero di iscriverti alla mailing list del libro in modo da poter essere una delle prime persone a mettere le mani sul libro!
Meno parole, più tempo per le domande
Le nostre SmashingConf sono note per essere eventi amichevoli e inclusivi in cui sviluppatori e designer front-end si riuniscono per partecipare a sessioni dal vivo e workshop pratici. Dalla progettazione dal vivo al debug dal vivo, vogliamo che tu chieda qualsiasi cosa ai relatori , dalle convenzioni di denominazione alle strategie di debug. Per ogni discorso, avremo abbastanza tempo per entrare nei dettagli e mostrare esempi reali di lavoro reale sul grande schermo.
Se non vedi l'ora di non perdere una delle nostre SmashingConfs, i biglietti Early Bird sono ancora disponibili. E se hai bisogno di un piccolo aiuto per convincere il tuo capo a mandarti a un evento, faccelo sapere! Ti copriamo le spalle.
- San Francisco, 21–22 aprile
- Austin, Texas, 9–10 giugno
- Friburgo, 7–8 settembre
- New York, 20–21 ottobre
Un assaggio di smashing... fuori campo
Abbiamo raggiunto il nostro settimo episodio dello Smashing Podcast! Siamo così orgogliosi ed entusiasti di avere i nostri cari amici e colleghi, Drew McLellan e Bethany Andrew, a gestire lo spettacolo di interviste bisettimanali in modo così brillante! Il feedback è stato straordinariamente positivo e ora ne siamo entusiasti per molti altri!
- Podcast strepitoso su Twitter
- Episodi precedenti (incluse le trascrizioni)
Puntare i riflettori su TypeScript
Tra meno di due settimane ( 29 gennaio ), ospiteremo un webinar di Smashing TV con Stefan Baumgartner che farà luce su ciò che il controllo del tipo ha in serbo per le persone che creano e utilizzano il web. TypeScript è stata una delle tecnologie più pubblicizzate nel 2019: è giunto il momento di guardare oltre il clamore!
Segna i tuoi calendari e unisciti a noi alle 17:00 ora di Londra : ci piacerebbe sentire i tuoi pensieri e le esperienze che hai avuto nella tua carriera.
Argomenti di tendenza su SmashingMag
Pubblichiamo ogni giorno un nuovo articolo su vari argomenti attuali nel settore web. Eccone alcuni che i nostri lettori sembravano apprezzare di più e che hanno ulteriormente consigliato:
- "La personalità divisa dello sviluppo web brutalista" di Frederick O'Brien
Niente fronzoli o sfavillanti fronzoli al neon con irrigatori attaccati? I siti web "brutalisti" sono fioriti negli ultimi anni, ma la loro filosofia guida rimane poco chiara. - "Perché dovresti scegliere HTML5 <articolo> su <sezione>" di Bruce Lawson
In questo articolo, Bruce Lawson spiega che uso abbiamo di<section>e come gli autori dovrebbero contrassegnare i titoli che sono estremamente importanti per gli utenti di AT. - "Aiutare i browser a ottimizzare con la proprietà Contengono CSS" di Rachel Andrew
La proprietà CSScontainti offre un modo per spiegare il tuo layout al browser, in modo da poter ottimizzare le prestazioni. Tuttavia, ha alcuni effetti collaterali in termini di layout. - "Un'introduzione all'API Context di React" di Yusuff Faruq
In questo articolo imparerai come utilizzare l'API Context di React che ti consente di gestire gli stati delle applicazioni globali nelle tue app React senza ricorrere al drill degli oggetti di scena.
Le migliori scelte dalla nostra newsletter
Con l'inizio di un nuovo decennio, abbiamo deciso di iniziare con argomenti dedicati alle performance web. Ci sono così tante persone di talento là fuori che lavorano a progetti brillanti e ci piacerebbe spargere la voce e dare loro il merito che meritano!
Nota : un enorme grazie a Cosima Mielke per aver scritto e preparato questi post!
Quali metriche contano di più?
Primo disegno significativo , Time to Interactive , First Input Delay , SpeedIndex . Con così tante metriche delle prestazioni che fluttuano in giro, non è facile trovare il giusto equilibrio per un progetto. E il più delle volte, queste metriche da sole saranno troppo generiche e non sufficientemente precise, quindi dovremo integrarle anche con quelle personalizzate. Nelle piccole e grandi aziende è comune definire pixel importanti nell'interfaccia utente, misurare la velocità con cui possiamo iniziare a renderizzarli e quanto velocemente possiamo fornire loro la reattività all'input.
Ogni progetto potrebbe beneficiare di un mix di almeno 4 metriche. Time To Interactive (TTI) è la metrica chiave per capire quanta attesa deve sperimentare un utente per utilizzare il sito senza ritardi. First Input Delay (FID) integra molto bene TTI in quanto descrive la parte mancante dell'immagine: cosa succede quando un utente interagisce effettivamente con il sito.
Il tempo di blocco totale (TBT) aiuta a quantificare la gravità di quanto una pagina non sia interattiva prima che diventi interattiva in modo affidabile. E Cumulative Layout Shift (CLS) evidenzia la frequenza con cui gli utenti sperimentano cambiamenti di layout imprevisti (reflow) quando accedono al sito. Tutte queste metriche appariranno in Lighthouse v6 quando inizierà a essere lanciato nel 2020.
Inoltre, puoi esaminare FrustrationIndex che esamina i divari tra le metriche invece di esaminarle singolarmente, l'impatto del peso degli annunci e i costi della CPU a livello di componente. Tieni presente che la prima pittura significativa/contenziosa viene sostituita con la pittura più grande di contenuto e il ruolo di SpeedIndex è diminuito con la visualizzazione di nuove metriche.
L'impatto dell'ottimizzazione delle prestazioni
Non è un segreto che le prestazioni abbiano un impatto diretto sull'esperienza dell'utente e sulle metriche aziendali e che, a volte, anche un'ottimizzazione delle prestazioni Web apparentemente ridotta, come la riduzione del tempo di caricamento di pochi millisecondi, può portare a un tasso di conversione migliore. Per dimostrare questo impatto, WPO Stats raccoglie casi di studio ed esperimenti da prodotti e siti di e-commerce: storie di successi e di cose che sono andate storte. Ispirante!
Per supportare le tue ottimizzazioni delle prestazioni con alcune cifre concrete e aiutarti a coglierne meglio l'impatto, Sergey Chernyshev ha creato il Calcolatore di velocità UX. Ti consente di vedere come la distribuzione della velocità, la frequenza di errore, la frequenza di rimbalzo e la velocità di conversione si intrecciano per i valori inseriti. Un piccolo aiuto pratico.
Comprimi automaticamente le immagini nelle tue PR
L'ottimizzazione delle immagini è probabilmente una delle attività più semplici nell'elenco di controllo dell'ottimizzazione delle prestazioni. Tuttavia, se hai molte immagini da ottimizzare, può anche richiedere un po' di tempo e, nella fretta, alcune immagini potrebbero persino entrare in produzione saltando questo passaggio.
Per cambiarlo, il team di Calibre ha creato un'azione GitHub che comprime automaticamente tutte le immagini JPEG, PNG e WebP nelle tue richieste pull. È veloce, efficiente e, per una compressione quasi senza perdite, utilizza i migliori algoritmi di compressione delle immagini disponibili: mozjpeg e libvips. Un vero risparmio di tempo.
Risorse per rimanere al passo con le prestazioni
Molte persone nella comunità web si impegnano per le prestazioni e per aiutare a spargere la voce a riguardo. Uno di questi è Tim Kadlec. Nel suo podcast Chasing Waterfalls, invita le persone che lavorano per rendere il web più veloce per tutti. Sono già stati rilasciati tre episodi, con Reefath Rajali che condivide approfondimenti sul percorso delle prestazioni di PayPal, Malek Kalim che esplora come scalare una cultura delle prestazioni all'interno di un'organizzazione e Katie Hempenius che parla di budget delle prestazioni, sfide di terze parti, JavaScript e molti altri altre cose che influiscono sulle prestazioni.
Un'altra utile risorsa per tenerti aggiornato sulle prestazioni web viene da Ben Schwarz e Karolina Szczur. Insieme curano la Performance Newsletter, fornendo strumenti per le prestazioni web, conferenze e altre risorse nella tua casella di posta due volte al mese. C'è anche un archivio dei precedenti numeri della newsletter su cui tenerti aggiornato fino all'invio del prossimo numero.
Ogni numero della Smashing Newsletter è scritto e curato con amore e cura. Nessun invio di posta di terze parti o pubblicità nascosta: hai la nostra parola.
Utili bit di front-end e UX, forniti una volta alla settimana.
Con strumenti per aiutarti a svolgere meglio il tuo lavoro. Iscriviti e ricevi le liste di controllo per la progettazione dell'interfaccia intelligente di Vitaly in PDF via e-mail.
Sul front-end e UX. Scelto da 190.000 persone.