Awesome

<h1 align="center"> <br> <a href="https://github.com/thedaviddias/Front-End-Performance-Checklist"><img src="https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/master/images/logo-front-end-performance-checklist.jpg" alt="Front-End Performance Checklist" width="170"></a> <br> <br> Front-End Performance Checklist <br> </h1> <h4 align="center">🎮 L'unica Checklist delle Performance Front-End che funziona più velocemente delle altre.</h4> <p align="center">Una semplice regola: "Progetta e sviluppa con le performance in mente"</p> <p align="center"> <a href="http://makeapullrequest.com"> <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome"> </a> <a href="https://discord.gg/btHQRkm"> <img src="https://img.shields.io/badge/chat-on_discord-4837E2.svg?style=flat-square" alt="Discord"> </a> <a href="https://opensource.org/licenses/MIT"> <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="Licence MIT"> </a> </p> <p align="center"> <a href="#how-to-use">Come usarla</a> • <a href="#contributing">Contribuisci</a> • <a href="https://www.producthunt.com/posts/front-end-performance-checklist">Product Hunt</a> </p> <p align="center"> <a href="https://github.com/JohnsenZhou/Front-End-Performance-Checklist">🇨🇳</a> <a href="https://github.com/WilliamDASILVA/Front-End-Performance-Checklist">🇫🇷</a> <a href="https://github.com/ParkSB/Front-End-Performance-Checklist">🇰🇷</a> <a href="https://github.com/fernandofawkes/Front-End-Performance-Checklist">🇵🇹</a> <a href="https://github.com/lex111/Front-End-Performance-Checklist">🇷🇺</a> <a href="https://github.com/GameWith/Front-End-Performance-Checklist">🇯🇵</a> <a href="https://github.com/ms-fadaei/Front-End-Performance-Checklist">🇮🇷</a> <a href="https://github.com/marbio/Front-End-Performance-Checklist">🇮🇹</a> </p> <p align="center"> <span>Altre Checklists:</span> <br> 🗂 <a href="https://github.com/thedaviddias/Front-End-Checklist#---------front-end-checklist-">Front-End Checklist</a> • 💎 <a href="https://github.com/thedaviddias/Front-End-Design-Checklist#front-end-design-checklist">Front-End Design Checklist</a> </p>

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à:

livello di priorità basso.
livello di priorità medio. Non dovresti evitare di affronare quell'elemento.
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:

🛠 WebPagetest - Website Performance and Optimization Test
🛠 ☆ Dareboost: Website Speed Test and Website Analysis (utilizza il coupon WPCDD20 per avere uno sconto del 20%)
🛠 Treo: Page Speed Monitoring
🛠 GTmetrix | Website Speed and Performance Optimization
🛠 PageSpeed Insights
🛠 Web.dev
🛠 Pingdom Website Speed Test
📖 Make the Web Faster | Google Developers
🛠 Sitespeed.io - Welcome to the wonderful world of Web Performance
🛠 Calibre
🛠 Website Speed Test | Check Web Performance » Dotcom-Tools
🛠 Website and Server Uptime Monitoring - Pingdom (Free Signup Link)
🛠 Uptime Robot
🛠 SpeedCurve: Monitor front-end performance
🛠 PWMetrics - CLI tool and lib to gather performance metrics
🛠 Varvy - Page speed optimization
🛠 Lighthouse - Google
🛠 Checkbot browser extension - Checks for web performance best practices
🛠 Yellow Lab Tools | Online test to help speeding up heavy web pages
🛠 Speedrank - Web Performance Monitoring
🛠 DebugBear - Monitor website performance and Lighthouse scores
🛠 packtracker.io - Check your webpack bundle size on every pull request.
🛠 Exthouse - Analyze the impact of a browser extension on web performance
🛠 LogRocket - Measure front-end performance in production apps

Riferimenti

HTML

html

HTML Minificato: 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.
- 🛠 HTML minifier | Minify Code
- 🛠 Online HTML Compressor
- 📖 Experimenting with HTML minifier — Perfection Kills
Posiziona i tag CSS sempre prima di quelli Javascript: Assicurati che il tuo CSS venga sempre caricato prima del codice Javascript.
```

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


<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>.
- 📖 Ordering your styles and scripts for pagespeed
Minimizza il numero degli iframe: 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: 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: 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.
- 🛠 cssnano: un minificatore modulare basato sull'ecosistema PostCSS.
- 🛠 CSS Minfier
- 🛠 @neutrinojs/style-minify - npm
- 🛠 Online CSS Compressor
Concatenazione: questa pratica consiste nell'unire diversi file CSS in un singolo file (Non sempre valido se si utilizza il protocollo HTTP/2).
```

<link rel="stylesheet" href="foo.css"/>
<link rel="stylesheet" href="bar.css"/>


<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. <br> ⁃ Assicurati, ovviamente, che la concatenazione non spacchi il front-end del tuo progetto.
- 📖 HTTP: Optimizing Application Delivery - High Performance Browser Networking (O'Reilly)
- 📖 Performance Best Practices in the HTTP/2 Era
Non bloccante: 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: 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.
- 🛠 UnCSS Online
- 🛠 PurifyCSS
- 🛠 PurgeCSS
- 🛠 Chrome DevTools Coverage

CSS critico: Il CSS critico (o "above the fold") raggruppa tutto il CSS utilizzato per rendereizzare la porzione di pagina visibile. Questo viene incorporato prima di chiamare il CSS principale e all'interno dei tag <style></style> in una singola linea (possibilmente minificato).

Perchè?:

Mettere in linea il CSS critico aiuta a velocizzare la renderizzazione delle pagine web riducendo il numero delle richieste al server.

Come:

Generare il CSS critico con strumenti online oppure utilizzando un plugin come quello sviluppato da Addy Osmani.
- 📖 Understanding Critical CSS
- 🛠 Critical by Addy Osmani on GitHub automatizza questo.
- 📖 Inlining critical CSS for better web performance | Go Make Things
- 🛠 Critical Path CSS Generator - Prioritize above the fold content :: SiteLocity
- 📖 Reduce the size of the above-the-fold content

CSS incorporato o in linea: 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).
- 📖 Observe CSS Best Practices: Avoid CSS Inline Styles
Analizza la complessità dei file CSS: 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.
- 🛠 TestMyCSS | Optimize and Check CSS Performance
- 🛠 CSS Stats
- 🛠 macbre/analyze-css: CSS selectors complexity and performance analyzer
- 🛠 Project Wallace is like CSS Stats but stores stats over time so you can track your changes

⬆ torna su

Fonts

fonts

📖 A Book Apart, Webfont Handbook

Formati Webfont: Utilizza il formato WOFF2 nel tuo progetto o applicazione web.

Perchè?:

Secondo Google, il formato di compresisone Web Font WOFF2 offre un guadagno medio del 30% rispetto a WOFF 1.0. É quindi utile utilizzare WOFF 2.0, WOFF 1.0 come fallback e TTF.

Come?:

Prima di acquistare un font controlla che il venditore fornisca il formato WOFF2. Se stai utilizzando un font gratuito, puoi sempre utilizzare Font Squirrel per generare tutti i formati che ti servono.
Usa preconnect per caricare i tuoi web fonts più velocemente:
```
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
```
Perchè?:

Quando atterri su un sito web, il tuo dispositivo ha bisogno di sapere dove risiede il tuo applicativo e verso quale server deve connettersi. Il tuo browser deve contattare un server DNS ed aspettare il completamento del lookup prima di iniziare a recuperare le risorse (fonts, file css, ecc.). Prefetch e Preconnect permettono al browser di cercare le informazioni DNS ed iniziare da subito una connessione TCP verso il server che ospita il file dei font. Questo permette di avere un incremento delle performance perché quando il browser riesce ad analizzare il file css con le informazioni sul font e scopre che deve richiedere un file di font dal server, avrà già pre-risolto le informazioni DNS e avrà una connessione aperta al server pronta in il suo pool di connessioni.

Come?:

⁃ Prima di precaricare i tuoi caratteri web, usa webpagetest per valutare il tuo sito web <br> ⁃ Cerca le i lookup DNS andati a buon fine e prendi nota degli host che vengono richiesti <br> ⁃ Fai il prefetch dei webfont nell' <head> e aggiungi alla fine questi nomi host che dovresti anche precaricare
Dimensione dei Webfont: La dimensione dei Webfont non deve superare i 300kb (con tutte le varianti incluse)

📖 Font Bytes - Page Weight

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

⬆ torna sù

Immagini

images

📖 Image Bytes in 2018
Ottimizzazione immagini: Le tue immagini devono essere ottimizzate, compresse senza nessun impatto verso l'utente finale.

Perchè?:

Le immagini ottimizzate si caricano più velocemente nel browser e consumano meno dati.

Come?:

⁃ Prova ad utilizzare qualche effetto CSS2 quando è possibile (invece di utilizzare piccole immagini) <br> ⁃ Quando è possibile, usa i font invece di testo codificato nelle tue immagini <br> ⁃ Usa gli SVG <br> ⁃ Usa uno strumento e specifica un livello di compressione inferiore all'85%.
Formati immagine: Scegli il tuo formato immagine in maniera appropriata.

Perchè?:

Per garantire che le tue immagini non rallentino il tuo sito web, scegli il formato che corrisponderà alla tua immagine. Se si tratta di una foto, JPEG è il formato più appropriato rispetto a PNG o GIF. Ma non dimenticarti di guardare ai nuovi formati immagine che possono ridurre la dimensione dei tuo file. Ogni formato immagine ha dei pro e dei contro, è importante conoscerli e fare la miglior scelta possibile.

Come?:

⁃ Utlizza Lighthouse per identificare quale immagine eventualmente può utilizzare un formato di nuova generazione (come JPEG 2000m, JPEG XR o WebP)<br> ⁃ Compara diversi formati, spesso utilizzare PNG8 è meglio rispetto ad usare PNG16, altre volte invece è vero il contrario.

Utilizza immagini vettoriali rispetto a quelle rasterizzate o bitmap: 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.

Dimensioni immagine: Specifica width ed height sui tag <img> se conosci la dimensione dell'immagine finale renderizzata.

Perchè:

Se altezza e larghezza vengono specificate, lo spazio richiesto per l'immagine viene riservato quando la pagina viene caricata. Altrimenti, senza l'utilizzo di questi attributi, il browser non conosce la dimensione dell'immagine, e non può riservare lo spazio appropriato per essa. L'effetto sarà che il layout di pagina cambierà durante il caricamento (mentre l'immagine viene caricata).
Evita di utilzzare immagini in base64: Alla fine potresti convertire immagini minuscole in base64, ma in realtà non è la migliore pratica.
Lazy loading: Le immagini fuori viewport vengono caricate in lazy load (Una fallback noscript viene sempre fornita).

Perchè?:

Migliorerà il tempo di risposta della pagina corrente e quindi eviterà di caricare immagini non necessarie di cui l'utente potrebbe non aver bisogno.

Come?:

⁃ Utilizza Lighthouse per identificare quante immagini sono fuori schermo. <br> ⁃ Utilizza un plugin javascript come quelli suggeriti dopo per caricare le immagini in lazy load. Assicurati di agire solo sulle immagini fuori viewport. <br> ⁃ Inoltre assicurati di caricare in lazy load le immagini alternative mostrate a mouseover oppure dopo un'azione utente.
Immagini responsive: Assicurati di pubblicare immagini vicine alle dimensioni del tuo display.

Perchè?:

I dispositivi di piccole dimensioni non hanno bisogno di immagini più grandi del loro viewport. Si consiglia di avere più versioni di un'immagine su dimensioni diverse.

How:

⁃ Crea immagini di dimensioni diverse per i dispositivi che vuoi scegliere come target. <br> ⁃ Usa srcset e picture per fornire più varianti di ogni immagine.
- 📖 Responsive images - Learn web development | MDN

⬆ torna sù

JavaScript

javascript

Minificazione Javascript: 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: (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>.
- 📖 11 consigli per ottimizzare JavaScript e migliorare la velocità di caricamento del sito web
Javascript non bloccante: I file JavaScript vengono caricati in modo asincrono utilizzando "async" o differiti utilizzando l'attributo "defer".
```

<script defer src="foo.js"></script>


<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. <br> ⁃ Se disponi di script di piccole dimensioni, potresti utilizzare lo script inline posto sopra gli script asincroni.
- 📖 Rimozione di Javascript Render-Blocking
- 📖 Differisci il caricamento dei file javascript
Librerie JS ottimizzate e aggiornate: 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.
- 📖 Potresti non aver bisogno di jQuery
- 📖 Vanilla JavaScript per la creazione di potenti applicazioni web

Controlla il limite delle dimensioni delle dipendenze: Assicurati di utilizzare saggiamente librerie esterne, la maggior parte delle volte puoi utilizzare una libreria più leggera per la stessa funzionalità.

Perchè?:

You may be tempted to use one of the 745 000 packages you can find on npm, but you need to choose the best package for your needs. For example, MomentJS is an awesome library but with a lot of methods you may never use, that's why Day.js was created. It's just 2kB vs 16.4kB gz for Moment.

Come?:

Confronta e scegli sempre la libreria migliore e più leggera per le tue esigenze. Puoi anche usare strumenti come npm trends per confrontare i conteggi dei download dei pacchetti NPM o Bundlephobia per conoscere la dimensione delle tue dipendenze.
Profilazione Javascript: Verifica la presenza di problemi di prestazioni nei tuoi file JavaScript (e anche CSS).

Perchè?:

La complessità di JavaScript può rallentare le prestazioni di runtime. L'identificazione di questi possibili problemi è essenziale per offrire un'esperienza utente ottimale.

Come?:

Utilizza lo strumento Timeline in Chrome Developer Tool per valutare gli eventi degli script e trovare quello che potrebbe richiedere troppo tempo.
Utilizzo dei Service Worker: Stai utilizzando Service Worker nella tua PWA per memorizzare nella cache i dati o eseguire possibili attività pesanti senza influire sull'esperienza utente della tua applicazione.

⬆ torna sù

Server

server-side

Il tuo sito utilizza HTTPS:

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).

Il peso della pagina inferiore a < 1500 KB (idealmente < 500 KB): Riduci la dimensione delle pagine e risorse più che puoi.

Perchè?:

Idealmente dovresti provare a scegliere come target <500 KB, ma lo stato del Web mostra che la mediana di kilobyte è di circa 1500 KB (anche su dispositivi mobili). A seconda degli utenti target, della connessione di rete, dei dispositivi, è importante ridurre il più possibile i kilobyte totali per avere la migliore esperienza utente possibile.

Come?:

⁃ Tutte le regole all'interno della Front-End Performance Checklist ti aiuteranno a ridurre il più possibile le tue risorse e il tuo codice.
Tempi di caricamento pagina inferiori a 3 secondi: Riduci il più possibile i tempi di caricamento della tua pagina per consegnare rapidamente i tuoi contenuti ai tuoi utenti.

Perchè?:

Più veloce è il tuo sito web o la tua app, meno hai probabilità di aumenti di rimbalzo, in altri termini hai meno possibilità di perdere il tuo utente o futuro cliente. Abbastanza ricerche sull'argomento dimostrano questo punto.

Come?:

Utilizza strumenti online come Page Speed Insight oppure WebPageTest per analizzare cosa potrebbe rallentarti e utilizzare l'elenco di controllo delle prestazioni del front-end per migliorare i tempi di caricamento.
Time To First Byte inferiore a 1.3 secondi: Riduci il più possibile il tempo di attesa del tuo browser prima di ricevere i dati.

Dimensione dei cookie: Se stai utilizzando i cookie, assicurati che ognuno dei cookie non superi i 4096 bytes ed il tuo nome dominio non abbia più di 20 cookies.

Perchè?:

I cookie vengono scambiati nelle intestazioni HTTP tra server Web e browser. È importante mantenere la dimensione dei cookie il più bassa possibile per ridurre al minimo l'impatto sul tempo di risposta dell'utente.

Come?:

Elimina i cookie non necessari.

Minimizzare le richieste HTTP: Assicurati sempre che ogni file richiesto sia essenziale per il tuo sito web o applicazione.

📖 Combinare Css esterni
📖 Combinare javascript esterni

Usa una CDN per servire le tue risorse: Usa un CDN per distribuire più velocemente i tuoi contenuti in tutto il mondo.

Servire i file con lo stesso protocollo: 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: Evita di richiedere file non raggiungibili (404).

📖 Come evitare richieste errate

Imposta correttamente le intestazioni della cache HTTP: Imposta le intestazioni HTTP per evitare un numero costoso di roundtrip tra il tuo browser e il server.

📖 Utilizzo del controllo della cache per la memorizzazione nella cache del browser

Compressione GZIP / Brotli abilitata: 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

📖 Angular Performance Checklist

React

Vue

📖 Vue - Link utili|Style Guide and Performance

Performance e CMS

WordPress

🛠 Testa la velocità del tuo sito web | WordPress Hosting by @WPEngine

Articoli

Plugin consigliati

Traduzioni

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

🇵🇹 Portuguese: fernandofawkes/Front-End-Performance-Checklist
🇨🇳 Chinese: JohnsenZhou/Front-End-Performance-Checklist
🇷🇺 Russian: lex111/Front-End-Performance-Checklist
🇫🇷 French: WilliamDASILVA/Front-End-Performance-Checklist
🇰🇷 Korean: ParkSB/Front-End-Performance-Checklist
🇪🇸 Spanish: dagerzuga/Front-End-Performance-Checklist
🇻🇳 Vietnamese : huynhan147/Front-End-Performance-Checklist
🇯🇵 Japanese: GameWith/Front-End-Performance-Checklist
🇵🇱 Polish: mbiesiad/Front-End-Performance-Checklist
🇮🇷 Persian: ms-fadaei/Front-End-Performance-Checklist
🇮🇹 Italian: [marbio/Front-End-Performance-Checklist] (https://github.com/marbio/Front-End-Performance-Checklist)

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]. <a href="https://github.com/thedaviddias/Front-End-Performance-Checklist/graphs/contributors"> <img src="https://opencollective.com/front-end-checklist/contributors.svg?width=890" /> </a>

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ù