Ubuntu: installare la patch italiana di Danganronpa 2

Se sei un utilizzatore di Linux di vecchia data conoscerai la situazione drammatica in cui versava il mondo del gaming sui sistemi open source. Fortunatamente dal 14 Febbraio 2013, con il rilascio di Steam su Ubuntu il supporto al gaming su Linux è cresciuto notevolmente arrivando al giorno d’oggi in cui molti giochi vengono rilasciati fin dal day-one anche su Linux.

Uno dei giochi con il supporto nativo a Linux è proprio Danganronpa 2: Goodbye Despair al quale volevo iniziare a giocare. Benché il gioco sia perfettamente compatibile con Ubuntu 20.04 (🎉) le uniche lingue ad essere supportate sono il Giapponese e l’Inglese (😑).
Sfortunatamente, non conoscendo la lingua del sol levante, ero pronto a giocare il titolo in inglese quando, per puro caso, mi sono imbattuto in una traduzione amatoriale del gioco realizzata dai ragazzi di All-Ice Team.

La patch fa riferimento all’installazione su Windows ma con mio grande piacere ho notato che funziona alla grande anche su Linux. Per cui ho pensato di scrivere due righe anche per chi volesse usufruire del gioco in italiano da Ubuntu.

Ma prima di vedere come applicare la patch italiana per Danganronpa 2 mi presento: sono Lorenzo Millucci e sono un ingegnere del software che ama lavorare con Symfony e a cui piace condividere in questo blog le cose che impara. Non perderti anche il mio canale Telegram in cui ogni martedì parliamo di news e curiosità legate al mondo della tecnologia!

Installazione della patch

L’unico requisito necessario a poter installare la patch è essere in possesso del gioco su Steam. Se ti serve puoi acquistarlo da qui.

ATTENZIONE: Nel momento in cui scrivo la patch è ancora in versione alpha il che significa che potresti incappare in qualche bug e/o errore di traduzione. Inoltre non essendo la versione definitiva saranno tradotti unicamente i testi mentre le immagini e i video rimarranno in inglese.

Fatte queste doverose premesse la prima cosa che devi fare è scaricare la patch direttamente dalla pagina del progetto:

Dopo aver terminato il download della patch devi aprire Steam, fare click destro sul gioco e selezionare la voce Proprietà -> File Locali -> Sfoglia i file locali

Apri la cartella con i file di gioco facendo click destro -> Proprietà -> File Locali -> Sfoglia i file locali

Oppure, se preferisci, puoi aprire la cartella direttamente andando al percorso:

~/.steam/debian-installation/steamapps/common

Una volta che hai aperto la cartella contente i file di gioco rinomina il file dr2_data_keyboard_us.wad in dr2_data_keyboard_us_old.wad in modo da poterlo ripristinare in caso di problemi con la patch. Questo passaggio non è fondamentale ma in caso di problemi con la patch ti permette di ripristinare le impostazioni iniziali senza dover eliminare e riscaricare il gioco.

A questo punto copia il file dr2_data_keyboard_us.wad contenuto nella patch all’interno della cartella del gioco

Copia il file dr2_data_keyboard_us.wad della patch all’interno della cartella di gioco

Fatto ciò non ti resta che avviare il gioco facendo attenzione a selezionare come metodo di controllo Keyboard Mouse

Accertati di selezionare Keyboard Mouse come metodo di controllo

E ora non mi resta che augurarti buon divertimento con Danganronpa 2: Goodbye Despair! 😀️

Goditi il gioco in italiano!

Se questo post ti è stato utile puoi farmelo sapere lasciando un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

WordPress: Disabilitare i Google Fonts sul tema Jupiter X

Jupiter X è un tema per WordPress che concentra eleganza e personalizzabilità senza compromettere le performance del sito.

Tra le varie possibilità di personalizzazione del tema c’è non poteva mancare quella dei tipi di carattere da utilizzare. Tra i vari tipi di font che è possibile abilitare nel tema ci sono anche i Google Fonts.

Il problema con i Google Fonts però è che basta abilitarne una tipologia per fare in modo che il tema scarichi tutti i font di Google (compresi quelli non necessari). E il download di asset non necessari al sito non viene visto di buon occhio dall’indicatore delle performance dei segnali Web Vitals.

Sfortunatamente non esiste un modo per permettere il download selettivo dei font Google necessari (anche se gli sviluppatori ci stanno lavorando) ma esiste il modo per disattivare completamente il download dei Google Fonts e scaricare manualmente solo quelli utili.

Ma prima di vedere come disattivare completamente i Google Fonts mi presento: sono Lorenzo Millucci e sono un ingegnere del software che ama lavorare con Symfony e a cui piace condividere in questo blog le cose che impara. Non perderti anche il mio canale Telegram in cui ogni martedì parliamo di news e curiosità legate al mondo della tecnologia!

Disattivare completamente i Google Fonts

Per disattivare completamente i Google Fonts scaricati dal Jupiter X devi fare una piccola modifica al file functions.php:

function lm_disable_jupiterx_webfonts() {
    wp_dequeue_style( 'jupiterx-webfont' );
    wp_deregister_style( 'jupiterx-webfont' );
}
add_action( 'wp_print_styles', 'lm_disable_jupiterx_webfonts' ); 

Puoi fare questa modifica direttamente dal pannello di controllo del sito andando su Aspetto -> Editor del tema e selezionando la voce “Theme functions” oppure modificando il file wp-content/themes/jupiterx/functions.php con il tuo editor preferito.

Una volta salvate le modifiche il sito verrà caricato senza i Google Fonts. Se utilizzavi i Google Fonts in qualche pagina ora, avendoli disattivati, la vedrai con il font predefinito.

NOTA: Per accertarti che il cambiamento non lasci in cattivo stato qualche pagina ti consiglio di di fare un bel giro all’interno del sito verificando che non si sia rotto nulla.

Abilitare selettivamente i Google Fonts

Qualora tu abbia bisogno di attivare una singola font-family di font per il tuo sito puoi modificare lo script descritto precedentemente aggiungendo esplicitamente quale Google Font tu voglia caricare.

Ad esempio, se tu volessi caricare il font “Roboto” dovresti modificare lo script in questo modo:

function lm_disable_jupiterx_webfonts() {
    wp_dequeue_style( 'jupiterx-webfont' );
    wp_deregister_style( 'jupiterx-webfont' );
    
    // Import only webfonts actually used
    wp_enqueue_style( 'gfonts-roboto', 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap' );
}
add_action( 'wp_print_styles', 'lm_disable_jupiterx_webfonts' ); 

Se questo post ti è stato utile puoi farmelo sapere lasciando un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Generare i report di Lighthouse usando NodeJs

Qualche settimana fa ti ho parlato dell’importanza delle performance (misurate tramite i segnali Core Web Vitals) nel definire la posizione di un sito web all’interno dei risultati di ricerca di Google.

Nell’articolo dicevo che uno degli strumenti principali per l’analisi delle performance di un sito web in sviluppo è proprio Lighthouse che, per ogni pagina del sito, permette di eseguire tutta una serie di test da mobile e da desktop in modo da ottenere istantaneamente un report con le criticità da sistemare.

Poiché fare una scansione completa di un sito web richiede di far girare l’analisi di Lighthouse due volte (mobile e desktop) per ogni pagina i tempi necessari a compiere lo studio possono allungarsi notevolmente. Proprio per evitare di dover fare a mano questo lavoro macchinoso ti spiego come automatizzare il processo utilizzando poche righe di JavaScript.

Ma prima di addentrarci nel codice mi presento: sono Lorenzo Millucci e sono un ingegnere del software che ama lavorare con Symfony e a cui piace condividere in questo blog le cose che impara. Non perderti anche il mio canale Telegram in cui ogni martedì parliamo di news e curiosità legate al mondo della tecnologia!

Creazione del report con JavaScript

La prima cosa da fare per iniziare è chiaramente quella di installare da npm il package di Lighthouse (è richiesta la versione di Node 12 o superiore):

npm install --save lighthouse

Una volta completata l’installazione del pacchetto puoi creare lo script che dovrà prendere in ingresso una lista di URL da analizzare e, per ognuno di essi, salvare il report generato da Lighthouse sia con la simulazione di navigazione da un dispositivo mobile che da uno desktop.

Questo è lo script che mi sono creato:

const fs = require('fs');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

// L'elenco delle pagine da analizzare
const pages = [
    'https://www.lorenzomillucci.it/',
    'https://www.lorenzomillucci.it/lorenzo-millucci-chi/',
    'https://www.lorenzomillucci.it/2021/01/19/core-web-vitals-cosa-sono-a-cosa-servono-e-come-si-misurano/',
];

// Carica le stesse configurazioni usate da lighthouse web per il test da mobile e da desktop
const desktopConfig = require('lighthouse/lighthouse-core/config/lr-desktop-config.js');
const mobileConfig = require('lighthouse/lighthouse-core/config/lr-mobile-config.js');

(async () => {
  // Avvio di Chrome headless
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});

  // Opzioni specifiche per lighthouse
  const options = {
    logLevel: 'silent', 
    output: 'html',
    port: chrome.port
  };

  for (page of pages) {
    console.log('Testing mobile...');
    const runnerResultMobile = await lighthouse(page, options, mobileConfig);
    fs.writeFileSync(`mobile_${new Date().toUTCString()}.html`, runnerResultMobile.report);

    console.log('Testing desktop...');
    const runnerResultDesktop = await lighthouse(page, options, desktopConfig);
    fs.writeFileSync(`desktop_${new Date().toUTCString()}.html`, runnerResultDesktop.report);
  }

  await chrome.kill();
})();

Eseguendo questo script verranno salvati come file HTML i due report completi (performance, PWA, SEO, accessibilità e best practices) che lighthouse avrebbe generato per desktop e mobile per ogni pagina elencata.

I due report HTML generati dallo script

Se avessi la necessità di fare delle analisi più dettagliate e ti servisse avere i risultati del report in formato machine-readable puoi esportare il report in formato CSV o JSON. Per farlo basta cambiare l’opzione output come segue:

  const options = {
    logLevel: 'silent', 
    output: 'csv', // Oppure json
    port: chrome.port
  };

Ottenere solo i punteggi globali di ogni categoria di test

Nelle fasi di sviluppo di una pagina web può essere utile valutare solo l’impatto di ogni singola modifica sul punteggio globale senza la necessità di avere tutti i dati contenuti nel report. Per ottenere gli score assegnati ad ogni categoria puoi accedere direttamente alle seguenti proprietà del report:

console.log("Performances", runnerResultMobile.lhr.categories['performance'].score * 100);
console.log("Accessibilità", runnerResultMobile.lhr.categories['accessibility'].score * 100);
console.log("Best-practices", runnerResultMobile.lhr.categories['best-practices'].score * 100);
console.log("SEO", runnerResultMobile.lhr.categories['seo'].score * 100);
console.log("PWA", runnerResultMobile.lhr.categories['pwa'].score * 100);

Velocizzare l’analisi di Lighthouse

Un altro caso che può succedere in fase di sviluppo di un sito web è quello di avere la necessità di focalizzare l’attenzione solo su una certa tipologia di dati tra quelli contenuti nel report di Lighthouse (es. solo le performance) senza prendere in considerazione tutti gli altri test svolti dallo strumento. In casi come questo può essere utile configurare Lighthouse in modo da limitare la categoria di test effettuati in modo da guadagnare anche un po’ di tempo nel tempo di generazione del report.

Ad esempio, per limitare l’analisi alle sole performance ti basta è modificare l’oggetto options aggiungendo onlyCategories: ['performance'] nel seguente modo:

  const options = {
    logLevel: 'silent', 
    output: 'html', 
    onlyCategories: ['performance'], 
    port: chrome.port
  };

Naturalmente è possibile limitare il report ad una qualunque altra categoria di test o, addirittura, personalizzare il report combinando più categorie. Tutto ciò di cui hai bisogno è modificare opportunamente la chiave onlyCategories.

Conclusioni

Conosci la storia dei due boscaioli che si sfidano in una gara per determinare chi fosse riuscito a tagliare prima un albero? Se non la conosci la trovi qui.

In pratica alla fine della sfida non vince il boscaiolo che d’impegno si era messo a tagliare l’albero senza mai fermarsi ma vince l’altro che nonostante si fosse riposato 10 minuti dopo ogni ora si era preso la briga di affilare l’ascia ad ogni pausa.

Analizzare un sito web con Lighthouse è un po’ come la sfida tra i due boscaioli in cui ci si può buttare a capofitto nel generare a mano i report per ogni pagina oppure ci si può fermare e “affilare l’ascia” creando uno script che esegua tutti i test in successione in una sola volta.

In questo articolo ti ho mostrato come fare a generare esattamente lo stesso report che è possibile ottenere con Lighthouse da Google Chrome. Naturalmente il modulo Node ha molte altre opzioni di cui non ho parlato che ti consentono di generare dei report su misura per il tuo caso specifico. Per saperne di più ti lascio il link diretto alla documentazione ufficiale del modulo.


Se questo post ti è stato utile puoi farmelo sapere lasciando un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Core Web Vitals: cosa sono a cosa servono e come si misurano

Ti sarà sicuramente capitato di navigare su di un sito inusabile a causa degli infiniti tempi di caricamento e della quantità smodata di banner di ogni sorta. Esperienza terribile.

Proprio l’esperienza di navigazione dell’utente sta per diventare uno dei fattori con cui Google deciderà l’ordinamento dei risultati del motore di ricerca.

Nella pagina about di Google si legge che lo scopo fondamentale del motore di ricerca è:

La nostra missione è organizzare le informazioni a livello mondiale e renderle universalmente accessibili e utili.

https://about.google

Organizzare le informazioni a livello mondiale significa trovare e catalogare tutte le pagine web esistenti in modo da fornire i migliori risultati possibili sulla base delle parole chiave digitate dall’utente.

Ma Google non si limita a classificare i risultati solamente in base al contenuto. Immagina di cercare una parola chiave come “miglior software gestionale per hotel” su Google.

Ti sei mai chiesto come faccia il motore di ricerca a decidere l’ordinamento con cui sono mostrati i risultati quando tutte le pagine hanno contenuti più o meno simili tra loro? Al fine di fornire anche in queste situazione i migliori risultati possibili, Google dichiara di tenere in considerazione oltre 100 fattori differenti!

E tra i fattori presi in considerazione, a partire dalla prima metà del 2021, uno che guadagnerà maggiore importanza nella definizione dell’ordinamento dei risultati di Google sarà proprio la così detta Page Experience. Proprio per misurare in maniera oggettiva la qualità di navigazione di un sito web Google aveva introdotto qualche anno fa i segnali Core Web Vitals. Nei prossimi mesi questi indicatori verranno inclusi all’interno del punteggio della Page Experience e da Maggio 2021 diventeranno un fattore di ranking a tutti gli effetti.

Questo vuol dire che a parità di contenuto un sito pulito, veloce a caricarsi e di facile consultazione verrà favorito rispetto ad un sito lento, pesante e complesso da usare.

NOTA: Chi si intende di ottimizzazione per i motori di ricerca conosce benissimo il motto “content is king” che sta a significare che il contenuto informativo il vero motivo per cui gli utenti aprono un sito. Questo motto continuerà ad essere valido anche con l’avvento dei Core Web Vitals tra i fattori di ranking. Un sito con il contenuto confuso e sgrammaticato ma con segnali Vitals al top continuerà ad essere penalizzato rispetto ad un sito con contenuto di qualità ma scarse performance.

Ma prima di trattare nel dettaglio dei Core Web Vitals mi presento: sono Lorenzo Millucci e sono un ingegnere del software che ama lavorare con Symfony e a cui piace condividere in questo blog le cose che impara. Non perderti anche il mio canale Telegram in cui ogni martedì parliamo di news e curiosità legate al mondo della tecnologia!


Indice


Cosa sono i segnali Core Web Vitals

I segnali Core Web Vitals sono degli indicatori che servono a rispondere alla domanda: “Qual’è l’esperienza di navigazione che il mio sito sta offrendo?”.

Secondo Google i concetti su cui si basa una navigazione di qualità sono tre:

  • Velocità: la navigazione deve avvenire senza la necessità di attendere tempi infiniti di caricamento tra una pagina e l’altra;
  • Interattività: una volta che il contenuto è stato mostrato a schermo l’utente non deve attendere un’infinità di tempo prima di poter interagire con la pagina;
  • Stabilità visuale: il contenuto della pagina non deve subire spostamenti mano a mano che i contenuti vengono caricati (es. viene caricato un banner pubblicitario che fa si che il testo venga scrollato più giù nella pagina).

Questi concetti possono essere misurati utilizzando rispettivamente le seguenti metriche:

  • Largest Contentful Paint (LCP): il caricamento dovrebbe avvenire entro 2.5s
  • First Input Delay (FID): dovrebbe essere possibile interagire con la pagina entro 100ms dal caricamento
  • Cumulative Layout Shift (CLS): il punteggio relativo alla stabilità non dovrebbe essere superiore a 0.1

I report di Google mostrano come un sito che soddisfi a pieno i requisiti di qualità appena definiti abbia un tasso di abbandono più basso del 24% rispetto ad uno sito che non li rispetta.

Misurare i Core Web Vitals

Ora che hai capito le motivazioni che hanno spinto Google ad introdurre i Core Web Vitals come indicatore dell’esperienza di navigazione percepita dall’utente vediamo come misurarli praticamente.

Una prima importante differenziazione da fare nella misura dei segnali Vitals è la distinzione tra “dati sul campo” e “dati sintetici”. I primi sono i dati raccolti da Google tramite l’analisi dei visitatori reali del sito web mentre i secondi sono dati ottenuti in laboratorio simulando quello che potrebbe essere il comportamento dell’utente nel sito.

Google (ovviamente) utilizza i dati sul campo per determinare l’ordinamento dei risultati di ricerca e ti farò vedere non sono facilmente accessibili. I dati sintetici invece possono essere generati facilmente e sono utilizzati principalmente dagli sviluppatori per individuare quali possono a cui gli utenti vanno incontro.

Google offre diversi strumenti per la misura dei Core Web Vitals che coprono diversi aspetti dello stesso problema e in particolare gli strumenti più usati sono:

  • Google Search Console
  • PageSpeed Insight
  • Lighthouse
I 3 strumenti più utilizzati per la misurazione dei segnali Core Web Vitals

Search Console

La Search Console è un servizio di Google dedicato ai webmaster con il quale è possibile monitorare e gestire la presenza del tuo sito nei risultati della ricerca Google.

Tra i vari report che è possibile consultare nella Search Console ne puoi trovare proprio uno dedicato interamente ai segnali Core Web Vitals.

Il report sui segnali web essenziali di Google Search Console

Il report della Search Console mostra i “dati sul campo” ed è ottimo per individuare rapidamente i problemi comuni a più pagine del sito visto che tutte le pagine con problematiche simili vengono raggruppate insieme. Ad esempio, se più pagine del sito hanno un layout comune con una grossa immagine in copertina, è molto probabile che il loro punteggio circa il Largest Contentful Paint (LCP) sia simile. In questi casi il report di Google segnalerà un eventuale problema su tutte le pagine.

Per farla breve la Google Search Console è lo strumento giusto da utilizzare per identificare eventuali problemi di performance a livello globale del sito. Lo svantaggio principale però della Console è che ogni punto del grafico è la media dei punteggi alle performance dei 28 giorni precedenti. Questo vuol dire che un miglioramento fatto oggi non sarà visibili nel report prima di un mese.

PageSpeed Insights (PSI)

PageSpeed Insight è un applicativo web di Google che permette di vedere nella stessa pagina sia i dati sul campo (se disponibili) che quelli sintetici. Tutto ciò che devi fare per ottenere il report di PageSpeed Insight è inserire l’URL della pagina da analizzare nell’applicazione e premere invio.

L’analisi del punteggio di questo blog da desktop secondo PageSpeed Insight

L’analisi svolta da questo strumento è relativa al singolo URL specificato e solo nel caso in cui la pagina sia frequentata da un numero sufficientemente alto di visitatori è possibile vedere i dati raccolti sul campo, altrimenti saranno mostrati solo dei dati sintetici raccolti tramite test automatici.

All’interno della pagina dei risultati dell’analisi sono presenti anche dei consigli relativi alle aree su cui concentrare l’attenzione per migliorare il punteggio della pagina. (Attenzione si tratta di suggerimenti ottenuti dal test sintetico eseguito sulla pagina, gli utenti reali potrebbero riscontrare problematiche differenti).

In breve, tramite l’analisi della PageSpeed Insight è possibile analizzare con precisione i dati reali delle performance misurate dai visualizzatori del sito per una determinata pagina.

L’obiettivo di questo strumento dovrebbe essere quello di mettere a confronto i dati reali con quelli sintetici così da vedere se c’è un’effettiva corrispondenza in modo da scongiurare l’ipotesi per cui i dati sintetici siano migliori di quelli effettivamente riscontrati dagli utenti.

Il problema principale di questo report è che se la pagina da analizzare non è sufficientemente trafficata otterrai solo i dati sintetici (misurati tramite Lighthouse).

Lighthouse

Lighthouse è uno strumento automatico di analisi dei siti web incluso all’interno di Chrome (o anche il nuovo Edge basato su Chromium).

Questo strumento è principalmente rivolto agli sviluppatori e ha come finalità la raccolta di dati sintetici sulle performance di un sito.

Lighthouse in particolare permette di ricavare vari report:

  • Performance del sito: è il report che contiene le metriche legate alle prestazioni (tra cui i Core Web Vitals) ed è in grado di fornire agli sviluppatori vari suggerimenti sulle aree in cui intervenire per migliorare l’esperienza dell’utente.
  • Progressive Web App: questo report è rilevante solo nel caso in cui abbinata al sito ci sia una PWA e serve ad identificare se il sito web aderisce a tutti gli standard richiesti ad una PWA.
  • Best Practices: questo report si concentra sugli aspetti legati alla sicurezza e sugli aspetti legati ai moderni standard di sviluppo web.
  • Accessibilità: questo report serve ad individuare eventuali problematiche che possano rendere la pagina web inutilizzabile da persone con disabilità.
  • SEO: in questo report è indicato quanto la pagina web è facile da scansionare per un motore di ricerca (non solo Google). Più il punteggio è alto e più sarà facile che la pagina venga indicizzata e compaia come risultato della ricerca di un utente.
Punteggio relativo alle performance misurato da Lighthouse su dev.to (in rosso ho evidenziato i Core Vitals)

La navigazione web in questi anni si sta spostando sempre più dai PC verso i dispositivi mobili come smartphone e tablet.

Google è ampiamente a conoscenza di questo fenomeno e proprio per questo motivo tiene in particolare considerazione questa categoria di dispositivi permettendo a Lighthouse di simulare l’esperienza utente da uno smartphone.

La navigazione da smartphone però non è sempre ottimale. Dispositivi dalla scarsa potenza di calcolo e connessioni lente e/o ballerine sono molto più comuni di quanto si pensi. Per tenere conto di queste situazionivo Lighthouse simula uno smartphone che non sia un top di gamma (Moto G4) e che sia sotto una connessione lenta (slow 4G = 1.6Mbps download / 750 Kbps upload – latenza 150ms).
Proprio a causa di questa scelta il sito web che si carica in un lampo nel tuo iPhone 12 Pro potrebbe ottenere un punteggio delle performance basso (per verificare questa ipotesi il test da eseguire è quello della PageSpeed Insight).

Il ragionamento che ha spinto Google ad percorrere questa strada è il seguente: se la pagina web ha performance buone su un dispositivo limitato sicuramente sarà un piacere consultarla su di un cellulare di ultima generazione.

Il modo più semplice per misurare i segnali Core Web Vitals tramite Lighthouse è utilizzarlo direttamente da Chrome usando i seguenti comandi:

  • Naviga sulla pagina per cui vuoi misurare le performance
  • Apri gli strumenti per sviluppatori usando F12 (o utilizzando ctrl+shift+I)
  • Seleziona dalle tab in alto il menù Lighthouse
  • Metti la spunta sulla voce “Performance” (e rimuovere le altre se non sei interessato agli altri report)
  • Seleziona mobile o desktop per decidere se quale report vuoi ottenere
  • Avvia il test tramite il bottone “Genera Report”

Al termine dell’analisi del sito verrà mostrato un voto complessivo del sito e sarà possibile analizzare nel dettaglio tutte le voci che concorrono alla determinazione del punteggio. Per sapere come sono combinate tra loro le voci per il calcolo del punteggio complessivo ti lascio la documentazione ufficiale di Google.

Nel momento in cui scrivo Lighthouse 6 utilizza questi pesi per mediare le metriche e determinare il punteggio complessivo

Il report è diviso in due sezioni: metrics e opportunities. I valori delle metriche sono quelli che vanno ad influire direttamente sul punteggio globale assegnato alle performance mentre le opportunità non incidono direttamente. In ogni caso aggiustare una delle problematiche segnalate nella sezione opportunità può avere un impatto sul valore di una delle metriche e quindi contribuire ad aumentare il punteggio globale.

Analizzando i le voci contenute nella sezione metriche è possibile individuare i valori dei Core Web Vitals:

  • Largest Contentful Paint
  • Cumulative Layout Shift
  • Total Blocking Time (che non è esattamente il First Input Delay ma lo approssima con buona precisione).

NOTA: se ti dovesse servire automatizzare la creazione del report per più pagine non perderti questo articolo.

Conclusione

L’ottimizzazione dei siti web per i motori di ricerca (SEO) non è una scienza esatta. Gli algoritmi usati dai motori di ricerca cambiano continuamente e quello che è valido oggi potrebbe non essere più valido domani. L’unica cosa certa è che ci sono dei principi generici a cui i motori di ricerca si ispirano costantemente. Tra questi principi fondamentali uno che nel 2021 acquisirà maggiore importanza sarà proprio la valutazione delle performance del sito misurata tramite i segnali Core Web Vitals.

Google ha avvisato con largo anticipo che il cambiamento avverrà intorno al mese di Maggio in modo da dare tempo a chiunque gestisca un sito di iniziare a valutarne le performance e ad apportare i cambiamenti necessari. Chi non si adegua in tempo vedrà soffiarsi il primo posto nei risultati di ricerca da i competitor.

Come ho accennato poco fa, Google non fornisce delle regole esatte ma solo dei principi a cui si ispira per questo motivo quello che è scritto in questo post potrebbe essere aggiustato e modificato da Google in ogni momento. Per tale motivo ho cercato di mettere sempre i link alla documentazione ufficiale in modo da poter risalire sempre alla fonte di ogni dato riportato nel post.


Se questo post ti è stato utile puoi farmelo sapere lasciando un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Il mio 2020 in review

Il 2020 è stato un anno strano. Per tutti. La pandemia ha sconquassato le nostre vite in modi che non avremmo mai pensato.

Per quanto mi riguarda, tra le varie rivoluzioni portate dalla COVID-19, quella che mi ha impattato di più è stata probabilmente lo sdoganamento dello smart-working.
Se da una parte mi sono reso conto che non è assolutamente richiesta la presenza in ufficio tutti i giorni, dall’altra parte il non vedere i colleghi per lunghi periodi mi ha fatto sentire un po’ più solo e ha reso il luogo di lavoro un po’ più asettico riducendo le interazioni con i colleghi a poche righe su una chat.
Credo che solo recentemente abbia raggiunto un giusto compromesso andando 2 giorni alla settimana in ufficio.

In ogni caso il tempo risparmiato sugli spostamenti da e verso l’ufficio mi ha permesso di dedicarmi maggiormente alle mie passioni e di approfondire maggiormente lo studio del tema della sicurezza informatica (di cui ho anche scritto su queste pagine: qui e qui).

Visto che ormai l’anno volge al termine approfitto di questo post per fare il punto della situazione guardandomi indietro in modo da tirare le somme.

SPOILER: pensavo che quest’anno fosse andato molto peggio, scrivere questo post mi ha fatto pensare che tutto sommato non è andato troppo male.

Blog

Il blog quest’anno è stato fonte di molte soddisfazioni. Ho pubblicato 24 articoli in 12 mesi riuscendo a mantenere la media di almeno un articolo a mese che mi ero prefisso.

Ci tengo a ringraziare uno per uno i 21mila lettori che hanno consultato ben 28mila pagine di questo blog. Siete stati fantastici!

Vorrei anche dare un abbraccio (Covid permettendo) ai circa 60 di voi che hanno speso un minuto per lasciare un commento.

Infine vorrei poter offrire un caffè ai 16 eroi che seguono il mio canale telegram!

Grazie. Davvero.

YouTube

Quest’anno ho provato anche a pubblicare un video tutorial su YouTube. Non avevo particolari aspettative visto l’enorme imbarazzo che ho provato nel registrarlo eppure vedo che nel momento in cui scrivo sta per raggiungere le 300 visualizzazioni. Risultato del tutto inaspettato ma assai apprezzato!

Open source

Anche quest’anno ho dedicato un po’ del mio tempo libero a fare qualche piccolo contributo al mondo open source. In particolare ho fatto un piccolo contributo a Symfony, qualche miglioramento al portale developers.italia.it e all’estensione per Firefox Share Backported. Non è molto ma mi consola sapere che è meglio di niente.

Musica

Per me la musica è tutto. La ascolto ogni mattina mentre mi preparo, la ascolto mentre vado al lavoro e la ascolto persino mentre lavoro. Di frequente mi sveglio anche canticchiando qualche motivetto nella testa. E il mio fidato compagno di ascolti è Spotify che quest’anno segna ben 75600 minuti di ascolto!

Il mio 2020 su Spotify

Libri

Nel corso dell’anno ho comprato ben 17 libri ma sono riuscito a leggerne solo 11. L’anno era partito alla grande per cui “grazie” al primo lockdown ho dedicato veramente molto tempo a leggere e poi mi sono perso. E quindi anche quest’anno mi confermo come malato di “tsundoku” (parola giapponese che indica l’accumulo di libri non letti).

Tra i libri che mi sono piaciuti di più quest’anno annoverano sicuramente Factfulness e Advanced Web Application Architecture.

Factfulness è un libro sui bias cognitivi che affliggono ognuno di noi. Il libro si apre con 13 domande di cultura generale per il lettore. Tirando puramente a caso se ne dovrebbero indovinare circa 4. Io invece ne ho indovinate appena 2. Come mai? Perché il nostro cervello è nato come strumento per evitare pericoli immediati e quindi tende a tirare conclusioni frettolose e quindi semplicistiche.

Consiglio a chiunque di leggere questo libro per avere una visione del mondo basata sui fatti e non sulle percezioni (sbagliate).

Il secondo libro, Advanced Web Application Architecture, è un manuale tecnico sulla progettazione e sull’implementazioni di applicazioni web. Se il tuo obiettivo è scrivere codice pulito, riusabile e indipendente dal framework utilizzato questo libro è una lettura obbligata.

Videogames

Per la prima volta da anni il backlog si accorcia. Nel corso dell’anno ho acquistato 9 nuovi giochi ma sono riuscito a finirne ben 11!

Parte del merito è sicuramente del tempo risparmiato sulle trasferte casa-lavoro. Inoltre anche l’abbonamento all’xbox game pass mi ha permesso di giocare di più acquistando di meno.

Se dovessi scegliere il miglior gioco dell’anno tra quelli che ho giocato penso che darei l’ambitissimo premio a… Quantum Break!

Quantum Break è un gioco fantascientifico dove si mischiano alle sezioni di gioco vere e proprie delle parti girate da attori in carne ed ossa come se fosse una serie TV.
Tutta la trama gira attorno ad un evento per cui “si rompe” il normale scorrere del tempo e a cui il protagonista dovrà porre rimedio. La cosa favolosa è che gli sviluppatori si sono affidati ad un ex scienziato del CERN per rendere gli eventi del gioco coerenti con le più moderne teorie di fisica quantistica.

Se avete una quindicina di ore da dedicare ad un gioco ve lo consiglio veramente! (Ed è pure incluso nel game pass :D)

PS: Spero che venga rilasciato al più presto un sequel in grado di chiarire alcune domande lasciate in sospeso dal titolo.

E per il 2021?

Per il nuovo anno l’idea è quella di mantenere la direzione intrapresa nel 2020 ma non voglio stare a definire piani che poi non riuscirò mai a mantenere (mi conosco troppo bene). L’unica cosa che mi sento di dire con certezza è che manterrò la pubblicazione di almeno un post al mese su questo blog e che continuerò a pubblicare ogni martedì una riflessione sul mondo tecnologico sul mio canale telegram.

Visto il buon risultato raggiunto quest’anno vorrei buttarmi maggiormente su YouTube ma l’imbarazzo di parlare di fronte ad una videocamera non è facile da superare. Ma mai dire mai.

Se hai letto fino a questo punto non mi rimane altro che ringraziarti per la pazienza e augurarti un grandioso nuovo anno!


Com’è andato il tuo 2020? Se ti va di scambiare due chiacchiere lascia pure un commento qui sotto oppure scrivimi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Immagine di copertina by @giusugar