Velocità dispositivi mobili

giusy.napoli

Velocità dispositivi mobili

Salve a tutti, il mio sito tenacemente.com continua ad avere problemi di caricamento su dispositivi mobili. Qualunque cosa faccio non supero mai un punteggio di 50 su pagespeed per dispositivi mobili. Ho ridotto numero di plugin, ridotto al massimo la grafica di post e home, ho installato il plugin SiteGround Optimizer con tutte le relative funzioni, attivato Asset Cleanup per eliminare il superfluo da post e home, ho acquistato il tema Newspaper 11 e attivato l'opzione solo per dispositivi mobili. Alla fine SiteGround Optimizer risultava molto pesante e la situazione non è cambiata. Attualmente uso WP Super Cache ma sono alla ricerca di qualcosa di più efficace. Non chiedo e nemmeno voglio un 100 di caricamento, ma un punteggio di 80 su dispositivo mobile, dopo tutte queste modifiche sarebbe gradito, non so più cosa fare.

g.lanzi

@giusy-napoli
Aggiungo un'idea a quanto detto da @mpmisco (che condivido pienamente):

Se vuoi che il tuo utente veda subito qualcosa e magari sia incuriosito e sia un po' più paziente nell'attesa, vedi se e come puoi implementare delle animazioni o immagini al caricamento.

Queste sono delle semplicissime animazioni grafiche in vettoriale (o semplici immagini, in realtà) che mostrano qualcosa in modo che lo schermo non rimanga vuoto durante il caricamento. A volte è un'icona che ruota, altre volte invece una frase specifica.

Per esempio, l'app Calm, che offre meditazioni guidate e altri contenuti simili, ha un'immagine di caricamento in cui invita l'utente a fare un respiro profondo. Una semplicissima scritta che dice "take a deep breath".
Io lo trovo geniale: non solo aspetto senza problema, ma addirittura mi mette nel mood giusto per scegliere una meditazione da eseguire.

Forse un'idea di questo tipo potrebbe essere interessante da valutare, no?

In generale, attenzione a non diventare una "statistics-junkie", guarda sempre i risultati organici, si scrive per gli utenti, non per avere buone performance.

mirkomassarutto

Ciao, ok importante l'esperienza utente.. ma non dimentichiamoci che è importante anche la velocità... altrimenti l'esperienza utente ne risente.

Detto questo, inizierei metytendo a posto i 404 che hai in pagina...
In home page hai 11 chiamate ad un 404..
In particolare richiami un background image che non esiste... mettilo o togli la chiamata https://tenacemente.com/wp-content/uploads/2022/06/bg.png
Ognuna di queste chiamate richiama un contenuto di 6.4MB (che contiene altri 6 errori 404)
Secondo me già con questa operazione risparmi un po'...

Altra cosa comprimi il codice in pagina...

Detto questo, difficile che tu possa arrivare a performance elevate.. già adsense ti penalizza da solo.

Se prendiamo in esame uno dei tuoi contenuti:
https://tenacemente.com/2022/07/06/mutuo-tasso-variabile-offerte/
I contenuti "interni" prendono 1.322 s contro i 3.440 s del totale...

Quindi, sicuramente potrai "limare" il tuo... ma il problema è che non potrai limare ciò che arriva da fuori..

sermatica

@giusy-napoli ha detto in Velocità dispositivi mobili:

il mio sito tenacemente.com continua ad avere problemi di caricamento su dispositivi mobili. Qualunque cosa faccio non supero mai un punteggio di 50 su pagespeed per dispositivi mobili.

Ciao Giusy,
qui c'è un errore di base, stai guardando la metrica sbagliata . Non devi guardare il punteggio di Pagespeed ma i dati reali di navigazione. Se vuoi un buon punteggio devi 1) avere un ottimo hosting, 2) montare un ottimo tema e poi 3) attivare cache e varie. Hai fatto queste 3 cose ?

Non chiedo e nemmeno voglio un 100 di caricamento, ma un punteggio di 80 su dispositivo mobile

Volere un punteggio di 80 o 100 che sia è errato, quello che importa è che le metriche di navigazione dei tuoi utenti siano tutte sul verde, devi lavorare li.

3 secondi di nulla è un tempo eccessivo e l'utente cambia sito, è matematico. Inizia a fargli vedere qualcosa fin da subito e sarà disposto ad attendere più di 3 / 5 secondi.

Condivido questo, il sito deve aprirsi in modo istantaneo e non in secondi. L'utente deve poter iniziare a leggere fin da subito la pagina.

Se vuoi che il tuo utente veda subito qualcosa e magari sia incuriosito e sia un po' più paziente nell'attesa, vedi se e come puoi implementare delle animazioni o immagini al caricamento.

Non condivido questo, a mio avviso stanno nascondendo il contenuto. Preferirei che la pagina si caricasse velocemente, ma ribadisco il fatto di condividere il numero dei dati di laboratorio che esce dal GPS con quello delle metriche reali.

overclokk

Il primo problema è quello di dover mettere sempre delle toppe ai problemi invece di cercare di evitarli a priori, il punto fondamentale è essere consapevoli delle decisioni che si vogliono intraprendere e dire, "ok, questo so che è un problema ma ho bisogno di questa cosa e quindi mi tengo il problema cercando di minimizzarlo per quanto posso", che tradotto vuol dire, "ho comprato questo tema generalista che fa mille cose ma mi risolve il problema di avere una grafica in linea con il mio brand senza spendere troppo e sono consapevole che questo avrà problemi di velocità e me lo tengo perché cambiare non rientra nel budget".

I classici consigli "cache, lazyload and so on" sono si consigli per migliorare ulteriormente le performance ma non sono la bacchetta magica che risolve i problemi.

Vediamo per i non tecnici quali parametri dovrebbero avere maggiore attenzione:

Numero di richieste effettuate dal browser al server
Peso (domensione) per ogni richiesta che andrà a influenzare il tempo di download di quella risorsa in base anche al tipo di connessione utilizzata.

STOP

Poi se ne potrebbero aggiungere altri ma come ho detto sono per i non tecnici e ci consente di rendere più semplice il tutto.

Più il numero di richeste aumenta più il tempo di attesa di risposta ad ogni richesta del server aumenta nel tempo.
Più il peso per ogni richiesta è elevato più aumenta il tempo per scaricare la risorsa.

Vedete, semplice semplice.

Esiste un limite minimo e massimo per il numero di richieste?

NO

Esiste però il limite minimo che consente al sito di essere funzionante per l'utente e qui si valuta appunto cosa eliminare e cosa far caricare e quando farlo caricare.

Esiste un limite minimo e massimo per il peso di ogni richiesta?

NI

Il minimo è ovviamente il minimo fisico per un file che non sia vuoto, il massimo è quello che ti consente di avere la risorsa nel minor tempo possibile in base al peso e alla connessione.

Tutto qua, ne più ne meno.

Ora veniamo alla tua homepage (provata con firefox desktop e una connessione non eccelsa ma decente per lo streaming):

51 richieste
3,03 MB di 889,56 kB trasferiti
Completato: 1,64 s
DOMContentLoaded: 575 ms
load: 1,25 s

Cioè, 51 richieste e 3MB per vedere solo questo?

Poi ho provato con GTMetrix:

https://gtmetrix.com/reports/tenacemente.com/R0CU6dj9/#waterfall

E qui non milgiora, anzi.

Come valutiamo il risultato? Il Waterfall dice tutto:

jQuery, google fonts, altri file js, altri file css, diversi 404 come ti è stato detto sopra, ecc.

E qui come si risolve, se si risolve?

Come ho detto sopra è un trade-off:

il sito (lato tema) può funzionare con meno roba? Si, si toglie, no, si tiene.
il sito (lato utente) può funzionare con meno roba? Si, si toglie, no, si tiene.

Ritornando alla vecchia questione o la domanda delle domande su qual'è il migliore tema per WordPress?

La risposta è 42

Anzi no, scherzo, la risposta è qualsiasi tema che:

Non usa jQuery
Non carica font da google font
il CSS è al minimo indispensabile
il JS è al minimo indispensabile e dove serve.

Praticamente il 99,9% dei temi commerciali in circolazione vecchio stile non sono buoni temi.

Forse con un tema FSE compatibile che rispetti tutti i punti sopra si riescono ad ottenere ottimi risultati, io che NON sono un amante di Gutenberg ma ho seguito il discorso #FSE e ho fatto qualche test sviluppando un tema personale questo è l'unico consiglio che mi sento di dare, però non cadiamo nel tranello poi di dover installare mega|plus|ultimate-block-superpack plugin se no ritorniamo da capo a dodici, li ho guardati quei plugin, nel codice, e anche no.

PS: la tecnica di usare un spinner per l'attesa del caricamento della pagina è una roba folle, inutile e odiosa, da tagliare le dita al designer che l'ha creata e tutti gli altri che hanno copiato.

overclokk

@mpmisco ha detto in Velocità dispositivi mobili:

perchè sono "obbligati" a creare strutture gonfie di plugins e fuzioni

Non li obbliga nessuno, non è una dittatura.

@mpmisco ha detto in Velocità dispositivi mobili:

Ma in mezzo a loro ci sono autori, molto pochi, che realizzano temi eccellenti,

Devo ancora vederne uno.

@mpmisco ha detto in Velocità dispositivi mobili:

con gestori di blocchi spesso progettati da loro

Non è detto che questo sia un bene, anzi, considerando che con i blocchi nativi fai il 95% delle cose avere "blocchi di terze parti" deve valere veramente la pena.

@mpmisco ha detto in Velocità dispositivi mobili:

con pochi plugin e alcuni sempre progettati da loro.

Pochi non vuol dire meglio, il numero non è indice di qualità.

@mpmisco ha detto in Velocità dispositivi mobili:

Comunque condivido tutto quello che hai scritto, un po' meno sul taglio delle dita di chi crea e usa un preloader

Si, hai ragione, taglio direttamente la mano che poi le dita non saprei dove metterle

overclokk

Voglio specificare il discorso spinner, io intendo che la scelta è folle per uno spinner che nasconde tutta la pagina e fa attendere l'utente, eventuali spinner su piccoli blocchi è ok perché il resto della pagina è visibile e interagibile da parte dell'utente, esempio lo spinner sugli articoli successivi, o su leggi il resto dell'articolo e così via, se si dovesse bloccare qualcosa la pagina rimane comunque utilizzabile, se invece si dovesse bloccare qualcosa durante il caricamento e io in pagina vedo solo uno spinner questo non è buono.

overclokk

@mpmisco ha detto in Velocità dispositivi mobili:

Li obbliga il mercato. Lo steso tema in 2 versioni, uno con Revolution Slider e uno senza, quale venderà e quale no?

Non li obbliga nemmeno il mercato, è una scelta di chi crea quei temi

@mpmisco ha detto in Velocità dispositivi mobili:

Posto un esempio di un tema venduto su ThemeForest

La qualità di un tema non si vede dalla grafica ma da come è scritto il tema stesso e quindi ribadisco, devo ancora vederne uno scritto bene.

@mpmisco ha detto in Velocità dispositivi mobili:

Non c'è un pagebuilder e c'è un "super plugin" PowerKit

Sicuramente avere un plugin per funzionalità aggiuntive dovrebbe essere la norma, poi non so se quando cambio tema il plugin da problemi.

@mpmisco ha detto in Velocità dispositivi mobili:

Questo non è certamente il miglior tema al mondo, a me personalmente piace moltissimo come vengono mostrati gli articoli, si nota subito che il tema si ispira a piattaforme come Medium o Ghost.

Vedi, come ho detto sopra, non dobbiamo confondere l'aspetto grafico (che trovo piacevole pure io) dall'aspetto tecnico (che purtroppo è più complesso da giudicare).

@mpmisco ha detto in Velocità dispositivi mobili:

Invece se si cercano le prestazioni massime un po' a scapito dell'estetica c'è Genesis Framework

Ecco, se cerchi le prestazioni massime Genesis non va bene, e il discorso sull'estetica non ha senso perché Genesis nasce per darti la struttura su cui tu metterai l'estetica.

@mpmisco ha detto in Velocità dispositivi mobili:

Invece molto interessante è GeneratePress, ma si torna sempre alla solita questione: a me può piacere quel tipo di stile minimalista, dove i contenuti vengono messi in primo piano, ma alla maggiorparte degli utenti no soprattutto se vogliono un alto impatto visivo.

GeneratePress nasce prendendo esempio da Genesis, non lo devi usare così ma te lo devi riadattare esteticamente, è questo il problema, si guarda solo all'estetica.

Ad ogni modo Genesis e GeneratePress non sono per nulla il meglio, anzi, ma sono comunque buone soluzioni per chi sa usarli e non ha voglia di scriversi il proprio tema.

giusy.napoli

Salve a tutti, ho fatto alcune modifiche al sito e adesso, seguendo anche i vostri consigli (preziosissimi e molto utili per me) la velocità di caricamento su PageSpeed Insights è 98/100, e potete controllare voi stessi il cambiamento di prestazione anche su GTmetrix.

Tuttavia non posso essere soddisfatta perché le singole metriche mi creano problemi con una "Valutazione Segnali web essenziali: non superata".

Search console mi ha segnalato 1.262 URL scadenti su dispositivi mobili per problema CLS (0,23) e 1.166 URL con problemi su dispositivi desktop per Problema LCP (3,6 s) causato da blocchi di testo.

Ho cambiato molti temi in questi anni, ho provato GeneratePress, Genesis StudioPress, Astra, ma alla fine ho scelto di acquistare anche Newspaper 11 perché lo pubblicizzavano come uno dei migliori dal punto di vista dei Core Web Vitals, ma a quanto pare mi sbagliavo.

Cosa dire? Cercherò di risolvere con questo tema e se non ci riuscirò proverò anche Blocksy e vi terrò aggiornati!

Grazie mille per i vostri consigli che mi hanno permesso di migliorare le prestazioni del sito

mirkomassarutto

bene... ricorda di inserire un'immagine in https://tenacemente.com/wp-content/uploads/2022/06/bg.png
altrimenti elimina la chiamata

overclokk

@giusy-napoli ha detto in Velocità dispositivi mobili:

Cosa dire? Cercherò di risolvere con questo tema e se non ci riuscirò proverò anche Blocksy e vi terrò aggiornati!

Guarda, da quello che vedo la grafica del tuo sito è molto semplice, cioè non ho visto cose "troppo" persoalizzate, praticamente fai tutto con i blocchi nativi di WordPress, considerando il funzionamento di FSE farei prima una prova in locale con il tema 2022 dal quale poi puoi cambiare quasi praticamente tutto e dovresti riuscire ad arrivare ad un risultato simile a quello che hai ora e avere alla fine un front-end più veloce.

Io un tentativo lo farei

giusy.napoli

@overclokk Grazie mille, seguirò il tuo consiglio e proverò anche questo.

1ale1

comunque sarebbe strano non arrivare a valori alti, dalle pagine singole che ho aperto non c'è praticamente niente... solo testo e qualche link, nessun header, nessuna immagine, nessun paragrafo..., praticamente è più elaborato un post in un forum