Come ridurre al minimo le informazioni CSS/JavaScript in WordPress (3 strategie)

Vuoi minimizzare i documenti sulla tua pagina web di WordPress?

Ridurre al minimo le informazioni CSS e JavaScript di WordPress può farle caricare più velocemente e velocizzare il tuo sito WordPress.

In questo manuale, ti mostreremo come minimizzare semplicemente i file CSS/JavaScript in WordPress per apportare miglioramenti alle prestazioni e alla velocità.

Cos'è la minimizzazione e quando ne avrai bisogno?

L'espressione 'minimizzare' viene utilizzata per descrivere un sistema che riduce le dimensioni del file del tuo sito Internet. Lo fa eliminando spazi bianchi, righe e persone indesiderate dal codice della risorsa.

Ecco un'istanza del codice CSS standard:

human body 
margin:20px
padding:20px
colour:#333333
history:#f7f7f7

h1 
font-dimension:32px
coloration#222222
margin-base:10px

Dopo aver minimizzato il codice apparirà così:

entire bodymargin:20pxpadding:20pxcolor:#333history:#f7f7f7
h1font-dimension:32pxmargin-base:10px

In genere, si suggerisce di minimizzare solo i documenti inviati ai browser dell'utente. Questo include file HTML, CSS e JavaScript.

Puoi anche minimizzare i documenti PHP, ma minimizzarlo non aumenterà il ritmo di caricamento della pagina per i tuoi clienti. Poiché PHP è un linguaggio di programmazione lato server, ciò significa che opera sui server prima che qualcosa venga inviato al browser Internet del visitatore.

Il guadagno di minimizzare i file di dati è il miglioramento del ritmo di WordPress e delle prestazioni complessive, considerando che le informazioni compatte sono più veloci da caricare.

Tuttavia, alcuni guru pensano che l'avanzamento delle funzionalità sia piuttosto limitato per la maggior parte dei siti Web e non degno della difficoltà. La minimizzazione elimina solo alcuni kilobyte di dati sulla maggior parte dei siti Web di WordPress. Puoi ridurre al minimo molto più tempo di caricamento del sito ottimizzando le immagini per il world-wide-web.

Se stai tentando di ottenere una valutazione di 100/100 sul software Google Pagespeed o GTMetrix, la riduzione di CSS e JavaScript aumenterà notevolmente il tuo punteggio.

Come accennato, diamo solo un'occhiata a come minimizzare facilmente CSS/JavaScript sulla tua pagina Web WordPress.

Andremo oltre 3 scelte distintive tra cui puoi scegliere:

Tutto stabilito? Cominciamo con il nostro miglior processo proposto.

Processo 1. Minimizza CSS/JavaScript in WordPress usando WP Rocket

Questa tecnica è più semplice ed è proposta a tutti i consumatori. Funziona indipendentemente dall'hosting WordPress che stai utilizzando.

Inizialmente, è necessario installare e attivare il plug-in WP Rocket. Per ulteriori dettagli, consulta la nostra guida fase per mossa su come configurare un plugin per WordPress.

WP Rocket è il miglior plugin di memorizzazione nella cache di WordPress sul mercato. Ti consente di inserire molto facilmente la memorizzazione nella cache in WordPress e aumentare notevolmente la velocità del sito Web e i momenti di caricamento del sito Web.

Per ulteriori informazioni, consulta il nostro tutorial su come installare e configurare WP Rocket in WordPress.

Dopo l'attivazione, si desidera controllare la pagina Web Impostazioni » WP Rocket e passare alla scheda "Ottimizzazione file".

Da qui, dovrai guardare la soluzione Minify CSS documents.

WP Rocket ti mostrerà quindi un avviso che questo potrebbe dividere punti sul tuo sito web. Vai avanti e fai semplicemente clic sul pulsante "Attiva Minify CSS". Puoi disattivare costantemente questa selezione se si verificano problemi con il tuo sito Internet.

Successivamente, devi scorrere verso il basso fino alla parte dei documenti JavaScript in basso.

Proprio qui, prova semplicemente la casella successiva alla possibilità "Riduci file JavaScript".

Ancora una volta, vedrai un avviso che questo potrebbe rompere le cose sul tuo sito web. Vai avanti e fai semplicemente clic sul pulsante "Attiva minimizza JavaScript".

Subito dopo, non ignorare mai di fare clic sul pulsante Mantieni regolazioni per mantenere le tue configurazioni.

WP Rocket ora inizierà a minimizzare le tue informazioni CSS e JavaScript. Puoi svuotare molto la cache nelle impostazioni del plug-in per assicurarti che inizi a utilizzare CSS e JavaScript ridotti per il futuro visitatore della pagina web.

Tecnica 2. Minimizza CSS/JavaScript in WordPress utilizzando SiteGround

Se stai applicando SiteGround come fornitore di servizi di hosting Web WordPress, puoi minimizzare i file CSS lavorando con SiteGround Optimizer.

SiteGround Optimizer è un plug-in di ottimizzazione delle prestazioni generale che funziona sul loro sistema. Funziona bene con il loro PHP ultraveloce per rafforzare i periodi di caricamento del tuo sito.

Basta semplicemente impostare e attivare il plug-in SiteGround Optimizer sul tuo sito Internet WordPress. Per ulteriori dettagli, consulta le nostre linee guida passo passo su come inserire un plugin per WordPress.

Successivamente, devi fare clic sul menu SG Optimizer nella barra laterale dell'amministratore di WordPress.

Questo ti porterà solo alle impostazioni di SG Optimizer.

Da questo articolo devi fare clic sul pulsante "Vai al frontend" meno di "Altre ottimizzazioni".

Sul monitor successivo, devi scambiare l'interruttore in arrivo alla soluzione "Riduci file CSS".

In arrivo, devi passare alla scheda JavaScript e attivare l'interruttore in arrivo alla selezione "Riduci file JavaScript".

Questo è tutto! Ora puoi svuotare la cache di WordPress e dare un'occhiata al tuo sito per caricare versioni ridotte di documenti CSS e JS.

Approccio 3. Minimizza CSS/JavaScript utilizzando Autoptimize

Questo metodo è proposto per i consumatori che non sono su SiteGround e non lavorano con WP Rocket.

Inizialmente, è necessario configurare e attivare il plug-in Autoptimize. Per ulteriori dettagli, consulta la nostra linea guida fase per azione su come installare un plugin per WordPress.

Al momento dell'attivazione, devi dare un'occhiata alla pagina Web Opzioni » Ottimizza automaticamente per configurare le opzioni del plug-in.

Da questo articolo, devi prima verificare l'opzione "Ottimizza codice JavaScript" in Opzioni JavaScript.

Successivamente, devi scorrere verso il basso fino alle Scelte CSS ed esaminare la casella accanto all'opzione "Ottimizza codice CSS".

Non trascurare mai di fare clic sul pulsante Conserva regolazioni per memorizzare le tue configurazioni.

Quindi puoi semplicemente fare clic sul pulsante Cache vuota per iniziare a lavorare con i tuoi file di dati ridotti. Il plugin può anche essere utilizzato per gestire JavaScript e CSS che bloccano il rendering in WordPress.

Ci auguriamo che questo post ti abbia aiutato a minimizzare CSS e JavaScript sulla tua pagina Web WordPress. Potresti anche voler vedere il nostro tutorial sull'ottimizzazione di core net vitals in WordPress e rispettare il nostro miglior tutorial sulle prestazioni generali di WordPress.

Se ti è piaciuto questo post, assicurati di iscriverti al nostro canale YouTube per i tutorial sui film WordPress. Puoi anche incontrarci su Twitter e Facebook.