تحسين أداء تحميل الصفحة التالية

من أكثر الطرق فعالية لتحسين أداء تحميل الصفحات للمستخدمين الذين يتصفّحون موقعًا إلكترونيًا هي بدء تحميل الصفحة التالية التي هم على وشك زيارتها قبل زيارتها. ويمكن إجراء ذلك من خلال أسلوب يُعرف باسم "تحميل مبني على توقّع" باستخدام Speculation Rules API.

آلية العمل

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

يمكن أن تكون القواعد إما قائمة عناوين URL مضمّنة في الرمز البرمجي مع مفتاح urls (تُعرف باسم قاعدة القائمة)، أو مع مفتاح where يحتوي على مجموعة من أدوات اختيار href وأدوات اختيار لغة CSS المستخدَمة للعثور على الروابط في الصفحة (تُعرف باسم قاعدة document).

يمكن أن تتضمّن القواعد أيضًا سمة eagerness اختيارية تحدّد الحالات التي يجب فيها جلب الصفحة مسبقًا أو عرضها مسبقًا. يمكن ضبط السمة eagerness على immediate أو eager أو moderate أو conservative. يخمّن immediate في أقرب وقت ممكن، بينما تنتظر الخيارات الأخرى إشارات المستخدم، مثل تمرير مؤشر الماوس لفترة قصيرة أو لفترة أطول أو بدء النقر على الصفحة على التوالي.

يمكن دمج القواعد مع إعدادات مختلفة لسرعة الاستجابة من أجل الجلب المُسبق بسرعة ثم العرض المُسبق عندما يتفاعل المستخدم بشكل أكبر.

حالات الاستخدام

يكون التحميل المبني على توقُّع مفيدًا بشكل خاص للصفحات الثابتة التي من غير المرجّح أن يتغيّر محتواها كثيرًا، والتي تكون تكلفة إنتاجها أقل، خاصةً إذا تم تخزينها مؤقتًا في Edge. ويمكن استخدامها أيضًا للصفحات الديناميكية، ولكن من المهم توخي الحذر بشأن احتمال ظهور محتوى قديم.

يُستخدم التحميل المبني على توقُّع عادةً للروابط من المصدر نفسه، على الرغم من أنّ الخيارات الأكثر تقدّمًا تسمح ببعض التوقّعات المتعدّدة المصادر. يركّز هذا الدليل على حالة الاستخدام الأكثر شيوعًا، وهي حالة الاستخدام من المصدر نفسه.

يُعدّ التحميل المبني على توقّع الأكثر قوة خيارًا جيدًا للصفحات التي من المرجّح أن تتم زيارتها بعد ذلك، مثل مقالة رئيسية أو الصفحة التالية في عملية متدرّجة مثل دورة تعليمية.

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

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

كيفية استخدام فئة التدقيق الجديدة

تتّبع قواعد التخمين تنسيقًا مستندًا إلى JSON ويمكن تضمينها في علامة <script type="speculationrules">. يمكن تضمين القواعد في <head> أو <body> من المستند، أو يمكن إضافتها ديناميكيًا باستخدام JavaScript.

يمكن أيضًا استخدام tag، إما على مستوى عام أو على أساس كل قاعدة. عند ضبط هذه العلامة، سيتم تضمينها في عنوان Sec-Speculation-Tags، ما يتيح لك تحديد التخمينات التي تم إجراؤها من جهة الخادم.

مثال على قاعدة بسيطة لقائمة عناوين URL من أجل الجلب المُسبق لعناوين URL محدّدة مسبقًا

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>

مثال على قاعدة مستند بسيطة للعرض المُسبَق لجميع الروابط من المصدر نفسه على صفحة معيّنة

<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>

مثال على قاعدة مستندات معقّدة للعرض المُسبَق للروابط مع استثناءات للمواقع الإلكترونية التفاعلية

<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "prerender": [{
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": {"href_matches": "/wp-admin"}},
          { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
          { "not": {"selector_matches": ".do-not-prerender"}},
          { "not": {"selector_matches": "[rel~=nofollow]"}}
        ]
      }
    }]
  }
</script>

مثال على مجموعة قواعد مختلطة

يوضّح هذا المثال مجموعة قواعد تجلب مسبقًا جميع الروابط بشكل عاجل، ثم تتجاوز ذلك لعرض هذه الروابط نفسها مسبقًا عندما تتلقّى المزيد من الإشارات بمستوى العجلة moderate.

<script type="speculationrules">
  {
    "prefetch": [{
      "tag": "prefetch-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "eager"
    }],
    "prerender": [{
      "tag": "prerender-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

أفضل الممارسات

• يجب استخدام قواعد التوقّع لجلب الصفحات التي من المرجّح أن يزورها المستخدم بعد ذلك وعرضها مسبقًا.
• يُفضَّل استخدام قواعد التوقّع للمواقع الإلكترونية الثابتة التي لا يتغيّر محتواها كثيرًا، والتي تكون تكلفة إنتاج صفحاتها أقل، خاصةً إذا تم تخزينها مؤقتًا على الحافة.
• يُرجى توخّي المزيد من الحذر عند استخدام قواعد التوقّع للصفحات الديناميكية، حيث من المرجّح أن يتغيّر المحتوى بشكل متكرّر، وقد يصبح قديمًا، وحيث تكون تكلفة إنشاء الصفحات أعلى.
• يُفضَّل استخدام قواعد المستندات بدلاً من قواعد القوائم، لأنّها أكثر مرونة وتسمح بمشاركة القاعدة نفسها على صفحات متعددة، ويمكن استخدامها للجلب المُسبق والعرض المُسبق لصفحات غير معروفة مسبقًا.
• يجب الموازنة بين الجلب المُسبق والعرض المُسبق، واختيار الأنسب لحالة الاستخدام. يُعدّ العرض المُسبَق أكثر تكلفة من الجلب المُسبَق ويمكن أن يتسبّب في المزيد من الآثار الجانبية غير المقصودة في التطبيقات المعقّدة التي تعرض حالة ديناميكية، ولكنّه يوفّر تجربة أفضل للمستخدم. يمكنك سؤال المطوّر عن تفضيلاته إذا لم تكن متأكدًا.
• يجب مراعاة المفاضلات بين مستويات eagerness المختلفة، واختيار المستوى المناسب لحالة الاستخدام. يوفّر التخمين الأكثر حماسًا تجربة أفضل للمستخدم، ولكنّه يستهلك المزيد من الموارد ويمكن أن يتسبّب في المزيد من الآثار الجانبية غير المقصودة في التطبيقات المعقّدة التي تعرض حالة ديناميكية. يمكنك سؤال المطوّر عن تفضيلاته إذا لم تكن متأكدًا.
• لا تفرط في استخدام قواعد التوقّع، على سبيل المثال، لتوقّع كل رابط على الصفحة. تفرض المتصفّحات حدودًا (تخمينان للتخمينات غير العاجلة). يجب استخدام immediate لعدد صغير جدًا من الروابط فقط.
• لا تستخدم عناوين URL التي من المحتمل أن تؤدي إلى تغييرات في الحالة، مثل /logout أو /add-to-cart، واستبعِدها صراحةً من قواعد التخمين إذا كان من المحتمل أن يتم تضمينها في قواعد المستندات.
• لا تستخدِم قواعد التخمين في التطبيقات من صفحة واحدة (SPA). تم تصميم قواعد التخمين للتطبيقات المتعدّدة الصفحات (MPA) التي ينتقل فيها المتصفّح إلى مستند جديد في كل عملية تنقّل. في تطبيقات الصفحة الواحدة، لا ينتقل المتصفّح إلى مستند جديد في كل عملية تنقّل، لذا لن تعمل قواعد التخمين على النحو المتوقّع.

توافق المتصفّح واستراتيجيات الاحتياط

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