Cloudflare Image Resizing WordPress-Hoz

Ezt a cikket a Cloudflare Image Resizing-gel és a WordPress bővítményemmel kapcsolatban kapott számos kérés miatt teszem közzé.

A WordPress felépítése miatt nem lehetséges a bővítményemet mindennel kompatibilissá tenni, ezért ebben a cikkben egy másik módszert vizsgálunk meg Cloudflare Workers segítségével.

Kérjük, vegye figyelembe, hogy szándékosan kihagytam a túl sok technikai részletet, hogy mindenki megérthesse; valljuk be, nem mindenki fejlesztő. Szeretem a cikkeket rövidre, egyszerűre és lényegre törőre tartani.

A cikk végén egyszerűen másolhat, beilleszthet, és egyetlen kattintással megfelelően beállíthatja a Cloudflare Image Resizing-et WordPress-éhez.

Mi az a Cloudflare Image Resizing

Emlékeztetőül: a Cloudflare Image Resizing segítségével képeket alakíthat át a Cloudflare edge platformján. Igény szerint átméretezheti, módosíthatja a minőséget, és WebP vagy AVIF formátumba konvertálhatja a képeket.

A Cloudflare automatikusan gyorsítótárazza minden származtatott képet az edge-en, így csak egyetlen eredeti képet kell tárolnia az eredeti szerveren.

Ez valóban elengedhetetlen szolgáltatás a forgalmas blogok számára, mint a WordPress, különösen ha webáruházként használja sok képpel.

Olvasson többet erről a Hivatalos bejegyzésben .

Miért használjuk a Cloudflare Image Resizing-et

A fő ok a sebesség. Tegyük fel például, hogy a weboldala 5 oldalból áll, és minden oldalon 10 kép van, amelyek mérete 1 MB-tól 5, sőt 10 MB-ig terjed képenként.

Amikor valaki először látogatja meg az oldalakat, az összes képet letölti a böngésző. Tehát például egy oldalon 10 kép van, mindegyik 1 MB méretű; ez 10 MB letöltés csak a képek miatt.

Ez nagyon rossz az alacsony sávszélességű felhasználók számára, különösen a mobilfelhasználók számára. Még a nagy sávszélességű PC-felhasználók számára is kellemetlen. Senki sem akar lassan töltődő weboldalt látni, és nem felel meg a webes szabványoknak.

Biztos vagyok benne, hogy naponta sok ilyen weboldalt lát, amelyek örökké töltenek. A fő ok a média eszközök (mint a CSS, JS, képek) mellett más tényezők, mint a lassú webtárhely stb.

Gondolhatja: “de én CDN-t használok?!”, nos, ez nem ugyanaz. A Cloudflare Image Resizing nem csak egy CDN, hanem megváltoztatja a képeit, hogy jobbak legyenek.

A Cloudflare Image Resizing-gel a képei menet közben csökkennek méretben, így egy 1 MB-os kép körülbelül ~100/200 KB lesz. Ezenkívül következő generációs formátumban, mint WebP és AVIF, kerülnek kézbesítésre.

Összefoglalva:

• Javítja a képeit
• Felgyorsítja a weboldalát
• Javítja a SEO-t
• Sávszélességet takarít meg

WordPress bővítmény

Valószínűleg ismeri a WordPress-hez készített bővítményemet a Github / WordPress Plugins könyvtárból.

Sok visszajelzést kapott, és sokan jelentősen felgyorsították a weboldalukat, de sokan találkoztak olyan problémákkal is, amelyek szó szerint megoldhatatlanok.

Annak ellenére, hogy mindent megpróbáltam az összes kép átméretezéséhez, nem lehetséges mindet átméretezni a WordPress bővítmények és témák tervezése miatt.

Nem is beszélve arról, hogy a CSS feldolgozás és más dolgok szóba sem jöhetnek.

Cloudflare Worker

Az összes bejelentett probléma áttekintése után úgy döntöttem, hogy a másik utat választom, és egy Cloudflare Worker-t használok a végleges HTML kimenet átírásához a Cloudflare Image Resizing számára.

Ez a tökéletes megoldás a Cloudflare Image Resizing használatára WordPress-en, mert a worker lekéri a WordPress által generált végleges választ, beleértve a bővítmények, témák, CSS stb. által végzett módosításokat.

Mivel a Cloudflare Worker a WordPress és a felhasználók között helyezkedik el, szinte bármit módosíthat menet közben; ami azt jelenti, hogy még az inline CSS-ben és akár a CSS fájlokban lévő képeket is lecserélhetjük.

Elméletben egyszerűnek és egyértelműnek hangzik, de a gyakorlatban sokkal nehezebb és időigényesebb volt.

Mindazonáltal sok időt és energiát fektettem abba, hogy kitaláljam, hogyan érhető el ez a cél.

WordPress bővítmény vs. Cloudflare Worker

Rendkívül hasznos, ha megérti a WordPress bővítmény és a Cloudflare Worker közötti különbségeket. Így eldöntheti, melyiket használja, és megértheti, miért ajánlom a worker-t.

Amint fent láthatja, a worker nyer. Ez egyszerűen a legjobb megoldás, mert bármilyen változtatást végez a backendjén (WordPress), a worker képes lesz módosítani a képlinkeket.

A Cloudflare Worker beállítása

Az első fontos dolog, amit tennie kell, a WordPress bővítmény letiltása, ha telepítve és engedélyezve van. Ha kihagyja ezt a lépést, nem fog sokat látni a worker működéséből.

A második és nagyon fontos dolog, hogy menjen a Google Pagespeed oldalra, és végezzen tesztet a weboldalán képátméretezés nélkül. Erre később szüksége lesz a különbség megtekintéséhez.

Most menjen a Cloudflare fiókjába, és navigáljon a Workers menüpontra. Kattintson a “Create a Service” gombra. Nevezze el a szolgáltatást, ahogy akarja, vagy hagyja meg az automatikusan generált véletlenszerű nevet. Hagyja a starter-t “HTTP handler”-ként.

A létrehozás után kattintson a szolgáltatásra, majd a jobb felső sarokban kattintson a “Quick Edit” gombra. Megjelenik a szerkesztő, egyszerűen jelölje ki az összes meglévő kódot, és cserélje le a worker-emre a Github -ról. Kattintson a “Save and deploy” gombra, és hagyja el a szerkesztőt.

Az új szolgáltatás oldalán menjen a “Triggers” fülre, és a Routes alatt kattintson az “Add route” gombra. A route-ban állítsa be a weboldala domainjét egy mindent illesztő wildcard-dal, például "example.com/*". A zónához válassza ki a domainjét, ami a példámban example.com.

Ennyi az egész!

Hibaelhárítás

Ha bármilyen problémája van, például nem méretezi át a képeket, ellenőrizze a következő feltételeket:

1. A kép a domainjéhez tartozik? Nem méretezhet át képeket egy másik domainről, hacsak nem engedélyezte kifejezetten ezt a funkciót a Cloudflare irányítópulton.
2. Átíródnak a képek? Engedélyezze a "Logs"-t az új worker fülön, és nézze meg, talál-e kivételeket. Ha igen, jelentse a Github repozitóriumomban.
3. Rosszul íródnak át a képlinkek? Ebben az esetben jelentse a problémát a Githubon.

Bónusz optimalizálások

Biztos vagyok benne, hogy észrevette, hogy a WordPress tartalmaz néhány üres SVG taget közvetlenül a HTML body tag után. Ha nem tudja, miről beszélek, nézze meg ezt:

Őszintén szólva nem tudok érvényes felhasználási esetet elképzelni ehhez; ezért hozzáadtam némi extra kódot az eltávolításához. A HTML kimenet egy kicsit kisebb lesz, ami kis mértékű extra sebességet eredményez.

Több optimalizálást fogok hozzáadni, amikor lesz időm.

Költségek

A Cloudflare Image Resizing használatához a cikk írásakor Pro előfizetésre (25$/hó) van szükség a weboldalához. A képátméretezési szolgáltatás 5$-tól indul 100 000 tárolt képenként és 1$ 100 000 kézbesített képenként – kimenő forgalmi költségek vagy további díjak nélkül az átméretezésért és optimalizálásért.

A WordPress bővítmény használata teljesen ingyenes és nem jár költséggel. A worker szintén viszonylag ingyenesen használható, azonban a korlátok kisebbek és a feldolgozási teljesítmény is valamivel kisebb.

Határozottan ajánlom a fizetős workers csomagot az unbound opcióval. Minél több kép van az oldalán, annál több HTML taget kell átírni, és így több feldolgozási idő szükséges (GBs Duration).

Ne feledje, hogy mindössze 5$-ért 400 000 GB-s worker limitet kap, ami a tesztjeim alapján bőven elegendő.

Licenc

Úgy döntöttem, hogy nem használom az MIT licencet, mert észrevettem, hogy sokan ellopják a kódomat és eladják. Ez nem szép dolog, srácok.

Ezzel együtt az új licencmodell az Apache License 2.0, ezért kérem, ne értékesítse tovább a munkámat.

Hasznos linkek

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

Erősen hiszem, hogy a Cloudflare Worker-em jelentősen javítani fogja a weboldalát. Ha igazam van, hagyjon egy csillagot a Githubon. Ha tévedek, hagyjon visszajelzést helyette.

Várom a hozzászólásait.