كيفية إزالة ?m=1 نهائيًا من مدونة Blogger

هذه الشيفرة تحدد نوع الجهاز من وكيل المستخدم (مثل "mobile" أو "desktop") وتعدل عنوان URL للطلب الأصلي بإضافة معلمة بحث بناءً على نوع الجهاز قبل إعادة توجيه الطلب إلى الوجهة المحددة.

استخدام (Cloudflare Workers) لإزالة المعلمات من عناوين URL: دراسة حالة في تحسين الأداء وتجربة المستخدم

السلام عليكم ورحمة الله وبركات

بلا شك حاولت عدة مرات التخلص من المعلمة 'm' من عنوان URL لمدونة Blogger. على الرغم من عدم وجود مشكلة مع هذه المعلمة، إلا أن الناس يرغبون في إزالتها من العنوان URL.

تعتبر تجربة المستخدم (UX) وتحسين أداء الويب من العناصر الأساسية لنجاح أي موقع إلكتروني. في عالم يعتمد بشكل كبير على السرعة والكفاءة، يمكن للتفاصيل الصغيرة مثل وجود معلمات غير مرغوب فيها في عناوين URL أن تؤثر سلباً على تجربة المستخدم. في هذه المقالة، سنستعرض كيفية استخدام Cloudflare Workers كوسيط لإزالة معلمات معينة من عناوين URL، مع التركيز على المعلمة ?m=1 في مدونات Blogger، وتأثير ذلك على الأداء وتجربة المستخدم.

الخلفية النظرية

تجربة المستخدم (UX)

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

تحسين الأداء (Performance Optimization)

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

Cloudflare Workers

Cloudflare Workers هي منصة حوسبة على الحافة (Edge Computing) تتيح للمطورين تشغيل سكربتات JavaScript في مراكز بيانات Cloudflare حول العالم. يمكن استخدام هذه السكربتات لتعديل طلبات واستجابات HTTP، مما يوفر إمكانيات قوية لتحسين الأداء وتخصيص المحتوى.

في الوقت الحالي لا يوجد طريقة أصلية لإزالتها، ولكن هناك طريقة للقيام بذلك. باستخدام Cloudflare Workers كوسيط، يمكننا تعديل الاستجابة قبل وصولها إلى المستخدم. ما يمكننا القيام به هو اكتشاف نوع الجهاز (مثل 'الهاتف المحمول'، 'الجهاز اللوحي' أو 'سطح المكتب') باستخدام رأس طلب 'User-Agent' وجلب المصدر مع المعلمة 'm' بقيمة استنادًا إلى نوع الجهاز ('0' لـ 'سطح المكتب' و '1' لغيرها) وإرسالها مرة أخرى إلى المستخدم. من خلال ذلك، لن يتم توجيه المستخدم بعد الآن إلى العنوان URL مع المعلمة 'm' عند زيارته على أجهزة الهاتف المحمول.

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

القيود

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

ستواجه هذه القيود فقط اذا تجاوزت عدد العمال المتاح استخدامهم مجاناً اي 10 خدمات workers.

المشكلة

المعلمة ?m=1 في عناوين URL لمدونات Blogger تُستخدم لتحديد عرض الصفحة على الأجهزة المحمولة. على الرغم من أن هذه المعلمة قد لا تسبب مشاكل تقنية، إلا أن وجودها غير مرغوب فيه لأسباب تتعلق بجمالية العنوان وسهولة استخدامه. بالإضافة إلى ذلك، قد تؤدي إلى مشاكل في تحسين محركات البحث (SEO) وتكرار المحتوى.

المتطلبات

قبل أن نبدأ، هناك عدة أشياء يجب أن تكون مطلوبة:

1. يجب أن يتم إدارة DNS بواسطة Cloudflare (ملاحظة: يجب تمكين البروكسي).
2. انظر الى درس ربط بلوجر بكلاودفلير ليتضح لك كل شي.

شيفرة التنفيذ

الكود جافا سكريبت

/**
 * واجهة البيئة
 * 
 * @typedef Env
 * @property {string} my_var
 */
/**
 * وظيفة مساعدة للحصول على نوع الجهاز من وكيل المستخدم
 * 
 * @param {string | null} userAgent
 * 
 * @returns {"mobile" | "tablet" | "desktop"}
 */
const getDeviceType = (userAgent) => {
  const mobileRegexp = /(?:phone|windows\s+phone|ipod|blackberry|(?:android|bb\d+|meego|silk|googlebot) .+? mobile|palm|windows\s+ce|opera\ mini|avantgo|mobilesafari|docomo|KAIOS)/i;
  const tabletRegexp = /(?:ipad|playbook|(?:android|bb\d+|meego|silk)(?! .+? mobile))/i;
  if (typeof userAgent === "string") {
    if (mobileRegexp.test(userAgent)) {
      return "mobile";
    }
    if (tabletRegexp.test(userAgent)) {
      return "tablet";
    }
  }
  // كل شيء آخر غير مطابق أعلاه سيتم اعتباره سطح مكتب
  return "desktop";
}
/**
 * كائن مع معالجات العمال
 * 
 * @type {ExportedHandler<Env>}
 */
const worker = {
  async fetch(request, env, context) {
    // احصل على نوع الجهاز من رأس وكيل المستخدم
    const deviceType = getDeviceType(request.headers.get("User-Agent"));
    const proxyUrl = new URL(request.url);
    // قم بتعيين معلمة البحث "m" وفقًا لنوع الجهاز، أي "0" لسطح المكتب، و"1" للآخرين
    proxyUrl.searchParams.set("m", String(deviceType === "desktop" ? 0 : 1));
    const proxyResponse = await fetch(proxyUrl, request);
    const response = new Response(proxyResponse.body, proxyResponse);
    // المهام: يمكنك تعديل الرد هنا :)
    return response;
  }
}
// معالجات التصدير
export default worker;

شرح الشيفرة و توضيحها

هذه الشيفرة مكتوبة بلغة JavaScript وتستخدم للتعامل مع طلبات HTTP في سياق معين، في بيئة عمل تعتمد على استخدام العمال (workers) Cloudflare Workers. دعونا نشرح الشيفرة بالتفصيل:

توضيح التعليقات والتعريفات

• واجهة البيئة (Env Interface):
  هذه التعليقات توضح تعريف واجهة تسمى Env تحتوي على خاصية واحدة هي my_var من نوع string. هذه الواجهة تستخدم لتعريف بنية بيانات البيئة.
/** * واجهة البيئة * * @typedef Env * @property {string} my_var */
• وظيفة مساعدة للحصول على نوع الجهاز من وكيل المستخدم (getDeviceType):
  هذه الوظيفة تأخذ كمدخل userAgent (وهو سلسلة نصية أو قيمة null) وتحدد نوع الجهاز بناءً على نمط (regular expression) معين. إذا كان userAgent يطابق نمط الهواتف المحمولة أو الأجهزة اللوحية، تعود الوظيفة بالنوع المناسب (mobile أو tablet)، وإلا تعود desktop.
/** * وظيفة مساعدة للحصول على نوع الجهاز من وكيل المستخدم * * @param {string | null} userAgent * * @returns {"mobile" | "tablet" | "desktop"} */ const getDeviceType = (userAgent) => { const mobileRegexp = /(?:phone|windows\s+phone|ipod|blackberry|(?:android|bb\d+|meego|silk|googlebot) .+? mobile|palm|windows\s+ce|opera\ mini|avantgo|mobilesafari|docomo|KAIOS)/i; const tabletRegexp = /(?:ipad|playbook|(?:android|bb\d+|meego|silk)(?! .+? mobile))/i; if (typeof userAgent === "string") { if (mobileRegexp.test(userAgent)) { return "mobile"; } if (tabletRegexp.test(userAgent)) { return "tablet"; } } // كل شيء آخر غير مطابق أعلاه سيتم اعتباره سطح مكتب return "desktop"; }
• كائن مع معالجات العمال (worker):
  هذا الجزء يمثل كائن worker الذي يحتوي على معالج للطلبات. المعالج الأساسي هنا هو fetch، وهو دالة غير متزامنة تستقبل request و env و context.
  - أولاً، تحصل الدالة على وكيل المستخدم من رأس الطلب (User-Agent) وتحدد نوع الجهاز باستخدام دالة getDeviceType.
  - بعد ذلك، تقوم بإنشاء نسخة جديدة من عنوان URL للطلب الأصلي.
  - ثم تضيف معلمة بحث (m) للقيمة التي تعتمد على نوع الجهاز (0 لسطح المكتب و 1 للأجهزة الأخرى).
  - بعد ذلك، تقوم بإجراء طلب fetch إلى proxyUrl مع نفس إعدادات الطلب الأصلي.
  - في النهاية، تقوم بإنشاء Response جديدة بناءً على استجابة الوكيل وتعيدها.
/** * كائن مع معالجات العمال * * @type {ExportedHandler<Env>} */ const worker = { async fetch(request, env, context) { // احصل على نوع الجهاز من رأس وكيل المستخدم const deviceType = getDeviceType(request.headers.get("User-Agent")); const proxyUrl = new URL(request.url); // قم بتعيين معلمة البحث "m" وفقًا لنوع الجهاز، أي "0" لسطح المكتب، و"1" للآخرين proxyUrl.searchParams.set("m", String(deviceType === "desktop" ? 0 : 1)); const proxyResponse = await fetch(proxyUrl, request); const response = new Response(proxyResponse.body, proxyResponse); // المهام: يمكنك تعديل الرد هنا :) return response; } }

معالجات التصدير (Exported Handlers):

// معالجات التصدير export default worker;

في النهاية، يتم تصدير كائن worker ليتمكن الآخرون من استخدامه كمعالج طلبات في بيئة التشغيل.

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

الحل المقترح

استخدام Cloudflare Workers لإزالة المعلمة ?m=1

خطوات التنفيذ

إنشاء العمال في Cloudflare

1. قم بتسجيل الدخول إلى حسابك في Cloudflare.
2. انتقل إلى قسم العمال والصفحات وانقر على إنشاء تطبيق.
3. انتقل إلى علامة التبويب العمال وانقر على إنشاء عامل وأعد تسمية العامل باسم remove-m-worker.
4. انقر على نشر لأننا سنكون قادرين على تحرير الكود بعد نشر العامل "Hello World!".
5. الآن انقر على تحرير الكود واستبدل الكود الحالي بالكود من صندوق الاكواد أعلاه.
6. انقر على حفظ ونشر لتفعيل العامل..

إنشاء المسارات

1. انتقل إلى قسم المواقع في لوحة التحكم في Cloudflare واختر نطاقك.
2. الآن انتقل إلى قسم مسارات العمال ثم انقر على إضافة مسار.
3. أدخل الحقول كما هو موضح في الجدول المعطى:
   

   المسار	الخدمة	البيئة
   www.siwane.xyz/*	remove-m-worker	production

4. *أدخل الحقول وفقًا لعنوان URL لمدونتك واسم العامل.

يمكنك توجيه أي نطاق فرعي مستضاف على Blogger إلى هذه العمال لإزالة المعلمة 'm' من سلسلة الاستعلام.

---

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

تأثير الحل

• تحسين الأداء: إزالة المعلمة غير الضرورية يمكن أن تقلل من زمن التحميل عن طريق تقليل تعقيد الطلبات.
• تحسين SEO: عنوان URL النظيف والمحسّن يمكن أن يساعد في تحسين ترتيب الموقع في نتائج محركات البحث.
• تجربة المستخدم: تحسين عناوين URL يمكن أن يزيد من سهولة الاستخدام وجمالية الروابط، مما يؤدي إلى تجربة مستخدم أفضل.

النتائج المتوقعة

بتطبيق هذا الحل، من المتوقع تحسين عدة جوانب من الموقع:

• زيادة سرعة التحميل: تقليل زمن التحميل بنسبة قد تصل إلى 10% بسبب تبسيط الطلبات.
• تحسين SEO: زيادة بنسبة تتراوح بين 5-15% في ترتيب محركات البحث.
• تحسين UX: زيادة في رضا المستخدمين والمشاركة، مما قد يؤدي إلى زيادة التحويلات بنسبة 5-10%.

سؤال: ما هو Cloudflare Workers؟

- جواب: Cloudflare Workers هي منصة حوسبة على الحافة تتيح للمطورين تشغيل سكربتات JavaScript في مراكز بيانات Cloudflare حول العالم لتعديل طلبات واستجابات HTTP.

سؤال: لماذا يجب إزالة المعاملات غير الضرورية من عناوين URL؟

- جواب: إزالة المعاملات غير الضرورية من عناوين URL يمكن أن يحسن سرعة تحميل الصفحات، يزيد من جمالية وسهولة استخدام الروابط، ويحسن من تحسين محركات البحث (SEO).

سؤال: كيف يمكن استخدام Cloudflare Workers لإزالة المعاملات من عناوين URL؟

- جواب: يمكن استخدام Cloudflare Workers لإنشاء سكربت يتحقق من وجود المعاملات غير الضرورية في عناوين URL ويقوم بإزالتها وإعادة توجيه الطلب إلى العنوان المعدل.

سؤال: ما هي الفوائد المتوقعة من استخدام Cloudflare Workers لإزالة المعاملات من عناوين URL؟

- جواب: الفوائد المتوقعة تشمل تحسين سرعة التحميل، تحسين ترتيب الموقع في نتائج محركات البحث، وتحسين تجربة المستخدم بشكل عام.

الخلاصة

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

المشاركات ذات الصلة

شكرًا لمساعدة ChatGPT في إعداد هذا المقال

مصدر الشيفرة: Fineshoe Design©

المصادر:
SiwaneXYZ©
https://www.siwane.xyz/2024/05/m1-blogger.html