Cloudflare Image Resizing Pentru WordPress

Public acest articol datorită numeroaselor solicitări pe care le-am primit cu privire la Cloudflare Image Resizing și plugin-ul meu pentru WordPress.

Din cauza modului în care WordPress este proiectat, nu este posibil să fac plugin-ul meu compatibil cu tot ce există, așa că în acest articol explorăm o altă metodă prin Cloudflare Workers.

Vă rog să rețineți că am omis intenționat prea multe detalii tehnice pentru ca toată lumea să poată înțelege; să fim sinceri, nu toată lumea este dezvoltator. Îmi place să păstrez articolele scurte, simple și la obiect.

La finalul articolului veți putea pur și simplu să copiați, să lipiți și să apăsați un singur clic pentru a avea Cloudflare Image Resizing configurat corect pentru WordPress-ul dumneavoastră.

Ce este Cloudflare Image Resizing

Ca un memento, cu Cloudflare Image Resizing puteți transforma imaginile pe platforma edge a Cloudflare. Puteți redimensiona, ajusta calitatea și converti imaginile în format WebP sau AVIF la cerere.

Cloudflare va stoca automat în cache fiecare imagine derivată la edge, astfel încât trebuie să stocați doar o singură imagine originală pe serverul de origine.

Este cu adevărat un serviciu indispensabil pentru blogurile aglomerate precum WordPress, mai ales dacă îl folosiți ca magazin cu multe imagini.

Citiți mai multe despre acest lucru în Postarea Oficială .

De ce să folosiți Cloudflare Image Resizing

Motivul principal este viteza. Să presupunem de exemplu că site-ul dumneavoastră are 5 pagini și fiecare pagină are 10 imagini variind de la 1 MB la 5, chiar 10 MB per imagine.

Când cineva navighează pe paginile dumneavoastră pentru prima dată, toate acele imagini sunt descărcate de browser. Deci, de exemplu, o pagină are 10 imagini, fiecare de 1 MB; asta înseamnă 10 MB de descărcat doar pentru imagini.

Acest lucru este foarte rău pentru utilizatorii cu lățime de bandă redusă, în special utilizatorii de dispozitive mobile. Este neplăcut chiar și pentru utilizatorii de PC cu multă lățime de bandă. Nimeni nu vrea să vadă un site web care se încarcă lent și nu va respecta standardele web.

Sunt destul de sigur că vedeți multe astfel de site-uri web zi de zi, încărcându-se la nesfârșit. Motivul principal sunt resursele media (cum ar fi CSS, JS, imagini) printre alți factori cum ar fi găzduirea web lentă etc.

Ați putea crede: „dar eu folosesc un CDN?!", ei bine, nu este același lucru. Cloudflare Image Resizing nu este doar un CDN, ci modifică imaginile dumneavoastră pentru a le face mai bune.

Cu Cloudflare Image Resizing, imaginile dumneavoastră vor fi reduse în dimensiune din mers, astfel încât o imagine de 1 MB va deveni undeva în jurul a ~100/200 KB. De asemenea, vor fi livrate în format de generație următoare precum WebP și AVIF.

Pe scurt:

• Îmbunătățește imaginile dumneavoastră
• Accelerează site-ul dumneavoastră
• Îmbunătățește SEO-ul dumneavoastră
• Economisește lățime de bandă

Plugin WordPress

Probabil știți despre plugin-ul pe care l-am creat pentru WordPress din directorul meu Github / WordPress Plugins .

A primit multe feedback-uri și mulți au accelerat considerabil site-ul lor, dar mulți au întâmpinat și o mulțime de probleme care sunt literalmente nerezolvabile.

Chiar dacă am încercat să fac tot posibilul pentru a redimensiona toate imaginile, nu este posibil să le redimensionez pe toate din cauza modului în care sunt proiectate plugin-urile și temele WordPress.

Ca să nu mai menționăm că procesarea CSS și alte lucruri sunt excluse.

Cloudflare Worker

După ce am revizuit toate problemele raportate, am decis să iau cealaltă cale și să folosesc un Cloudflare Worker pentru a rescrie ieșirea HTML finală pentru Cloudflare Image Resizing.

Aceasta este soluția supremă pentru a folosi Cloudflare Image Resizing pe WordPress, deoarece worker-ul va prelua răspunsul final generat de WordPress, inclusiv orice modificări de la plugin-uri, teme, CSS etc.

Deoarece Cloudflare Worker stă între WordPress-ul dumneavoastră și utilizatori, aveți posibilitatea de a modifica aproape orice din mers; adică putem chiar înlocui imaginile din CSS inline și chiar din fișierele CSS.

Teoretic sună ușor și simplu, dar în practică a fost mult mai dificil și consumator de timp.

Cu toate acestea, am investit mult timp și efort pentru a descoperi cum să ating acest obiectiv.

Plugin WordPress vs Cloudflare Worker

Este extrem de benefic dacă puteți înțelege diferențele dintre Plugin-ul WordPress și Cloudflare Worker. Astfel puteți decide pe care să îl folosiți și să înțelegeți de ce recomand worker-ul.

După cum puteți vedea mai sus, worker-ul câștigă. Este pur și simplu cea mai bună soluție deoarece, indiferent de ce modificări faceți pe backend-ul dumneavoastră (WordPress), worker-ul va putea modifica link-urile imaginilor.

Configurarea Cloudflare Worker

Primul lucru important pe care trebuie să îl faceți este să dezactivați Plugin-ul WordPress dacă îl aveți instalat și activat. Dacă săriți peste acest pas, nu veți vedea worker-ul făcând mare lucru.

Al doilea lucru foarte important este să mergeți la Google Pagespeed și să faceți un test al site-ului dumneavoastră fără redimensionare de imagini. Veți avea nevoie de acest lucru mai târziu pentru a vedea diferența.

Acum mergeți la contul dumneavoastră Cloudflare și navigați la Workers. De aici faceți clic pe „Create a Service". Numiți serviciul cum doriți, puteți lăsa și numele aleatoriu generat automat. Lăsați starter-ul ca „HTTP handler".

După creare, faceți clic pe serviciu și în partea dreaptă sus faceți clic pe „Quick Edit". Va apărea editorul și selectați pur și simplu tot codul existent și înlocuiți-l cu worker-ul meu de pe Github . Faceți clic pe „Save and deploy" și părăsiți editorul.

Pe pagina noului serviciu mergeți la „Triggers" și sub Routes faceți clic pe „Add route". În route setați domeniul site-ului dumneavoastră cu un wildcard match-all, de exemplu "example.com/*". Pentru zonă veți selecta domeniul dumneavoastră, care în exemplul meu este example.com.

Asta e tot!

Depanare

În cazul în care aveți probleme, cum ar fi lipsa redimensionării imaginilor, verificați următoarele condiții:

1. Imaginea face parte din domeniul dumneavoastră? Nu puteți redimensiona imaginile de pe alt domeniu decât dacă ați activat specific această funcție în panoul de control Cloudflare.
2. Sunt rescrise imaginile? Activați "Logs" pe tab-ul noului worker și verificați dacă observați excepții. Dacă da, raportați pe repository-ul meu Github.
3. Link-urile imaginilor sunt rescrise greșit? În acest caz raportați problema pe Github.

Optimizări bonus

Sunt destul de sigur că ați observat că WordPress-ul dumneavoastră conține câteva tag-uri SVG goale imediat după tag-ul HTML body. Dacă nu știți despre ce vorbesc, uitați-vă la asta:

Sincer, nu pot înțelege un caz de utilizare valid pentru asta; așa că am adăugat cod suplimentar pentru a-l elimina. Va face ieșirea HTML puțin mai mică, ceea ce rezultă într-o mică cantitate de viteză suplimentară.

Voi adăuga mai multe optimizări când voi avea timp.

Costuri

Pentru a folosi Cloudflare Image Resizing trebuie să aveți un abonament Pro (25$/lună) pentru site-ul dumneavoastră la momentul scrierii acestui articol. Serviciul de redimensionare a imaginilor începe de la 5$ per 100.000 de imagini stocate și 1$ per 100.000 de imagini livrate – fără costuri de egress sau taxe suplimentare pentru redimensionare și optimizare.

Utilizarea Plugin-ului WordPress este complet gratuită și nu implică niciun cost. Worker-ul este, de asemenea, relativ gratuit de folosit, totuși limitele sunt mai mici și puterea de procesare este puțin mai mică.

Recomand cu tărie să utilizați planul workers plătit cu opțiunea unbound. Cu cât aveți mai multe imagini pe site, cu atât mai multe tag-uri HTML trebuie rescrise și, prin urmare, mai mult timp de procesare (GBs Duration).

Rețineți că pentru doar 5$ obțineți o limită de 400.000 GB-s pentru worker, ceea ce este mai mult decât suficient conform testelor mele.

Licență

Am decis să nu folosesc licența MIT deoarece am observat că mulți preiau codul meu și îl vând. Nu e frumos, băieți.

Așadar, noul model de licență folosit este Apache License 2.0, deci vă rog nu revindeți munca mea.

Link-uri utile

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

Cred cu tărie că Cloudflare Worker-ul meu va îmbunătăți considerabil site-ul dumneavoastră. Dacă am dreptate, lăsați o stea pe Github. Dacă greșesc, lăsați un feedback în schimb.

Aștept comentariile dumneavoastră.