Vai al contenuto principale

Come comprimere i file CSS, HTML e Javascript

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Quando comprimi i file CSS, HTML e Javascript del tuo sito web, puoi risparmiare tempo prezioso sulla velocità di caricamento della pagina del tuo sito web. Ora non stiamo parlando di tagliare la velocità di caricamento della tua pagina della metà o altro, ma quando si tratta della velocità del tuo sito web, qualsiasi piccolo bit conta.

La velocità di caricamento del tuo sito web non è importante solo per i nuovi visitatori, ma anche per il posizionamento nei motori di ricerca.

Il termineminifyNel linguaggio di programmazione descrive il processo di rimozione dei caratteri non necessari dal codice sorgente. Questi caratteri includono spazi, interruzioni di riga, les commentaires e bloccare i delimitatori che sono utili per noi umani ma inutili per le macchine.

Minimizziamo i file di un sito web che contengono codice CSS, HTML e JavaScript in modo che il tuo browser web possa leggerli più velocemente.

Leggi anche il nostro articolo su 10 Wordpress Plugin per migliorare la velocità del tuo blog

Ecco un esempio di minificazione CSS.

CSS prima della minificazione

/ * Un esempio di file CSS ---------------------------------- * / .user-profile-card { margin: 0px; background: #33E43} .user-profile-description {border: 0; posizione: assoluta; larghezza: auto; margin-top: 20px; }

CSS dopo la minificazione

.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}

Ovviamente, questo è solo un piccolo esempio che utilizza uno snippet CSS, ma puoi immaginare quanto spazio risparmierebbe riducendo migliaia di righe di codice. 

Come aumentare il tempo speso sul tuo blog WordPress? Scoprilo consultando questo articolo.

Quindi, se vuoi farlo manualmente, tecnicamente puoi. Ma correrai un alto rischio di errore e sprecherai inutilmente tempo prezioso della tua vita!

Segui questi suggerimenti e utilizza gli strumenti a tua disposizione.

Alcuni strumenti per eseguire la compressione

Fortunatamente, non devi necessariamente essere uno sviluppatore o conoscere uno dei linguaggi di programmazione per ridurre le dimensioni dei file del tuo sito web. La minificazione è diventata una pratica comune nel mondo del web design. Quindi non dovresti essere sorpreso di apprendere che ci sono molti strumenti meravigliosi (e gratuiti) là fuori per fare il lavoro per te.

Vedi anche il nostro 6 plugin WordPress per dare nuova vita ai tuoi articoli

Ecco un elenco di strumenti utili per iniziare. Poiché molti di questi possono ridurre al minimo più tipi di codice, ho incluso le opzioni del tipo di codice tra parentesi.

    • cssminifier.com et javascript-minifier.com (CSS e JS) - Questi due minifiers di Andrew Chilton sono facili da usare. Devi solo incollare il codice, quindi fare clic sul pulsante Minify per visualizzare il codice compresso. Puoi anche scaricare il codice di uscita come file per comodità.
    • htmlcompressor.com (HTML, CSS e JS): questo strumento di compressione / minimizzazione online supporta i tipi di codice HTML, CSS e JS. Supporta anche diverse combinazioni di tipi di codice come CSS + PHP e JavaScript + PHP. E puoi anche controllare il codice compresso per errori.
    • csscompressor.net (Solo CSS): questo compressore CSS online è veloce, facile e gratuito.
    • jscompress.com (Solo JS) - Questo strumento di compressione JavaScript consente di comprimere il codice JavaScript mediante copia e incolla, ma è anche possibile scaricare più file JavaScript alla volta. Questo è l'ideale per combinare file JavaScript in un unico file per una migliore velocità di caricamento della pagina.
    • Strumenti di Dan - Dan's Tools proporre un minify CSS e per minimizzare JavaScript . Entrambi gli strumenti hanno un'interfaccia utente molto pulita e facile da usare. Non offrono opzioni avanzate, ma sono ottimi per scopi di minificazione comuni.
    • refresh-sf.com (HTML, CSS e JS): questo compressore ridurrà i tipi di codice JavaScript, CSS e HTML. Include anche tutte le opzioni di compressione per ogni tipo di codice, se ne hai bisogno.
    • Compilatore di chiusura (Solo JS) - Closure Compiler fa parte di Strumenti di chiusura , una suite di strumenti di Google Developers. Ti consente di minimizzare il tuo JavaScript con altre utili ottimizzazioni. Puoi utilizzare il tuo codice javascript inserendo l'URL per la posizione del file js e quindi scegliendo come desideri che il codice venga ottimizzato e formattato. 

Ad esempio, si sceglie di ottimizzare il codice per rimuovere solo gli spazi vuoti, se lo si desidera. Dopo aver fatto clic sul pulsante di compilazione, questo ridurrà il codice (o lo compilerà) per te.

    • minifycode.com (HTML, CSS e JS) - Questo sito web offre minifiers per JavaScript , CSS et HTML con un'interfaccia utente semplice e pulita che comprime il codice con un solo clic. Offre anche uno strumento "beautifier" per decomprimere il codice minimizzato al fine di renderlo più leggibile (l'opposto della minimizzazione).

Se stai cercando strumenti offline per minimizzare il tuo codice HTML CSS o JavaScript localmente, ecco alcune opzioni:

Come ridurre le dimensioni di HTML, CSS e JavaScript utilizzando uno strumento online

Molti di questi strumenti online hanno un processo simile che prevede i seguenti passaggi:

  • Incolla il tuo codice sorgente o scarica il file del codice sorgente. 
  • Ottimizza le impostazioni per un output specifico (se sono disponibili opzioni)
  • Fai clic su un pulsante per comprimere il codice.
  • Copia il risultato del codice minimizzato o scarica il file del codice minimizzato.

Per questo esempio, userò gli strumenti di minimizzazione di minifycode.com.

Vedi anche: Come aggiungere un codice CSS in modo sicuro su WordPress consultando questo link.

Innanzitutto, individua il file CSS (comunemente chiamato style.css) nei file del tuo sito Web e aprilo utilizzando un editor di pagine. Quindi copia tutto il codice CSS negli appunti.

css style divi.jpg

andare a minifycode.com e fai clic sulla scheda CSS minifier. Quindi incolla il codice CSS nella casella di input e fai clic sul pulsante Minimizza CSS.

minificazione css.jpg

Una volta generato il nuovo codice minimizzato, copiarlo.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

copia un code.jpg compresso

Quindi torna al file CSS del tuo sito Web e sostituisci il codice con la nuova versione semplificata.

Questo è tutto!

Ripeti la stessa procedura per ridurre anche i file JavaScript e HTML del tuo sito web.

Come ridurre al minimo HTML, CSS e JavaScript in WordPress utilizzando i plugin

Il modo più semplice per ridurre al minimo HTML, CSS e JavaScript in WordPress è utilizzare un plug-in. Ciò ti consente di ottimizzare automaticamente i file del tuo sito Web WordPress per ridurre il tempo di caricamento della pagina con pochi clic del pulsante.

Ci sono molti plugin che porteranno a termine il lavoro, ma menzionerò brevemente alcuni esempi.

Autoptimize (GRATUITO)

autooptimize wp.png
L'ottimizzazione automatica è probabilmente il plug-in minify WordPress più popolare. È popolare perché è facile da usare ed è ricco di potenti funzionalità. Può raggruppare (combinare script), ridurre a icona e memorizzare nella cache il codice. Come bonus, hai opzioni aggiuntive per ottimizzare Google Font, immagini, ecc ...

Per utilizzare Autoptimize, puoi scaricare, installare e attivare il plug-in dalla dashboard di WordPress in Plugin> Aggiungi nuovo.

Per ulteriori informazioni, consultare la nostra guida su:  Come installare un plugin in WordPress

autoptimize.jpg

Una volta attivato il plug-in, vai a Impostazioni> Ottimizzazione automatica. Quindi, nella scheda Parametri principali, seleziona il codice che desideri ottimizzare (HTML, CSS e / o JavaScript) e fai clic su Esalva le modifiche.

ottimizzazione css.jpg

Puoi anche fare clic sul pulsante Mostra impostazioni avanzate nella parte superiore della pagina per personalizzare ulteriormente l'ottimizzazione del codice.

Opzioni CSS Advanced.jpg

È più o meno quello! Abbastanza semplice e potente.

W3 Total Cache (GRATUITAMENTE)

v3 cache totale.png
W3 Total Cache è un eccellente plug-in di cache che offre la possibilità di ridurre al minimo i file HTML, JS e CSS.

parametri generali w3 cache.jpg totale

WP Fastest Cache (GRATUITO)

wp fastest cache.png
WP veloce Cache - Questo plugin WordPress la memorizzazione nella cache è estremamente popolare tra le recensioni positive. Esegue varie ottimizzazioni delle prestazioni, tra cui la combinazione e la riduzione di CSS HTML e JavaScript per prestazioni migliori.

Leggi anche il nostro articolo su plugin WordPress 8 per aggiungere una live chat sul tuo blog

Una volta installato il plug-in, fai semplicemente clic sulla scheda WP veloce Cache nella barra laterale della dashboard di WordPress. Sotto la scheda Impostazioni, troverai le opzioni per combinare e ridurre i file HTML e CSS. Anche se la minimizzazione di JavaScript è disponibile solo nella versione pro.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

wp più veloce cache settings.png

Riassumendo

Se vuoi rendere il tuo blog più veloce e avere prestazioni migliori, devi ridurre le dimensioni dei tuoi file HTML, CSS e JavaScript. Con tutti gli strumenti online disponibili, puoi facilmente ridurre il codice di qualsiasi sito web. 

Plugin 9 WordPress per nascondere il contenuto del tuo blog da scoprire assolutamente

Per coloro che usano WordPress, hai a disposizione potenti plugin per minimizzare automaticamente questi file con pochi clic.

Scopri anche alcuni plugin WordPress premium  

Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa del tuo blog o sito Web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. Pagina di errore 404 Reindirizza alla pagina iniziale o personalizzata

Ecco uno dei modi migliori per aggiungere facilmente una pagina di errore 404 che reindirizzerà il visitatore alla home page o alla pagina personalizzata, dopo l'attivazione di questo plugin. WordPress premium.

Tutte le 404 pagine di errore verranno reindirizzate alla home page o a un URL personalizzato. Usando questo plugin WordPress, consentirai a Google di ridurre il pagerank del tuo sito web se ha molte pagine di errore 404.

Scopri anche Come correggere l'errore 413 su WordPress

Questo plugin WordPress non reindirizza solo, ma può anche essere una soluzione adatta per migliorare il posizionamento del tuo sito Web nei risultati dei motori di ricerca.

Download | Demo | Web hosting

2. Borlabs Cache

WordPress è una piattaforma alimentata da un database che genera contenuti in modo dinamico. Più contenuto e plugin hai, più query sul database vengono eseguite. Ciò può rallentare le prestazioni del tuo sito Web, soprattutto quando il database si trova su un altro server.

Il plug-in Cache di WordPress Borlabs salva il contenuto generato dinamicamente come file statico nella memoria del server. Quando viene richiesta la pagina, questo file statico viene caricato e inviato al visitatore, che è notevolmente più veloce delle normali query del database. Ma non è tutto.

Vedi anche il nostro Plugin 5 WordPress per pulire il database del tuo sito web

Le tue pagine contengono molto spazio bianco non necessario o commenti HTML, il che aumenta le dimensioni complessive della pagina. Borlabs Cache li rimuove tutti e utilizza GZIP per comprimere le tue pagine.

Scopri Come visualizzare tutte le pubblicazioni WordPress su una sola pagina

Molti plugin hanno i propri file JavaScript e CSS, il che si traduce in più richieste sul tuo server. Borlabs Cache combina tutti questi file JavaScript e CSS in modo che, nel migliore dei casi, il visitatore debba caricare solo un file JavaScript e un file CSS.

Download Demo | Web hosting

3. Stampa multilingue

Multilingual Press funziona con un'installazione multisito di WordPress e consente di collegare le traduzioni. Il plug-in viene fornito con 174 lingue integrate nel gestore delle lingue e supporta un numero illimitato di siti Web, quindi puoi creare e collegare tutte le traduzioni che desideri.

È positivo per la SEO perché ti consentirà di mantenere le tue lingue su post e pagine separati e se decidi di utilizzare una traduzione diversa dal plug-in, i tuoi contenuti rimangono intatti (anche dopo aver disabilitato o rimosso il plug-in Multilingual Press). Inoltre, è possibile aggiungere un widget di traduzione per passare facilmente tra le traduzioni.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Scopri Come aggiungere uno snippet di codice usando Gutenberg su WordPress

Multilingual Press è un'ottima opzione gratuita per l'aggiunta di traduzioni al tuo sito WordPress tramite multisito. Inoltre, se ti accorgi che hai bisogno di più opzioni, puoi optare per la versione pro che costa $ 75.

Download Demo Web hosting

Altre risorse consigliate

Ti invitiamo inoltre a consultare le risorse seguenti per approfondire la presa e il controllo del tuo sito Web e blog.

Conclusione

Questo articolo contiene 1 commento

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
2 azioni
quota2
Tweet
Enregistrer