Indice dei contenuti dell'articolo:
NewsPaper è un tema generico di WordPress per giornali online, blog e riviste con tutto ciò di cui hai bisogno per iniziare il tuo progetto online forte. Funzionalità di modifica front-end, trascina e rilascia, velocità di caricamento lazy load della pagina, interfaccia intuitiva, ecc.
Da un sacco di demo già pronte per giornali, riviste online e blog a innumerevoli raccolte di layout e componenti, Newspaper non delude.
Inoltre, non è necessario essere un esperto per lavorare con Newspaper. Anche qualcuno senza capacità di programmazione e progettazione può comunque avere successo nella creazione di un moderno sito web editoriale.
Caratteristiche principali del tema NewsPaper
Tratterò alcune delle funzionalità più importanti in modo più dettagliato più avanti, ma iniziamo con un breve elenco di tutte le funzionalità che ottieni con il tema Giornale:
- Prestazioni ottimizzate: tempi di caricamento di circa 2,2 secondi per un sito demo completo nei miei test delle prestazioni.
- Oltre 120 siti demo importabili: scegli tra l’importazione di contenuti demo o solo le impostazioni del tema demo.
- Design visivo con drag and drop: personalizza i modelli di sito demo e crea i tuoi progetti utilizzando il generatore di pagine tagDiv Composer in bundle per il frontend.
- Oltre 1.500 modelli di sezione importabili: scegli tra oltre 1.500 modelli di articoli e pagine da importare nel compositore tagDiv.
- Generatore di intestazioni/piè di pagina: progetta le tue intestazioni o piè di pagina personalizzati all’interno del Gestore sito web.
- Adatto ai dispositivi mobili: ottieni un design reattivo, il supporto di Google AMP e un plug-in per temi mobili in bundle (e opzionale).
- Integrazioni: il giornale si integra con WooCommerce, Instagram, bbPress, BuddyPress e altro ancora.
- Spot pubblicitari banner integrati: inserisci facilmente AdSense o altri banner pubblicitari sul tuo sito. Puoi anche includere i tuoi posizionamenti di annunci con il tagDiv Composer.
- tagDiv Shop – il plugin che estende le capacità del tuo sito WooCommerce.
- Siti web ecommerce precostituiti: design di siti completi pronti per l’installazione
- tagDiv Opt-In Builder – un plug-in che ti aiuta a generare nuovi contatti, ottenere iscritti e mostrare contenuti solo agli utenti iscritti.
Un tema di una rivista WordPress come NewsPaper è sicuramente una buona opzione per blogger, testate giornalistiche, pubblicazioni dei media, venditori online o chiunque altro pubblichi molti contenuti.
Fondamentalmente, i temi delle riviste ti aiutano a mostrare grandi quantità di contenuti, con opzioni extra per presentare determinati contenuti o categorie.
Ad esempio, nel design predefinito del sito demo, puoi vedere come puoi utilizzare immagini di grandi dimensioni per presentare i tuoi post più importanti. Quindi, i visitatori possono anche filtrare categorie specifiche di post nella sezione più piccola di seguito:
NewsPaper oggi come oggi, è un tema diffusissimo, in siti di blog e news, dato che fino a poco tempo fa sembrava essere l’unica opzione intelligente e completa per la realizzazione di siti web editoriali modalità magazine.
Se questo ragionamento era vero fino al 2021, oggi non consiglieremo l’utilizzo di questo tema, ma piuttosto indirizzeremo un potenziale cliente su temi alternativi come ad esempio Zox News.
Tuttavia questo post non vuole focalizzarsi su quale sia la migliore soluzione per la realizzazione di portali editoriali, considerando che a nostro avviso ogni esigenza specifica del cliente deve essere vagliata prima di consigliare un tema o l’altro, ma bensì andare a comunicare quali sono le problematiche e le soluzioni per la velocità di NewsPaper.
NewsPaper, Pagespeed Insight e Google Core Web Vitals
Purtroppo col passare degli anni, sappiamo che le metriche sono cambiate in modo piuttosto drastico, prima tramite le metriche adottate dall’analisi di PageSpeed Insight e successivamente dal 2021, grazie all’avvento dei Google Core Web Vitals di cui abbiamo parlato in modo molto estenuante in diversi post nel nostro blog.
Core Web Vitals LCP FID CLS spiegazione" width="1024" height="588" />
Con questo cambiamento abbiamo constatato in modo netto che purtroppo il tema NewsPaper tende a non essere performante sui dispositivi mobile, determinando dei valore Core Web Vitals non sufficienti, e generando pertanto una valutazione PageSpeed Insight sicuramente non idonea per ottenere i vantaggio lato SEO e posizionamento che un punteggio elevato può comportare.
Fino a qui nulla di nuovo, come ce ne siamo accorti noi, se ne sono accorti anche il team di sviluppo del tema NewsPaper, che non a caso, ma appositamente, ha sviluppato un plugin WordPress integrabile con il tema NewsPaper che si chiama td_mobile e permette di superare (almeno in teoria) i limiti del tema NewsPaper su disposivi mobile come gli smartphone.
Cos’è il plugin TagDiv Mobile di NewsPaper ?
Il tema mobile è una funzionalità appositamente progettata per massimizzare le prestazioni del tema sui dispositivi mobili.
I dispositivi mobili si stanno evolvendo alla velocità della luce, diventando ogni giorno più piccoli e veloci. La chiave per l’esperienza dell’utente digitale è nelle tue mani poiché i visitatori cercano informazioni e si aspettano velocità di caricamento della pagina rapida e contenuti freschi. Questa è la sfida finale: rendere le esperienze mobili veloci e gratificanti come quelle desktop. Hanno riportato tutti questi aspetti alla bacheca di progettazione e li hanno risolti creando la nuova funzionalità Tema mobile.
La filosofia
L’esperienza di navigazione mobile è spesso frustrante. Le cause sono molteplici: velocità di caricamento della pagina lenta, testo piccolo e di difficile lettura, immagini di bassa qualità, banner che bloccano il contenuto, pulsanti troppo vicini tra loro che rendono impossibile toccare quello desiderato, e così via . Hanno pertanto deciso di porre fine a questo pasticcio e, per questo, hanno sviluppato il “Tema Mobile” che si chiama TagDiv Mobile e lo trovate come td_mobile nella directory dei plugin.
Come funziona?
Il tema mobile è un modello più leggero e ottimizzato per le prestazioni incluso nel pacchetto NewsPaper e si carica SOLO su dispositivi mobili. Il tema Mobile viene fornito con un modello per pagine, post, categorie e altro ancora.
Hanno messo a punto ogni modello con cura per offrire prestazioni ottimali e un’esperienza utente eccellente. I post sono disponibili in un formato predefinito e pulito che include tutte le funzionalità disponibili sul tema principale. Sulla home page, ad esempio, esegue automaticamente il rendering di una griglia che contiene i post in primo piano e una sezione dei post più recenti.
Il tema non richiede nessun altro plugin e garantisce le massime prestazioni. Una volta attivato, nell’area Pannello temi diventa disponibile un nuovo pannello di amministrazione che consente di personalizzare vari parametri per il “Tema mobile”.
Installazione e configurazione
Puoi installare e attivare il plugin nel pannello dei temi nella sezione Plugin. Automaticamente scaricherà il plugin dal repository ufficiale dello sviluppatore del tema NewsPaper e lo attiverà.
Personalizzazione della pagina
Per la home page, il “Tema mobile” viene fornito con un unico modello di pagina predefinito che include due sezioni:
- griglia superiore: mostra 3 post in primo piano (post inclusi nella categoria in primo piano)
- ultimi articoli – mostra gli ultimi articoli
Questo modello viene visualizzato solo se viene utilizzata una pagina statica. Puoi controllare le impostazioni della pagina nel pannello di amministrazione di WordPress Impostazioni-> sezione Lettura.
Una volta installato il plug-in, una nuova scheda chiamata “Tema mobile” viene visualizzata nell’area NewsPaper -> Pannello dei temi. Le opzioni ti consentono di personalizzare l’aspetto e la funzionalità del tema mobile e di renderlo conforme alle tue aspettative.
Non ci addentreremo pertanto nella spiegazione della customizzazione del plugin e del vostro sito WordPress, essendo questo procedimento comunque piuttosto intuitivo anche per figure non proprio tecniche.
Ottimizzare WordPress e NewsPaper con il supporto TagDiv Mobile.
Ora che abbiamo introdotto la storia e le problematiche di NewsPaper, nonchè il modo con cui la casa madre ha deciso di arginare le problematiche di performance sviluppando un apposito tema Mobile TagDiv Mobile, ora viene la parte saliente del post, il fulcro del discorso e quello che sappiamo fare bene.
Come abbiamo sempre detto e ribadito, il nostro lavoro consiste nel velocizzare WordPress che è sviluppato e costruito su tecnologie non performanti come PHP e MySQL.
Plugin annessi, query SQL lente, scritte male, senza indici, e un utilizzo spasmodico di chiamate AJAX POST non cachabili rendono questo CMS un CMS oggettivamente lento e pesante da far funzionare bene sia per l’utente che per i motori di ricerca.
A tal proposito non abbiamo mai fatto troppo segreto che l’utilizzo di cache statiche sia nel backend che nel frontend, possano mascherare il problema allo stesso modo di come un fondotinta possa mascherare un’acne.
Il problema resta, ma nessuno se ne accorge e tutti, motori di ricerca, aziende, clienti e visitatori hanno la loro esperienza utente, gratificante ed estremamente soddisfacente.
Il problema di TagDiv Mobile e le cache lato server come Varnish
Una Cache come Varnish (ma potremmo parlare anche di LScache, o di NGINX FastCGI Cache) tende a memorizzare una richiesta HTTP di tipo GET e riproporla ogni volta che essa viene richiesta, invece di azionare nuovamente processi PHP ed interrogare il database MySQL per recuperare un dato che esso aveva già recuperato precedentemente.
Fornire immediatamente un risultato precedentemente salvato in cache è ad esempio la differenza che c’è tra avere un sito che si carica in un secondo, ed un sito che si carica in 5 secondi. Oltretutto si riesce a gestire picchi di traffico molto elevato nell’ordine di decine di migliaia di utenti al minuto senza alcun crash.
Tuttavia una cache tende a servire lo stesso contenuto a tutti i visitatori che richiedono quel tipo di contenuto, eccetto bypass ed esclusioni specifici che potrebbero ad esempio avvenire per casi particolari in cui un utente è loggato.
Ma cosa succede se questo plugin TagDiv Mobile genera un formato diverso per l’utente mobile da quello dell’utente desktop e la Cache mette in cache il layout mobile ?
Succede che quando a richiedere quella pagina sarà un browser Desktop, vedrà comunque il sito con la versione mobile rispetto a quello della versione Desktop.
Questo comportamento avviene perchè il plugin TagDiv Mobile utilizza la funzione is_mobile() di WordPress per determinare la tipologia di Browser e condizionalmente generare un layout differente in base al browser Desktop / Mobile.
Questa funzione is_mobile() però viene chiamata ed eseguita solo la prima volta che viene chiamata la pagina, perchè dalla seconda volta che verrà chiamata la pagina, la cache statica fornirà il risultato già cachato senza più eseguire il codice php e dunque la funzione is_mobile().
function wp_is_mobile() {
if ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) {
$is_mobile = false;
} elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Mobile' ) !== false // Many mobile devices (all iPhone, iPad, etc.)
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Android' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Silk/' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Kindle' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'BlackBerry' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mini' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mobi' ) !== false ) {
$is_mobile = true;
} else {
$is_mobile = false;
}
/**
* Filters whether the request should be treated as coming from a mobile device or not.
*
* @since 4.9.0
*
* @param bool $is_mobile Whether the request is from a mobile device or not.
*/
return apply_filters( 'wp_is_mobile', $is_mobile );
} Praticamente guardando il codice della funzione si capisce anche se non si è programmatori che la funzione restituisce un valore vero o falso in base allo User Agent. Se lo User Agent del browser chiamante è tra quelli mobile, allora verrà restituito true, altrimenti falso.
A questo punto quando si inizia a vedere che i browser desktop visualizzino il layout mobile, o il contrario, che i browser mobile visualizzino il layout desktop, di norma ci si accinge a fare due cose, o meglio due rinunce :
- Togliere il plugin TagDiv Mobile e affidarsi al comportamento responsive standard di NewsPaper
- Togliere la Cache statica lato server come Varnish, LSCache o NGINX FastCGI Cache.
A prescindere da quale sia la scelta, si andrà comunque incontro ad una importante rinuncia che comporterà un peggioramento notevole in termini di performance.
Se si toglie il plugin TagDiv Mobile, si potrà sempre beneficiare dei vantaggi di una Cache statica lato server, tuttavia i valori Core Web Vitals potrebbero non essere adeguati o sufficienti.
Se si toglie la cache statica lato server, si potrà ottenere dei valori core web vitals anche buoni, ma tuttavia il tempo di risposta sarà lento e si avrà un TTFB sicuramente maggiore dei 200 ms massimi consigliati (e tollerati) da Google. Con 100 utenti connessi sarete oltretutto sicuramente offline per problemi di carico sulla CPU.
Come la si vuol vedere insomma è sempre un grosso problema.
Come risolviamo il problema ed ottimizziamo i siti NewsPaper in Managedserver.it ?
Per risolvere il problema, nel corso del tempo abbiamo compreso come sia di assoluta importanza non dover rinunciare ne alla cache lato server, ne al plugin TagDiv Mobile.
Per questo scopo abbiamo pertanto utilizzato una tecnica che consente di determinare lato web server tramite NGINX il tipo di dispositivo e suddividere la cache in due macro gruppi : Desktop e Mobile.
In base alle richieste che arriveranno la cache servirà il mobile con la cache riservata al mobile, e le richieste desktop con la cache riservata al desktop.
Il tutto garantendo una elevata HIT RATIO e permettendo dunque di far convivere sia le ottimizzazioni lato server che le ottimizzazioni derivate dal plugin TagDiv Mobile.
Per fare un esempio reale ecco i risultati di un nostro cliente su cui utilizziamo questo approccio :
Come abbiamo detto prima, a partire da giugno 2021 i segnali web essenziali sono diventati ufficialmente fattori di ranking presi in considerazione da Google per definire il posizionamento dei siti web nella SERP. Di conseguenza, rispettando le soglie ottimali previste dai Core web vitals avrai maggiori possibilità di apparire nella prima pagina dei risultati di ricerca di Google, guadagnando grande visibilità.
Se anche tu o un tuo cliente utilizza il tema NewsPaper ed il sito WordPress non sta ottenendo buone performance o un punteggio PageSpeed adeguato, possiamo effettuare le stesse ottimizzazioni sul sito web, affinchè possa ottenere i migliori risultati.
