هل تريد تحسين سرعة موقع الويب الخاص بك سواء كان الووردبريس أو بلوجر ، فهذه المقالة لك؟
سأوضح لك هنا كيف يمكنك تحميل URL على الفور على موقع ويب من خلال تنفيذ ميزة النقر الفوري.
هنا ، سوف نستخدم مكتبة Instant.page لتسريع سرعة موقعنا عن طريق تنفيذ الجلب المسبق لعناوين URL.
إنها مكتبة مفتوحة المصدر طورها ألكسندر ديولوت.
كيف يعمل التحميل المسبق لارتباط الصفحة ؟
يقوم Instant.page بتحميل الصفحة مسبقًا قبل أن ينقر المستخدم عليها. وعندما يحوم المستخدم فوق الارتباط ، سيبدأ في تحميل جزء HTML من صفحة الويب هذه في الخلفية ويمكنه توفير 100 مللي ثانية من وقت الاستجابة.
تعمل ميزة "التحميل المسبق في الوقت المناسب" للصفحة الفورية على تحسين تجربة المستخدم على موقع الويب عن طريق تحميل صفحة الويب بسرعة فائقة.
على سطح المكتب ، عندما يقوم الزائر بتمرير الماوس فوق الارتباط قبل النقر مباشرة ، سيبدأ التحميل المسبق ويوفر حوالي 300 مللي ثانية في عملية التحميل.
يمكنك أيضًا تحميل الصفحة بعد أن ينقر المستخدم على رابط ولن يستخدم طلبات إضافية ، ومع ذلك ، يمكنه تحسين سرعة تحميل الصفحة بمقدار 80 مللي ثانية في المتوسط.
كما يمكنك أيضًا بدء تحميل الروابط مسبقًا عندما يتعلق الأمر بإطار العرض ، و لكنني لن أوصي بهذا لأنه قد يستغرق مزيدًا من عرض النطاق الترددي للخادم.
يعد التحميل المسبق بالماوس فهو الخيار الأفضل لأنه يقوم بتحميل ملفات HTML مسبقًا فقط عندما يحوم المستخدم على رابط يزيد طوله عن 65 مللي ثانية.
كما أنه يعمل بنفس الأساسيات في الأجهزة المحمولة. و سيبدأ تحميل الصفحة في الفجوة الزمنية عندما يلمس شخص ما شاشته قبل تحريرها. و هنا يمكنه تحسين سرعة الصفحة بمقدار 90 مللي ثانية في المتوسط.
هل هذا يؤثر على عرض النطاق الترددي للخادم؟
لا ، لن يؤثر ذلك على النطاق الترددي للخادم بقدر ما يتم تحميله مسبقًا فقط عندما تكون هناك فرصة جيدة عندما ينقر المستخدم على الارتباط.
كما يقوم أيضًا بتحميل جزء HTML فقط من صفحة الويب مع ترك CSS و JavaScript.
هل هي لغة جافا سكريبت ثقيلة لموقع الويب الخاص بي؟
إنها JavaScript خفيفة الوزن للغاية وحجمها حوالي 1 كيلو بايت فقط.
كيف يتم تنفيذ التحميل المسبق للصفحة الفورية في بلوجر؟
يمكنك بسهولة تثبيت البرنامج النصي للصفحة الفورية على موقع بلوجر الخاص بك باتباع الطريقة أدناه.
- انتقل إلى لوحة معلومات بلوجر> الموضوع> تحرير HTML
- انقر الآن على منطقة الكود واكتب CTRL + F للبحث عن علامة </body>.
- الآن انسخ كود JavaScript أدناه والصقه أعلى علامة </body>.
<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>لقد نجحت الآن في إضافة وظيفة النقر الفوري في موقع الويب الخاص بك على بلوجر. الآن سيقوم بجلب عناوين URL الخاصة بموقعك قبل النقر مباشرة.
كيفية تثبيت Instant.page في الووردبريس؟
يمكنك تنفيذ وظائف الصفحة الفورية في الووردبريس بسهولة عن طريق إضافة مكون إضافي خفيف الوزن.
لتثبيت البرنامج المساعد للصفحة الفورية في موقع الووردبريس:
- انتقل إلى لوحة معلومات الووردبريس> المكونات الإضافية> إضافة جديد
- ابحث الآن عن البرنامج المساعد للصفحة الفورية
- تثبيت وتفعيل هذا البرنامج المساعد.
الآن ، يتم تنشيط ميزة التحميل المسبق للرابط (URL) للصفحة الفورية على موقع الويب الخاص بك على الووردبريس.
لاحظ هنا أنه يمكنك تمكين نفس الميزة باستخدام مكون إضافي للتخزين المؤقت مثل LiteSpeed cache و Perfmatters وما إلى ذلك.
دعم المتصفح والأمان
سيدعم جميع المتصفحات التي تعتمد على الكروم مثل Chrome و Microsoft edge و Brave و Firefox وما إلى ذلك.و لن يكسر موقعك على متصفحات غير مدعومة مثل Safari و internet explorer.
إنه آمن تمامًا ويتم استضافته بدون خادم مع عمال Cloudflare.
يمكنك أيضًا استضافة هذا ذاتيًا على الخادم الخاص بك عن طريق تنزيل أحدث إصدار من ملف JS من الموقع الرسمي وإضافة علامة نصية للوحدة قبل علامة </body> بالتنسيق أدناه.
<script src="instantpage-5.1.0.js" type="module" defer></script>خيارات إضافية مع سمات البيانات
يمكنك أيضًا تطبيق بعض الإعدادات الإضافية وتخصيص Javascript وفقًا لاختيارك عن طريق إضافة بعض سمات البيانات الفورية.
و بشكل افتراضي ، يعمل هذا الرمز مع الروابط الداخلية فقط و يمكنك من تمكينه للروابط الخارجية باستخدام سمات البيانات الفردية الفورية.
فيما يلي قائمة بسمات البيانات التي يمكنك استخدامها.
data-instant-allow-query-string
data-instant-allow-external-links
data-instant-whitelist
data-instant-intensity="mousedown"
data-instant-intensity="mousedown-only"
data-instant-intensity="150"
data-instant-intensity="viewport"
data-instant-intensity="viewport-all"
data-instant-mousedown-shortcutيمكنك أيضًا استبعاد عنوان URL معين للتحميل المسبق باستخدام سمة data-no-Instant.
على سبيل المثال،
<a href="https://domain.com/post" data-no-instant>Post</a>
استنتاج
آمل أن تكون قد حصلت على فكرة حول كيفية عمل وظيفة النقر الفوري وكيف يمكنك تنفيذ البرنامج النصي للصفحة الفورية في كل من مواقع البلوجر ومواقع الووردبريس.
سيؤدي ذلك إلى تحسين تجربة المستخدم بشكل كبير عن طريق تحميل صفحات الويب الخاصة بك بسرعة كبيرة.
يمكنك أيضًا تحسين سرعة الصفحة لموقع الويب الخاص بك على بلوجر باتباع المقالات أدناه.
- طريقة تثبيت أحدث إصدار من jQuery على موقع بلوجر
- طريقة إعداد Cloudflare CDN على موقع بلوجر
- شرح كيفية تمكين التحميل البطيئ على موقع بلوجر. [محدث]
- طرق تحسين سرعة مدونة بلوجر [2021]
إذا كان لديك أي شك يمكنك أن تسألني في قسم التعليقات و لا تنسى الاشتراك في الموقع للحصول على المزيد من أدلة تحسين السرعة.