في الوحدة الأخيرة حول تحسين تحميل الموارد، تعرّفت على تأثير موارد الصفحات المختلفة، مثل CSS وJavaScript، في سرعة تحميل الصفحة وطريقة تحسينها وطريقة عرضها لزيادة سرعة عرض الصفحة. هذا هو الوقت المثالي للانتقال إلى جانب أكثر تقدمًا من حيث تحميل الموارد، ويشمل ذلك مساعدة المتصفح في تحميلها بشكل أسرع من خلال استخدام تلميحات الموارد.
يمكن لملاحظات الموارد أن تساعد المطوّرين في تحسين وقت تحميل الصفحة بشكل أكبر من خلال إعلام المتصفّح بكيفية تحميل الموارد وتحديد أولوياتها. وكانت أول مجموعة من تلميحات الموارد،
مثل preconnect وdns-prefetch، هي أول مجموعة تم تقديمها.
مع مرور الوقت، تم اتّباع preload وواجهة برمجة التطبيقات Fetch Priority API
لتوفير إمكانات إضافية.
توجّه تعديلات الموارد المتصفّح إلى تنفيذ إجراءات معيّنة مسبقًا، ما يمكن أن يؤدي إلى تحسين أداء التحميل. يمكن لتلميحات الموارد تنفيذ إجراءات مثل إجراء عمليات بحث مبكرة في نظام أسماء النطاقات والاتصال بالخوادم مسبقًا وحتى جلب الموارد قبل أن يكتشفها المتصفح عادةً.
قد يتم تحديد تلميحات الموارد في HTML، وغالبًا ما تكون محدّدة في وقت مبكر من عنصر <head>، أو يتم ضبطها كعنوان HTTP. وبالنسبة إلى نطاق هذه الوحدة، يتم تناول
preconnect وdns-prefetch وpreload، بالإضافة إلى
سلوكيات الجلب المبني على توقُّع التي توفّرها prefetch.
preconnect
يُستخدَم التلميح preconnect لإنشاء اتصال بمصدر آخر، حيث تجلب الموارد المهمة. على سبيل المثال، ربما تستضيف الصور أو مواد العرض
على شبكة توصيل للمحتوى أو غيرها من المصادر المشتركة:
<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 اتصال بخادم متعدد المصادر، بل ينفّذ بحث نظام أسماء النطاقات مسبقًا له فقط. تحدث عملية بحث
نظام أسماء النطاقات عندما تتمّ مطابقة اسم نطاق إلى عنوان IP الأساسي له.
في حين أن طبقات ذاكرات التخزين المؤقت لنظام أسماء النطاقات على مستوى الجهاز والشبكة تساعد في تسريع هذه العملية بشكل عام، إلا أنها تستغرق بعض الوقت.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
عمليات بحث نظام أسماء النطاقات غير مكلفة نوعًا ما، وبسبب تكلفتها المنخفضة نسبيًا،
قد تكون أداة أكثر ملاءمة في بعض الحالات من preconnect. وعلى
الأخص، قد يكون تلميحًا مطلوبًا للموارد لاستخدامه في حالات الروابط التي تنقل إلى مواقع إلكترونية أخرى تعتقد أن المستخدم سيتبعها.
dnstradamus هي إحدى الأدوات التي تنفذ ذلك تلقائيًا باستخدام JavaScript، وتستخدم Intersection Monitorer 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 من خلال السمة 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؟
ما الذي تتيحه لك واجهة برمجة تطبيقات أولوية الجلب؟
<link>
و<img> و<script>.
متى يجب استخدام تلميح prefetch؟
التالي: أداء الصور
ربما تكون قد بدأت الآن في الشعور بثقة كبيرة في معرفتك
باعتبارات الأداء العامة عندما يتعلق الأمر بترميز HTML للصفحة وعنصر <head>
وتلميحات الموارد. ومع ذلك، هناك تحسينات إضافية خاصة بأنواع الموارد المختلفة التي يتم تحميلها بشكل شائع في الصفحات. بعد ذلك، تتناول الوحدة التالية أداء الصور التي يمكنها مساعدتك على تحميل صور موقعك الإلكتروني بأسرع وقت ممكن، بغض النظر عن جهاز المستخدم.