DaSapere360.it: the making of

Che cosa succede quando, per un errore di valutazione o per un errore qualsiasi, il tuo sito va a farsi benedire? Quando il responsabile tecnico fa un’errata valutazione e lascia per tutta la notte il sito offline con tanto di schermata bianca della morte? (una notte relativamente breve se calcoliamo che sono andato a dormire alle 3 e mezza) … O che cosa si genera nel tuo intimo se una migrazione diventa un’odissea che ti porta a perdere tutti i dati? Semplice: iniziamo a parlare di invecchiamento da programmazione, quella cosa che ti fa perdere il sonno, la calma, i capelli, l’appetito … no l’appetito non l’ho mai perso (oh ma MAI PER DIRE MAI EH?) E quindi tu scleri, muori un po’ dentro ma poi ripensi alle parole di un film che hai visto (o di un telefilm, ad ogni modo qualcosa che non ricordi) che dicevano:

Quando una foresta decade,
un incendio purificatore è inevitabile e naturale

cit.

E quindi, maestro, se dobbiamo parlare, parliamo, se dobbiamo ballare, balliamo, se dobbiamo bruciare, bruciamo tutto. Il primo istinto è quello, lo ammetto. Poi però ti rendi conto che non ne vale la pena (e che non puoi fare quello che vuoi) e che non puoi buttare gli ottimi risultati raggiunti solo in una settimana di vita (e che non puoi fare quello che vuoi) e che non saresti d’esempio per i ragazzi ai quali stai insegnando che il duro lavoro paga (e che non puoi fare quello che vuoi) e insomma, diciamocelo: non puoi fare quello che vuoi.

Contenuti

Quindi ripartiamo dalla base, da zero.

E qui, in quest’istante, scatta nella tua testa una vocina, prima lontana, poi che si avvicina, che ti convince, che ti suggerisce: “Hey … Mattia … non puoi fare quello che vuoi documenta tutto! Fa una guida, un memorandum del delirio che c’è dietro alla creazione di un sito .. e ricordati … non puoi fare quello che vuoi!” E quindi questo è quello che faremo (farò IO perché sono solo in piedi davanti al PC):
the making of, come è (ri)nato il blog di DaSapere360.it.

Non mi va di fare un articolo ben ponderato, facendo key research e valutazioni: questo è un diario, un modo di esorcizzare il lungo e penoso processo di rifare quello che è già stato fatto. Quindi probabilmente non indicizzerò questo articolo e magari creerò anche una categoria a parte. I VANEGGIAMENTI DI UN PROGRAMMATORE SULL’ORLO DI UNA CRISI DI NERVI E DI SONNO potrebbe essere un titolo adatto, ma potrebbe perdere un filino di celerità, di immediatezza e quindi magari opterò per una cosa diversa o semplicemente lo lascerò senza categoria (probabile).

Le decisioni preliminari

Quelle, le decisioni preliminari cioè, sono le noie che si presentano sempre, e sono poi le cose davvero importanti in un progetto. Dove eravamo rimasti e che pensieri avevamo quando abbiamo progetto il primo, grande glorioso DS360? (DS360 = DaSapere360.it, dai su, stiamo sul pezzo con gli acronimi)

Avevamo un ottimo server, veloce come la luce, Elementor PRO che ci fa divertire e stupisce, OceanWP come tema di base e un paio di cachatori attivi. Nella “notte delle 3 A.M.” (la notte citata all’inizio, quella della schermata bianca della morte) abbiamo toccato buoni risultati, buoni ma non buonissimi, ma comunque buoni: Google Speed Misuratore Della Velocità Della Luce E Del Tuo Sito mi ha detto che avevo un 95 su desktop e un 60 su mobile. O forse erano 90 su desktop e 65 su mobile. Chiedo l’aiuto del pubblico.

Il risultato di PageSpeed Insights da desktop
Il risultato di PageSpeed Insights da desktop
Il risultato di PageSpeed Insights da desktop
Il risultato di PageSpeed Insights da mobile

Bene ma non benissimo

Perché se da desktop avevamo un buon risultato, da mobile avevamo una sufficienza stiracchiata, ottenuta non senza difficoltà varie. Tutto per colpa dei grandissimi Font Awesome (tanto belli ma tanto maledetti) che non riuscivano a farmi calare i tempi di fruizione della pagina, perché diventavano delle Risorse Render Blocking (non sai cosa sono? USA GOOGLE E SCOPRILO Te lo spiego io in un articolo! Fra un po’, quando finisco con questo disastro, non mettermi fretta)

Il tema, in particolare, il tema a me caro, WpOcean (al quale sono davvero affezionato come ci si affeziona ad uno zio [e questa la dice tutta sul tema, o sui miei zii {ok sto usando le parentesi a caso, ma non è che dentro la tonda potevo aprire un’altra tonda}]) non riusciva a fare a meno di Font Awesome. E io, invece, avevo deciso di lasciarlo andare, come quando decidi di lasciar andare la ragazza più bella e impegnativa solo per problemi di budget: sai che stai facendo, non sai se te ne pentirai mai, ma lo fai lo stesso. O almeno immagino che ci si possa sentire così, perché sto descrivendo una cosa che non mi è mai successa: chi ce l’ha mai avuto un budget?!

Tema e gestione dei contenuti

Di qui il dilemma: su cosa puntare? Un tema con builder integrato, potente e pazzesco, o un tema leggerissimo con un builder più conosciuto e diffuso? Abbiamo pensato tanto a questa scelta, almeno 21 minuti. Poi, dopo aver visto che il tema con builder interno non era compatibile con plugin di content building esterno (la classica situazione della moglie ubriaca e della botte piena; anche qui, “l’ho sentito dire”, mai avuto una botte piena) abbiamo deciso: useremo Elementor PRO e GeneratePress. Perché?

Il nostro è un progetto di laboratorio online, stiamo formando delle giovani menti (giovani nel senso informatico del termine) che devono muovere i primi passi, e vogliamo fare tutto ciò sposando le soluzioni più comuni sul mercato. E la scelta di Elementor ci è sembrata la scelta più diffusa sul mercato, il più comune fra i builder, e (speriamo) il più immediato quando bisogna capirne il funzionamento. GeneratePress, quindi, ha prevalso sulla vecchia scelta, OceanWP, perché a detta di diverse recensioni è un tema più leggero. E SOPRATTUTTO SENZA FONT AWESOME.

Pagherà questa scelta? Speriamo. Del resto, questo non è un articolo “ti faccio vedere io come si fa la cosa giusta” ma un articolo della serie “guarda cosa succede dietro le quinte di un sito web”, anche se, ovviamente, qualche spiegazione del “come si fa” verrà inserita. I processi decisionali sono cose lunghe, che portano mal di testa, idee pensate e ripensate, decisioni importanti, importanti come le strategie di guerra. Solo che noi non vogliamo ammazzare nessuno.

Faremo tutto con elementor? No, vogliamo usare anche Gutenberg per la scrittura degli articoli di Blog, articoli come questo (Gutenberg che devo ammettere googlo ogni volta per ricordarmi come si scrive). Arrivato a questo punto procederò a descrivere passo passo quanto fatto, o meglio, quello che farò.

The (RE)making of DS360.it

Partiamo dai settaggi base: visto che il tema è stato smontato, devo reinstallare il mio nuovo tema (GeneratePress) e settarlo. Al momento infatti, la mia pagina di Blog appare così:

makingofDS360.it-01

Non mi piace (e già mi manca OceanWP) e devo fare delle cose importanti, come il tema child. L’header è già stato fatto, così come la Home; se per il primo non spenderò parole (anche perché che cosa ci sarà mai da dire sul “Ho fatto l’header”? L’ho fatto bello? Sì, l’ho fatto bello e responsive, con un campo di ricerca, modulato per cambiare ordine dei componenti in mobile e su tablet / mobile ho tenuto lo sticky header) alla Home dedicheremo qualche pensiero, più in la, forse. Poi includerò tutte quelle cosette che riguardano la grafica necessarie a ripartire, tutte le funionalità necessarie minori (table of contents, reCAPTCHA …) e maggiori (cache & backup).

Il tema

Scelto il tema, dobbiamo scegliere la grafica. Sembra un’inutile ripetizione, ma in realtà non è così. Scegliere un tema significa scegliere un veicolo tramite il quale esprimere dei concetti grafici. Ora bisogna scegliere le idee, che tradotto significa scegliere almeno cose come colori e font. Devo dire che il compito mi è stato abbastanza alleggerito dalla mia collaboratrice, in quanto ha scelto il logo. Lo ha disegnato e messo insieme e me l’ha passato: bene, meno pensieri creativi per me. Ho deciso che mi sarei attenuto a quello stile: sì ma .. di che stile stiamo parlando? Che font è stato usato? Lo possiamo replicare / usare? Cosa ci abbino?

I font

Il font, sarò sincero, non ricordo quale fosse. Ricordo però cosa ho scelto io: Poppins, un Google Font. Come l’ho scelto? Nella home page di Google Font è disponibile un simpatico tool che permette di comparare i font, sulla base delle varie impostazioni selezionabili e anche di un testo inserito dall’utente (e quindi è più facile cercare le somiglianze fra il testo che hai a disposizione e il testo che stai cercando). Quindi Poppins. Scelta fatta in pochi minuti, molto meglio che stare a valutare font per font tutti i 1023 font presenti.

il servizio utilissimo di filtering di google font
Grazie Google, grazie. In cambio vuoi tutti i miei dati personali, però grazie.

Cosa abbino al font principale? Come scelgo i font secondari, del testo? Con un servizio FANTASTICO: FontJoy, il comparatore di font. Ringrazio chi lo ha creato e lo ha reso disponibile al mondo, un po’ come faccio per Paletton. Servizi che rendono la vita (del web designer) più bella. Quindi la scelta è caduta su altri font fantastici Google Font: Julee per i testi in evidenza secondari e Duru Sans per il testo.

Come impostare dei caratteri globali con Elementor
scelta di font globali su Elementor

Li ho impostati precedentemente su Elementor, ora procedo a impostarli sul tema. Solo che prima devo creare il tema Child: fondamentale. A cosa serve? Google aiutaci tu! Come detto prima, questo articolo spiega cosa faccio, non perché, non sempre perlomeno. Però prometto che creerò degli articoli che spiegheranno queste tappe fondamentali della gestione di WP.

Il tema child

Child Theme Configurator Plugin

“Come ti creo il tema child punto it”: a mano lo saprei anche fare, ma se c’è un plugin che lo fa (e bene) e che poi disabiliti e ti rilassi, perché affannarsi? Child Theme Configurator, grande amico di mille imprese. Ti scarico, ti attivo, ti uso, ti disinstallo, perché si sa che i plugin che non servono più alla fine serviranno solo a rallentare il sito. E poi c’era anche la canzone famosa: “prendi un pluggino, trattalo male, lascia che ti aspetti per ore … “.

Strumenti -> Child Themes -> Configuriamo il nostro tema child come si vede qui nelle immagini.

Child Theme Configurator Plugin: uso del plugin 1
Child Theme Configurator Plugin: uso del plugin – 1
Child Theme Configurator Plugin: uso del plugin 2
Child Theme Configurator Plugin: uso del plugin – 2

Se l’analisi andrà a buon fine (come si vede nella seconda immagine) scorriamo fino a fine pagina e clicchiamo sul pulsantone blu per creare il nuovo tema child. Ed il gioco è fatto. Ora che abbiamo il tema child, passiamo a configurarlo.
(ovviamente ho disabilitato e cancellato il plugin. #NOMERCY)

Ecco i nostri temi padre e figlio
Ecco il nostro tema con il suo child che giocano liberi e felici

Iniziamo come i settaggi: colori, font e varie. Primo problema: non c’è il font scelto per il body, né quello attuale, né quello che avevo scelto prima (Telex o una coda del genere), quindi mi tocca sceglierne un altro, non voglio certo appesantire il sito, altrimenti restavo con OceanWP. Vada per MAVEN PRO, ma dovrò cambiare anche le decisioni prese con Elementor: uffa. Inoltre non posso personalizzare altri titoli oltre l’H3 se non grazie alle impostazioni premium e non posso nemmeno scegliere il colore del titolo H2 (che avevo impostato diversamente per farlo spiccare). Giochiamo di CSS e facciamo un H4 al volo per vedere come viene.

Test di titolo h4: se funziona …

(sottotitolo all’H4: non fuziona. Poco male, ho dovuto giocare con il css.)

Poche le altre impostazioni da regolare con il tema base di GeneratPress: manca ad esempio il footer, che farò con Elementor, oppure a mano, personalizzando il file del footer del tema child; vedremo. Anzi vediamo adesso.

Elementor e i componenti mancanti

Prima di procedere spiego cosa intendo per pezzi mancanti: non è che mancano davvero, ma non mi soddisfano o non mi viene permesso dal tema una personalizzazione soddisfacente. Poco male: ho Elementor e me li ridisegno tutti io.

Il Footer

Sezione Template di Elementor
sezione template al vostro servizio

Creerò ora un nuovo template per il footer. Sezione Template di Elementor, Nuovo Template, Tipo di template Footer e iniziamo (perché parlo al plurale?)

La cosa più noiosa è ricordarsi cosa ci fosse: un footer, per essere completo, deve avere tante piccole cose importanti, link alla privacy, partita IVA e dati vari. C’erano, non ci sono più e io non li ho. Ma ricordo che avevo fatto un video dove mostravo delle news del sito alla mia collaboratrice, e … TADAA, ci sono dei frames di quanto ci fosse prima. Pausa sul video, scorri frame by frame e abbiamo recuperato tutto. 🙂

Recuperate le info è sufficiente indicare ad Elementor che quel template dovrà essere usato su tutto il sito: abbiamo il nostro footer.

La Sidebar

Il form di ricerca che c’è adesso non mi piace, bruttarello il form, né tantomeno mi piace l’elenco degli articoli recenti. Modifichiamo la sidebar con Elementor, creando stavolta una nuova “sezione”. Altri 10 minuti di lavoro e ci siamo!

Le cose basilari sono fatte. Andiamo avanti.

Privacy & cookie banner

il file header aggiunto al tema child

Ora che nel footer abbiamo il link alla privacy (aspettando che venga caricata) manca il bannerino dei cookie. Ci viene gentilmente fornito da un servizio di terze parti che ci ha dato un codice da iniettare nel tag head. Ricordate il tema child? Userò lui per creare una nostra versione del file header e ci inietterò il codice che serve, così non installerò nessun altro plugin (che rallenta il sito, quando non serve). Fatto.

Utenti che ci mettono lo faccia

Ogni blog che si rispetti ha la sua pagina chi siamo, con tutti i suoi utenti e con tutte le belle faccine e le relative BIO. Noi avevamo tutto ciò, lo riavremo presto. Adesso però ripartiamo dalle base e ricreiamo ciò che è andato perduto:

  1. Reinserire tutti gli utenti con accessi e foto (mezzo lavoro l’ha fatto Velia, sei grande)
  2. Inserire (per chi me l’ha fornita) la BIO
  3. Assegnare gli articoli (sempre Velia)
  4. Metterli tutti insieme nella pagina Chi Siamo (che al momento non c’è)

Visto che ogni utente avrà una sua foto caricata sul server, foto da usare per la pagina “Chi Siamo”, usiamo un plugin che ci permette di usare un media locale come foto di profilo: usare Gravatar, infatti, è una scocciatura terribile. Altro tempo per ricercare le email, recuperare le foto, renderle fruibili (come si preparano le foto per un sito web? C’è un articolo in uscita, a breve), recuperare le Bio … Il TEMPO: che bene prezioso (che se ne va’).

scegliere una foto locale per il proprio utente
E grazie al plugin Simple Local Avatars avremo questa facile interfaccia per scegliere l’avatar dalla galleria locale

Table of content

bellissima Table Of Contents stilizzata

Un TOC serve come il pane ed è, diciamo, un elemento più funzionale che grafico. Ma visto che ne dovrò curare anche la grafica, l’includo qui. TOC+ è il plugin migliore che ho trovato finora, o perlomeno mi ci sono trovato bene ed ho pensato: perché cambiare? Peccato che non venga aggiornato da più di 10 mesi: non abbandonatemi produttori, ché già mi manca OceanWP e stasera l’ho dovuto mollare … ho sofferto pure troppo per questa giornata!

Piccola sbirciatina dal mobile

Il rendering del sito da PC non da particolari noie, ma da mobile, anzi dal mio cellulare vero e proprio (conviene sempre fare un test reale) evidenzia un po’ di inesattezze. Infatti nell’immagine a lato si può notare come la resa sia deficitaria. Sarebbe molto meglio far diventare quelle immagini, che in versione desktop sono allineate o a destra o a sinistra, a larghezza piena quando si visita la pagina da mobile. Come si può fare? Giusto un paio di linee di codice.

@media (max-width: 600px) {
	figure.alignleft, 
	img.alignleft, 
	figure.alignright,
	img.alignright {
		float: none !important;
		margin-left:auto;
		margin-right:auto;
	}
}

Semplicemente gli stiamo dicendo che quando arriva un utente con uno schermo di 600 px massimi di larghezza, gli elementi alignleft e alignright devono diventare non flottanti, adeguando anche i margini. Test da PC e test da cellulare: ok!

Sono passate quasi 6 ore e credo che per la situazione grafica siamo a posto, almeno per una prima (ri)pubblicazione di emergenza. Mancano ancora da stilizzare la griglia dei post, il single post e la stilizzazione dei meta. Li vedo dopo.

Andiamo oltre (dico sempre andiamo ma sto sempre solo).

Recaptcha: no spam no more

Se hai pensato alle more allora avrai fame anche tu (sono le 22:36 e ho fame anche io) ma la realtà è che lo spam è una gran scocciatura, così come gli attacchi a forza bruta. Il recaptcha non risolverà tutti i problemi del mondo, ma è un buon inizio (per i DDoS poi magari vediamo che ci dice CloudFlare). Usiamo un account Google e registriamoci alla pagina Google ReCAPTCHA. Ci serviranno dei codici e un plugin, questo plugin, che faranno il lavoro.

il servizio di Google reCAPTCHA
il servizio di Google reCAPTCHA dove prendere i codici
il plugin reCaptcha
e il plugin dove inserire i dati

Basta inserire il codice rispettivo nel campo rispettivo e poi scegliere dove far visualizzare il reCAPTCHA (nel Login form, nel form di Registrazione, nel form per resettare la propria password e nel form dei commenti). Io li seleziono tutti, per quieto vivere (mio ovviamente).

Cache: less is more

Comprimere è importante. Anche le more, oramai sono ovunque. Ed è proprio qui che mi sono impantanato l’altra sera, a configurare il cachatore. L’unica cosa che mi mancava l’altra sera era scrollarmi di dosso i magnifici Font Awesome. Ho scelto 2 plugin, da far coesistere. Prima però vediamo che ci dicono PageSpeed Insight di Google e Gtmetrix sul nostro stato di forma.

PageSpeed Insight Mobile
PageSpeed Insight – Mobile
PageSpeed Insight Desktop
PageSpeed Insight – Desktop
GTmetrix - resa del sito
GTmetrix

Questa la resa attuale. Non ho toccato nulla delle prestazioni, né cachatore né altro. Non sembra niente di ché, specialmente dal punto di vista del mobile.

PageSpeed Insight Mobile
PageSpeed Insight Mobile – la diagnostica completa

Installerò 2 plugin, 2 cachatori: W3 Total Cache e Autoptimize, o almeno questo è quello che spero servirà.

W3 Total Cache

Ci sono davvero tanti articoli che spiegano, passo passo, tutte le singole opzioni di questo plugin. Ho letto diversi articoli comparativi e, di fra i plugin gratuiti, questo è il migliore, il solo comparabile con plugin più blasonati del calibro di WpRocket. Tante le opzioni: si inizia dal wizard di base, si passa alle configurazioni più elaborate. Dove le ho trovate: nei posti più disaparati, come le pagine di supporto di WordPress.org. Bisogna scavare, a fondo, perché le risposte si trovano. Ecco alcune soluzioni che ho applicato.

I giusti settings per w3 total cache

Quando hai un problema non devi mai pensare che sei l’unico. Probabilmente qualche altro pazzo avrà avuto la tua stessa situazione, e forse si sarà rivolto a qualche forum o avrà scritto a qualche help center. Saper cercare rende, e io lo so fare. Ho trovato questa interessante conversazione fra un utente e il Plugin Support di W3 Total Cache che mi è stata molto utile. Ricordo che già solo con queste opzioni suggerite dall’assistente oltre ai settaggi base del plugin avevo fatto dei bei passi in avanti (setteggi cercati online, se ne trovano davvero tanti, ci farò un articolo anche io, un giorno). Vado ad elencare cosa sto settando per questo sito:

In General Settings abilitare o settare:

  • Page Cache: abilitare, metodo “Disk: Basic”
  • Minify: abilitare, Auto, metodo “Disk”, con i settaggi di default
  • Object Cache: abilitare, metodo “Disk”
  • Browser Cache: abilitare
  • Lazy Load: abilitare

In Page Cache abilitare o settare:

  • Cache feeds: site, categories, tags, comments
  • Cache SSL
  • Aggiunta la front page alla Purge Policy: Page Cache

In Minify abilitare o settare:

  • Rewrite URL structure
  • HTML & XML (solo Enable)
  • JS
    • Combine & Minify
    • Before </head> “async”
    • After <body> “defer”
  • CSS (solo Enable)

In Browser Cache abilitare o settare:

  • Set expires header
  • Prevent caching of objects after settings change
  • Expires header lifetime: 31536000 (solo per Html o xml “604800”)
  • Cache Control Policy: “public, max_age=EXPIRES SECONDS”
  • Enable HTTP (gzip) compression

Disabilitare i Google Fonts e i Font Awesome per Elementor

L’Help Center di Elementor spiega chiaramente come velocizzare il proprio plugin.
[Ne parlo qui perché ha stretta relazione con la compressione dati del sito, sebbene stiamo parlando di Elementor e non di un cachatore]

  • Google Font
    add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
  • Font Awesome
    add_action( 'elementor/frontend/after_register_styles',function() { foreach( [ 'solid', 'regular', 'brands' ] as $style ) { wp_deregister_style( 'elementor-icons-fa-' . $style ); } }, 20 ); 

C’era anche un’altra opzione, relativa alle Eicons, ma avrei perso diverse funzionalità delle icone mobile, come per esempio l’icona del menù mobile (cosa fondamentale). Quindi l’ho scartata. Per non saper leggere e scrivere, li ho appiccicati nel mio file functions.php (tema child). Facciamo un altro giro di test con solo questo plugin abilitato, vediamo che succede.

nuovo test google speed mobile
nuovo test google speed desktop
GTmetrix al secondo tentativo

Sì, ma anche no. Ore 1:46, non sono stanco, però meglio chiudere a breve. Passiamo al secondo plugin da far coesistere con W3 Total Cache.

Autoptimize

Autoptimize, bel plugin, inizialmente configurato al massimo, dava risultati pazzeschi. Ma attivando tutte le opzioni il responsive non ne voleva sapere di funzionare bene. L’unica opzione che lascio attiva è il l’iniezione del “font-display: swap” e l’ottimizzazione dell’HTML. Dove trovo l’impostazione per i font? In Extra -> Google Fonts: “Combine and link deferred in head (fonts load late, but are not render-blocking), includes display:swap”.

Quest’ultimo settaggio dovrebbe fare la magia con il problema FOIT. Pulisco la cache e ritesto, anche se dovrei aspettare un quarto d’ora. 64 / 88 i nuovi risultati di Google, mentre GTmetrix non mi da molti dati migliori. Ma nessuna traccia dello swap nel codice. Facciamo un altro test: disattiviamo Autoptimize e testiamo Swap Google Fonts Display.

Swap Google Fonts Display

Questo plugin ha il solo scopo di iniettare il “font-display: swap”. Testiamo.

altro test di google speed insight mobile

altro test di google speed insight desktop
nuovo test GTmetrix

Sembra andar meglio, non super super, ma meglio. Evidentemente Elementor non è il massimo per il mobile, ma c’è un altro problema che mi affligge, oltre al sonno: manca l’icona del pulsante di ricerca. Niente da dire, se disabilito le icone ovviamente le perdo, quindi disabilito la ricerca nell’header e inserisco un pulsante testuale nella sidebar. Fatto.

Sono le 3:27 del mattino, non ho intenzione di rileggere l’articolo per la correzione e per la pubblicazione, ma devo sicuramente finire un paio di installazioni.

Gli ultimi (primi) ritocchi

Mi mancano davvero 2 plugin importanti e necessari, che provvederò a installare senza speigare nei dettagli

Broken Link Checker

Essenziale per controllare l’integrità interna dei propri dati, lancio installazione diagnostica al volo. Nessun link rotto, meno male.

Redirection

Normalissimo plugin di Redirection, utile per ogni evenienza, che al momento tengo inattivo. Visto che mi ci trovo, chiedo a Screaming Frog di fare un rapido esame del sito, così vediamo se ci sono 404.

PS: non ce ne sono, solo 200 e 301, musica per le mie orecchie.

Conclusioni (speriamo)

Sono letteralmente cotto, fare un report scritto di tutti i passaggi ha richiesto sicuramente più tempo e rinunciare alle risorse di blocco ha richiesto tanti ritocchi, ma il sito sembra essere veloce. Questo c’è dietro all’uscita di un sito, e farlo in un pomeriggio, dalle 4 in poi, è insano ma a volte necessario. Se sei arrivato fino a qui con la lettura, avrai capito che fare un sito web, gestirlo, forse è più complicato di quanto sembri da fuori. Zappare la terra, tutto un tratto, non sembra poi così brutto.

Cosa manca

Ancora diverse cosine, come il modello di pagina per il blog, per il singolo articolo e per la ricerca, nonché una pagina 404 (perché non si sa mai oh). E le immagini, da ricaricare non dico tutte ma quasi. Però dai, il (re)making of posso considerarlo TERMINATO. Ma non è terminato questo articolo.

La revisione (aggiornamento del giorno dopo)

Niente, la tentazione è stata forte. Ho testato, letto, cercato, pensato e … Ci ho rimesso mano, e non solo all’articolo. I Google Font oramai spariranno, perché continuare a caricare anche solo loro non è stato sufficiente. Come spiegavo qui precedentemente avevo scelto di font di Google, ma poi, durante gli ultimi test, ho deciso di disabilitarli.

i suggerimenti di PageSpeed Insight
Google me lo diceva, un secondo e mezzo di possibile risparmio: un’eternità.

Tocca passarci la mano sulla coscienza virtuale e scegliere un altro font, per amore più che altro del principio: un sito super leggero e non per forza bellissimo (tanto per citare un sito noto: Aranzulla che font usa? Georgia / Times New Roman. E chissà perché … )

Elimino Maven Pro e Poppins … Ed eliminiamoli anche dai template di Elementor.

Dolore, ma serve. Ma serve davvero? No, siamo ancora ancorati a 61 di valutazione Mobile. Mi sto innervosendo. Questa è una beffa.

Cosa COsa COSa COSA?

response di Google PageSpeed Insight

Ed ecco cosa, nell’immagine allegata addirittura parliamo di SEI secondi, un’infinità. L’immagine. La home ha un’immaginona centrale, alleggerita ma pure sempre immaginona. Scelta stilistica che però adesso andiamo a rinnegare, perché se si cambia si cambia tutto, altrimenti restavamo come prima. Preparo un mini slider o un’immagine sola? Intanto smonto l’immagine e testo, e vediamo se è vera sta cosa …

77: meglio, ovvio, non c’è niente! Adesso c’è altro da eliminare, secondo lui, secondo Mr. Google, ma sono cose che non riesco ad eliminare, che non posso eliminare, codice importante: è una battaglia infinita. Metto uno slider una immagine statica minimale, almeno abbiamo una faccia da vedere e poi basta. Spero. Lanciamo i test.

l'ultimo pagespeed di google mobile
l'ultimo pagespeed di google desktop
l'ultimo GTmetrix

BASTA. Sono veramente esausto. Tutto questo macello per passare da 94 a 98 e da 66 a 76. Senza contare che poi ogni singolo Copy dovrà stare attento a replicare la perizia nelle pagine come ho fatto io (caricare solo immagini proporzionate all’uso e ridotte) … Google, tu vuoi la luna.

L’articolo si può dire chiuso. Stavolta per davvero. E lo chiudo con una massima.

Quando incontrate un web master siate gentili, non sapete con quale strumento di comparazione sta lottando in quel momento.