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

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 باعتدال وتحميل الموارد الأكثر أهمية فقط مسبقًا.

تؤدي عمليات التحميل المُسبق غير المُستخدَمة إلى ظهور تحذير متعلّق بوحدة التحكّم في 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")

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

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

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

سرعة عرض أكبر محتوى مرئي (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 باعتدال وقياس التأثير على أرض الواقع.