• Passa alla navigazione primaria
  • Passa al contenuto principale
  • Passa alla barra laterale primaria
  • Passa al piè di pagina
Glue Labs

Glue Labs

Trasformiamo le tue idee in prodotti digitali di successo!

  • HOME
  • SOLUZIONI
  • NEWS
  • PRODOTTI
  • CONTATTI
  • CASE STUDY

Front End Performance Checklist

Come migliorare le performance di Web Application, Progressive Web App, Mobile App e Desktop App

Il Front End è l’elemento essenziale di Web Application, Progressive Web App ed oggi Desktop App e Mobile App grazie a sistemi integrati, per questo motivo le performance diventano sempre più importanti perchè sono legate alla User Experience e alla User Interaction con il nostro applicativo da parte dell’utente.

Come possiamo sapere quali sono i nostri colli di bottiglia tra codice Javascript, immagini, font, rendering, scope, observer, HTTP/2, service workers e tantissimi altri elementi dei moderni Front End? E’ sufficiente la classifica concatenazione e minimizzazione del codice?

Nelle moderne applicazioni dobbiamo fare i conti anche Content Delivery Network, ISP, cache, proxy, load balancers e server che giocano comunque un ruolo nelle perfomance.

La perfomance Checklist

Pianificazione e Metriche

  • Migliora la tua sensibilità riguardo le performance per es. attraverso case studies e esperimenti pubblicati su WPO Stats
  • L’obiettivo deve essere diventare più rapidi del 20% rispetto al migliore competitor, questa è la regola generale della psicofisica anche chiamata Weber-Fechner Law
  • Scegli le metriche corrette per la tua applicazione.
  • Acquisisci dati dai dispositivi utilizzati dalla tua target audience, per es. attraverso gli Open Device Lab.

Goal realistici

  • Un’interfaccia deve rispondere entro 100 ms ed ogni frame di animazione in circa 10 ms
  • Avere un SpeedIndex minore di 1250 ed una critical file size di 170Kb (compressi)

Definizione dell’ambiente

  • Mantieni i tuo build tool, non è questo che migliora le performance
  • Usa come guida il progressive enhancement per l’architettura di front-end e per lo sviluppo
  • Orienta la baseline delle performance verso il modello PRPL : Push, Render, Pre-cache e Lazy Load
  • Usa le tecnologie Google AMP o Facebook Instant Articles o  Apple News per migliorare la distribuzione di contenuti
  • Usa una Content Delivery Network

Ottimizzazione

  • Riduci il codice JS per es. con template binari che riduce il costo del parsing e attraverso l’analisi delle dipendenze e dei package
  • Usa compilatori ahead-of-time
  • Usa tool come Webpack per sfruttare Tree-shaking, scope hoisting e code splitting.
  • Sfrutta le potenzialità del tuo Javascript Engine per es. in Electron e Node.js
  • Usa il progressive booting
  • Configura correttamente i cache header HTTP
  • Comprimi file e testo
  • Ottimizza le immagini creando anche responsive images
  • Ottimizza i web font
  • Carica in maniera asincrona le librerie
  • Usa Intersection Observer API
  • Usa gli stream
  • Salva i dati con “Save-Data”
  • Usa dns-prefetch,preconnect, preload e tecnologie simile per migliorare la connessione
  • Usa HPACK con HTTP/2

Glue Labs e le Perfomance del Front End

Esperti di Front End Design & Development ti supportiamo con training on job, formazione avanzata, assistenza professionale e consulenza per migliorare le performance dei tuoi applicativi. Contattaci subito senza impegno per un preventivo gratuito.

Continua la lettura

  1. Cos’è un Micro Front-End e come renderlo multi-framework con Stencil
  2. 5 cose da fare per migliorare le performance delle Web Application

Categoria: Articoli Tags: AMP, Desktop App, electron, front end, Node.js, PRPL, PWA, user experience, User Interaction, web application, Webpack

Barra laterale primaria

Cosa facciamo

  • Content Strategy
  • E-Commerce
  • Formazione avanzata Web, Mobile & Cloud
  • IoT – Sviluppo e Integrazione
  • Micro Live Learning(MLL) Web, Mobile & Cloud
  • Project Management Prince2
  • PushAPE
  • Sicurezza ICT
  • Software Aziendali
  • Sviluppo Mobile App
  • Sviluppo, Supporto, Assistenza Tecnica e Hosting Google Cloud
  • System Integration
  • Web Application
  • Web Design

Contatti

Scrivici dal form di contatto

Tel +39 06 56549766
Fax +39 06 21122581
Mail: info@glue-labs.com
Pec: gluelabs@legalmail.it

Dove siamo

Roma: Piazza Don Sturzo 15
Milano: Via Lazzaretto 19
Torino: Via San Domenico 28
Altamura: Via Maggio 1648 24

"*" indica i campi obbligatori

Nome*
Questo sito è protetto da reCAPTCHA e si applicano le Normative sulla Privacy e i Termini di Servizio di Google.
Inviando i tuoi dati accetti le condizioni sulla Privacy. Li useremo per rispondere alle tue domande e richieste.
Consenso*
*
Questo campo serve per la convalida e dovrebbe essere lasciato inalterato.

Siamo parte di

La nostra Agenzia di Marketing

Footer

Partnership



Rimaniamo in contatto

Iscriviti alla nostra newsletter

Nome
Questo campo serve per la convalida e dovrebbe essere lasciato inalterato.

Soluzioni

  • Supporto ed Integrazione di SPID e CIE con OpenID Connect
  • Consulenza e Assessment pre-formazione
  • Integrazione con le API di OpenAI e ChatGPT
  • Corso Cucumber per Javascript
  • Supporto ed Assistenza nell’implementazione ed utilizzo dei Kit di Designers Italia
  • Realizzazione di Tour Virtuali 3D
  • Conferenza/Seminario – Google Cloud Hands On
  • Corso Cacti
  • Backup-as-a-Service in Cloud: come archiviare i dati in maniera sicura ed affidabile
  • Corso Angular 14

Articoli

  • Software report del 2022 e trend per il 2023
  • Come gestire il backup di architetture complesse in maniera sicura ed efficiente
  • Perchè avere un Contact Center as a Service(CCaaS)
  • Come modernizzare applicazioni legacy
  • Cos’è Github Flow
  • Come avere una Data Quality Platform come Twitter
  • Cos’è la Dead letter queue e perchè è importante
  • Jinja: un template engine multiuso per Python
  • Cos’è l’Application Level Encryption(ALE): vantaggi e svantaggi
  • Backup e Disaster Recovery(DR) in un’unica piattaforma

Le nostre sedi

  • Roma, Piazza Don Sturzo 15
  • Milano, Via Lazzaretto 19
  • Torino, Via San Domenico 28
  • Altamura, Via Maggio 1648 24

Contatti

  • Tel. +39 06 87811067
  • Fax +39 06 99335373
  • glue-labs@legalmail.it
  • info@glue-labs.com
  • Facebook
  • LinkedIn
  • Twitter

Scarica app da App StoreScarica app da Play Store


Glue Labs © 2011–2023 | Copyright | Privacy Policy | Company Info | Cookie Policy | Gestione Cookies

Gestisci Consenso Cookie
Usiamo cookie per ottimizzare il nostro sito web ed i nostri servizi.
Funzionale Sempre attivo
La conservazione tecnica o l'accesso sono strettamente necessari al fine legittimo di consentire la fruizione di uno specifico servizio esplicitamente richiesto dall'abbonato o dall'utente, o al solo fine di effettuare la trasmissione di una comunicazione su una rete di comunicazione elettronica.
Preferenze
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistiche
L'archiviazione tecnica o l'accesso che viene utilizzato esclusivamente a fini statistici anonimi. Senza un mandato di comparizione, il rispetto volontario da parte del tuo provider di servizi Internet o registrazioni aggiuntive da parte di terzi, le informazioni archiviate o recuperate solo per questo scopo non possono essere generalmente utilizzate per identificarti. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
L'archiviazione tecnica o l'accesso è necessario per creare profili utente per inviare pubblicità o per tracciare l'utente su un sito Web o su più siti Web per scopi di marketing simili.
Gestisci opzioni Gestisci servizi Gestisci fornitori Per saperne di più su questi scopi
Gestisci preferenze
{title} {title} {title}