Una semplice regola: "Progetta e sviluppa con le performance in mente"
Come usarla • Contribuisci • Product Hunt
Altre Checklists:
🗂 Front-End Checklist • 💎 Front-End Design Checklist
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).
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.
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
- 📹 The Cost Of JavaScript - YouTube (text version)
- 📖 AddyOsmani.com - Start Performance Budgeting
- 📖 Get Started With Analyzing Runtime Performance | Google Developers
- 📖 State of the Web | 2018_01_01
- 📖 Page Weight Doesn't Matter
- 📖 Front-End Performance Checklist 2021 [PDF, Apple Pages, MS Word]
- 📖 Designing for Performance Weighing Aesthetics and Speed - By Lara Callender Hogan [eBook, Print]
- 📖 Varvy - Web performance glossary
- 📖 fabkrum/web-performance-resources: Up to date collection of valuable web performance resources
- 📖 Checkbot - Web Speed Best Practices
- 🛠 Progressive Tooling - A list of community-built, third-party tools that can be used to improve page performance
-
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.
-
Posiziona i tag CSS sempre prima di quelli Javascript: 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: 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>
.
-
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.
-
Concatenazione: 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: 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 valorepreload
e aggiungereas="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.
-
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.
-
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). -
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
-
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
⁃ Cerca le i lookup DNS andati a buon fine e prendi nota degli host che vengono richiesti
⁃ Fai il prefetch dei webfont nell'<head>
e aggiungi alla fine questi nomi host che dovresti anche precaricare- 📖 Google Fonts più veloci con Preconnect - CDN Planet
- 📖 Rendi il tuop sito più veloce con i suggerimenti Preconnect | Viget
- 📖 Guida definitiva ai suggerimenti del browser: Preload, Prefetch, and Preconnect - MachMetrics Speed Blog
- 📖 Una guida completa alle strategie di caricamento dei fonts—zachleat.com
- 🛠 typekit/webfontloader: Web Font Loader ti offre un controllo aggiuntivo quando utilizzi i font collegati tramite @font-face.
-
Dimensione dei Webfont: La dimensione dei Webfont non deve superare i 300kb (con tutte le varianti incluse)
- Prevenire il flash o il testo invisibile: Evita il testo trasparente finché il Webfont non viene caricato
-
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)
⁃ Quando è possibile, usa i font invece di testo codificato nelle tue immagini
⁃ Usa gli SVG
⁃ Usa uno strumento e specifica un livello di compressione inferiore all'85%.- 📖 Ottimizzazione immagini | Web Fundamentals | Google Developers
- 📖 Essential Image Optimization - An eBook by Addy Osmani
- 🛠 TinyJPG – Comprimi le immagini JGP in maniera intelligente
- 🛠 Kraken.io - Ottimizzatore online di immagini
- 🛠 Compressor.io - ottimizza e comprimi immagini png ed foto
- 🛠 Cloudinary - Strumento di analisi di immagini
- 🛠 ImageEngine - Test di caricamento delle immagini di una pagina web
- 🛠 SVGOMG - Ottimizza i file SVG
-
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)
⁃ 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
edheight
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.
- 📖 Base64 Encoding & Performance, Parte 1 e 2 a cura di Harry Roberts
- 📖 Uno sguardo più da vicino alle prestazioni delle immagini Base64 – The Page Not Found Blog
- 📖 Quando codificare le immagini in base64 (e quando no) | David Calhoun
- 📖 Immagini con codifica Base64 per pagine più veloci | Performance and seo factors
-
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.
⁃ Utilizza un plugin javascript come quelli suggeriti dopo per caricare le immagini in lazy load. Assicurati di agire solo sulle immagini fuori viewport.
⁃ 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.
⁃ Usasrcset
epicture
per fornire più varianti di ogni immagine.
-
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 conasync
odefer
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
odefer
e decidi saggiamente il codice che dovrai inserire nel tuo<head>
. -
Javascript non bloccante: 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 diasync
odefer
è 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) odefer
(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: 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.
-
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.
- 📖 Aumenta la velocità di esecuzione di Javascript | Tools for Web Developers | Google Developers
- 📖 Profilazione JavaScript con gli strumenti per sviluppatori di Chrome — Smashing Magazine
- 📖 Come registrare istantanee Heap | Tools for Web Developers | Google Developers
- 📖 Capitolo 22 - Profilare il Frontend - Blackfire
- 📖 30 suggerimenti per migliorare le prestazioni di Javascript
-
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.
- 📖 Service Workers: Introduzione | Web Fundamentals | Google Developers
- 📖 Misurazione dell'impatto sulle prestazioni nel mondo reale dei Service Worker | Web | Google Developers
- 📖 Cosa sono i Service Workers e come ci possono aiutare a migliorare le performance
- 📹 Come lavora un Service Worker? - YouTube
-
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).
- 📖 Perchè usare HTTPS? | Cloudflare
- 📖 Abilita HTTPS senza sacrificare le performance - Moz
- 📖 Come HTTPS influisce sulle performance dei siti web
- 📖 HTTP vs HTTPS vs HTTP2 - La vera storia | Tune The Web
- 📖 HTTP vs HTTPS — Testali da solo
-
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.
- Usa una CDN per servire le tue risorse: Usa un CDN per distribuire più velocemente i tuoi contenuti in tutto il mondo.
- 📖 10 Consigli per ottimizzare le performance CDN - CDN Planet
- 📖 HTTP Caching | Web Fundamentals | Google Developers
-
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).
- 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.
- 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.
- 📖 Ottimizzazione performance - React
- 📖 Manipolazione immagini con React | Cloudinary
- 📖 Debug delle prestazioni di React con React 16 e Chrome Devtools.
- 📖 Costrusci in maniera performante- React
- 📖 19 consigli per velocizzare le prestazioni di WordPress (Aggiornato)
- 📖 Velocizza il tuo WordPress - Come salvare le immagini ottimizzate per il Web
- 🛠 Plugin di memorizzazione nella cache per WordPress: velocizza il tuo sito Web con WP Rocket
- 🛠 WP-Sweep | WordPress.org
- 🛠 Imagify Ottimizzatore di immagini | WordPress.org
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)
Apri una issue o una pull request per suggerire modifiche o aggiunte.
Se hai domande o suggerimenti, non esitare a usare Discord o Twitter:
**Costruita con ❤️ da David Dias
Questo progetto esiste grazie a tutte le persone che contribuiscono. [Contribute].
Grazie a tutti i nostri sostenitori! 🙏 [Diventa un sostenitore]
Sostieni questo progetto diventando uno sponsor. Il tuo logo apparirà qui con un link al tuo sito web. [Diventa sponsor]
Tutte le icone sono fornite da Icons8