Rilasciata v5.3 del BibleGet plugin per WordPress
Negli ultimi giorni ho rilasciato un aggiornamento dell’estensione per WordPress, che introduce alcuni bugfix e alcuni miglioramenti. Non avevo fatto aggiornamenti da forse un anno, e nel frattempo WordPress ha continuato ad evolvere. Per esempio è stata introdotta la tecnologia ajax nell’installazione o disinstallazione dei plugin. Questo significa che si possono effettuare queste operazioni direttamente sulla stessa pagina, in maniera dinamica, senza dover ricaricare tutta la pagina. Ma questo ha comportato anche alcuni cambiamenti nel codice dei plugin, pertanto un aggiornamento era doveroso, altrimenti diventava impossibile disinstallare il plugin senza farlo forzatamente via ftp. Con gli ultimi aggiornamenti questo è stato corretto. Sono state anche aggiornate le traduzioni delle stringhe in italiano, in spagnolo, in francese, e in tedesco.
E’ stata introdotta una funzione in più, per dare più ampia scelta di font se qualcuno avesse particolari esigenze tipografiche per il proprio sito / blog, ossia la possibilità di aggiungere una chiave dell’API di Google Fonts. Attivando questa funzione si avrà, nel Personalizza di WordPress (nella sezione per il plugin BibleGet), l’elenco aggiornato dei font che sono disponibili su Google Font. E non soltanto: verranno scaricate anche le anteprime degli stessi font in modo da poterle vedere in anteprima nell’elenco a discesa quando uno per esempio non sa ancora quale font vuole utilizzare.
E devo dire che sono abbastanza fiero del risultato. Non è stato un lavoro facilissimo. Non so se ci siano altri che abbiano ancora tentato una cosa del genere, perché caricare troppi font su una pagina può facilmente avere un impatto negativo sulle prestazioni di caricamento della pagina. Ho voluto pertanto cercare il modo di minimizzare l’impatto sulle prestazioni, scaricando delle versioni ridotte degli stessi font (invece di scaricare tutto il font con tutti i caratteri dalla A alla Z, viene scaricata una versione limitata ai soli caratteri di cui è composto lo stesso nome del font).
Google infatti aveva introdotto già tempo fa la possiblità di richiedere soltanto i caratteri necessari di un font, in modo da caricare sulla pagina una versione minimizzata. E già abbiamo usato questa funzione per la versione precedente del plugin che aveva un elenco fisso di circa un centinaio di font. Adesso però sorgeva un nuovo problema: con un elenco da quasi mille font, verrebbero fatte circa mille richieste all’API di Google ogni volta che si apriva il Personalizza di WordPress. Ciò avrebbe mandato tutto in tilt, perché le pagine dei siti non sono in grado di gestire così tante richieste e il browser le avrebbe bloccate. Bisognava allora cercare il modo di scaricare in locale, nel sito stesso, i file di anteprima. Ma qui un altro problema: quando si effettua una richiesta a Google per la versione del font ridotta a pochi caratteri utilizzando l’elemento “<link>” come per inserire un foglio di stile nella pagina, Google invia la versione ridotta del font. Ma quando un server cerca di richiedere direttamente il file del font per salvarlo in locale, non c’era un modo chiaro per richiedere la versione ridotta del font. Verrebbe scaricato il file integro con tutti i caratteri, per ogni font. E sarebbe rimasto pertanto il problema delle prestazioni di caricamento della pagina.
Ebbene, sono riuscito a trovare il modo di inviare a Google una richiesta per la versione ridotta di ogni font. In pratica, quando si utilizza il metodo del link per chiedere la versione ridotta a pochi caratteri, Google produce un foglio di stile all’interno del quale c’è un URL che punta al file ridotto del font. Allora ho fatto in modo di effettuare la richiesta del foglio di stile, poi ho fatto il parsing del foglio di stile per captare quell’URL e ho utilizzato quell’URL per scaricare la versione ridotta del font.
Eppure non è finita qui: Google produce la versione ridotta soltanto quando è un browser moderno a richiedere il file (per esempio quando interpreta il foglio di stile che contiene un URL che punta sul server di Google), un browser che può gestire i font compressi, Google riconosce che è un browser capace di interpretare i font compressi e pertanto invia la versione ridotta. Google ha introdotto infatti una nuova compressione per i font, proprio per venire incontro alla problematica dell’impatto sulle prestazioni. I font compressi hanno estensione “woff” (= “Web Open Font Format”) anziché “ttf” (=”True Type Font” o anche “Open Type Font”). Ma i sistemi operativi non sono ancora in grado di interpretare questo tipo di font, lo sono soltanto i browser più moderni. Pertanto se è un server a richiedere il file e non un browser, Google decide di inviare la versione integra del font e non la versione ridotta.
Sembrava che l’impresa diventasse impossibile, e stavo quasi per rinunciare (e molti web programmers avrebbero probabilmente sconsigliato di perserverare perché hanno tutti timore dell’impatto sulle prestazioni della pagina). Eppure ho trovato il modo di scaricare la versione ridotta del font, semplicemente dicendo a Google “guarda che io, pur non essendo un browser, sono comunque in grado di interpretare la versione compressa dei font!”. E ho trovato che facendo così, Google mi inviava la versione ridotta a pochi caratteri, sebbene non in formato WOFF ma piuttosto in formato TTF. Che va comunque bene, perché tutti i browser oggi sono capaci di interpretare i file TTF ma non tutti ancora in grado di interpretare il formato WOFF.
Eppure non è finita! L’ultimo ostacolo da superare: per caricare nella pagina del Personalizza l’anteprima dei font, bisognava comunque richiederli attraverso fogli di stile. Ma se ho un foglio di stile per ogni font, significa che sono mille fogli di stile. Ed è comunque troppo per il browser, va in tilt ad effettuare mille richieste anche se sono risorse in locale e non più remote. Pertanto ultimo passaggio che ha reso possibile questa funzione era quello di combinare tutti i fogli di stile in un unico foglio di stile.
Anzi, non è ancora finita! Il browser non carica effettivamente i font sulla pagina se non nel momento che devono essere visualizzati. Visto che inizialmente sono nascosti all’interno dell’elenco a discesa, il browser pensa “questi non li devo caricare subito, non li vede nessuno; dal momento che qualcuno apre quell’elenco a discesa, allora penserò a caricare i font richiesti”. Ma ciò significava che il browser doveva caricare mille anteprime di font in una volta nel momento che vai a cliccare sull’elenco a discesa per aprirlo. Ma essendo un processo un po’ intensivo, la pagina si poteva bloccare un attimo mentre il browser faceva questo lavoro di caricamento delle mille anteprime. L’elenco a discesa sarebbe risultato inizialmente vuoto, e solo dopo mezzo minuto sarebbero comparse le anteprime. Se era così, non valeva la pena, tutti si sarebbero lamentati. E pertanto ultimo ritocco per migliorare l’esperienza era quello di praticamente obbligare il browser a fare un pre-caricamento dei fonts anche se non visualizzati. Ora non so se tutti i browser rispettino questa istruzione di precaricamento, per cui a qualcuno potrebbe ancora risultare il cosiddetto FUOC (= “Flash of Unstyled Content” ossia “comparsa di contenuti non stilizzati”). Se è così e se dà un po’ fastidio, consiglio di disattivare l’opzione della chiave API di Google Fonts. Altrimenti, divertitevi ad usare il font che più il vostro cuore vi suggerisce!
Prossimo aggiornamento da fare sarà la realizzazione di un blocco Gutenberg, visto che l’editor delle pagine di WordPress si è evoluto con questa costruzione a blocchi che permette di eliminare gli shortcode. L’utilizzo degli shortcode in effetti richiede una certa competenza tecnica, mentre l’editor a blocchi permette di utilizzare interfacce più intuitive. Gutenberg, stiamo arrivando!