{"id":244836,"date":"2022-04-05T11:08:00","date_gmt":"2022-04-05T08:08:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=244836"},"modified":"2022-04-27T11:51:46","modified_gmt":"2022-04-27T08:51:46","slug":"come-ottimizzare-la-consegna-css-in-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-ottimizzare-la-consegna-css-in-wordpress\/","title":{"rendered":"Come ottimizzare la consegna CSS in WordPress"},"content":{"rendered":"

Se sei qui, \u00e8 probabile che tu abbia ricevuto questo avviso nel test PageSpeed \u200b\u200bInsights di Google<\/a> :<\/p>\n

\"Come<\/a><\/p>\n

Anche se pu\u00f2 essere difficile eliminare tutti i file che bloccano il rendering, non \u00e8 cos\u00ec difficile con gli strumenti giusti.<\/p>\n

In questa guida, ti mostrer\u00f2 tre modi per velocizzare il tuo sito<\/a> con la consegna CSS ottimizzata. Ci sono opzioni sia per i neofiti che per gli sviluppatori di WordPress inclusi qui.<\/p>\n

Cominciamo dall’alto: cosa significa esattamente ottimizzare la distribuzione di CSS sul tuo sito WordPress?<\/p>\n

Che cosa significa "ottimizza la consegna CSS"?<\/h2>\n

Vorrei essere molto chiaro su cosa intendo prima.<\/p>\n

I file CSS vengono utilizzati per lo stile delle pagine web<\/a>. Ogni tema WordPress carica un file style.css e probabilmente hai una manciata di fogli di stile aggiuntivi (file CSS) aggiunti dai plugin. Ad esempio, se hai un plugin che aggiunge un nuovo widget, sar\u00e0 necessario caricare un altro foglio di stile per modellare quel widget.<\/p>\n

Tutti i file CSS vengono caricati prima del rendering del tuo sito.<\/strong><\/p>\n

Ci\u00f2 significa che fino a quel momento i visitatori vedranno uno schermo bianco vuoto. Ora ecco la cosa…<\/p>\n

La maggior parte dei CSS caricati non \u00e8 necessaria per qualunque pagina si trovi il visitatore, e ancora meno \u00e8 necessaria per ci\u00f2 che pu\u00f2 vedere immediatamente. Ad esempio, perch\u00e9 farli aspettare mentre caricano gli stili per il pi\u00e8 di pagina? Probabilmente passeranno almeno alcuni secondi prima che lo vedano (se mai lo faranno).<\/p>\n

Rimandando i nostri file CSS o caricandoli in modo asincrono, possiamo consentire al sito di essere visualizzato nel browser del visitatore prima che i fogli di stile abbiano terminato il caricamento.<\/p>\n

In questa guida, condivider\u00f2 tre diversi approcci per posticipare i fogli di stile e ottimizzare la distribuzione dei CSS.<\/p>\n

Percorsi di rendering critici ottimizzati in azione<\/h3>\n

Se visiti la home page di Compete Themes<\/a>, tieni d’occhio l’indicatore di caricamento nella scheda del browser durante il caricamento del sito. Noterai che dopo che il sito \u00e8 visibile e sembra essere caricato, l’indicatore di caricamento continua a girare solo per un momento in pi\u00f9.<\/p>\n

Questo \u00e8 un esempio di come appare in pratica la consegna CSS ottimizzata.<\/p>\n

Se vuoi vedere un esempio di un percorso di rendering critico<\/a> altamente ottimizzato, visita Amazon. L’intero sito non viene caricato in una volta. Invece, nel giro di pochi secondi, vedrai apparire diversi elementi in tutta la pagina grazie al percorso di rendering accuratamente ottimizzato.<\/p>\n

1 WP razzo<\/h2>\n

Uso il plugin WP Rocket<\/a> qui su Compete Themes e lo consiglio prima di tutte le altre soluzioni per l’ottimizzazione del percorso di rendering critico.<\/p>\n

Ottimizzare la tua consegna CSS con WP Rocket non potrebbe essere pi\u00f9 facile. Nel menu Ottimizzazione file, c’\u00e8 una casella di controllo per attivare questa funzione.<\/p>\n

\"Come<\/a><\/p>\n

Una volta selezionato, WP Rocket rinvier\u00e0 automaticamente tutti i tuoi fogli di stile in modo che non vengano caricati fino a quando il sito non viene visualizzato nel browser del visitatore. Ora, se tutto il CSS fosse posticipato, il tuo sito sembrerebbe terribile finch\u00e9 non viene caricato, e gli sviluppatori di WP Rocket lo hanno affrontato elegantemente con il loro plugin.<\/p>\n

Quando attivi questa opzione, WP Rocket trover\u00e0 automaticamente il CSS necessario per modellare le parti del tuo sito che i visitatori vedono nel momento in cui il tuo sito viene caricato e quel codice viene aggiunto in linea al documento.<\/p>\n

In altre parole, il tuo sito viene visualizzato pi\u00f9 velocemente nel browser e sembra essere completamente caricato mentre il CSS differito viene quindi caricato nel secondo o due successivi.<\/p>\n

A mio parere, questa \u00e8 di gran lunga la soluzione migliore per ottimizzare la consegna CSS con WordPress.<\/p>\n

WP Rocket \u00e8 un plug-in premium, ma se i tempi di caricamento pi\u00f9 rapidi ti faranno guadagnare pi\u00f9 entrate dal tuo sito, prenderei sicuramente in considerazione l’idea di ottenerlo per il tuo sito. Ho uno sguardo<\/a> molto pi\u00f9 dettagliato su WP Rocket<\/a> che puoi leggere se vuoi saperne di pi\u00f9. Altrimenti, puoi controllare il loro sito qui<\/a>.<\/p>\n

2 Ottimizzazione automatica<\/h2>\n

Il secondo approccio che consiglierei \u00e8 il plugin Autoptimize<\/a>.<\/p>\n

\"Come<\/a><\/p>\n

Questo plug-in per le prestazioni ricco di funzionalit\u00e0 fornisce alcuni approcci per l’ottimizzazione della consegna CSS. L’opzione pi\u00f9 semplice \u00e8 semplicemente inlineare tutti i CSS. Questo prender\u00e0 tutto il CSS trovato nei tuoi fogli di stile e lo aggiunger\u00e0 direttamente nel documento della pagina in modo che nessun foglio di stile venga caricato.<\/p>\n

Per trovare questa opzione, devi fare clic sul pulsante Mostra impostazioni avanzate in alto.<\/p>\n

\"Come<\/a><\/p>\n

Vedrai quindi l’opzione per incorporare tutti i CSS.<\/p>\n

\"Come<\/a><\/p>\n

Sebbene questa opzione possa migliorare le prestazioni, se hai aggiunto troppi CSS al documento della pagina, pu\u00f2 invece rallentare il tuo sito. Potrebbe valere la pena sperimentare.<\/p>\n

Altrimenti, un approccio accurato consiste nell’abilitare l’opzione per Inline e Defer CSS. Questo rimander\u00e0 tutti i fogli di stile e inlineer\u00e0 solo il CSS critico. Tuttavia, non trover\u00e0 automaticamente il CSS critico per te come WP Rocket.<\/p>\n

Quindi, come ottieni il CSS critico del tuo sito? Anche per uno sviluppatore WP esperto, questo pu\u00f2 essere una specie di grattacapo.<\/p>\n

Anche se non ho testato personalmente questo strumento per l’affidabilit\u00e0, questo strumento gratuito Critical Path CSS Generator<\/a> sarebbe un approccio praticabile. Inserisci l’URL del tuo sito e ti restituir\u00e0 il CSS che devi assolutamente caricare.<\/p>\n

Puoi quindi copiare e incollare quel codice nella casella CSS del percorso critico in Autoptimize.<\/p>\n

\"Come<\/a><\/p>\n

Se utilizzi questo approccio, potresti dover aggiungere ulteriori CSS per diverse pagine del tuo sito e potrebbe essere necessario conoscere molto bene il CSS del tuo tema per garantire uno stile coerente.<\/p>\n

Un altro approccio<\/h3>\n

C’\u00e8 un plugin chiamato Autoptimize criticalcss.com power-up<\/a>. \u00c8 piuttosto un boccone, ma questo plug-in aggiuntivo ti consentir\u00e0 di generare automaticamente il CSS critico del tuo sito utilizzando il servizio criticalcss.com<\/a>.<\/p>\n

Dovrai registrarti con CriticalCSS per un account a pagamento per utilizzare questa opzione.<\/p>\n

3 Accelerazione<\/h2>\n

Quest’ultima opzione \u00e8 molto veloce e sar\u00e0 semplice da implementare per uno sviluppatore di WordPress.<\/p>\n

Speed \u200b\u200bUp<\/a> \u00e8 un plug-in leggero che ti consente di rinviare qualsiasi foglio di stile non critico.<\/p>\n

\"Come<\/a><\/p>\n

Anche se questo non ottimizzer\u00e0 completamente la tua consegna CSS, sar\u00e0 d’aiuto.<\/p>\n

Supponiamo che il tuo tema aggiunga un foglio di stile e poi ci siano altri cinque fogli di stile aggiunti dai plugin. Se solo il foglio di stile del tema \u00e8 fondamentale da caricare prima di visualizzare il sito, potresti rimandare gli altri cinque.<\/p>\n

Speed \u200b\u200bUp ti offre un semplice filtro che puoi aggiungere al file functions.php di un tema figlio (o a un plug-in) per rinviare tutti i fogli di stile che desideri. Tutto ci\u00f2 di cui hai bisogno sono gli handle di ogni foglio di stile che viene caricato. Puoi trovare alcune semplici funzioni qui<\/a> per l’output degli handle di tutti i fogli di stile registrati sul tuo sito.<\/p>\n

Ancora una volta, questo sar\u00e0 facile e veloce per uno sviluppatore, ma non consiglierei questa soluzione se non scrivi codice.<\/p>\n

Conclusione<\/h2>\n

Spero che tu abbia imparato qualcosa sull’ottimizzazione delle prestazioni di WordPress<\/a> in questo post.<\/p>\n

Sebbene ciascuna delle tre soluzioni di cui sopra possa funzionare bene, devo dare un ultimo ringraziamento al plugin WP Rocket<\/a>. Come blogger e sviluppatore di temi WordPress, trovo che sia cos\u00ec facile e indolore lavorare con.<\/p>\n

Se desideri altri suggerimenti su come velocizzare il tuo sito, ti potrebbe piacere questa guida sull’ottimizzazione delle immagini<\/a> o la mia recensione del motore WP su<\/a> cui si basa Compete Themes per tempi di caricamento rapidi.<\/p>\n

Fonte di registrazione: www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Scopri come velocizzare il tuo sito WordPress con uno di questi tre approcci per ottimizzare la consegna CSS. All’interno suggerimenti per principianti e avanzati.<\/p>\n","protected":false},"author":1,"featured_media":256898,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[653,664,584,611],"tags":[846],"class_list":["post-244836","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-come-fare","category-libero-professionista","category-velocizza-wordpress","category-uncategorized-7","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/244836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/comments?post=244836"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/244836\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media\/256898"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media?parent=244836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/categories?post=244836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/tags?post=244836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}