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

