Vuoi comprimere i tuoi file CSS, HTML e javascript su WordPress?
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 insieme ad altre utili ottimizzazioni. Puoi utilizzare il tuo codice Javascript inserendo l'URL del percorso del file js e quindi scegliere 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:
- phpied.com/cssmin-js/ (Solo CSS)
- yui.github.io/yuicompressor (JS e CSS)
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.
Vai su 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.
Una volta generato il nuovo codice minimizzato, copiarlo.
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)
Autoptimize è probabilmente il WordPress Plugin dei minify più popolari. È popolare perché è facile da usare e ricco di potenti funzionalità. Può raggruppare (combinare script), minimizzare e memorizzare nella cache il tuo codice. Come bonus, hai opzioni aggiuntive per ottimizzare Google Fonts, 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
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.
Puoi anche fare clic sul pulsante Mostra impostazioni avanzate nella parte superiore della pagina per personalizzare ulteriormente l'ottimizzazione del codice.
È più o meno quello! Abbastanza semplice e potente.
W3 Total Cache (GRATUITAMENTE)
W3 Total Cache è un eccellente plug-in di cache che offre la possibilità di ridurre al minimo i file HTML, JS e CSS.
WP Fastest Cache (GRATUITO)
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 profilo, troverai le opzioni per combinare e ridurre i file HTML e CSS. Anche se la minimizzazione di JavaScript è disponibile solo nella versione pro.
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 usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione 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 WordPress Plugin, permetterai 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
Ce WordPress Plugin non si limita a eseguire il reindirizzamento 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 5 plugin di 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 ti 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.
Questo è un bene per il SEO perché questo ti consentirà di mantenere le tue lingue su post e pagine separate, e se mai decidessi di utilizzare una traduzione diversa del plugin il tuo contenuto rimarrà intatto (anche dopo aver disabilitato o rimosso il plug-in Multilingual Press). Inoltre, è possibile aggiungere un widget di traduzione per passare facilmente tra le traduzioni.
Scopri Come aggiungere uno snippet di codice usando Gutenberg su WordPress
Multilingual Press è un'ottima opzione gratuita per aggiungere 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.
- Come aggiungere una didascalia a un'immagine su Gutenberg
- 6 WordPress plugin per rendere la tua barre laterali
- 10 plugin di WordPress per aggiungere un gestore di download
- Cosa capire gli attacchi DDoS su WordPress
È possibile utilizzare JS compress https://www.jsonformatting.com/js-minify/