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

Houssein Djirdeh
Jeremy Wagner
Milica Mihajlija

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

طريقة عمل التحميل المُسبق

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

لقطة شاشة للوحة شبكة &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 وسمات أخرى.

يتم تحميل بعض أنواع الموارد، مثل الخطوط، في وضع إخفاء الهوية. في هذه الحالة، عليك ضبط السمة 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 باستخدام حزمة الويب

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

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

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

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

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

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

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

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

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

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

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

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

  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 باعتدال وقِس التأثير على أرض الواقع.