Questo articolo ti introdurrà a un argomento noto come Minify In e in corso darti anche una dimostrazione pratica dettagliata. I seguenti suggerimenti saranno trattati in questo articolo,
- Cos'è la minificazione?
- Perché è necessaria la minificazione?
- Come minimizzi CSS, JS, codice HTML?
- Quando dovresti farlo?
- Vantaggi della minificazione?
Come il nome suggerisce abbastanza bene, la minimizzazione riguarda la riduzione al minimo delle dimensioni di un file. In una base di codice, abbiamo la libertà di minimizzare i file HTML, CSS o Javascript. Qui, discuteremo della minimizzazione di un file CSS.
Quando uno sviluppatore codifica, si assicura che il codice sia nel formato più leggibile per semplificare qualsiasi processo di ulteriori modifiche. Quindi, i nomi delle variabili sono in un formato facilmente comprensibile e occupano molti caratteri. Quindi, aggiungono anche una buona quantità di spazio vuoto per renderlo abbastanza leggibile.
Ma durante l'intero processo, tendiamo ad allentare le stringhe che aumentano la dimensione del nostro file, il che a sua volta aumenta il tempo di caricamento del sito web. Soprattutto con i siti Web che hanno una parte importante di funzionalità e componenti aggiuntivi, una base di codice più lunga peggiora il sito.
Google ha comunque un formato limitato per classificare i siti web nella sua pagina di ricerca in base all'esperienza utente ottimale fornita dai siti web. Migliore è il caricamento del tuo sito, migliore è il posizionamento del tuo sito nella pagina di ricerca.
Con così tanto in gioco, non vuoi che i tuoi utenti soffrano a causa del cattivo tempo di caricamento del sito e passino a quello successivo. Pertanto, la minificazione del codice è estremamente importante.
Infatti, mentre costruiamo un sito web, sappiamo in cosa consiste la base di codice massima?
Si tratta di CSS, HTML e Javascript. La competizione odierna per rendere il tuo sito web visivamente accattivante sottolinea molto il file CSS e senza rendercene conto sfruttiamo il nostro sito web con un codice pesante.
Entra, minificazione ..
Andando avanti con questo articolo su Minify CSS
Cosa è minificazione ?
La minimizzazione ti consente di ridurre il codice a una dimensione di file minima che non influisce sul codice e tuttavia riduce la dimensione del file. Nel processo, puoi rimuovere la spaziatura e i caratteri non necessari che non influiscono in alcun modo sull'originalità del tuo sito web. Alcune cose che dovrebbero essere evitate dal codice sono:
- Caratteri di spazi bianchi
- Nuovi caratteri di riga
- Blocca delimitatori
- Commenti
- Accorciare i nomi delle variabili
Questi fattori non sono coinvolti per far funzionare il tuo sito web, ma solo rendere il file più pesante e aumentare il tempo di caricamento del sito web.
La leggibilità del codice esclude completamente ciò che la macchina comprende. Il browser web non ha bisogno di una spaziatura aggiuntiva tra i caratteri per comprendere ed eseguire. Quindi, prova a ridurli e minimizza il codice CSS e HTML.
il metodo system.exit terminerà l'applicazione.
Facciamo un esempio:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Minimizza il mio CSS
Quasi una differenza del 48% nel file originale e minimizzato. Ridotto di 178 byte. Dopo la minificazione
#myContent {font-family: Arialfont-size: 90%}Ciao mondo!
Andando avanti con questo articolo su Minify CSS
Perché è minificazione necessario?
Per migliorare il tempo di caricamento del sito web. A nessuno piace aspettare il caricamento di un sito Web per comodità. Con così tante opzioni disponibili, le persone tendono a passare a un'altra. Quindi, è meglio ridurre le dimensioni del file.
Andando avanti con questo articolo su Minify CSS
Come minimizzare CSS, JS, codice HTML?
Per minimizzare, ci sono innumerevoli strumenti disponibili online che possono aiutarti a ridurre la base di codice. Puoi anche scegliere di farlo manualmente, ma per una base di codice più ampia è consigliabile utilizzare uno dei seguenti strumenti per minimizzare il tuo file CSS:
CSSminifier.com: uno strumento estremamente semplice da usare. Basta copiare il codice sul lato sinistro, generare il file minimizzato e scaricarlo. Il file minimizzato avrà un'estensione .min.
Il tuo file CSS minimizzato avrà l'estensione demo.min.css.
Smallseotools.com: copia il codice o carica il file del codice. Minimizzerà il tuo codice e ti permetterà di copiarlo o scaricarlo.
Ottimizzazione automatica: questo è un plugin che puoi aggiungere ai tuoi strumenti WordPress. Come plugin, puoi scegliere di minimizzare il tuo codice CSS in quel momento.
È più facile per uno sviluppatore capire quando il file è minimizzato e quando no. Un file minimizzato avrà estensione .min.
Andando avanti con questo articolo su Minify CSS
Quando dovresti farlo?
La minificazione dovrebbe essere eseguita principalmente quando hai scritto il codice e devi inviarlo al server per una risposta. Una volta che i file sono stati minimizzati, le versioni minimizzate vengono utilizzate per la distribuzione agli utenti.
Benefici di minificazione ?
Riduzione della dimensione del file: rimuovendo la spaziatura aggiuntiva, riducendo i nomi delle variabili e rimuovendo i commenti, la dimensione del file viene ridotta quasi del 30-60%. Caricamento più veloce: con meno dati da inviare sulla rete, il sito web si carica più velocemente di prima. Costo della larghezza di banda inferiore: quando vengono rimossi dati non necessari, la larghezza di banda necessaria è molto inferiore, così come il costo.
Cose da ricordare:
Anche prima di tentare la minificazione, assicurati che il tuo codice non superi i limiti. Il flusso non dovrebbe essere interrotto e la funzionalità dovrebbe rimanere senza volto. È necessario verificare che anche dopo la minificazione il codice venga eseguito in modo simile.
Infatti, come best practice puoi sempre tenere un modello pronto. Apporta le tue modifiche nel modello integrato che ti farà risparmiare una generosa quantità di tempo.
È simile alla compressione?
Bene, fortemente NO. la minificazione è diversa dalla compressione. La compressione fa sì che un file minimizzato si riduca di più ma non influisce sullo stile e sulla struttura del codice.
Il file viene minimizzato e quindi compresso come zip e inviato in rete quando un client richiede di accedere al sito web. Il file viene quindi decompresso e utilizzato.
Esempi:
Prima della minificazione:
Portafoglio
- Casa
Dopo la minimizzazione:
Portafoglio
- Casa
Il codice è decisamente più difficile da leggere e da capire per un essere umano, ma è altrettanto plausibile per il rendering di una macchina. Una macchina non si preoccupa veramente della bellezza del codice e della spaziatura, ne comprende l'essenza e funziona di conseguenza.
Abbastanza impressionato dalla tecnica di minificazione?
Allora prova tu stesso. Riduci il carico del tuo file e lascia che il tuo sito web scorra liberamente per tutti gli utenti!
Questo ci porta alla fine di questo articolo su Minify In CSS.
Se sei interessato a saperne di più sullo sviluppo web, dai un'occhiata al di Edureka. La formazione sulla certificazione per lo sviluppo web ti aiuterà a imparare come creare siti Web straordinari utilizzando HTML5, CSS3, Twitter Bootstrap 3, jQuery e API di Google e a distribuirli su Amazon Simple Storage Service (S3).
Se sei ancora interessato Se hai qualche domanda, puoi postarla nella sezione commenti di questo blog “Minify In CSS” e ti risponderemo il prima possibile.