Tidy Assets
Un plugin per riordinare le risorse di Zenphoto
Cosa fa, Come funziona, Cosa comporta, Licenza, Installazione, Download, Contribuisci, Crediti.
Cosa fa
Tidy Assets sposta in fondo all’elemento body tutti gli elementi JavaScript di Zenphoto, inclusi gli script inline, e facoltativamente anche le risorse CSS. Questo può migliorare l’esperienza dei visitatori che arrivano al tuo sito per la prima volta, posticipando il caricamento delle risorse che bloccano la visualizzazione.
Offre anche la possibilità di rimuovere il plug-in jQuery Migrate, incluso in Zenphoto dalla v1.6 per garantire la compatibilità con i vecchi temi e plug-in.
Entrambe le funzionalità di cui sopra potrebbero avere un impatto positivo sul SEO, dato che la velocità di caricamento di una pagina è uno dei parametri coinvolti nel determinare il suo posizionamento. TL;DR
Gli attributi diversi da rel=“stylesheet” non vengono riportati nell’output. Nella stragrande maggioranza dei casi, si tratta di attributi non necessari, come type=“text/javascript” e type=“text/css”, che non servono in HTML5, o come async e defer, che perdono importanza dopo che i riferimenti ai file sono stati spostati in fondo all’elemento body.
Oltre che gli elementi CSS e JavaScript, anche il resto del codice HTML viene leggermente ripulito, eliminando i possibili vuoti da inizio e fine riga e sostituendo le sequenze multiple di spazi bianchi e tabulazioni con un unico spazio bianco. Spazi e tabulazioni all’interno dei tag <pre> non vengono modificati, per preservare la formattazione originale. Vengono eliminati anche gli attributi di classe vuoti degli elementi HTML.
Come funziona
Tidy Assets raccoglie la maggior parte dell’output generato dal PHP di Zenphoto, a partire dalla prima riga stampata dai filtri registrati con theme_head fino alla posizione in cui si trova il registro per i filtri theme_body_close negli script PHP del tema, ossia immediatamente prima del tag di chiusura del body. Per farlo, i filtri di questo plugin sono impostati con priorità 99999. L’output viene quindi suddiviso in JS, CSS e Altri Elementi. I riferimenti multipli a file CSS e JS, se esistono, vengono ridotti alla prima istanza (ignorando i percorsi). Il JavaScript inline viene consolidato in un unico tag script, che può anche essere minimizzato “al volo” su richiesta, con JShrink or JSqueeze. A questo punto, gli Altri Elementi vengono stampati per primi, seguiti dai riferimenti ai file CSS, da quelli ai file JS e alla fine dal tag con lo script inline consolidato.
Detto questo, se un altro plugin imposta una priorità maggiore di 99999 per il proprio filtro theme_head, il suo output ovviamente non sarà processato. Succede il contrario per i filtri theme_body_close, sicché l’output dei filtri con priorità inferiore a 99999 (cioè tutti, spero) sarà escluso dall’elaborazione, lasciando invariato l’ordine degli elementi di pertinenza. Questo permette ai temi e agli altri plugin di passare variabili da PHP a JavaScript se usano theme_body_close per i propri asset JS.
Gli elementi appartenenti ai gruppi da spostare, ma che invece devono rimanere nella loro posizione originale per motivi importanti (es. alcuni CSS necessari nella parte superiore della sezione head o qualche JS analitico), possono essere tenuti separati dall’elaborazione utilizzando un’opzione di filtro compilata con stringhe identificative appropriate.
Cosa comporta
Tutto questo ha un costo molto basso in termini di tempo di elaborazione, che con le opzioni predefinite è inferiore a un millisecondo sia sul mio server locale che sul mio server online. Attivando la minimizzazione del codice JS inline il tempo sale a ∼ 2 - 15 ms, a seconda del numero di plugin abilitati, della velocità/carico della CPU del server e dell’algoritmo scelto per la minimizzazione. Rimuovendo i caratteri non necessari, JShrink riduce le dimensioni del JavaScript di circa il 20%. È un po’ più veloce di JSqueeze, che in cambio esegue anche ulteriori ottimizzazioni risparmiando fino al 30% delle dimensioni originali. Nei miei test, senza alcuna pretesa di completezza, la differenza nel tempo di elaborazione tra i due algoritmi sembra molto simile alla differenza nei rapporti di compressione.
Tieni presente, comunque, che questa minimizzazione “al volo”, una volta che il codice inline è già stato spostato nella parte inferiore del DOM, è quasi sempre inutile, quando non controproducente, per scopi di ottimizzazione SEO/prestazioni, soprattutto se la compressione gzip è abilitata sul server.
Licenza
Tidy Assets per Zenphoto è rilasciato su licenza GPL-2.0 o successiva, Copyright (c) 2021 Antonio Ranesi.
Questo programma è distribuito nella speranza che possa essere utile, ma SENZA ALCUNA GARANZIA; senza nemmeno la garanzia implicita di COMMERCIABILITÀ o IDONEITÀ A UN PARTICOLARE SCOPO. Vedi la GNU General Public License per maggiori dettagli.
La licenza GNU General Public License, version 2 è scritta in inglese. È necessario fare riferimento al testo completo per conoscerne i termini e le condizioni. La traduzione delle poche righe qui sopra, che del resto non sono che un piccolo estratto della licenza originale, non pretende di assumere valore legale.
Installazione
- scarica il file zip qui sotto ed estraine il contenuto
- usa un client FTP per caricare esclusivamente la cartella tidy-assets e il file tidy-assets.php nella cartella plugins della tua installazione ZP
- attiva tidy-assets dalla scheda Amministratore > Plug-in > Seo
- visita la pagina delle opzioni del plugin per impostarle in base alle tue esigenze
Download
Vedi il Changelog per maggiori informazioni sulle diverse versioni. La sezione Unreleased, quando è presente, elenca le eventuali modifiche non ancora rilasciate ma già realizzate e disponibili su GitHub.
- tidy-assets-1.1.zip (51,35 kB) - 177 download
- tidy-assets-1.0.0.zip (82,08 kB) - 1628 download
Contribuisci
Se vuoi dare il tuo contributo, segnalare un bug o fornire una traduzione diversa da quella italiana, che è già disponibile, puoi farlo nella repository di Tidy Assets su GitHub.
Come da linee guida di Zenphoto, Tidy Assets può essere tradotto configurando un catalogo Poedit con le chiavi di ricerca gettext_pl, ngettext_pl:1,2. Assicurati di deselezionare la casella Usa anche parole chiave predefinite... nelle proprietà del catalogo, in modo da non dover tradurre stringe già gestite dai traduttori di Zenphoto, ma solo quelle specifiche del plugin.
Crediti
Questo plugin è stato sviluppato a partire da headConsolidator v1.4.3 di Stephen Billard (sbillard).
Include JShrink e JSqueeze per la minimizzazione “al volo”. Fare riferimento ai rispettivi siti web per informazioni sulle licenze.
Un ringraziamento speciale ad acrylian per il suo sostegno e i suoi suggerimenti.
Pubblicato: 27 gen 2021
Aggiornato:
