في الوحدة الأخيرة حول تحسين تحميل الموارد، تعرفت على مدى أهمية تحميل يمكن لموارد الصفحة مثل CSS وJavaScript أن تؤثر في سرعة تحميل الصفحة يمكنك تحسينها وتقديمها لتسريع عرض الصفحة. هذا هو الوقت المثالي للانتقال إلى جانب أكثر تقدمًا من الموارد ويشمل ذلك مساعدة المتصفح في تحميلها بشكل أسرع عن طريق استخدام على الموارد.
يمكن أن تساعد تعديلات الموارد المطوّرين في تحسين وقت تحميل الصفحات بشكل أكبر من خلال إعلام
المتصفح بكيفية تحميل الموارد وتحديد أولوياتها. يشير هذا المصطلح إلى مجموعة أوّلية من الموارد.
كانت التلميحات مثل preconnect وdns-prefetch أول ما تم تقديمه.
مع ذلك، بمرور الوقت، اتّبع كل من preload وواجهة برمجة التطبيقات Fetch Priority API ما يلي:
وتوفر إمكانات إضافية.
تساعد تلميحات الموارد في توجيه المتصفح لتنفيذ إجراءات معينة مسبقًا قد تؤدي إلى تحسين أداء التحميل يمكن للتلميحات تنفيذ إجراءات مثل مثل إجراء عمليات بحث مبكرة لنظام أسماء النطاقات، والاتصال بالخوادم مسبقًا، وحتى الموارد قبل أن يكتشفها المتصفح عادةً.
قد يتم تحديد تعديلات الموارد في HTML، وغالبًا ما يتم تحديدها في بداية <head>
عنصر — أو ضبطه باعتباره عنوان HTTP. بالنسبة لنطاق هذه الوحدة،
تشمل الخدمات preconnect وdns-prefetch وpreload، بالإضافة إلى
السلوك المبني على توقُّع الذي يوفّره prefetch أيضًا.
preconnect
تُستخدَم التلميح preconnect للربط بمصدر آخر من
التي تجلب فيها الموارد المهمة. على سبيل المثال، ربما تستضيف موقعك
الصور أو مواد العرض على شبكة توصيل المحتوى (CDN) أو غيرها من مصادر متعددة:
<link rel="preconnect" href="https://example.com">
عند استخدام preconnect، تتوقع أنّ المتصفّح يخطط للاتصال
خادم محدد المصدر من مصادر متعددة في المستقبل القريب جدًا، كما أن المتصفح
الاتصال في أسرع وقت ممكن، ومن الناحية المثالية قبل انتظار
محلل HTML أو ماسح ضوئي للتحميل المسبق لإجراء ذلك.
إذا كان لديك قدر كبير من الموارد من مصادر متعددة على إحدى الصفحات، يمكنك استخدام preconnect.
لتلك الموارد الأكثر أهمية في الصفحة الحالية.
preconnect
التخفيف من خلال إنشاء اتصالات في وقت أقرب، وليس في وقت
العثور على المورد المتعدد المصادر.
إحدى حالات الاستخدام الشائعة لـ preconnect هي Google Fonts. اقتراحات Google Fonts
من preconnect إلى نطاق https://fonts.googleapis.com الذي يعرض إعلانات
تعريفات @font-face وإلى النطاق https://fonts.gstatic.com الذي
تعرض ملفات الخطوط.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
تُستخدَم السمة crossorigin للإشارة إلى ما إذا كان يجب مراعاة
باستخدام مشاركة الموارد المتعدّدة المصادر (CORS). عند استخدام
تلميح preconnect، إذا كان المورد الذي يتم تنزيله من المصدر يستخدم
سياسة مشاركة الموارد المتعددة المصادر (CORS) مثل ملفات الخطوط، عليك بعد ذلك إضافة السمة crossorigin إلى
تلميح preconnect
dns-prefetch
وبينما يمكن أن يؤدي فتح الاتصالات للخوادم المشتركة المصدر مبكرًا إلى حدوث
تحسين وقت التحميل الأولي للصفحة، فقد لا يكون من المعقول أو المحتمل
إجراء اتصالات بالعديد من الخوادم متعددة المصادر في آنٍ واحد. إذا كنت قلقًا
بأنك قد تفرط في استخدام preconnect، يمكنك تعديل تلميح الموارد الأقل تكلفة
تلميح dns-prefetch
وفقًا لاسمها، لا ينشئ dns-prefetch اتصالاً بمصادر متعددة.
ولكن بدلاً من ذلك، يجري بحث نظام أسماء النطاقات عنه بشكل مسبق. A نظام أسماء النطاقات
يحدث البحث عندما تتم مطابقة اسم النطاق مع عنوان IP الأساسي الخاص به.
وفي حين أن طبقات ذاكرات التخزين المؤقت لنظام أسماء النطاقات على مستويات الجهاز والشبكة تساعد في جعل هذا
وعملية المعالجة سريعة بشكل عام، إلا أنها لا تزال تستغرق بعض الوقت.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
تُعد عمليات بحث نظام أسماء النطاقات غير مكلفة إلى حد ما، ونظرًا لتكلفتها الصغيرة نسبيًا،
وقد تكون أداة أكثر ملاءمة في بعض الحالات من preconnect. ضِمن
على وجه الخصوص، قد يكون تلميحًا يُنصح باستخدامه للمورد في حالات الروابط التي
الانتقال إلى مواقع الويب الأخرى التي تعتقد أنه من المرجح أن يتابعها المستخدم.
dnstradamus هي إحدى الأدوات التي تُجري ذلك تلقائيًا باستخدام JavaScript،
ويستخدم Intersection Observer API لإدخال تلميحات dns-prefetch في
رمز HTML للصفحة الحالية عند تمرير روابط تؤدي إلى مواقع إلكترونية أخرى إلى صفحة
إطار العرض.
preload
يُستخدَم التوجيه preload لبدء طلب مبكر لأحد الموارد.
المطلوبة لعرض الصفحة:
<link rel="preload" href="/lcp-image.jpg" as="image">
ويجب أن تقتصر توجيهات preload على الموارد المهمة التي يتم اكتشافها في وقت متأخر.
إنّ حالات الاستخدام الأكثر شيوعًا هي ملفات الخطوط وملفات CSS التي تم جلبها من خلال @import.
التعريفات أو موارد CSS background-image التي يُرجح أن تكون الأكبر
استخدام تكنولوجيا "سرعة عرض المحتوى على الصفحة" (LCP) في هذه الحالات، لن يتم نقل هذه الملفات
التي اكتشفها الماسح الضوئي للتحميل المسبق كما تتم الإشارة إلى المورد في وحدة خارجية
الموارد.
على غرار preconnect، يتطلب التوجيه preload السمة crossorigin
في حال التحميل المُسبق لمورد CORS، مثل الخطوط. إذا لم تضِف
بسمة crossorigin، أو إضافتها للطلبات غير المستندة إلى سياسة مشاركة الموارد المتعددة المصادر (CORS)، ثم مرجع
يتم تنزيله بواسطة المتصفح مرتين، مما يؤدي إلى إهدار معدل نقل البيانات الذي كان من الممكن
من الأفضل بذله على موارد أخرى.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
في مقتطف HTML السابق، يتم توجيه المتصفح إلى التحميل المُسبق.
/font.woff2 باستخدام طلب CORS، حتى في حال كان /font.woff2 على النطاق نفسه.
prefetch
يتم استخدام التوجيه prefetch لبدء طلب ذي أولوية منخفضة
المورد المحتمل استخدامه في عمليات التنقل المستقبلية:
<link rel="prefetch" href="/next-page.css" as="style">
ويتبع هذا التوجيه إلى حدّ كبير التنسيق نفسه الذي يتبعه التوجيه preload، ولكن
تستخدم السمة rel للعنصر <link> القيمة "prefetch" بدلاً من ذلك.
على عكس التوجيه preload، يعتمد prefetch إلى حد كبير على توقُّع.
أنك تشرع في استرجاع مورد لعملية تنقّل مستقبلية
أو قد لا يحدث.
وهناك حالات يمكن أن تكون فيها prefetch مفيدة، على سبيل المثال، إذا كنت قد
وحددت تدفق مستخدم على موقعك الإلكتروني
يتابعه معظم المستخدمين لإكماله
يمكن أن يساعد prefetch لمورد بالغ الأهمية في ما يخص هذه الصفحات المستقبلية في
وتقليل أوقات التحميل لها.
واجهة Fetch Priority API
يمكنك استخدام السمة Fetch Priority API من خلال السمة fetchpriority لإجراء ما يلي:
زيادة أولوية المورد. يمكنك استخدام السمة مع <link>
العنصرَين <img> و<script>.
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
بشكل افتراضي، يتم جلب الصور بأولوية أقل. بعد التخطيط، إذا لم
في إطار العرض الأولي، تزيد الأولوية إلى
أولوية عالية. في مقتطف HTML السابق، fetchpriority على الفور
لتوجيه المتصفِّح إلى تنزيل صورة LCP الأكبر حجمًا ذات أولوية عالية،
بينما يتم تنزيل الصور المصغرة الأقل أهمية بأولوية أقل.
تُحمِّل المتصفِّحات الحديثة الموارد على مرحلتَين. يتم حجز المرحلة الأولى
الموارد المهمة وينتهي بعد تنزيل جميع النصوص البرمجية للحظر
وتنفيذه. وخلال هذه المرحلة، قد تتأخر الموارد ذات الأولوية المنخفضة عن
التنزيل. من خلال استخدام fetchpriority="high"، يمكنك زيادة أولوية
، بما يمكّن المتصفح من تنزيله خلال المرحلة الأولى.
عروض توضيحية للتلميحات المتعلّقة بالموارد
اختبِر معلوماتك
ما هي وظيفة تلميح المورد preconnect؟
ما هي الإمكانات التي تتيحها واجهة برمجة التطبيقات Fetch Priority API؟
<link>.
العنصرَين <img> و<script>.
متى يجب استخدام تلميح prefetch؟
التالي: أداء الصور
الآن، ربما بدأت في الشعور بثقة تامة بشأن معرفتك
لاعتبارات الأداء العامة في ما يخص HTML للصفحة، فإن <head>
وتلميحات الموارد المفيدة. ومع ذلك، هناك تحسينات إضافية
وتكون خاصة بأنواع الموارد المختلفة التي يتم تحميلها على الصفحات عادةً. بعد ذلك،
سنتناول أداء الصور في الوحدة التالية، والتي يمكن أن تساعدك في
تحميل صور موقعك الإلكتروني بأسرع ما يمكن، بغض النظر عن
جهاز المستخدم.