كيفية التحميل المسبق للطلبات الرئيسية للحصول على عناصر أساسية أفضل للويب

ليست كل موارد موقعك على نفس القدر من الأهمية.

نعم ، هناك حاجة إليها جميعًا لكي يظهر موقع الويب الخاص بك ويعمل بشكل لا تشوبه شائبة ، ولكن عندما يتعلق الأمر بأدائه ، يجب أن يكون لبعضها أولوية أعلى.

بخلاف ذلك ، فإنك تخاطر بطء تحميل الصفحات وقائمة طويلة من التحذيرات في تقرير PageSpeed ​​Insights (PSI) الخاص بك.

أحدها -طلبات مفتاح التحميل المسبق.

في السطور التالية ، ستتعرف على الطلبات الرئيسية ، ولماذا من المهم إصلاح تحذير "طلبات مفتاح التحميل المسبق" ، وأخيرًا وليس آخرًا - كيفية القيام بذلك.

• ماذا تعني طلبات مفتاح التحميل المسبق
• كيف يؤدي التحميل المسبق للأصول الهامة إلى تحسين سرعة موقعك
• كيفية تحديد الطلبات الرئيسية التي يجب تحميلها مسبقًا
• كيفية إصلاح تحذير طلبات مفتاح التحميل المسبق
• تحميل طلبات المفتاح مسبقًا تلقائيًا

واصل القراءة.

ماذا تعني طلبات مفتاح التحميل المسبق؟

من خلال التحميل المسبق لطلبات المفاتيح ، فإنك تخبر المتصفح بأهم الأصول التي يجب تنزيلها مسبقًا. يتيح ذلك تحميل الملفات الأكثر أهمية بشكل أسرع ، خاصةً عندما يتم اكتشافها وتنزيلها لاحقًا في العملية.

لكن هذا يثير السؤال:

ما الذي يجعل الطلب بالغ الأهمية؟

الطلب المهم هو مورد معروض في إطار العرض الأولي للصفحة (أو في الجزء المرئي من الصفحة كما نرغب في الأسواق أن نطلق عليه).

على سبيل المثال ، هذا ما أراه عندما أقوم بتحميل الصفحة الرئيسية لـ NitroPack على الكمبيوتر المحمول الخاص بي:

تعتبر جميع الموارد التي يتم تحميلها في الجزء العلوي من الصفحة حرجة. ومن ثم ، يجب تنزيلها وتقديمها بأولوية أعلى بواسطة المتصفح لتزويد المستخدم بتجربة تحميل فورية.

بشكل عام ، تعد خوارزميات المتصفحات جيدة جدًا في تحديد أولويات الموارد الأكثر أهمية للصفحة. في الواقع ، عندما يقوم المستعرض بتنزيل مورد ، فإنه يعينه أولوية:

• الأعلى
• عالي
• واسطة
• قليل
• أدنى

ومع ذلك ، بصفتك مالك / مطور موقع الويب ، لديك رؤى قيمة حول الموارد التي تعتبر أكثر أهمية من غيرها. وبالتالي ، من خلال تحميلها مسبقًا ، لن تقوم فقط بتمرير تحذير PSI ولكن أيضًا ستعزز الأداء العام وتجربة المستخدم.

إليك الطريقة…

كيف يؤدي تطبيق إصلاح طلبات مفتاح التحميل المسبق إلى تحسين أدائك

الحقيقة هي:

إصلاح تحذير "طلبات مفتاح التحميل المسبق" لمجرد نقل تحذير آخر إلى فئة "تم اجتيازه" لا يستحق كل هذا العناء.

ومع ذلك ، فإن التحميل المسبق لأهم الموارد لصفحة الويب الخاصة بك سيكون له تأثير كبير على موقعك:

• حيوية الويب الأساسية
• نتيجة الأداء
• أداء متوقع

دعونا نرى كيف يكون ذلك ممكنا.

التحميل المسبق وأكبر طلاء محتوى (LCP)

يقيس Largest Contentful Paint المدة التي يستغرقها أكبر عنصر في الجزء المرئي من الصفحة ليتم تحميله على الصفحة.

تشمل أنواع الموارد التي تعتبر بشكل شائع عنصر LCP ما يلي:

• الصور ؛
• علامات الصورة ؛
• الصور المصغرة الفيديو؛
• صور الخلفية مع CSS ؛
• عناصر النص.

كلهم مرشحون رائعون للتحميل المسبق.

وسيساعدك توصيلها بشكل أسرع على تحسين مواقع الويب المتري لـ Core Web Vitals التي تعاني أكثر من غيرها.

علاوة على ذلك ، يمثل LCP 25٪ من مجموع نقاط الأداء الخاصة بك. لذا فإن تعزيزه سيؤدي حتمًا إلى نقل درجاتك من الأحمر إلى الأخضر.

احصل على درجات LCP من الأحمر إلى الأخضر بنقرة زر واحدة. قم بتثبيت NitroPack اليوم →

التحميل المسبق وأول رسم محتوى (FCP)

يقيس First Contentful Paint (FCP) الوقت الذي يستغرقه المتصفح لتصور الجزء الأول من محتوى DOM (على سبيل المثال ، صورة ، SVG ، عنصر قماش غير فارغ) على الصفحة.

في حين أن التحميل المسبق للرسوم المتحركة للتحميل أو شعار صفحتك (يمكن أن يؤدي أيضًا إلى تشغيل FCP) قد يبدو غير مهم ، إلا أنه مهم لتجربة المستخدم.

عندما يقوم المستعرض بتحميل عنصر FCP على الفور ، فإنه يرسل استجابة مباشرة إلى المستخدم تتم معالجة مدخلاته ويتم تحميل الموقع.

إذا ظلت الصفحة فارغة لبضع ثوانٍ قبل تحميلها ، فلن يعرف المستخدمون ما إذا كان هناك شيء ما يحدث أم لا. ويمكنك تخمين خطوتهم التالية:

وثب، ارتداد!

بمعنى آخر ، يعد التحميل المسبق لعنصر FCP أمرًا حيويًا لإبقاء زوارك سعداء ، والأهم من ذلك - على موقع الويب الخاص بك.

علاوة على ذلك ، يمثل FCP 10٪ من نقاط الأداء الخاصة بك ، لذلك ستحصل أيضًا على دفعة في هذا الجانب.

التحميل المسبق والأداء المتصور

لقد ذكرنا الأداء الملحوظ عدة مرات. إذا كنت تتساءل عن معنى ذلك ، فإليك التعريف:

"الأداء المدرك هو مقياس شخصي لأداء موقع الويب والاستجابة والموثوقية. بمعنى آخر ، مدى السرعة التي يبدو بها موقع الويب للمستخدم. من الصعب تحديد وقياس السرعة الفعلية للعملية ، ولكن ربما يكون الأمر أكثر أهمية ".

في بعض الحالات ، يكون إدراك مدى سرعة وسلاسة تحميل الصفحات والاستجابة لتفاعل المستخدم أكثر أهمية من الوقت الفعلي المطلوب لجلب الموارد.

عن طريق التحميل المسبق للموارد الرئيسية ، فإنك تمنح المستخدمين هذا التصور لصفحة تحميل أسرع. يبدو أن المحتوى يتم تحميله بسرعة وسلاسة ، مما يخلق تجربة تصفح أكثر سلاسة. يمكن للمستخدمين التفاعل مع الصفحة في وقت أقرب دون انتظار جلب الموارد الهامة وتحميلها.

يمكن أن يؤدي هذا الأداء المتصور المحسن إلى

• زيادة مشاركة المستخدم
• معدلات ارتداد مخفضة
• الرضا العام عن الموقع

كيفية تحديد الطلبات الأكثر أهمية التي يجب تحميلها مسبقًا

تُعد PageSpeed ​​Insights من Google الطريقة الأسهل والأكثر فاعلية لتحديد الطلبات الرئيسية للتحميل المسبق.

عند اختبار أداء عنوان URL الخاص بك ، تأكد من مراجعة قسم الفرص للحصول على توصيات. ابحث تحديدًا عن اقتراح بعنوان "طلب مفتاح التحميل المسبق" ، على غرار المثال الموضح:

بدلاً من ذلك ، يمكنك إجراء بعض الاختبارات باستخدام Chrome DevTools. لبدء العملية ، قم بتحميل الصفحة التي تريد اختبارها وانقر فوق فحص> المنارة.

بعد ذلك ، اختر ما إذا كنت تريد اختبار إصدار الجوال أو إصدار سطح المكتب من صفحتك وانقر فوق "تحليل" تحميل الصفحة:

بعد اكتمال الاختبار ، قم بالتمرير لأسفل وابحث عن تحذير "طلبات مفتاح التحميل المسبق".

ملاحظة: نظرًا لأن Google PageSpeed ​​Insights يستخدم Lighthouse ، فإن اختبار صفحتك من خلال PSI أو Chrome DevTools سيؤدي إلى نفس النتائج. الأمر متروك لك بالطريقة التي تفضلها.

لفهم كيف تحدد Lighthouse بالضبط الموارد المناسبة للتحميل المسبق ، دعنا نلقي نظرة على المثال التالي.

تبدو سلسلة الطلبات الحرجة لصفحتك على النحو التالي:

> index.html

>> app.js

>>> styles_custom.css

>>>> ui_custom.js

في ملف index.html ، تقوم بتضمين علامة script src = "app.js" . عندما يتم تنفيذ ملف app.js ، فإنه يطلق استدعاء fetch () لتنزيل styles_custom.css و ui_custom.js . لن يتم عرض الصفحة بالكامل حتى يتم تنزيل هذين المصدرين ، وتحليلهما ، وتنفيذهما. تعتبر هذه الملفات موارد تمنع العرض.

ومن ثم ، ستحدد Lighthouse أنماط_custom.css و ui_custom.js على أنها الموارد ذات الصلة.

تكمن المشكلة في أن المتصفح لا يدرك الملفين الأخيرين إلا بعد تنزيل app.js وتحليله وتنفيذه. ومع ذلك ، فأنت تعلم أن هذه الموارد مضمنة في الجزء العلوي من الصفحة ويجب عليك تنزيلها في أسرع وقت ممكن.

لمنحهم أولوية أعلى ، يمكنك استخدام link rel = "preload" .

كيفية إصلاح تحذير "طلب مفتاح التحميل المسبق"

لإصلاح التحذير ، قم بتطبيق الرابط rel = سمة التحميل المسبق على الموارد الهامة التي تم وضع علامة عليها بواسطة PSI.

ببساطة ، يوجه الأمر link rel = preload المتصفحات لجلب مورد مهم في وقت أبكر مما يكتشفونه عادةً.

التحميل المسبق تعريفي ، على عكس تلميحات الموارد الأخرى ، مثلالجلب المسبقوالتوصيل المسبق التي تقدم اقتراحات. هذا يعني أن المستعرضات يجب أن تجلب المورد المحدد الذي تعتبره حيويًا لتجربة الصفحة.

يمكنك تحميل الموارد مسبقًا عن طريق إضافة رابط rel = preload tag إلى رأس مستند HTML الخاص بك.

على سبيل المثال ، إليك كيف يبحث مقتطف الشفرة عن شعار تم تحميله مسبقًا:

ربما لاحظت أنه بصرف النظر عن التحميل المسبق والمورد ، هناك سمة ثالثة - مثل .

تشير السمة as إلى نوع محتوى المورد. من خلال عدم إضافة " as " صالح عند تحديد ما سيتم تحميله مسبقًا ، فإنك تخاطر بجلب الأصل مرتين.

علاوة على ذلك ، فإن تضمين السمة as يساعد المتصفح على تعيين أولوية المورد الذي تم جلبه مسبقًا وفقًا لنوعه وتحديد ما إذا كان موجودًا بالفعل في ذاكرة التخزين المؤقت.

فيما يلي قائمة كاملة بالقيم التي يمكنك تحديدها:

هام: تعد متصفحات الويب الحديثة جيدة في تحديد أولويات الموارد ، لذا فإن الاستخدام المفرط للرابط rel = preload قد يؤدي إلى نتائج سلبية. تأكد من استخدامه باعتدال وعند الحاجة إليه فقط.

تحميل طلبات المفاتيح مسبقًا تلقائيًا باستخدام NitroPack

إذا كنت تبحث عن طريقة أسهل وتلقائية لتحميل مواردك الهامة مسبقًا وتحسين "أساسيات الويب الأساسية" لموقعك ، ودرجة الأداء ، والأداء المتصور ، فعليك تجربة NitroPack.

أحد الأسباب الرئيسية التي تجعل NitroPack هو الرائد في نتائج Core Web Vitals لأكثر من 180.000 موقع هو آلية تحميل الموارد الخاصة بنا.

لا يعتمد NitroPack على تقنيات المتصفح المضمنة. بدلاً من ذلك ، يستخدم أداة تحميل الموارد الخاصة بنا ، والتي تعيد ترتيب كيفية تغذية الموارد إلى الخيط الرئيسي وتحميل العديد من الأصول مسبقًا. يستفيد هذا من الطبيعة متعددة النواة لوحدة المعالجة المركزية الحديثة عن طريق تفريغ المهام بعيدًا عن الخيط الرئيسي.

علاوة على ذلك ، تعمل خدمتنا تلقائيًا على تحسين تسليم CSS لموقعك عن طريق إنشاء CSS حرج لكل صفحة لكل تخطيط. ينتج عن هذا أداء أفضل مدركًا وفعليًا.

لكن أفضل جزء هو - استخدام NitroPack خالي من المخاطر.

كيف ذلك؟

أولاً ، يمكنك اختبار NitroPack دون إنفاق سنت واحد للحصول على خطتنا المجانية.

ثانيًا ، يعمل NitroPack على نسخ ملفات موقعك ، مما يحافظ على سلامة النسخ الأصلية بنسبة 100٪.

ببساطة:

يمكنك تجاوز جميع منافسيك من خلال امتلاك أسرع موقع تحميل في الصناعة دون تحريك إصبع والمخاطرة بأي شيء.

يبدو انها صفقة جيدة جدا بالنسبة لي!