Vi siete imbattuti nell’avviso “combine external CSS” in Pingdom, GTmetrix o Google PageSpeed Insights? Non siete i soli, in quanto questo è un errore molto comune per molti proprietari di siti WordPress. Questo avviso in genere viene mostrato quando si dispone di 10 o più file CSS che caricano da un CDN e/o da un sottodominio (dominio esterno). Un modo per risolvere il problema è quello di concatenare i file CSS o combinarli in modo che vengano caricati in un’unica richiesta.
Se siete ancora su HTTP e non siete ancora migrati a HTTP/2, continuate a leggere questo tutorial su come combinare file CSS esterni. Anche in questo caso, la concatenazione è ora una tecnica che è generalmente considerata deprecata. Oltre il 77% dei browser ora supporta HTTP/2 su HTTPS, così come molti fornitori di servizi CDN e web hosting, tra cui Kinsta. È importante anche notare che Pingdom non supporta ancora HTTP/2 perché utilizza una versione precedente di Chrome.
Combinare CSS Esterni in WordPress
L’avviso combine external CSS di solito si vede quando si utilizza un CDN perché si ospitano i file CSS su un dominio esterno, come cdn.domain.com. Quello che potete fare è semplicemente concatenare i vostri file CSS sul vostro server web. Una volta che sono combinati, allora non vedrete più questo avviso in quanto saranno caricati in una singola richiesta. Uno dei modi più semplici per farlo è utilizzare un plugin gratuito di WordPress chiamato Autoptimize, sviluppato da Frank Goossens.
Questo plugin è piuttosto leggero, solo 176 KB per essere esatti. Al momento in cui scriviamo, il plugin conta oltre 1.00.000 di installazioni attive con 4.7 stelle su 5. Il plugin vi aiuta nella concatenazione degli script, la minificazione, le intestazioni scadute e la possibilità di spostare gli stili nell’intestazione e gli script nel footer.
Potete scaricarlo dalla repository di WordPress o cercarlo nella bacheca di WordPress alla voce “Aggiungi nuovo” plugin. Una volta installato, potrete accedere alle impostazioni e attivare l’opzione “Ottimizza codice CSS”. Questo concatenerà (combinerà) i vostri file CSS. E, se state usando un CDN, assicuratevi di inserire l’URL del CDN. In questo modo i vostri file CSS verranno caricati come un’unica richiesta sul vostro CDN.
I clienti di Kinsta hanno accesso diretto alla funzione di minificazione del codice che è integrata direttamente nel cruscotto MyKinsta. Questa funzione permette ai clienti di attivare la minificazione automatica di CSS e JavaScript con un clic di un pulsante.
Dopo aver abilitato le impostazioni di cui sopra vedrete i vostri file CSS in un file “autoptimize_xxxxxxx.css”.
