تغيير حجم صورة Cloudflare لبرنامج WordPress

أقوم بنشر هذه المقالة بسبب العديد من الطلبات التي تلقيتها بخصوص Cloudflare Image Resizing ومكوِّن WordPress الإضافي الخاص بي.

نظرًا لكيفية تصميم WordPress ، لا يمكن جعل المكون الإضافي الخاص بي متوافقًا مع كل شيء هناك ، لذلك في هذه المقالة نستكشف طريقة أخرى عبر Cloudflare Workers.

يرجى ملاحظة أنني قد ارتكبت عن قصد الكثير من الأشياء التقنية حتى يتمكن الجميع من فهمها ؛ دعنا نواجه الأمر ، فليس كل شخص مطورًا. أحب أن أبقي المقالات قصيرة وبسيطة وفي صلب الموضوع.

في نهاية المقالة ، ستتمكن ببساطة من النسخ واللصق والضغط بنقرة واحدة لإجراء تغيير حجم صورة Cloudflare بشكل صحيح لـ WordPress الخاص بك.

ما هو تغيير حجم صورة Cloudflare

للتذكير ، باستخدام Cloudflare Image Resizing ، يمكنك تحويل الصور على منصة Cloudflare الجانبية. يمكنك تغيير حجم الصور وضبط جودتها وتحويلها إلى تنسيق WebP أو AVIF عند الطلب.

ستقوم Cloudflare تلقائيًا بتخزين كل صورة مشتقة مؤقتًا على الحافة ، لذلك تحتاج فقط إلى تخزين صورة أصلية واحدة في الأصل الخاص بك.

إنها حقًا خدمة لا غنى عنها للمدونات المزدحمة مثل WordPress ، خاصة إذا كنت تستخدمها كمتجر به العديد من الصور.

اقرأ المزيد عنها على Official Post .

لماذا تستخدم Cloudflare Image Resizing

السبب الرئيسي هو السرعة. لنفترض على سبيل المثال أن موقعك على الويب يحتوي على 5 صفحات وكل صفحة بها 10 صور تتراوح من 1 ميجا بايت إلى 5 ، وحتى 10 ميجا بايت لكل صورة.

عندما يتنقل شخص ما في صفحاتك لأول مرة ، يتم تنزيل كل هذه الصور بواسطة متصفحك. لذلك على سبيل المثال ، تحتوي صفحة واحدة على 10 صور ، حجم كل منها 1 ميغا بايت ؛ هذا هو 10 ميغا بايت للتحميل للصور فقط.

يعد هذا أمرًا سيئًا جدًا لمستخدمي النطاق الترددي المنخفض ، وخاصة مستخدمي الجوال. إنها تمتص حتى بالنسبة لمستخدمي أجهزة الكمبيوتر ذات النطاق الترددي الكبير. لا أحد يريد رؤية موقع ويب بطيء التحميل ولن يلتزم بمعايير الويب.

أنا متأكد من أنك ترى العديد من هذه المواقع يومًا بعد يوم ، يتم تحميلها إلى الأبد. السبب الرئيسي هو أصول الوسائط (مثل css و js والصور) من بين عوامل أخرى مثل بطء استضافة الويب وما إلى ذلك.

قد تعتقد: “لكنني أستخدم CDN ؟!” ، حسنًا ، ليس الأمر نفسه. لا يعد Cloudflare Image Resizing مجرد CDN ، بل يغير صورك لتصبح أفضل.

مع تغيير حجم الصور في Cloudflare ، سيتم تقليل حجم الصور أثناء التنقل ، لذلك ستصبح الصورة 1 ميجا بايت في مكان ما حوالي 100/200 كيلو بايت تقريبًا. سيتم تسليمها أيضًا بتنسيق الجيل التالي مثل Webp و AVIF.

باختصار:

• يعزز صورك
• يسرع موقع الويب الخاص بك
• يحسن SEO الخاص بك
• يحفظ عرض النطاق الترددي

WordPress البرنامج المساعد

ربما تعرف عن المكون الإضافي الذي أنشأته لـ WordPress من Github / مكونات WordPress الدليل.

لقد تلقى الكثير من التعليقات وقام الكثير منهم بتسريع موقع الويب الخاص بهم إلى حد كبير ، لكن العديد منهم واجهوا أيضًا الكثير من المشكلات التي لا يمكن حلها حرفيًا.

على الرغم من أنني حاولت القيام بكل ما هو ممكن لتغيير حجم جميع الصور ، إلا أنه لا يمكن تغيير حجمها جميعًا بسبب كيفية تصميم المكونات الإضافية والسمات في WordPress.

ناهيك عن معالجة CSS وأشياء أخرى غير واردة.

عامل Cloudflare

بعد مراجعة جميع المشكلات المنشورة ، قررت السير في المسار الآخر واستخدام Cloudflare Worker لإعادة كتابة ناتج HTML النهائي لـ Cloudflare Image Resizing.

هذا هو الحل النهائي لاستخدام Cloudflare Image Resizing على WordPress لأن العامل سوف يجلب الاستجابة النهائية التي تم إنشاؤها بواسطة WordPress ، بما في ذلك أي تعديلات من المكونات الإضافية والسمات و CSS وما إلى ذلك.

نظرًا لأن Cloudflare Worker يجلس بين WordPress والمستخدمين ، فلديك القدرة على تغيير أي شيء تقريبًا ؛ مما يعني أنه يمكننا حتى استبدال الصور داخل ملفات CSS المضمنة وحتى ملفات CSS.

من الناحية النظرية ، يبدو الأمر سهلاً ومباشرًا ، لكن من الناحية العملية كان الأمر أصعب بكثير ويستغرق وقتًا طويلاً.

ومع ذلك ، فقد قضيت الكثير من الوقت والجهد لمعرفة كيفية تحقيق هذا الهدف.

برنامج WordPress Plugin مقابل Cloudflare Worker

من المفيد للغاية أن تفهم الاختلافات بين مكون WordPress الإضافي و Cloudflare Worker. بهذه الطريقة يمكنك أن تقرر أيها تستخدم وتفهم سبب ترشيحي للعامل.

| | البرنامج المساعد ووردبريس | عامل Cloudflare | | ——————– | —————— | ——— ———- | | مجاني | نعم | نعم | | سرعة المعالجة | سريع | سريع جدا | | التبعية | PHP 7+ | بلا | | التوافق العام | جزئي | كامل | | توافق المظاهر | بعض | الكل | | توافق الملحقات | بعض | الكل | | معالجة CSS | لا | نعم | | معالجة جميع الكلمات الدلالية | لا | نعم | | أمثلية | لا | نعم |

كما ترون أعلاه ، يفوز العامل. إنه أفضل حل لأنه بغض النظر عن نوع التغييرات التي تجريها على الواجهة الخلفية (WordPress) ، سيتمكن العامل من تغيير روابط الصور.

إعداد Cloudflare Worker

أول شيء مهم عليك القيام به هو تعطيل المكون الإضافي WordPress إذا كان مثبتًا وممكنًا. إذا تخطيت هذه الخطوة ، فلن ترى أن العامل يقوم بالكثير.

الشيء الثاني والمهم للغاية هو التوجه إلى Google Pagespeed وإجراء اختبار لموقع الويب الخاص بك دون تغيير حجم الصورة. سوف تحتاج هذا لاحقًا لترى الفرق.

انتقل الآن إلى حساب Cloudflare الخاص بك وانتقل إلى العمال. من هنا انقر فوق “إنشاء خدمة”. قم بتسمية الخدمة كما تريد ، يمكنك أيضًا ترك الاسم العشوائي الذي تم إنشاؤه تلقائيًا. اترك المبدئ كـ “معالج HTTP”.

بعد الإنشاء ، انقر فوق الخدمة وفي أعلى الجانب الأيمن انقر فوق “تحرير سريع”. سيظهر المحرر ويحدد ببساطة كل الكود الموجود واستبدله بعملي من Github . انقر على “حفظ ونشر” واترك المحرر.

في صفحة الخدمة الجديدة الخاصة بك ، انتقل إلى “المشغلات” وتحت المسارات ، انقر فوق “إضافة مسار”. داخل المسار ، قم بتعيين مجال موقع الويب الخاص بك باستخدام حرف بدل مطابق لجميع ، على سبيل المثال هذا "" example.com / * “`. بالنسبة للمنطقة ، ستحدد المجال الخاص بك ، والذي في المثال الخاص بي هو “example.com”.

هذا كل شئ!

استكشاف الأخطاء وإصلاحها

في حالة وجود أي مشكلات ، مثل عدم تغيير حجم الصور ، تحقق من الشروط التالية:

1. هل الصورة جزء من المجال الخاص بك؟ لا يمكنك تغيير حجم الصور من مجال آخر إلا إذا قمت بتمكين هذه الميزة على وجه التحديد في لوحة معلومات Cloudflare.
2. هل أعيد كتابة أي صور؟ تمكين & quot؛ السجلات & quot؛ في علامة تبويب العامل الجديد ومعرفة ما إذا كنت قد لاحظت أي استثناءات. إذا قمت بذلك ، فأبلغ عن ذلك في مستودع Github الخاص بي.
3. هل إعادة كتابة روابط الصور خاطئة؟ في هذه الحالة قم بالإبلاغ عن المشكلة على Github.

تحسينات المكافآت

أنا متأكد تمامًا من أنك لاحظت أن WordPress الخاص بك يحتوي على بعض علامات SVG الفارغة بعد علامة نص HTML مباشرةً. إذا كنت لا تعرف ما أتحدث عنه ، فما عليك سوى إلقاء نظرة على هذا:

بصراحة ، لا أستطيع أن أفهم حالة استخدام صالحة لهذا ؛ لذلك أضفت بعض التعليمات البرمجية الإضافية لإزالتها. سيجعل إخراج HTML الخاص بك أصغر قليلاً مما ينتج عنه مقدار صغير من السرعة الزائدة.

سأضيف المزيد من التحسينات عندما يكون لدي الوقت.

التكاليف

من أجل استخدام Cloudflare Image Resizing ، يجب أن يكون لديك اشتراك Pro (25 دولارًا شهريًا) لموقع الويب الخاص بك اعتبارًا من وقت كتابة هذا التقرير. تبدأ خدمة تغيير حجم الصورة بـ 5 دولارات لكل 100 ألف صورة مخزنة و 1 دولار لكل 100 ألف صورة يتم تسليمها - بدون تكاليف خروج أو رسوم إضافية لتغيير الحجم والتحسين.

استخدام البرنامج المساعد WordPress مجاني تمامًا ولا يتحمل أي تكلفة. العامل أيضًا مجاني نسبيًا للاستخدام ، ولكن الحدود أصغر وقوة المعالجة أصغر أيضًا.

أوصي بشدة باستخدام خطة العمال المدفوعة مع خيار غير منضم. كلما زاد عدد الصور الموجودة على موقعك ، يجب إعادة كتابة المزيد من علامات HTML وبالتالي زيادة وقت المعالجة (مدة الجيجابايت).

ضع في اعتبارك أنه مقابل 5 دولارات فقط تحصل على 400000 جيجا بايت في الثانية وهو أكثر من كافٍ من اختباراتي.

رخصة

لقد قررت عدم استخدام ترخيص MIT لأنني لاحظت أن الكثيرين يستولون على الكود الخاص بي ويبيعونه. ليس رائع يا شباب.

ومع ذلك ، فإن نموذج الترخيص الجديد المستخدم هو Apache License 2.0 ، لذا يرجى عدم إعادة بيع عملي.

روابط مفيدة

• Webpagetest: https://www.webpagetest.org/
• إحصاءات Google Pagespeed: https://pagespeed.web.dev/
• تسعير العمال: https://developers.cloudflare.com/workers/platform/pricing/

أعتقد اعتقادًا راسخًا أن عامل Cloudflare الخاص بي سيحسن موقع الويب الخاص بك إلى حد كبير. إذا كنت على حق ، اترك نجمًا على جيثب. إذا كنت مخطئًا ، فاترك بعض التعليقات بدلاً من ذلك.

في انتظار تعليقاتكم.