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

Houssein Djirdeh
Jeremy Wagner
Milica Mihajlija

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

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

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

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

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

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

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

تدقيق طلبات التحميل المُسبق في Lighthouse

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

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

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

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

تؤدي عمليات التحميل المُسبق غير المستخدَمة إلى ظهور تحذير Console في 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 بشكل مقتصد وقياس تأثيره في العالم الحقيقي.