تحميل مواد العرض المهمة مسبقًا لتحسين سرعة التحميل

Houssein Djirdeh
Jeremy Wagner
Milica Mihajlija

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

آلية عمل التحميل المُسبَق

يُعدّ التحميل المُسبَق مناسبًا بشكلٍ أفضل للموارد التي يكتشفها المتصفّح عادةً في وقت متأخر.

لقطة شاشة للوحة &quot;الشبكة&quot; في &quot;أدوات مطوّري البرامج في Chrome&quot;
في هذا المثال، تم تحديد خط Pacifico في ملف الأنماط باستخدام قاعدة @font-face. لا يحمِّل المتصفّح ملف الخط إلا بعد انتهاء تنزيل ملف ملفّات الأنماط وتحليله.

من خلال التحميل المُسبَق لمورد معيّن، أنت تُعلم المتصفّح بأنّك تريد استرجاعه قبل أن يكتشفه المتصفّح لأنّك متأكد من أنّه مهم للصفحة الحالية.

لقطة شاشة للوحة &quot;الشبكة&quot; في Chrome DevTools بعد تطبيق التحميل المُسبَق
في هذا المثال، يتم تحميل خط Pacifico مسبقًا، لذلك يتم التنزيل بالتوازي مع جدول الأنماط.

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

تدقيق طلبات مفتاح التشفير المُحمَّلة مسبقًا في Lighthouse

يمكنك تحميل الموارد مسبقًا من خلال إضافة علامة <link> مع rel="preload" إلى رأس مستند HTML:

<link rel="preload" as="script" href="critical.js">

يخزِّن المتصفّح الموارد المحمَّلة مسبقًا لتصبح متاحة على الفور عند الحاجة إليها. (لا ينفذ النصوص البرمجية أو يطبّق أوراق الأنماط).

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

تؤدي عمليات التحميل المُسبَق غير المستخدَمة إلى ظهور تحذير في وحدة التحكّم في Chrome بعد مرور 3 ثوانٍ تقريبًا على حدث load.

تحذير في &quot;وحدة تحكّم أدوات مطوّري البرامج في Chrome&quot; بشأن الموارد المحمَّلة مسبقًا وغير المستخدَمة

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

تحميل الموارد المحدّدة في CSS مسبقًا

لا يتم اكتشاف الخطوط المحدّدة بقواعد @font-face أو صور الخلفية المحدّدة في ملفات CSS إلى أن ينزّل المتصفّح ملفات CSS هذه ويحلّلها. يضمن تحميل هذه الموارد مسبقًا استرجاعها قبل تنزيل ملفات CSS.

تحميل ملفات CSS مسبقًا

إذا كنت تستخدم نهج CSS المهم، يمكنك تقسيم ملف CSS إلى جزأين. يتم تضمين ملف CSS المهم المطلوب لعرض المحتوى في الجزء العلوي من الصفحة في <head> من المستند، ويتم عادةً تحميل ملف CSS غير المهم بشكل بطيء باستخدام JavaScript. إنّ انتظار تنفيذ JavaScript قبل تحميل ملف CSS غير المهم يمكن أن يؤدي إلى تأخيرات في العرض عندما ينتقل المستخدمون للأعلى أو للأسفل، لذا من الأفضل استخدام <link rel="preload"> لبدء عملية التنزيل في وقت أقرب.

تحميل ملفات JavaScript مسبقًا

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

كيفية تنفيذ سمة rel=preload

إنّ أبسط طريقة لتنفيذ preload هي إضافة علامة <link> إلى <head> في المستند:

<head>
  <link rel="preload" as="script" href="critical.js">
</head>

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

يتم تحميل بعض أنواع الموارد، مثل الخطوط، في الوضع المجهول. بالنسبة إلى هذه العناصر، يجب ضبط السمة crossorigin على preload:

<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>

يمكن أيضًا لعناصر <link> قبول سمة type التي تحتوي على نوع MIME للمورد المرتبط. تستخدِم المتصفّحات قيمة سمة type للتأكّد من عدم تحميل الموارد مسبقًا إلا إذا كان نوع ملفها متوافقًا. إذا كان المتصفّح لا يتيح استخدام نوع المورد المحدّد، سيتجاهل العنصر <link rel="preload">.

يمكنك أيضًا تحميل أي نوع من الموارد مسبقًا من خلال عنوان HTTP‏ Link:

Link: </css/style.css>; rel="preload"; as="style"

من مزايا تحديد preload في عنوان HTTP أنّ المتصفّح لا يحتاج إلى تحليل المستند لاكتشافه، ما يمكن أن يؤدي إلى تحسينات طفيفة في بعض الحالات.

تحميل وحدات JavaScript مسبقًا باستخدام webpack

إذا كنت تستخدِم أداة تجميع وحدات لإنشاء ملفات إنشاء لتطبيقك، عليك التحقّق مما إذا كانت تتيح حقن علامات التحميل المُسبَق. باستخدام الإصدار 4.6.0 من webpack أو إصدار أحدث، يتوفّر التحميل المُسبَق من خلال استخدام التعليقات السحرية داخل import():

import(_/* webpackPreload: true */_ "CriticalChunk")

إذا كنت تستخدم إصدارًا قديمًا من webpack، استخدِم مكوّنًا إضافيًا تابعًا لجهة خارجية، مثل preload-webpack-plugin.

تأثيرات التحميل المُسبَق على "مؤشرات أداء الويب الأساسية"

يُعدّ التحميل المُسبَق ميزة فعّالة لتحسين الأداء تؤثر في سرعة التحميل. يمكن أن تؤدي هذه التحسينات إلى تغييرات في مؤشرات Core Web Vitals لموقعك الإلكتروني، ومن المهم أن تكون على دراية بها.

سرعة عرض أكبر محتوى مرئي (LCP)

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

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

بدلاً من ذلك، ركِّز على بعض الموارد العالية القيمة التي تعرف أنّها ستستفيد من التحميل المُسبَق في موضع مناسب. عند تحميل الخطوط مسبقًا، تأكَّد من عرض الخطوط بتنسيق WOFF 2.0 لتقليل وقت تحميل الموارد قدر الإمكان. بما أنّ تنسيق WOFF 2.0 متوافق بشكلٍ رائع مع المتصفّحات، سيؤدّي استخدام تنسيقات قديمة، مثل WOFF 1.0 أو TrueType (TTF)، إلى تأخير LCP إذا كان المرشح لقياس LCP هو عقدة نصية.

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

متغيّرات التصميم التراكمية (CLS)

يُعدّ التغيُّر التراكمي في التنسيق (CLS) مقياسًا مهمًا بشكلٍ خاص في ما يتعلّق بخطوط الويب، ويتفاعل CLS بشكلٍ كبير مع خطوط الويب التي تستخدِم سمة font-display CSS لإدارة كيفية تحميل الخطوط. للحدّ من التغييرات في تنسيق الصفحة المرتبطة بخطوط الويب، ننصحك باتّباع الاستراتيجيات التالية:

  1. تحميل الخطوط مسبقًا أثناء استخدام القيمة التلقائية block لـ font-display هذا توازن حسّاس. يمكن اعتبار حظر عرض الخطوط بدون خطوط احتياطية مشكلة في تجربة المستخدم. من ناحية أخرى، يؤدي تحميل الخطوط باستخدام font-display: block; إلى إزالة تغييرات التنسيق المرتبطة بخطوط الويب. من ناحية أخرى، لا يزال عليك تحميل خطوط الويب هذه في أقرب وقت ممكن إذا كانت ضرورية لتجربة المستخدم. قد يكون الجمع بين التحميل المُسبَق وfont-display: block; حلًا مقبولًا.
  2. تحميل الخطوط مسبقًا أثناء استخدام القيمة fallback لسمة font-display يمثّل fallback حلًا وسطًا بين swap وblock، وذلك لأنّ فترة حظره قصيرة جدًا.
  3. استخدِم القيمة optional للسمة font-display بدون تحميل مُسبَق. إذا لم يكن خط الويب مهمًا لتجربة المستخدم، ولكن لا يزال يتم استخدامه لعرض قدر كبير من نص الصفحة، ننصحك باستخدام القيمة optional. في الظروف غير المواتية، سيعرض optional نص الصفحة بخط احتياطي أثناء تحميل الخط في الخلفية للتنقّل التالي. والنتيجة النهائية في هذه الحالات هي تحسين متغيّرات التصميم التراكمية (CLS)، لأنّ خطوط النظام ستظهر على الفور، بينما ستؤدي عمليات تحميل الصفحات اللاحقة إلى تحميل الخط على الفور بدون حدوث تغييرات في التصميم.

إنّ مقياس متغيّرات التصميم التراكمية (CLS) هو مقياس يصعب تحسينه في ما يتعلّق بخطوط الويب. كما هو الحال دائمًا، يمكنك إجراء التجارب في المختبر، ولكن عليك الوثوق ببيانات الحقل لتحديد ما إذا كانت استراتيجيات تحميل الخطوط تحسِّن مقياس CLS أو تزيد من سوءه.

مدى استجابة الصفحة لتفاعلات المستخدم (INP)

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

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

الخاتمة

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