في الوحدة الأخيرة حول تحسين تحميل الموارد، تعرّفت على تأثير موارد الصفحات المختلفة، مثل 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
هي 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>
وتلميحات الموارد. ومع ذلك، هناك تحسينات إضافية خاصة بأنواع الموارد المختلفة التي يتم تحميلها بشكل شائع في الصفحات. بعد ذلك، تتناول الوحدة التالية أداء الصور التي يمكنها مساعدتك على تحميل صور موقعك الإلكتروني بأسرع وقت ممكن، بغض النظر عن جهاز المستخدم.