0.6 C
Tollegno

Configurare WP Rocket e Newspaper per il tuo blog di viaggi

Come configurare WP Rocket per il tema NewsPaper di TagDiv

WP Rocket e NewsPaper sono rispettivamente, uno dei più popolari plugin di cache e un tema di riferimento per gli utenti di WordPress. Vi propongo la mia esperienza per usarli insieme al meglio.

NewsPaper è un tema che con il tempo ha conosciuto molte ottimizzazioni che aiutano a velocizzare i tempi di caricamento del tuo blog di viaggi. Sebbene L’autore del tema consigli WP Super Cache, che è gratuito e WP Rocket sia un plug-in a pagamento, se vuoi avere una performance superiore, soprattutto su Mobile, ritengo che valga la pena acquistarlo.

WP Rocket funziona bene con praticamente ogni sito Web creato con WordPress e nel caso qualcosa vada storto, l’assistenza è comunque veloce e risolutiva.

Leggi anche Aprire un blog di viaggi da zero

Tempo di lettura stimato: 9 minuti

Questo è un blog di viaggi, le indicazioni presenti negli articoli sono fornite gratuitamente a scopo divulgativo e potrebbero essere non aggiornate o incomplete. Prima di acquistare, di prenotare o di partire consultate sempre i siti ufficiali. Alcuni link in questo articolo possono essere sponsorizzati, ovvero, se comprate tramite il link non pagate di più, ma mi viene riconosciuta una commissione. Inserisco i link solo se pertinenti e dopo averli verificati.

Pronti per partire?

Se hai già NewsPaper di TagDiv e non hai WP Rocket installato puoi acquistare WP Rocket per il tuo blog.

Se hai intenzione di ottimizzare il tema NewsPaper, ho scritto un articolo specifico per questo. Puoi leggere questo articolo per ottimizzare il tema del giornale.

In questo articolo specifico, parlo solo della configurazione di WP Rocket per NewsPaper di TagDiv, eventuali altre ottimizzazioni al tema le riporto in un altro articolo.

Sky Rocket
Immagine di sfondo creata da freepik – www.freepik.com immagine di copertina Speed up vector created by starline – www.freepik.com

Perché utilizzo WP Rocket

Ti racconto la mia esperienza con WP Rocket soprattutto per l’ottimizzazione della velocità su Mobile e parto dal presupposto che tu non abbia abilitato il Tema Mobile Tagdiv, per qualche motivo. Nel mio caso non l’ho fatto perché non era possibile diversificare i modelli per ciascuna categoria.

Per questo ho dovuto creare un modello Desktop per ogni categoria con un modello Mobile associato, allo scopo di inserire specifici link correlati a mia scelta e consigli pertinenti sulla base delle mie esperienze per le varie destinazioni.

Se abiliti il tema mobile probabilmente non avrai bisogno di WP Rocket, se invece usi modelli diversi per desktop e mobile e la velocità non ti soddisfa, continua a leggere l’articolo.

Perché non utilizzo WP Super Cache

Con la mi configurazione l’utilizzo di Wp Super Cache crea non pochi problemi di visualizzazione su dispositivi mobili. Infatti la maggior parte delle volte che c’è un accesso da un dispositivo Mobile, viene visualizzata la pagina desktop, con conseguente penalizzazione delle performances, Questo accade perché il plugin non gestisce correttamente la cache separata, cosa che invece WP Rocket fa in maniera egregia.

Performance prima e dopo l’installazione di WP Rocket

Dopo aver abilitato il plugin WP Rocket per il tuo blog, la velocità della pagina del mio sito web aumenta da 35 a 95.

Puoi confrontare la velocità della pagina con il sito Web prima e dopo aver installato solo WP Rocket.

Schermata google page speed insights 2022-05-24 alle 07.14.22
Esempio performance Mobile con tema NewsPaper e WP Rocket

Configurazione di WP Rocket per il tema NewsPaper

Dopo aver fatto il login, caricato e attivato il plugin WP Rocket che avrete scaricato dal sito, farete conoscenza con l’interfaccia utente di WP-Rocket.

Cache di WP Rocket

Andiamo subito alla prima etichetta, quella della Cache.

Se hai installato il tema NewsPaper di TagDiv, abilita file di cache separati per dispositivi mobili e tutte le altre impostazioni, questa parte è relativamente semplice.

Abilitando i file di cache separati per i dispositivi mobili, WP Rocket crea un file di cache separato dedicato a temi e plugin mobili specifici. 

Ottimizzazione file

In questa categoria puoi minimizzare e ottimizzare i file CSS e Javascript. L’opzione potrebbe causare alcuni problemi di visualizzazione o corrompere il tema, quindi ti consiglio di controllare bene il sito sia lato Desktop che lato Mobile, utilizzando un browser diverso da quello che stai usando per modificare il sito o una finestra privata. 

Per il tema NewsPaper, ho testato tutte le opzioni che elenco di seguito. 

Se hai installato altri plugin, alcune specifiche funzioni potrebbero funzionare in maniera diversa, quindi ti consiglio di nuovo di verificare come indicato precedentemente.

CSS

Disabilitare “Minifica file CSS” per mia esperienza crea problemi con i menu su Mobile. 

Questa funzione rimuove commenti e spazi bianchi e aiuta a ridurre le dimensioni del file del sito web in generale. In teoria non dovrebbe causare problemi e velocizzare il sito, dai miei test causa qualche problema coi menu senza apportare alcun miglioramento. Disabilitalo.

Disabilita Combina file CSS. Non è consigliato per un sito Web che utilizza HTTP/2. Anche l’abilitazione di questa opzione spesso causa problemi di visualizzazione. 

Puoi verificare se il tuo sito web utilizza HTTP/2 o meno nel controllo HTTP.

Abilita Ottimizza pubblicazione CSS. Testando queste funzionalità, ho che NewsPaper e WP Rocket entrano in conflitto e causano problemi nel menu Mobile. Ho segnalato il problema a TagDiv e con un prossimo aggiornamento mi hanno detto che l’avrebbero risolto. Val la pena di riprovarci.

Abilita Rimuovi il CSS inutilizzato. Dopo iniziali false partenze l’opzione funziona egregiamente ed ha portato la mia velocità ad oltre 90 su mobile, un vero Razzo.

Rimuovi CSS inutilizzato

L’aggiornamento di WP Rocket n.3.11 del 24 marzo 2022 ha portato molti miglioramenti all’opzione, e funziona in maniera veramente egregia, pertanto val la pena di provare questa opzione testandola sempre in maniera accurata sia su Desktop che su Mobile.

wp rocket bacheca remove unused CSS
WP Rocket bacheca per “Remove Unused CSS”

Puoi escludere alcuni CSS se causano problemi, questo è il mio elenco delle Esclusioni per “Remove Unused CSS”

/wp-content/plugins/liker/css/(.*).css
/wp-content/plugins/liker/css/duDialog.css
/wp-content/plugins/liker/css/duDialog.min.css
/wp-content/plugins/liker/css/liker.css
/wp-content/plugins/liker/css/liker.min.css
/wp-content/themes/Newspaper/td-theme.min.css
/wp-content/themes/Newspaper/style.css
(.*).td-image-container
(.*).td-module-thumb
(.*).td-image-wrap
(.*).mdp-liker-box
(.*).mdp-liker-button
(.*).mdp-liker-buttons

Javascript

Abilita Minimizza file Javascript. Rimuove commenti e spazi bianchi e aiuta a ridurre le dimensioni del file del sito web in generale. Nella mia esperienza non causa problemi come la minimizzazione del CSS

Disabilita Combina file Javascript. Non è consigliato per un sito Web che utilizza HTTP/2.

Abilita Carica Javascript in modalità differita. Aiuta a differire il JS che blocca il rendering sul tuo sito e migliora il tempo di caricamento del tuo sito web.

Puoi escludere alcuni Javascript che causano problemi di visualizzazione se ritardati. Quelli che ho testato sono:

liker.js
du_dialog.min.js
du_dialog.js
liker.min.js
cdn.shortpixel.ai

Abilita Rimanda l’esecuzione del JavaScript. Questa opzione aiuta a velocizzare il sito rimandando il caricamento dei file JavaScript fino all’interazione con l’utente (ad es. scroll, clic).

Puoi escludere alcuni Javascript che causano problemi di visualizzazione se rimandati. Puoi escludere indicando il js o parole chiave. Quelli che ho testato sono:

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
js-(before|after)
(?:/wp-content/|/wp-includes/)(.*)
/jquery/jquery.min.js
/jquery-migrate(.min)?.js
tagdiv_theme.min.js
tdBlocksArray
liker.js
du_dialog.min.js
du_dialog.js
liker.min.js
cdn.shortpixel.ai
menu

Media

Disabilita Lazyload: il tema NewsPaper ha le proprie funzionalità di lazyload per le immagini e quella di WP Rocket è superflua o addirittura nociva.

Abilita il lazyload per iframe e video, se utilizzi video di Youtube, abilita anche Sostituisci l’iframe YouTube con un’immagine di anteprima.

Abilita Aggiungi dimensioni immagini mancanti: questo aiuterà ad aggiungere attributi di larghezza e altezza mancanti alle immagini. Io uso Shortpixel Adaptive Images e questa opzione non la consiglio.

Abilita (Disabilita incorporamenti di WordPress): impedisce ad altri di incorporare contenuti dal tuo sito, ti impedisce di incorporare contenuti da altri siti (non consentiti) e rimuove le richieste JavaScript relative agli incorporamenti di WordPress.

Compatibilità WebP: abilita questa opzione se fornisci immagini Webp sui tuoi siti web.

Precaricamento

Si compone di quattro parti.

Precarica cache: attiva il precaricamento e il precaricamento della cache basato sulla mappa del sito. Riprenderà automaticamente la mappa del sito in base ai tuoi plugin SEO, se utilizzi Yoast Seo, è integrato.

Precaricamento dei link: non consiglio di abilitarlo, ma non incide un granché

Precarica le richieste DNS: il precaricamento DNS può velocizzare il caricamento di file esterni, specialmente su reti mobili. Aggiungi i seguenti URL comuni per il precaricamento.

//fonts.googleapis.com
//www.googletagmanager.com
//www.googletagservices.com
//tpc.googlesyndication.com
//use.typekit.net
//netdna.bootstrapcdn.com
//www.google-analytics.com
//cdnjs.cloudflare.com
//ajax.googleapis.com
//cdn.shortpixel.ai

Precarica i font: migliora le prestazioni aiutando i browser a scoprire i caratteri nei file CSS. Aggiungi i seguenti caratteri per il precaricamento.

/wp-content/themes/Newspaper/images/icons/newspaper.woff

CDN

Seleziona Abilita il Content Delivery Network, puoi scegliere la CDN di WP Rocket o, se hai un budget limitato utilizza Bunny.net. Se utilizzi la CDN di ShortPixel per le immagini abilitalo solo per CSS e JS.

Add-on di WP Rocket

Abilita l’integrazione con Cloudflare per velocizzare i tempi di caricamento ed è fatta.

Goditi il tuo nuovo blog di viaggi ottimizzato!

Se ti è piaciuto l’articolo su come ottimizzare NewsPaper e WP Rocket clicca su “mi piace” in fondo alla pagina o acquista WP Rocket per il tuo blog.

Scopri cosa puoi fare

Leggi tutti gli articoli che ti aiutano ad aprire un blog di viaggi da zero.

Scopri come acquistare uno spazio dove ospitare il tuo sito e come muovere i primi passi con WordPress.

Pian piano ti accompagno in questo fantastico mondo, ogni mese guide trucchi e consigli.

Se invece stai programmando un viaggio controlla cosa mettere in valigia: la lista da stampare per il viaggio perfetto. Puoi anche stamparla e compilarla offline! Puoi anche provare la nuova lista di viaggio interattiva, veloce e personalizzabile con il tuo stile.

Clicca qui e risparmia oltre il 60% con l’hosting di SiteGround (è quello che uso io)

Arrivederci presto!

Ti piace l'articolo?

Dal Blog

Max
Maxhttps://www.massimobasso.com
Massimo Basso le mie passioni sono stare all'aria aperta, viaggiare, scoprire luoghi nuovi, conoscere persone ed abitudini, osservare la Natura e, quando posso, fare qualche bella fotografia. Le foto (se riportano la mia firma) sono mie e non sono riproducibili senza consenso.

Ti possono interessare?