Skip to content

marbio/Front-End-Performance-Checklist

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

229 Commits
.github
.github
 
 
images
images
 
 
.gitignore
.gitignore
 
 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 

Repository files navigation


Front-End Performance Checklist

  Front-End Performance Checklist  

🎮 L'unica Checklist delle Performance Front-End che funziona più velocemente delle altre.

Una semplice regola: "Progetta e sviluppa con le performance in mente"

      PRs Welcome         Discord           Licence MIT  

  Come usarla • Contribuisci • Product Hunt

🇨🇳 🇫🇷 🇰🇷 🇵🇹 🇷🇺 🇯🇵 🇮🇷 🇮🇹

Altre Checklists:
🗂 Front-End Checklist • 💎 Front-End Design Checklist

Introduzione

Il tematica delle performance è molto ampia, ma non è sempre un aspetto da considerare a livello "back-end" oppure "admin": infatti è anche una responsabilità a livello Front-end. La Checklist delle Performance Front-end rappresenta una lista esaustiva di elementi che dovresti seguire o per lo meno esserne consapevole, come sviluppatore Front-End e applicare ai tuoi progetti (personali e lavorativi).

Come usarla?

Per ogni regola, troverai un paragrafo che spiega perchè questa regola è importante e come puoi sistemarla. Per informazioni più approfondite, dovresti trovare link che puntano a 🛠 strumenti, 📖 articoli o 📹 contenuti multimediali che possono completare la checklist.

Tutti gli elementi contenuti nella Checklist delle Performance Front-End sono essenziali per raggiungere livelli di performance più alti, ma troverai anche un indicatore che ti aiuterà a dare priorità ad alcune regole rispetto ad altre. Ci sono 3 livelli di priorità:

  • Low livello di priorità basso.
  • Medium livello di priorità medio. Non dovresti evitare di affronare quell'elemento.
  • High livello di priorità alto. Non puoi evitare di seguire quella regola e dovresti implementare le correzioni segnalate.

Strumenti di Performance

Lista degli strumenti che puoi utilizzare per testare o monitorare il tuo sito web o la tua applicazione:

Riferimenti

HTML

html

  • HTML Minificato: medium Il codice HTML viene minimizzato, i commenti, gli spazi bianchi e le nuove righe vengono eliminati dai file di produzione.

    Perchè:

    La rimozione di tutti gli spazi, i commenti e gli attributi non necessari ridurra le dimensioni del tuo documento HTML e velocizzerà il tempo di caricamento del tuo sito web ed ovviamente ciò allegerirà il download per gli utenti finali.

    Come:

    La maggior parte dei framework dispone di plugin per facilitare la minificazione delle pagine web. Puoi utilizzare diversi moduli NPM che faranno automaticamente il lavoro al tuo posto.

  • Posiziona i tag CSS sempre prima di quelli Javascript: high Assicurati che il tuo CSS venga sempre caricato prima del codice Javascript.

    <!-- Non raccomandato -->
<script src="jquery.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css"/>

<!-- Raccomandato -->
<link rel="stylesheet" href="foo.css"/>
<script src="jquery.js"></script>
<script src="foo.js"></script>

    Perchè?:

    Avere i tag CSS prima di qualsiasi tag Javascript consente un download parallelo migliore e questo accellera i tempi di rendering del browser.

    Come?:

    ⁃ Assicurati che <link> e <style> nell' <head> vengono sempre prima di <script>.

  • Minimizza il numero degli iframe: high Usa gli iframe solo se non hai altre possibilità tecniche. Use iframes only if you don't have any other technical possibility. Cerca di evitarli il più possibile.

  • Ottimizzazione del pre-load con prefetch, dns-prefetch e prerender: low I browser più popolari possono utilizzare direttive sui tag <link> e attributi "rel" con alcune keyword particolari per pre-caricare URL specifici.

    Perchè?:

    Il prefetching permette ai browser di prendere in maniera silenziosa le risorse necessarie per mostrare i contenuti che un utente potrebbe accedere nel futuro prossimo. I browser sono capaci di conservare queste risorse in cache e quindi velocizzare il caricamento delle pagine web quando utilizzano domini differenti per le risorse delle pagine. Quando una pagina web è stata caricata e il tempo di inattività è trascorso, il browser inizia a scaricare altre risorse. Quando un utente entra in un particolare link (già precaricato), il contenuto verrà servito istantaneamente.

    Come?:

    ⁃ Assicurati che tutti i <link> siano nella sezione <head>.

⬆ torna sù

CSS

css

  • Minificazione: high Tutti i file CSS vengono minificati, i commenti, gli spazi bianchie le nuove linee vengono rimosse dai file di produzione.

    Perchè?:

    Quando i file CSS vengono minificati, il contenuto viene caricato più velocemente e vengono inviati meno dati al client. Minificare i file CSS in ambiente di produzione è molto importante. È vantaggioso sia per l'utente ma anche per ridurre i costi dovuti alla larghezza della banda e all'utilizzo delle risorse.

    Come:

    ⁃ Utilizzare strumenti che permettono di minificare automaticamente i file CSS in fase di build oppure in fase di deploy.

  • Concatenazione: medium questa pratica consiste nell'unire diversi file CSS in un singolo file (Non sempre valido se si utilizza il protocollo HTTP/2).

    <!-- Non raccomandato -->
<link rel="stylesheet" href="foo.css"/>
<link rel="stylesheet" href="bar.css"/>

<!-- Raccomandato -->
<link rel="stylesheet" href="foobar.css"/>

    Perchè?:

    Se stai ancora utilizzando la versione HTTP/1, dovresti ancora continuare a concatenare i file CSS, mentre se usi HTTP/2 non dovresti aver più bisogno di unirli (per sicurezza conviene fare dei test).

    Come:

    ⁃ Utilizza strumenti online o qualsiasi plugin prima o durante la build o il deploy dei tuoi file per effettuare la concatenzaione.
    ⁃ Assicurati, ovviamente, che la concatenazione non spacchi il front-end del tuo progetto.

  • Non bloccante: high I file CSS devono essere non bloccanti per evitare che il caricamento del DOM di pagina richieda più tempo.

    <link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>

    Perchè?:

    I file CSS possono bloccare il caricamento di pagina e ritardare il rendering. Utilizzando preload si può caricare un file css prima che il browser inizi a mostrare il contenuto di una pagina.

    Come?:

    ⁃ Bisogna aggiungere l'attributo rel attribute con il valore preload e aggiungere as="style" sull'elemento <link>.

  • CSS inutilizzato: medium Rimozione dei selettori css non utilizzati.

    Perchè?:

    La rimozione dei selettori CSS non utilizzati può ridurre la dimensione dei file e quindi velocizzare il caricamento delle risorse.

    Come:

    ⁃ ⚠️ Controlla sempre se il framework CSS che vuoi utilizzare non abbia già incluso codice per fare il reset o la normalizzazione CSS. Alcune volte può capiare che non ti serva tutto che è contenuto all'interno dei file di reset o normalizzazione.

  • CSS incorporato o in linea: high Evita di utilizzare CSS incorporati o in linea all'interno del tag <body> (Non valido se si utilizza HTTP/2)

    Perchè?:

    Una delle prime ragioni è perchè è buona pratica separare il contenuto dal design. Questo aiuta anche ad avere una codebase più mantenibile e rende il tuo sito web accessibile. Ma per quanto riguarda le performance dipende semplicemente dal fatto che riduce la dimensione delle pagine HTML e riduce i tempi di caricamento.

    Come:

    Utilizza sempre fogli di stile esterni oppure incorpora il CSS all'interno del tag <head> (e segui le altre regole di performance lato CSS).

  • Analizza la complessità dei file CSS: high Analizzare i tuoi fogli di stile può aiutarti ad identificare problematiche, ridondanze e selettori CSS duplicati.

    Perchè?:

    Qualche volta potresti avere ridondanze o errori di validazione nei tuoi file CSS, analizzandoli e riducendo queste complessità può aiutarti a velocizzarli (perchè il tuo browser riuscirà a caricarli più velocemente).

    Come:

    Il tuo CSS dovrebbe essere organizzato, magari utilizzando un preprocessore CSS. Alcuni degli strumenti online riportati sotto possono anche aiutarti ad analizzare e correggere il tuo codice.

⬆ torna su

Fonts

fonts

  • Prevenire il flash o il testo invisibile: medium Evita il testo trasparente finché il Webfont non viene caricato

⬆ torna sù

Immagini

images

  • Utilizza immagini vettoriali rispetto a quelle rasterizzate o bitmap: medium Preferisci l'utilizzo di immagini vettoriali rispetto alle immagini bitmap (quando possibile).

    Perchè:

    Le immagini vettoriali (SVG) tendono ad essere più piccole rispetto alle immagini e gli SVG inoltre sono responsive e scalano perfettamente. Queste immagini possono essere animato e modificate via CSS.

⬆ torna sù

JavaScript

javascript

  • Minificazione Javascript: high Tutti i file JavaScript sono minimizzati, i commenti, gli spazi bianchi e le nuove righe vengono rimossi dai file di produzione (ancora valido se si utilizza HTTP/2).

    Perchè?:

    La rimozione di tutti gli spazi, i commenti e le interruzioni non necessari ridurrà le dimensioni dei tuoi file JavaScript e accelererà i tempi di caricamento della pagina del tuo sito e ovviamente alleggerirà il download per il tuo utente.

    Come?:

    ⁃ Usa gli strumenti suggeriti di seguito per minimizzare automaticamente i tuoi file prima o durante la compilazione o la distribuzione.

  • Nessun JavaScript nel mezzo della pagina: medium (Valido solo per i siti Web) Evita di avere più codici JavaScript incorporati nel mezzo del tuo corpo. Raggruppa il tuo codice JavaScript all'interno di file esterni o eventualmente in <head> o alla fine della tua pagina (prima di </body>).

    Perchè?:

    L'inserimento di codice JavaScript incorporato direttamente nel tuo <body> può rallentare la tua pagina perché si carica mentre il DOM viene costruito. L'opzione migliore è utilizzare file esterni con async o defer per evitare di bloccare il DOM. Un'altra opzione è inserire alcuni script all'interno del tuo <head>. Il più delle volte codice di analisi o piccolo script che deve essere caricato prima che il DOM arrivi all'elaborazione principale.

    Come?:

    Assicurati che tutti i tuoi file siano caricati usando async o defer e decidi saggiamente il codice che dovrai inserire nel tuo <head>.

  • Javascript non bloccante: high I file JavaScript vengono caricati in modo asincrono utilizzando "async" o differiti utilizzando l'attributo "defer".

    <!-- Defer Attribute -->
<script defer src="foo.js"></script>

<!-- Async Attribute -->
<script async src="foo.js"></script>

    Perchè?:

    JavaScript blocca la normale analisi del documento HTML, quindi quando il parser raggiunge un tag <script> (in particolare si trova all'interno di <head>), si ferma per recuperarlo ed eseguirlo. L'aggiunta di async o defer è altamente raccomandata se i tuoi script sono posizionati nella parte superiore della pagina, ma è meno utile se appena prima del tag </body>. Tuttavia, è consigliabile utilizzare sempre questi attributi per evitare qualsiasi problema di prestazioni.

    Come?:

    ⁃ Aggiungi async (se lo script non si basa su altri script) o defer (se lo script si basa o si basa su uno script asincrono) come attributo al tag dello script.
    ⁃ Se disponi di script di piccole dimensioni, potresti utilizzare lo script inline posto sopra gli script asincroni.

  • Librerie JS ottimizzate e aggiornate: medium Tutte le librerie JavaScript utilizzate nel tuo progetto sono necessarie (preferisci Vanilla JavaScript per funzionalità semplici), aggiornate alla loro ultima versione e non sovraccaricano il tuo JavaScript con metodi non necessari.

    Perchè?:

    La maggior parte delle volte, le nuove versioni vengono fornite con l'ottimizzazione e la correzione della sicurezza. Dovresti utilizzare il codice più ottimizzato per velocizzare il tuo progetto e assicurarti di non rallentare il tuo sito Web o la tua app senza un plug-in obsoleto.

    Come?:

    Se il tuo progetto usa i pacchetti NPM, npm-check è una libreria piuttosto interessante per aggiornare / aggiornare le tue librerie. Greenkeeper può cercare automaticamente le tue dipendenze e suggerire un aggiornamento ogni volta che esce una nuova versione.

⬆ torna sù

Server

server-side

  • Il tuo sito utilizza HTTPS: high

    Perchè?:

    HTTPS non è solo per i siti Web di e-commerce, ma per tutti i siti Web che scambiano dati. Dati condivisi da un utente o dati condivisi con un'entità esterna. I browser moderni oggi limitano le funzionalità per i siti che non sono sicuri. Ad esempio: la geolocalizzazione, le notifiche push e i service worker non funzionano se l'istanza non utilizza HTTPS. E oggi è molto più facile configurare un progetto con un certificato SSL rispetto a prima (e gratuitamente, grazie aLet's Encrypt).

  • Minimizzare le richieste HTTP: high Assicurati sempre che ogni file richiesto sia essenziale per il tuo sito web o applicazione.
  • Usa una CDN per servire le tue risorse: medium Usa un CDN per distribuire più velocemente i tuoi contenuti in tutto il mondo.

  • Servire i file con lo stesso protocollo: high Evita che il tuo sito Web serva file provenienti dalla fonte utilizzando HTTP sul tuo sito Web che utilizza HTTPS, ad esempio. Se il tuo sito Web utilizza HTTPS, i file esterni dovrebbero provenire dallo stesso protocollo.

  • Servire file raggiunbili: high Evita di richiedere file non raggiungibili (404).

  • Imposta correttamente le intestazioni della cache HTTP: high Imposta le intestazioni HTTP per evitare un numero costoso di roundtrip tra il tuo browser e il server.
  • Compressione GZIP / Brotli abilitata: high Usa un metodo di compressione come Gzip o Brotli per ridurre le dimensioni dei tuoi file JavaScript. Con un file di dimensioni inferiori, gli utenti saranno in grado di scaricare l'asset più velocemente, con conseguente miglioramento delle prestazioni.

⬆ torna sù

Performances Freamework Javascript

Angular

React

Vue

Performance e CMS

WordPress

Articoli

Plugin consigliati

Traduzioni

La Front-End Performance Checklist vuole essere disponibile anche in altre lingue! Non esitare a inviare il tuo contributo!

Contribuire

Apri una issue o una pull request per suggerire modifiche o aggiunte.

Supporto

Se hai domande o suggerimenti, non esitare a usare Discord o Twitter:

Autore

**Costruita con ❤️ da David Dias

Contributori

Questo progetto esiste grazie a tutte le persone che contribuiscono. [Contribute].

Sostenitori

Grazie a tutti i nostri sostenitori! 🙏 [Diventa un sostenitore]

Sponsor

Sostieni questo progetto diventando uno sponsor. Il tuo logo apparirà qui con un link al tuo sito web. [Diventa sponsor]

Licenza

MIT

Tutte le icone sono fornite da Icons8

⬆ Torna sù

About

🎮 L'unica Checklist delle Performance Front-End che funziona più velocemente delle altre

Resources

Readme

License

MIT license

Code of conduct

Code of conduct

Contributing

Contributing
Activity

Stars

3 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published