10|recentpost
settings_overscan print announcement


DNS Prefetch ؟

  السبب الرئيسي وراء وجود X-DNS-Prefetch-Control هو لتسريع تحميل صفحات الويب عندما تستخدم نطاقات مختلفة لموارد الصفحة...وهذا موجود عندنا بكثرة على منصة البلوجر نظرا لكثرة النطاقات خذ على سبيل المثال صورنا تأتي من bp.blogspot.com والمكون الإضافي للمكتبات المستضافة في الغالب يأتي من cdnjs.cloudflare.com أضف الخطوط والايقونات ..الخ فأنت توفر الموارد من ثلاثة أو أربع نطاقات مختلفة
فلاحظ أنه عندما تقوم باضافة روابط خارجية داخل القالب مثل روابط الخطوط أو الأيقونات أو مكتبات الجيكوري.. الذي يحدث أن المتصفح يقوم باستدعاء الكائن وتمرير المعامل من خلال أسماء النطاقات DNS . أي تحدث مجموعة طلبات معقدة من اجل استحضار العناصر المطلوبة حتى تظهر لنا تلك الاضافة أو الميزة بشكلها السليم.
لكن هاته الخوارزمية ثمنها الوقت فكلما كثر الطلب زاد الوقت ..و طبعا هذا وضع سيء كونه يؤثر بشكل مباشر على سرعة المدونة خاصةً على شبكات الجوال ، يمكن أن يكون التأخير مرتفعًا جدًا.
 .. عندها نلجأ للـ DNS Prefetch كوسيلة ذكية لتسريع صفحات الويب وحل فعال من اجل تجاوز مشكل كثرة الطلبات . لتتحول من كومة طلبات عشوائية منفردة إلى طلب واحد منظم ... من خلال جلب نتائج DNS مسبقا ، يمكن تقليل زمن الوصول بشكل ملحوظ في أوقات معينة ، مثل عندما ينقر المستخدم على رابط معين. في بعض الحالات ، يمكن تقليل التأخير إلى ثانية واحدة.

تشغيل الجلب المسبق وإيقافه

يمكنك إرسال رأس X-DNS-Prefetch-Control من الخادم أو المستندات الفردية باستخدام السمة http-equiv في عنصر <meta>: 


<meta content='on' http-equiv='x-dns-prefetch-control'/>

يمكنك عكس هذا الإعداد عن طريق تعيين المحتوى على "توقيف" عبر السمة content='off'.

إجبار بحث عن اسم مضيف معين

يمكنك فرض اسم المضيف هذا للبحث عن أسماء مضيف معينة دون توفير نقطة ارتساء محددة باستخدام السمة rel الخاصة بالعنصر <link> مع علامة اتصال dns-prefix: 

<link href='//www.blogger.com' rel='dns-prefetch'/>

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

مثال عملي


الشفرة <link href='//ajax.googleapis.com' rel='dns-prefetch'/> تحتوي على عنوان URL خاص بمكتبات Jquery ...تقول أرغب في حل اسم النطاق قبل أن يتم استدعاء اسم المجال "ajax.googleapis.com"
مثلا عندك في القالب أكثر من رابط لمكتبات Jquery أو روابط الصور من مجال واحد وهو "//ajax.googleapis.com" أو "//1.bp.blogspot.com" فبدل أن يقوم المتصفح بعمل 3 أو 4 أو 10 طلبات DNS من نفس المجال سيقوم بإختصارها في طلب DNS واحد فقط من خلال جلب IP الموقع.

تثبيت ملف الوظيفة في قالب مدونتك

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب


لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية

  • قم بالبحث عن هذا الوسم <head> أسفله أي بعده قم بوضع كود.html التالي.. 

    • 
<!-- DNS Prefetch --> 
<meta content='on' http-equiv='x-dns-prefetch-control'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//28.2bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//fontawesome.com' rel='dns-prefetch'/>
<link href='//use.fontawesome.com' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//www.facebook.com' rel='dns-prefetch'/>
<link href='//plus.google.com' rel='dns-prefetch'/>
<link href='//twitter.com' rel='dns-prefetch'/>
<link href='//www.youtube.com' rel='dns-prefetch'/>
<link href='//feedburner.google.com' rel='dns-prefetch'/>
<link href='//www.pinterest.com' rel='dns-prefetch'/>
<link href='//www.linkedin.com' rel='dns-prefetch'/>
<link href='//codepen.io' rel='dns-prefetch'/>
<link href='//dribbble.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>
<link href='//github.com' rel='dns-prefetch'/>
<link href='//player.vimeo.com' rel='dns-prefetch'/>
<link href='//platform.twitter.com' rel='dns-prefetch'/>
<link href='//apis.google.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='preconnect'/>
<link href='//www.googletagservices.com' rel='dns-prefetch'/>
<link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//syndication.twitter.com' rel='dns-prefetch'/>
<link href='//adservice.google.ca' rel='dns-prefetch'/>
<link href='//adservice.google.com' rel='dns-prefetch'/>
<link href='//disqus.com' rel='dns-prefetch'/>
<link href='//cdn.rawgit.com' rel='dns-prefetch'/>
<link href='//www.sharethis.com' rel='dns-prefetch'/>
    ملاحظة مهمة
    لو دققت النظر في النطاقات الموجودة في الكود ستلاحظ أنها من الشائع إستخدامها سواء كانت على شكل روابط أو مكتبات وموارد للصفحة إذ يمكنك التعديل أو حذف أو إضافة نطاقات جديدة أنت تستعملها... وللمزيد حول الموضوع   أنظر هنا

دروس وشروحات