كيفية تحسين مسار العرض الحرج في وورد بريس

A VPN is an essential component of IT security, whether you’re just starting a business or are already up and running. Most business interactions and transactions happen online and VPN

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

جرب نسخة تجريبية مجانية

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

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

في هذا المنشور ، سنستعرض تسلسل تحسين مسار العرض الحرج.

أولاً ، سأقدم لمحة عامة عن مهام المتصفح لعرض محتوى الصفحة.

بعد ذلك ، سأشرح الإجراءات الأكثر صلة التي يمكننا تنفيذها لتحسين مسار العرض الحرج.

أخيرًا ، سأدرج بعض الإضافات المفيدة (والشائعة) لتحسين وورد بريس.

تسلسل مسار العرض الحرج

فيما يلي تسلسل الخطوات التي يقوم بها المتصفح لعرض الصفحة:

أولاً ، يقوم المتصفح بتنزيل وتحليل ترميز HTML وإنشاء DOM

ثم يقوم بتنزيل ومعالجة ترميز CSS وإنشاء نموذج كائن CSS

فهو يجمع بين عُقد DOM و CSSOM المطلوبة لعرض الصفحة في شجرة العرض ، وهي بنية شجرية لجميع العقد المرئية

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

أخيرًا ، يقوم برسم وحدات البكسل على الشاشة

DOM

كما هو موضح جيدًا في دليل تحسين مسار العرض الحرج من Google ، يقوم المتصفح ببناء نموذج كائن المستند في تسلسل من أربع خطوات:

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

ثم يقوم بتحويل سلاسل الأحرف الموجودة داخل أقواس الزاوية إلى رموز مميزة.

يتم تحويل هذه الرموز المميزة إلى كائنات عقدة.

ترتبط كائنات العقدة في بنية بيانات تشبه الشجرة تحتوي على محتوى HTML وخصائص وعلاقات بين العقد. هذا الهيكل هو نموذج كائن المستند .

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

مخطط هيكل DOM

هيكل DOM

CSSOM

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

يقرأ المستعرض وحدات بايت الصف لملف .css ويترجمها إلى أحرف فردية

يقوم بتحويل سلاسل الأحرف الموجودة داخل أقواس متعرجة إلى رموز مميزة

يتم تحويل هذه الرموز المميزة إلى كائنات عقدة

ترتبط كائنات العقدة في بنية بيانات تشبه الشجرة تحتوي على خصائص CSS لكل عقدة والعلاقات بين العقد. هذه البنية هي نموذج كائن CSS ( CSSOM ).

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

مخطط هيكل CSSOM

هيكل CSSOM.

شجرة التقديم

يجمع المتصفح بين DOM و CSSOM في Render Tree ، وهي بنية الشجرة النهائية التي تحتوي على جميع العقد والخصائص المستخدمة لعرض الصفحة على الشاشة.

يحتوي Render Tree فقط على العقد المطلوبة لعرض الصفحة. نتيجة لذلك ، يتم حذف العقد غير المرئية.

يستخدم المستعرض Render Tree لحساب أبعاد العقدة وموضعها كمدخل لعملية الطلاء.

تقديم مخطط هيكل شجرة

تقديم هيكل شجرة.

التخطيط والطلاء

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

تحسين مسار العرض الحرج

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

تتمثل إحدى توصيات Google الأكثر صلة في إعطاء الأولوية للمحتوى المرئي لعرض الجزء المرئي في أسرع وقت ممكن ، ويوفر قاعدتين رئيسيتين للمتابعة:

قم ببناء HTML لتحميل المحتوى المهم في الجزء المرئي من الصفحة أولاً

قلل كمية البيانات المستخدمة بواسطة موارد HTML و CSS و JS

كما هو موضح جيدًا في دليل PageSpeed ​​من Google ، إذا كانت كمية البيانات المطلوبة لعرض ATF تتجاوز نافذة الازدحام الأولية (14.6 كيلوبايت) ، فستكون هناك حاجة لرحلات ذهاب وإياب إضافية للشبكة بين الخادم والمتصفح. على شبكات الجوّال ، مع فترات استجابة عالية ، سيؤدي هذا إلى تأخير كبير في تحميل الصفحة ( اقرأ المزيد عن وقت الاستجابة ).

يقوم المتصفح ببناء DOM بشكل تدريجي ، مما يسمح لنا بتقليل الوقت المطلوب لعرض ATF عن طريق هيكلة HTML لتحميل الجزء العلوي من الصفحة أولاً وتأجيل بقية الصفحة.

أمثلة على محتوى الجزء القابل للطي على الأجهزة المحمولة والأجهزة اللوحية وأجهزة سطح المكتب

يختلف محتوى الجزء المرئي من الصفحة تبعًا لجهاز المستخدم

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

دعونا نغوص بعمق.

تقليل أبعاد الموارد

يمكننا تقليل كمية البيانات التي سيقوم المتصفح بتنزيلها عن طريق تصغير موارد HTML و CSS وجافا سكريبت وضغطها:

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

الضغط هو قدرة خوادم الويب والعملاء على تقليل حجم الملفات المرسلة لتحسين السرعة واستخدام النطاق الترددي

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

تحسين CSS

نحن نعلم الآن أن المتصفح يجب أن ينتظر حتى يجلب ويعالج كود CSS قبل عرض الصفحة ( CSS يحظر العرض ). ولكن ليست كل موارد CSS تحظر العرض .

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

خذ linkالعلامة التالية :

<link rel="stylesheet" href="style.css" />

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

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

<link rel="stylesheet" href="print.css" media="print" />

لا يزال المستعرض يقوم بتنزيل ورقة أنماط print.css ، لكنه لن يحظر العرض. علاوة على ذلك ، يجب على المتصفح تنزيل بيانات أقل لملف CSS الرئيسي ، مما سيساعدنا في تسريع التنزيل. يمكننا تحديد أي استعلام وسائط على linkالسمة ، حتى نتمكن من تقسيم CSS إلى ملفات متعددة وتحميلها بشكل مشروط:

<link rel="stylesheet" href="style.css" media="screen" />
<link rel="stylesheet" href="portrait.css" media="orientation:portrait" />
<link rel="stylesheet" href="widescreen.css" media="(min-width: 42rem)" />

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

يمكن أن تساعدنا أنواع الوسائط والاستعلامات في تسريع عرض الصفحة ، ولكن يمكننا فعل المزيد.

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

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

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

تسريع عمليات التخطيط والطلاء

يعتمد الوقت الذي يقضيه المتصفح في تخطيط المستند على عدد عناصر DOM المراد تخطيطها ومدى تعقيد هذه التخطيطات.

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

تفضل نموذج Flexbox الجديد ، لأنه أسرع من Flexbox القديم والتخطيطات العائمة.

تجنب التخطيط المتزامن الإجباري باستخدام JavaScript.

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

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

تسمح Chrome DevTools بتحديد أجزاء الصفحة التي يتم رسمها

تسمح Chrome DevTools بتحديد أجزاء الصفحة التي يتم رسمها.

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

تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!

إشترك الآن

جعل جافا سكريبت إلغاء الحظر

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

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

ومع ذلك ، ما الذي يمكننا فعله لتقليل الوقت الذي يقضيه المتصفح في تحميل وتنفيذ JavaScript؟

تحميل جافا سكريبت بشكل غير متزامن : توجه asyncالسمة المنطقية scriptللعلامة المتصفح لتنفيذ النص البرمجي بشكل غير متزامن ، إن أمكن ، دون حظر بناء DOM. يرسل المتصفح طلب HTTP للبرنامج النصي ويستمر في تحليل DOM. أيضًا ، لا يحظر النص البرمجي إنشاء CSSOM ، مما يعني أنه لن يحظر مسار العرض الحرج (راجع مستندات MDN للحصول على مزيد من المعلومات حول سمات علامة البرنامج النصي )

تأجيل JavaScript : deferالسمة المنطقية scriptللعلامة تخبر المتصفح بتنفيذ البرنامج النصي بعد تحليل المستند ، ولكن قبل إطلاق DOMContentLoadedالحدث. يجب عدم استخدام هذه السمة إذا كانت السمة src غير موجودة ، أي نصوص برمجية مضمنة (اقرأ المزيد عن Mozilla Hacks )

تأجيل جافا سكريبت مضمنة : العديد من البرامج النصية لا تتعامل مع DOM أو CSSOM ، لذلك لا يوجد سبب وجيه لمنع التحليل . للأسف، لا يمكننا استخدام asyncو deferصفات للمخطوطات المضمنة، وبالتالي فإن الطريقة الوحيدة لتحميلها بعد أن تم تحميل الوثيقة لنقلها إلى أسفل. الميزة هي أن البرامج النصية المضمنة لا تتطلب طلبات HTTP إضافية. ومع ذلك ، قد ينتج عن تضمين النصوص البرمجية المستخدمة في عدة صفحات تعليمات برمجية زائدة عن الحاجة.

اختتام قواعد التحسين

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

تصغير وضغط وتخزين موارد HTML و CSS و JavaScript.

تقليل استخدام موارد حظر العرض (على وجه التحديد CSS)

استخدم استعلامات الوسائط على linkالعلامات

أوراق الأنماط المنقسمة و CSS الهامة المضمنة

ادمج عدة ملفات CSS

تقليل استخدام موارد حظر المحلل اللغوي (JavaScript)

استخدم deferالسمة على علامات البرنامج النصي

استخدم asyncالسمة على علامات البرنامج النصي

مضمنة JavaScript وانقل scriptالعلامات إلى أسفل المستند

الآن بعد أن عرفنا المفاهيم الأساسية لـ Critical Rendering Path Optimization ، يمكننا إلقاء نظرة على بعض الإضافات الشائعة لتحسين وورد بريس.

تحسين مسار العرض الحرج في وورد بريس

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

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

W3 إجمالي ذاكرة التخزين المؤقت

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

W3 Total Cache وورد بريس plugin

W3 Total Cache وورد بريس plugin

فيما يلي قائمة ببعض ميزات البرنامج المساعد:

HTML (المنشورات والصفحات) ، CSS و JavaScript التخزين المؤقت في الذاكرة ، على القرص ، أو CDN

التخزين المؤقت للخلاصات ونتائج البحث وكائنات قاعدة البيانات وكائنات وورد بريس والأجزاء

تصغير HTML (المنشورات والصفحات)

تصغير JavaScript و CSS

تحسين JavaScript مع asyncوdefer

التخزين المؤقت للمستعرض باستخدام التحكم في ذاكرة التخزين المؤقت ورؤوس انتهاء الصلاحية المستقبلية وعلامات الكيان

ضغط HTTP (gzip)

نتائج Google PageSpeed ​​على لوحة تحكم وورد بريس

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

W3 Total Cache JavaScript تصغير الإعدادات

W3 Total Cache JavaScript تصغير الإعدادات

WP Super Cache

يعد WP Super Cache مكونًا إضافيًا شائعًا لأداء الموقع.

هل تعاني من مشاكل التوقف و وورد بريس؟ Kinsta هو حل الاستضافة المصمم لتوفير الوقت! تحقق من ميزاتنا

WP Super Cache وورد بريس plugin

WP Super Cache وورد بريس plugin

يأتي مزودًا بالعديد من ميزات التحسين ، ولكنه أقل شمولاً من W3 Total Cache السابق وقد يبدو أكثر تكلفة للمستخدمين المبتدئين والمتوسطين.

اختبار وورد بريس Super Cache

اختبار وورد بريس Super Cache

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

خيار GZIP في WP Super Cache

خيار GZIP في WP Super Cache

التحسين التلقائي

مع أكثر من 1،000،000 تثبيت نشط ، يعد Autoptimize أحد أكثر المكونات الإضافية المجانية شيوعًا للتصغير.

تحسين برنامج وورد بريس الإضافي تلقائيًا

تحسين برنامج وورد بريس الإضافي تلقائيًا

يأتي مع صفحة خيارات مقسمة إلى عدة أقسام حيث يمكن لمسؤول الموقع تكوين تصغير HTML و CSS وجافا سكريبت بشكل منفصل.

خيار التحسين التلقائي لـ HTML في إعدادات التحسين التلقائي

التحسين التلقائي لخيار تحسين HTML

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

فوق الجزء المرئي من الأمثل

يوفر هذا المكون الإضافي مجموعة أدوات شاملة لتحسين الجزء المرئي من الصفحة. إنها أداة للمحترفين والمستخدمين المتقدمين لتسجيل 100/100 في اختبار Google PageSpeed.

فوق ملحق ووردبريس Optimization Optimization

فوق ملحق ووردبريس Optimization Optimization

فيما يلي بعض الميزات الأكثر إثارة للاهتمام:

أدوات CSS الحرجة:

تحميل CSS الشرطي

إدارة CSS الحرجة عبر محرر النصوص

Gulp.js منشئ CSS المهم

اختبار جودة CSS حرج

تحسين تحميل CSS:

تحميل غير متزامن CSS

استخراج CSS من HTML

التخزين المؤقت لورقة الأنماط الخارجية

تحسين تحميل JS:

تحميل JS غير المتزامن

localStorage مخبأ

JavaScript تحميل كسول

التخزين المؤقت للبرنامج النصي الخارجي

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

تصغير HTML Markup

WP Super تصغير

تصغير السرعة السريعة

تحسين JCH

أداء سريع

Swift Performance هو مكون إضافي آخر قد ترغب في التحقق منه. يمكن أن يساعد هذا المكون الإضافي المتميز في زيادة درجات الأداء الخاصة بك وقد تم تطويره خصيصًا لمساعدتك في محاولة تحقيق 100/100 من نتائج Google PageSpeed ​​Insights  .

البرنامج المساعد Swift Performance وورد بريس

البرنامج المساعد Swift Performance وورد بريس

تشمل بعض ميزاته الرئيسية ما يلي:

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

التخزين المؤقت الذكي ، وكذلك الطلبات الديناميكية و AJAX.

ضغط صورة مدمج بدون فقدان البيانات.

دعم CDN.

ستجد عرضًا أعمق لمكونات تحسين وورد بريس الإضافية في How to Elimination Render-Blocking JavaScript and CSS .

الاستنتاجات

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

هنا في مدونة Kinsta ، نحاول تغطية أي جانب من جوانب تحسين الأداء. فيما يلي قائمة بالقراءات الإضافية:

زمن انتقال الشبكة – مقارنة التأثير على موقع وورد بريس الخاص بك

وورد بريس CDN – لماذا يجب أن تستخدم واحدًا

كيفية تحسين الصور للويب والأداء

كيفية تقليل TTFB لتحسين أوقات تحميل صفحات وورد بريس

غطس عميق في أداة اختبار سرعة GTmetrix

14 أداة مجانية لاختبار سرعة الموقع لمستخدمي وورد بريس

8 ملحقات أداء وورد بريس أقل شهرة (ولكنها مفيدة)

كيفية تسجيل 100/100 في Google PageSpeed ​​Insights باستخدام وورد بريس

ما هو الوقت الذي تستغرقه لتحسين مسار العرض الحرج لمواقع الويب الخاصة بك؟ وما هي جوانب عملية التحسين التي يصعب عليك إتقانها؟ اسمحوا لنا أن نعرف في التعليقات أدناه.

وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:

مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.

تكامل Cloudflare Enterprise.

يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.

التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.

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

توضيح

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

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

شاركنا رايك وتقييمك للموضوع

{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}

Deprecated: wp_enqueue_script أستدعيت بواسطة مُعطى مهجور منذ النسخة 10.3.0! يُرجى إستخدام المُعالج الجديد ⁦wc-photoswipe⁩ بدلًا من المُعالج السابق ⁦photoswipe⁩. in /home/aspiqswk/2.mawthuk.com/wp-includes/functions.php on line 6121