تنقُّل أسرع على الويب باستخدام ميزة الجلب المُسبَق وبشكل توقّعي

تعرف على الجلب المسبق التنبؤي وكيفية تنفيذه Guess.js.

Minko Gechev

في جلسة Faster Web Navigation with تتوفر ميزة "الجلب المسبق التنبؤي" في مؤتمر Google I/O لعام 2019، بدأتُ بالحديث عن تحسين تطبيقات الويب من خلال تقسيم الرموز والآثار المحتملة على عملية التنقّل اللاحقة في الصفحة. في الجزء الثاني من الحديث، ناقشت كيفية تحسين سرعة التنقل باستخدام Guess.js لإعداد الجلب المسبق التنبؤي:

تقسيم الرموز لتطبيقات الويب بشكل أسرع

تطبيقات الويب بطيئة، ولغة JavaScript هي من أغلى الموارد التي يمكنك شحنها. يمكن أن يؤدي انتظار بطء تحميل تطبيق الويب إلى شعور المستخدمين بالاستياء وتقليل الإحالات الناجحة.

تطبيقات الويب البطيئة مرهقة.

طريقة "التحميل الكسول" هي أسلوب فعّال لتقليل وحدات بايت JavaScript التي تنقلها عبر الشبكة. يمكنك استخدام عدة أساليب لتحميل JavaScript بشكل كسول، بما في ذلك:

  • تقسيم الرمز على مستوى المكوّن
  • تقسيم الرموز على مستوى المسار

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

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

جلب JavaScript مسبقًا

يسمح الجلب المُسبَق للمتصفح بتنزيل الموارد التي من المحتمل أن يحتاجها المستخدم قريبًا وتخزينها مؤقتًا. الطريقة المعتادة هي استخدام <link rel="prefetch">، ولكن هناك مشكلتان شائعتان:

  • يؤدي الجلب المسبق لعدد كبير جدًا من الموارد (الجلب الزائد) إلى استهلاك الكثير من البيانات.
  • قد لا يتم مطلقًا جلب بعض الموارد التي يحتاجها المستخدم مسبقًا.

تحل الجلب المسبق التنبؤي هذه المشكلات باستخدام تقرير يتضمن وأنماط التنقل لتحديد الأصول المطلوب جلبها مسبقًا.

مثال على الجلب المُسبَق

الجلب المُسبَق التنبؤي باستخدام Guess.js

Guess.js هي مكتبة JavaScript توفر وظيفة الجلب المُسبَق التنبؤي. يستهلك رمز Guess.js تقريرًا من "إحصاءات Google" أو من موفّر تحليلات آخر لإنشاء نموذج قائم على التوقّعات يمكن استخدامه للجلب المسبق الذكي فقط لما قد يحتاجه المستخدم.

يشتمل Guess.js على عمليات دمج مع Angular وNext.js وNuxt.js وGatsby. ولاستخدامه في تطبيقك، أضِف هذه الأسطر إلى إعدادات حزمة الويب لتحديد رقم تعريف ملف شخصي في "إحصاءات Google":

const { GuessPlugin } = require('guess-webpack');

// ...
plugins: [
   // ...
   new GuessPlugin({ GA: 'XXXXXX' })
]
// ...

إذا لم تكن تستخدم "إحصاءات Google"، يمكنك تحديد reportProvider وتنزيل البيانات من خدمتك المفضّلة.

التكامل مع أُطر العمل

لمعرفة المزيد حول كيفية دمج Guess.js مع إطار العمل المفضل لديك، اطلع على هذه الموارد:

للحصول على جولة تفصيلية حول دمج منصة Angular، شاهد الفيديو التالي:

كيف يعمل Guess.js؟

إليك كيفية تنفيذ Guess.js للجلب المُسبَق التنبؤي:

  1. فهي تستخرج أولاً البيانات لأنماط تنقُّل المستخدمين من مقدّم خدمة الإحصاءات المفضّل لديك.
  2. ثم تربط عناوين URL من التقرير بأجزاء JavaScript التي تم إنشاؤها بواسطة webpack.
  3. واستنادًا إلى البيانات المستخرجة، تُنشئ نموذجًا قائمًا على التوقّعات بسيطًا للصفحات التي من المحتمل أن ينتقل المستخدم إليها من أي صفحة معيّنة.
  4. يستدعي النموذج لكل مقطع JavaScript، للتنبؤ بالأجزاء الأخرى التي من المحتمل أن تكون مطلوبة بعد ذلك.
  5. يضيف إرشادات الجلب المسبق إلى كل مقطع.

عند الانتهاء من Guess.js، سيحتوي كل مقطع على إرشادات الجلب المسبق تشبه:

__GUESS__.p(
  ['a.js', 0.2],
  ['b.js', 0.8]
)

يطلب هذا الرمز الذي تم إنشاؤه من خلال Guess.js من المتصفِّح التفكير في جلب المقطع a.js مسبقًا باستخدام الاحتمالية 0.2 والمقطع b.js مع احتمالية 0.8.

وبمجرد أن يقوم المتصفح بتنفيذ التعليمات البرمجية، سيتحقق Guess.js من سرعة اتصال المستخدم. إذا كان ذلك كافيًا، سيُدرج Guess.js علامتي <link rel="prefetch"> في عنوان الصفحة، واحدة لكل مقطع. إذا كان المستخدم متصلاً بشبكة عالية السرعة، فسيجلب Guess.js كلا المقطعين مسبقًا. في حال ضعف الاتصال بالشبكة لدى المستخدم، لن يجلب Guess.js سوى المقطع b.js مسبقًا لأنّه من المرجّح جدًا أن يكون مطلوبًا.

مزيد من المعلومات

لمعرفة المزيد حول Guess.js، اطلع على هذه الموارد: