Cloudflare Image Resizing per WordPress

Pubblico questo articolo a causa delle numerose richieste ricevute riguardo Cloudflare Image Resizing e il mio plugin per WordPress.

A causa di come WordPress è progettato, non è possibile rendere il mio plugin compatibile con tutto ciò che esiste, quindi in questo articolo esploriamo un altro metodo tramite Cloudflare Workers.

Si prega di notare che ho intenzionalmente omesso troppi dettagli tecnici affinché tutti possano capire; ammettiamolo, non tutti sono sviluppatori. Mi piace mantenere gli articoli brevi, semplici e diretti.

Alla fine dell’articolo potrete semplicemente copiare, incollare e premere un clic per avere Cloudflare Image Resizing correttamente configurato per il vostro WordPress.

Cos’è Cloudflare Image Resizing

Come promemoria, con Cloudflare Image Resizing puoi trasformare le immagini sulla piattaforma edge di Cloudflare. Puoi ridimensionare, regolare la qualità e convertire le immagini in formato WebP o AVIF su richiesta.

Cloudflare memorizza automaticamente nella cache ogni immagine derivata sull’edge, quindi devi solo conservare un’immagine originale sul tuo server di origine.

È davvero un servizio indispensabile per blog molto frequentati come WordPress, specialmente se lo usi come negozio con molte immagini.

Leggi di più nel Post Ufficiale .

Perché usare Cloudflare Image Resizing

Il motivo principale è la velocità. Diciamo ad esempio che il tuo sito web ha 5 pagine e ogni pagina ha 10 immagini che vanno da 1 MB a 5, anche 10 MB per immagine.

Quando qualcuno visita le tue pagine per la prima volta, tutte quelle immagini vengono scaricate dal browser. Quindi ad esempio una pagina ha 10 immagini, ciascuna di 1 MB; sono 10 MB da scaricare solo per le immagini.

Questo è molto negativo per gli utenti con bassa larghezza di banda, specialmente gli utenti mobile. È sgradevole anche per gli utenti PC con molta banda. Nessuno vuole vedere un sito web che si carica lentamente e non rispetta gli standard web.

Sono abbastanza sicuro che ogni giorno vedi molti siti web così, che caricano all’infinito. Il motivo principale sono le risorse multimediali (come CSS, JS, immagini) tra gli altri fattori come hosting web lento, ecc.

Potresti pensare: “ma io uso un CDN?!”, beh non è la stessa cosa. Cloudflare Image Resizing non è solo un CDN, altera le tue immagini per renderle migliori.

Con Cloudflare Image Resizing le tue immagini verranno ridotte in dimensioni al volo, quindi un’immagine da 1 MB diventerà circa ~100/200 KB. Verranno anche consegnate in formati di nuova generazione come WebP e AVIF.

In sintesi:

• Migliora le tue immagini
• Velocizza il tuo sito web
• Migliora il tuo SEO
• Risparmia larghezza di banda

Plugin WordPress

Probabilmente conosci il plugin che ho creato per WordPress dal mio Github / WordPress Plugins .

Ha ricevuto molti feedback e molti hanno velocizzato considerevolmente il loro sito web, ma molti hanno anche incontrato problemi che sono letteralmente irrisolvibili.

Anche se ho cercato di fare tutto il possibile per ridimensionare tutte le immagini, non è possibile ridimensionarle tutte a causa di come sono progettati i plugin e i temi di WordPress.

Per non parlare dell’elaborazione CSS e altre cose che sono fuori questione.

Cloudflare Worker

Dopo aver esaminato tutti i problemi segnalati, ho deciso di prendere l’altra strada e usare un Cloudflare Worker per riscrivere l’output HTML finale per Cloudflare Image Resizing.

Questa è la soluzione definitiva per usare Cloudflare Image Resizing su WordPress perché il worker recupererà la risposta finale generata da WordPress, incluse tutte le modifiche da plugin, temi, CSS, ecc.

Poiché il Cloudflare Worker si posiziona tra il tuo WordPress e gli utenti, hai la possibilità di modificare quasi tutto al volo; il che significa che possiamo persino sostituire le immagini all’interno del CSS inline e persino dei file CSS.

In teoria sembra facile e diretto, ma in pratica è stato molto più difficile e dispendioso in termini di tempo.

Tuttavia, ho dedicato molto tempo e sforzo per capire come raggiungere questo obiettivo.

Plugin WordPress vs Cloudflare Worker

È estremamente utile se riesci a comprendere le differenze tra il Plugin WordPress e il Cloudflare Worker. In questo modo puoi decidere quale usare e capire perché raccomando il worker.

Come puoi vedere sopra, il worker vince. È semplicemente la soluzione migliore perché indipendentemente dalle modifiche apportate al tuo backend (WordPress), il worker sarà in grado di alterare i link delle immagini.

Configurare il Cloudflare Worker

La prima cosa importante da fare è disabilitare il Plugin WordPress se lo hai installato e abilitato. Se salti questo passaggio, non vedrai il worker fare molto.

La seconda cosa molto importante è andare su Google Pagespeed e fare un test del tuo sito web senza image resizing. Ne avrai bisogno in seguito per vedere la differenza.

Ora vai al tuo account Cloudflare e vai su Workers. Da qui clicca “Create a Service”. Dai al servizio il nome che preferisci, puoi anche lasciare il nome casuale generato automaticamente. Lascia lo starter come “HTTP handler”.

Dopo la creazione, clicca sul servizio e in alto a destra clicca “Quick Edit”. Apparirà l’editor e seleziona semplicemente tutto il codice esistente e sostituiscilo con il mio worker da Github . Clicca “Save and deploy” ed esci dall’editor.

Nella pagina del tuo nuovo servizio vai su “Triggers” e sotto Routes clicca “Add route”. All’interno della route imposta il dominio del tuo sito web con un wildcard match-all, ad esempio "example.com/*". Per la zona selezionerai il tuo dominio, che nel mio esempio è example.com.

Questo è tutto!

Risoluzione dei problemi

Nel caso in cui tu abbia problemi, come nessuna immagine ridimensionata, controlla le seguenti condizioni:

1. L’immagine fa parte del tuo dominio? Non puoi ridimensionare immagini da un altro dominio a meno che tu non abbia specificamente abilitato questa funzione nella dashboard di Cloudflare.
2. Le immagini vengono riscritte? Abilita "Logs" nella scheda del tuo nuovo worker e vedi se noti eccezioni. Se le trovi, segnalalo nel mio repository Github.
3. I link delle immagini vengono riscritti in modo errato? In questo caso segnala il problema su Github.

Ottimizzazioni bonus

Sono abbastanza sicuro che hai notato che il tuo WordPress contiene alcuni tag SVG vuoti subito dopo il tag body dell’HTML. Se non sai di cosa sto parlando, guarda questo:

Francamente, non riesco a comprendere un caso d’uso valido per questo; quindi ho aggiunto del codice extra per rimuoverlo. Renderà il tuo output HTML un po’ più piccolo, il che si traduce in una piccola quantità di velocità extra.

Aggiungerò altre ottimizzazioni quando avrò tempo.

Costi

Per utilizzare Cloudflare Image Resizing è necessario avere un abbonamento Pro (25$/mese) per il tuo sito web al momento della stesura di questo articolo. Il servizio di ridimensionamento immagini parte da 5$ per 100.000 immagini archiviate e 1$ per 100.000 immagini consegnate – senza costi di uscita o addebiti aggiuntivi per ridimensionamento e ottimizzazione.

L’utilizzo del Plugin WordPress è completamente gratuito e non comporta costi. Anche il worker è relativamente gratuito da usare, tuttavia i limiti sono più piccoli e la potenza di elaborazione è un po’ inferiore.

Raccomando fortemente di usare il piano workers a pagamento con l’opzione unbound. Più immagini hai sul tuo sito, più tag HTML devono essere riscritti e quindi più tempo di elaborazione (GBs Duration).

Tieni presente che per soli 5$ ottieni un limite worker di 400.000 GB-s, che è più che sufficiente dai miei test.

Licenza

Ho deciso di non usare la licenza MIT perché ho notato che molti prendono il mio codice e lo vendono. Non è bello, ragazzi.

Detto ciò, il nuovo modello di licenza utilizzato è Apache License 2.0, quindi per favore non rivendere il mio lavoro.

Link utili

• Webpagetest: https://www.webpagetest.org/
• Google Pagespeed Insights: https://pagespeed.web.dev/
• Prezzi Workers: https://developers.cloudflare.com/workers/platform/pricing/

Credo fermamente che il mio Cloudflare Worker migliorerà considerevolmente il tuo sito web. Se ho ragione, lascia una stella su Github. Se ho torto, lascia un feedback invece.

In attesa dei vostri commenti.