كيفية تحميل طلبات المفاتيح مسبقًا في WordPress

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

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

في دليل اليوم ، سنناقش معنى التحميل المسبق للطلبات الرئيسية ، جنبًا إلى جنب مع فوائد الأداء المحتملة لموقعك على الويب. بعد ذلك ، سنشرح كيفية القيام بذلك على موقع WordPress الخاص بك باستخدام خطوط Google و Font Awesome و CSS و JavaScript.

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

عندما يزور شخص ما موقع الويب الخاص بك ، سيرسل متصفحه طلبات HTTP متعددة إلى خادم موقعك ، ويطلب منه الملفات التي يتكون منها المحتوى الخاص بك. سيستغرق الخادم وقتًا معينًا لبدء الاستجابة لهذه الطلبات وإرسال المعلومات إلى المتصفح ، والذي يشار إليه باسم الوقت إلى البايت الأول (TTFB).

بعد ذلك ، سيبدأ المتصفح في تنزيل المحتوى (PHP و JavaScript و CSS) من ملفات موقعك ويعرضه لعرض الصفحات القابلة للعرض (HTML) في الواجهة الأمامية. بمجرد اكتمال هذه العملية ، يمكن للزائر رؤية صفحة الويب المحملة بالكامل.

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

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

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

ما هي فوائد التحميل المسبق لطلبات المفتاح؟

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

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

هذه هي ثلاثة عناصر أساسية للويب:

• أكبر رسم محتوى (LCP): المدة التي يستغرقها تحميل أكبر عنصر في صفحتك.
• تأخير الإدخال الأول (FID): المدة التي يستغرقها المتصفح في الاستجابة لتفاعل المستخدم مع المحتوى الخاص بك.
• إزاحة التنسيق التراكمي (CLS) : مقدار تحرك العناصر أثناء تحميل الصفحة.

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

بالإضافة إلى ذلك ، يمكن أن يؤثر التحميل المسبق على درجة First Contentful Paint (FCP). يقيس هذا المقياس الوقت الذي يستغرقه عرض أول عنصر HTML في صفحتك. إذا كان بإمكانك تحميل هذا العنصر مسبقًا ، فسيكون المتصفح قادرًا على عرض الأجزاء الأولية من المحتوى الخاص بك بسرعة أكبر.

علاوة على ذلك ، تفضل محركات البحث ، مثل Google ، المحتوى التفاعلي سريع التحميل. لذلك ، بالإضافة إلى توفير تجربة مستخدم أفضل ، فإن تحسين مقاييس الأداء هذه يمكن أن يعزز تحسين محرك البحث (SEO) لموقع الويب الخاص بك.

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

هل هناك عيوب في التحميل المسبق لطلبات المفتاح؟

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

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

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

كيفية التحقق مما إذا كان موقعك يقوم بتحميل طلبات المفاتيح مسبقًا

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

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

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

إذا كنت تفضل عدم التنقل ذهابًا وإيابًا بين موقعك و PageSpeed ​​Insights ، ففكر في تثبيت ملحق Google Lighthouse Chrome. يمكّنك من إنشاء تقارير من داخل المتصفح وعرض مقاييس أداء الصفحة.

وبالمثل ، يمكن لـ GTMetrix إنشاء تقارير أداء مفصلة لأي موقع. يتيح لك تحليل الصفحات من مواقع متعددة وتتبع أدائها بمرور الوقت.

ضمن علامة التبويب هيكل GTMetrix ، ستتمكن من معرفة ما إذا كان تحميل طلبات المفتاح مسبقًا يمكن أن يساعد في أداء موقعك.

كيفية تحميل طلبات المفاتيح مسبقًا في WordPress

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

هذا هو المكان الذي يأتي فيه Jetpack VaultPress Backup في متناول يدي. يقوم هذا المكون الإضافي سهل الاستخدام تلقائيًا بإنشاء نسخ احتياطية شاملة لجميع بياناتك ، بما في ذلك الملفات وجداول قاعدة البيانات ومعلومات منتج WooCommerce. يتم حفظ هذه النسخ الاحتياطية في الوقت الفعلي وتخزينها بأمان في السحابة. يمكنك استعادتها ببضع نقرات - حتى إذا كنت في حالة تنقل أو لا يمكنك الوصول إلى موقعك على الإطلاق.

1. الخطوط

في بعض الأحيان ، يمكن دفن الخطوط داخل ملفات أخرى على موقع الويب الخاص بك ، بما في ذلك ملفات CSS و JavaScript. لسوء الحظ ، يمكن أن يؤدي هذا إلى إبطاء عملية عرض الصفحة.

لتحميل الطلبات مسبقًا باستخدام الخطوط في WordPress ، انسخ هذا الرمز والصقه في قسم <head> في صفحتك:

 <head> <!-- ... --> <link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin> </head>

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

2. خطوط جوجل

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

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

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

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

ما عليك سوى إضافة الشفرة التالية إلى قسم <head> في صفحتك:

 <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin /> <link rel=”preload” as=”style” href=”$fontURL&display=swap” /> <link rel=”stylesheet” href=”$fontURL&display=swap” media=”print” onload=”this.media='all'” /> <noscript> <link rel=”stylesheet” href=”$fontURL&display=swap” /> </noscript>

ضمن التعليمات البرمجية الخاصة بك ، ستحتاج إلى استبدال "$ fontURL" بوصلة إلى خط Google الخاص بك. على سبيل المثال ، قد يبدو كالتالي:

https://fonts.googleapis.com/css2؟family=Tangerine:ital،wght@0،400؛0،700؛1400؛1700

بعد ذلك ، تأكد فقط من حفظ تعديلاتك!

3. خط رائع

Font Awesome هو مورد رائع للرموز والخطوط المخصصة ، مع كل من الخيارات المجانية والمتميزة داخل مكتبته. يمكنك استخدام بعض هذه الرموز لتحسين التصميم داخل القوائم والرؤوس والتذييلات ومناطق المحتوى.

مثل Google Fonts ، يمكن أن يكون التحميل المسبق لأيقونات Font Awesome فكرة جيدة لتسريع وقت تحميل الصفحة المتصور. ما عليك سوى إضافة هذا الرمز إلى قسم <head> من الصفحة:

 <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

ستحتاج إلى تبديل مسار الملف للخط أو الرمز الذي تستخدمه على موقع الويب الخاص بك. ثم احفظ تغييراتك!

4. CSS

Cascading Style Sheets (CSS) هي لغة تصميم تعمل مع HTML لتحديد نمط صفحة الويب وعرضها. باستخدام CSS المخصص ، يمكنك تغيير مظهر العناصر المختلفة بسرعة.

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

لحسن الحظ ، هناك طريقة سهلة لتحميل CSS مسبقًا. ما عليك سوى إضافة هذا الرمز إلى قسم <head> في صفحتك:

 <head>  <link rel="preload" href="styles.css" as="style" /> </head>

تأكد من استبدال "styles.css" باسم ورقة الأنماط. بالإضافة إلى ذلك ، ضع في اعتبارك أنه على الرغم من أن هذا الرمز سيعمل في Google Chrome ، إلا أنه غير مدعوم من قبل جميع المتصفحات.

5. جافا سكريبت

JavaScript هي لغة أخرى من لغات البرمجة النصية الشائعة المستخدمة في WordPress. يتيح لك إنشاء محتوى ديناميكي مثل الرسوم المتحركة وتحريك الصور المتحركة وتحديث الخلاصات تلقائيًا.

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

كما هو الحال مع CSS ، ستحتاج فقط إلى إضافة هذا السطر البسيط من التعليمات البرمجية إلى قسم <head> من الصفحة:

 <head>  <link rel="preload" href="ui.js" as="script" /> </head>

كما في السابق ، استبدل "ui.js" باسم ملف JavaScript ، واحفظ التغييرات.

المكافأة: قم بتثبيت مكون إضافي مجاني لتحسين Core Web Vitals

طلبات التحميل المسبق هي مجرد تقنية واحدة يمكنك استخدامها لتحسين نتائج Core Web Vitals لموقع WordPress الخاص بك.

إذا كنت تبحث عن حل أكثر شمولاً (ومجانيًا!) ، ففكر في تثبيت Jetpack Boost. تم تطوير هذه الأداة بواسطة Automattic ، نفس الشركة وراء WordPress.com.

يقوم هذا البرنامج المساعد سهل الاستخدام بفحص موقع الويب الخاص بك بالكامل ويمنحك درجة على أجهزة سطح المكتب والأجهزة المحمولة. علاوة على ذلك ، فإن Jetpack Boost ليس مفيدًا فقط لثلاثة عناصر أساسية للويب. يمكن لأساليب التحسين الخاصة به تحسين المقاييس الأخرى ، بما في ذلك وقت التفاعل (TTI) وإجمالي وقت الحظر (TBT).

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

بدلاً من ذلك ، يمكن لـ Jetpack Complete نقل موقع WordPress الخاص بك إلى مستوى جديد تمامًا. تحتوي هذه الخطة على أدوات متعددة للأداء ، بما في ذلك الوصول إلى شبكة توصيل محتوى الصور (CDN) الخاصة بـ Jetpack ، والتي يمكنها توفير عرض النطاق الترددي وتحسين وقت تحميل صفحتك. بالإضافة إلى ذلك ، ستحصل على أدوات أمان ونمو WordPress متقدمة.

الأسئلة المتداولة حول التحميل المسبق لطلبات المفتاح

في هذه المرحلة ، يجب أن يكون لديك فهم جيد لكيفية تحميل طلبات المفاتيح مسبقًا في WordPress. ومع ذلك ، سنستعرض بعض الأسئلة المتداولة للتأكد فقط!

هل تؤدي طلبات التحميل المسبق إلى تحسين تجربة المستخدم؟

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

هل تؤدي طلبات التحميل المسبق إلى تحسين "حيوية الويب الأساسية"؟

يمكن أن يؤدي التحميل المسبق للطلبات الرئيسية في WordPress إلى تحسين نتائج Core Web Vitals الخاصة بك ، لا سيما عندما يتعلق الأمر بـ Largest Contentful Paint (LCP). في الواقع ، عندما تقرر العناصر التي تريد تحميلها مسبقًا ، سيكون من الحكمة تضمين المحتوى "الأكبر" أو "الرئيسي" ، لأن هذا هو أكثر ما يمكن أن يستفيد منه على الأرجح.

تحميل طلبات المفتاح مسبقًا مقابل التحميل المسبق للأصول الهامة

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

التحميل المسبق مقابل التوصيل المسبق مقابل الجلب المسبق

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

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

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

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

ما الذي يمكنني فعله أيضًا لتحسين أداء موقعي؟

يمكن أن تساعد المهام المختلفة في تحسين أداء موقع WordPress الخاص بك ، بما في ذلك:

• استخدام CDN لخدمة المحتوى الخاص بك للزوار في جميع أنحاء العالم
• تأجيل (أو حذف) CSS غير المستخدمة
• القضاء على موارد حظر العرض
• تصغير CSS والموارد الأخرى
• عمل عدد أقل من طلبات HTTP

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

قم بتحسين أداء موقع WordPress الخاص بك عن طريق التحميل المسبق لطلبات المفتاح

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

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

يعد التحميل المسبق للطلبات الرئيسية خطوة واحدة فقط نحو تحسين أداء موقعك. باستخدام Jetpack Boost ، يمكنك بسهولة تكوين موقع الويب الخاص بك لتحميل الصور البطيئة وتأجيل JavaScript غير الأساسية والمزيد. والأفضل من ذلك ، أن البرنامج المساعد مجاني للاستخدام. تحقق من Jetpack Boost اليوم!