هناك طريقتان للجلب المسبق: العلامات <link> وعناوين HTTP

Demián Renzulli

في هذا الدرس التطبيقي، عليك تنفيذ الجلب المُسبَق بطريقتَين: باستخدام <link rel="prefetch"> وعنوان HTTP Link.

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

قياس الأداء

أولاً، حدِّد الأداء الأساسي:

  1. انقر على Remix to Edit (إنشاء ريمكس لتعديله) ليصبح المشروع قابلاً للتعديل.
  2. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة ملء الشاشة.
  3. اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوري البرامج".

  4. انقر على علامة التبويب الشبكة.

  5. في القائمة المنسدلة تقييد السرعة، اختَر شبكة الجيل الثالث السريعة لمحاكاة نوع اتصال بطيء.

  6. لتحميل صفحة المنتج، انقر على شراء الآن في نموذج التطبيق.

يستغرق تحميل صفحة product-details.html حوالي 600 ملي ثانية:

لوحة الشبكة تعرض أوقات تحميل ملف product-details.html

جلب صفحة المنتج مسبقًا باستخدام <link rel="prefetch">

لتحسين التنقّل، أدخِل علامة prefetch في الصفحة المقصودة لتحميل صفحة product-details.html مسبقًا:

  • أضِف عنصر <link> التالي إلى رأس ملف views/index.html:
<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

      <link rel="prefetch" href="/product-details.html" as="document">
      ...
</head>

سمة as اختيارية، ولكن يُنصح باستخدامها، فهي تساعد المتصفّح في ضبط الرؤوس الصحيحة وتحديد ما إذا كان المورد متوفرًا في ذاكرة التخزين المؤقت. تشمل أمثلة القيم لهذه السمة ما يلي: document وscript وstyle وfont وimage وغير ذلك.

للتأكّد من أنّ ميزة "التحميل المُسبَق" تعمل:

  1. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة ملء الشاشة.
  2. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.

  3. انقر على علامة التبويب الشبكة.

  4. في القائمة المنسدلة تقييد السرعة، اختَر شبكة الجيل الثالث السريعة لمحاكاة نوع اتصال بطيء.

  5. أزِل العلامة من مربّع الاختيار "إيقاف ذاكرة التخزين المؤقت".

  6. أعِد تحميل التطبيق.

الآن عند تحميل الصفحة المقصودة، يتم تحميل صفحة product-details.html أيضًا، ولكن بأولوية أدنى:

لوحة الشبكة تعرض product-details.html تم جلبه مسبقًا.

يتم الاحتفاظ بالصفحة في ذاكرة التخزين المؤقت لخدمة HTTP لمدة خمس دقائق، وبعد ذلك يتم تطبيق قواعد Cache-Control العادية للمستند. في هذه الحالة، يحتوي product-details.html على عنوان cache-control بقيمة public, max-age=0، ما يعني أنّه يتم الاحتفاظ بالصفحة لمدة خمس دقائق في المجمل.

إعادة تقييم الأداء

  1. أعِد تحميل التطبيق.
  2. لتحميل صفحة المنتج، انقر على شراء الآن في نموذج التطبيق.

اطّلِع على لوحة الشبكة. هناك اختلافان مقارنةً بميزة تتبُّع الشبكة الأوليّة:

  • يعرض عمود الحجم "ذاكرة التخزين المؤقت التي تم جلبها مسبقًا"، ما يعني أنّه تم استرداد هذا المورد من ذاكرة التخزين المؤقت للمتصفّح بدلاً من الشبكة.
  • يعرض عمود الوقت أنّ الوقت المستغرَق لتحميل المستند هو الآن حوالي 10 ملي ثانية.

وهذا يمثّل انخفاضًا بنسبة% 98 تقريبًا مقارنةً بالإصدار السابق الذي استغرق حوالي 600 ملي ثانية.

لوحة الشبكة تعرض ملف product-details.html الذي تم استرجاعه من ذاكرة التخزين المؤقت التي تم جلبها مسبقًا.

الرصيد الإضافي: استخدِم prefetch كتحسين تدريجي.

يتم تنفيذ الجلب المسبق على أفضل نحو كتحسين تدريجي للمستخدمين الذين يتصفحون الاتصالات السريعة. يمكنك استخدام Network Information API للتحقّق من ظروف الشبكة وبناءً على ذلك يتم إدخال علامات الجلب المُسبَق بشكل ديناميكي. بهذه الطريقة، يمكنك تقليل استهلاك البيانات وتوفير التكاليف للمستخدمين الذين يستخدمون خطط بيانات بطيئة أو باهظة الثمن.

لتنفيذ ميزة "التحميل المُسبَق التكيُّفي"، عليك أولاً إزالة علامة <link rel="prefetch"> من views/index.html:

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
       <link rel="prefetch" href="/product-details.html" as="document">
       ...
    </head>

بعد ذلك، أضِف الرمز البرمجي التالي إلى public/script.js لتعريف دالة تُدخل علامة prefetch ديناميكيًا عندما يكون المستخدم متصلاً بالإنترنت بسرعة عالية:

function injectLinkPrefetchIn4g(url) {
    if (window.navigator.connection.effectiveType === '4g') {
        //generate link prefetch tag
        const linkTag = document.createElement('link');
        linkTag.rel = 'prefetch';
        linkTag.href = url;
        linkTag.as = 'document';

        //inject tag in the head of the document
        document.head.appendChild(linkTag);
    }
}

تعمل الدالة على النحو التالي:

  • يتحقّق هذا الإجراء من سمة effectiveType في Network Information API لتحديد ما إذا كان المستخدم متصلاً بشبكة الجيل الرابع (أو شبكة أسرع).
  • في حال استيفاء هذا الشرط، يتم إنشاء علامة <link> مع prefetch كنوع التلميح، ويتم تمرير عنوان URL الذي سيتم جلبه مسبقًا في السمة href، ويشير إلى أنّ المورد هو document HTML في السمة as.
  • أخيرًا، يتمّ إدخال النصّ البرمجي ديناميكيًا في head من الصفحة.

بعد ذلك، أضِف script.js إلى views/index.html قبل علامة </body> الإغلاق مباشرةً:

<body>
      ...
      <script src="/script.js"></script>
</body>

يضمن طلب script.js في نهاية الصفحة أن يتم تحميله وتنفيذه بعد تحليل الصفحة وتحميلها.

للتأكّد من أنّ ميزة "التحميل المُسبَق" لا تتداخل مع الموارد الأساسية للصفحة الحالية، أضِف مقتطف الرمز التالي للاتّصال بـ injectLinkPrefetchIn4g() في الحدث window.load:

<body>
      ...
      <script src="/script.js"></script>
      <script>
           window.addEventListener('load', () => {
                injectLinkPrefetchIn4g('/product-details.html');
           });
      </script>
</body>

لا تجلب الصفحة المقصودة الآن product-details.html بشكل مسبق إلا في الاتصالات السريعة. للتأكّد من أنّ:

  1. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة ملء الشاشة.
  2. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.
  3. انقر على علامة التبويب الشبكة.
  4. في القائمة المنسدلة تقييد السرعة، اختَر على الإنترنت.
  5. أعِد تحميل التطبيق.

من المفترض أن يظهر لك الرمز product-details.html في لوحة "الشبكة":

لوحة الشبكة تعرض product-details.html تم جلبه مسبقًا.

للتأكّد من عدم جلب صفحة المنتج مسبقًا في حالات الاتصال البطيء بالإنترنت:

  1. في القائمة المنسدلة "تقييد السرعة"، اختَر شبكة الجيل الثالث (3G) البطيئة.
  2. أعِد تحميل التطبيق.

يجب أن تتضمّن لوحة الشبكة المراجع للصفحة المقصودة فقط بدون product-details.html:

لا يتمّ جلب ملف product-details.html مسبقًا في لوحة الشبكة.

جلب ورقة الأنماط لصفحة المنتج باستخدام عنوان HTTP Link

يمكن استخدام عنوان HTTP Link لتحميل النوع نفسه من الموارد مسبقًا كما في علامة link. ويعتمد تحديد وقت استخدام أحدهما أو الآخر على إعداداتك المفضّلة في أغلب الأحيان، لأنّ الفرق في الأداء ليس كبيرًا. في هذه الحالة، ستستخدمه لتحميل ملفات CSS الرئيسية لصفحة المنتج مسبقًا، وذلك لتحسين عرضها بشكل أكبر.

أضِف رأس HTTP Link لـ style-product.css في استجابة الخادم للصفحة المقصودة:

  1. افتح ملف server.js وابحث عن معالِج get() لعنوان URL الجذر: /.
  2. أضِف السطر التالي في بداية المعالج:
app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});
  1. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة ملء الشاشة.
  2. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.
  3. انقر على علامة التبويب الشبكة.
  4. أعِد تحميل التطبيق.

يتم الآن جلب style-product.css مسبقًا بأولوية منخفضة بعد تحميل الصفحة المقصودة:

لوحة شبكة تعرض صورة تم جلبها مسبقًا style-product.css.

للانتقال إلى صفحة المنتج، انقر على الشراء الآن. ألقِ نظرة على لوحة الشبكة:

لوحة الشبكة تعرض style-product.css الذي تم استرجاعه من ذاكرة التخزين المؤقت للتحميل المُسبَق.

تم استرداد ملف style-product.css من "ذاكرة التخزين المؤقت للتحميل المُسبَق" واستغرق تحميله 12 ملي ثانية فقط.