تعد Google PageSpeed Insights بلا شك أداة مفيدة لمشرفي المواقع والمطورين ومالكي المواقع من جميع الأنواع. ومع ذلك ، فقد لاحظنا أن الكثير من الأشخاص يقضون ساعات في الهوس بشأن تحسين مواقعهم ، من أجل محاولة تسجيل 100/100 في هذا الاختبار.
الحقيقة هي أن هذه ليست الطريقة التي يُقصد بها استخدام Google PageSpeed Insights ، كما أنها ليست متابعة جديرة بالاهتمام. عندما تركز على تنفيذ توصيات النظام الأساسي بدلاً من التركيز على الرقم الموجود أعلى الصفحة ، فسوف تخلق الكثير من الفوائد لموقعك.
هذا المنشور هو دليل شامل لاستخدام Google PageSpeed Insights لصالحك الأفضل. سنغطي كيفية استخدام Google لدرجاتك ، بالإضافة إلى كيفية دمج التوصيات التي تتلقاها.
مقدمة إلى Google PageSpeed Insights
إذا لم تكن معتادًا على Google PageSpeed Insights ، فهي أداة تُستخدم لاختبار أداء موقع الويب. يمكنك إدخال أي عنوان URL وتحليله:
رؤى google pagespeed
Google PageSpeed Insights
تقدم Google بعد ذلك درجة إجمالية من 100 لموقع الويب الذي اختبرته ، بناءً على العديد من أفضل ممارسات تحسين الأداء:
درجة رؤى Pagespeed
نقاط Google PageSpeed Insights
إلى جانب هذه النتيجة ، سترى أيضًا العديد من التوصيات من Google حول كيفية تحسين أدائك (وبالتالي ، نقاط PageSpeed Insights الخاصة بك أيضًا):
توصيات pagespeed Insight
توصيات Google PageSpeed Insights
اعتبارًا من عام 2018 ، تم حساب نتائج PageSpeed Insights عبر Lighthouse ، أداة آلية مفتوحة المصدر من Google لتحسين الجودة الإجمالية لصفحات الويب. يمكن لهذا النظام الأساسي تقييم جميع أنواع العوامل ، بما في ذلك الأداء وإمكانية الوصول وتطبيقات الويب التقدمية والمزيد.
لمشاهدة تقييم Lighthouse الشامل لموقعك ، يمكنك استخدام أداة القياس من Google :
مقياس جوجل
أداة تدقيق قياس مشرفي المواقع من Google
بالإضافة إلى إجراء تدقيق للأداء يشبه كثيرًا ما يتم تشغيله في Google PageSpeed Insights ، ستحصل على درجات لإمكانية الوصول وأفضل الممارسات وتحسين محرك البحث (SEO) .
الحقيقة حول تسجيل النقاط 100/100 في Google PageSpeed Insights
كما ذكرنا في بداية هذا المنشور ، نرى العديد من مالكي ومطوري المواقع الذين أصبحوا مهووسين بتحقيق درجة مثالية في PageSpeed Insights. لسوء الحظ ، يميل هؤلاء الأشخاص إلى تجاهل الجانب الأكثر أهمية في نتائج الاختبار: التوصيات.
على الرغم من أنه يجب عليك بالتأكيد تحسين أوقات تحميل موقع الويب الخاص بك قدر الإمكان ، فإن الحصول على 100/100 في Google PageSpeed Insights ليس بهذه الأهمية في الواقع . بالنسبة للمبتدئين ، إنه ليس حتى اختبار الأداء الشامل.
بخلاف PageSpeed Insights ، تمكّنك Pingdom Tools من اختبار أداء موقعك من مواقع مختلفة:
أدوات pingdom
نتائج اختبار سرعة أدوات Pingdom
يمكنك أيضًا إجراء اختبارات على أنظمة أساسية مثل GTmetrix (التي تجمع درجاتك من PageSpeed Insights و YSlow ) و WebPageTest . هناك احتمالات ، أن الدرجات الخاصة بك عبر هذه الأدوات المختلفة لن تتطابق تمامًا ، مما يوضح لك كيف يمكن أن تكون هذه الأرقام عشوائية.
ما يهم حقًا هو السرعة الفعلية لموقعك على الويب . لوضعها في نصابها الصحيح ، لقد رأينا مواقع ذات متوسط أوقات تحميل أقل من 500 مللي ثانية (وهو سريع للغاية!) لا تحتوي على درجة 100/100 في PageSpeed Insights.
العامل الآخر الذي يجب أن يؤثر على أسلوبك في تحسين السرعة هو الأداء المتصور لموقعك. لا يهتم زوار موقعك بنتائج Google PageSpeed Insights. إنهم يريدون فقط أن يكونوا قادرين على عرض المحتوى الخاص بك في أسرع وقت ممكن.
الغرض الحقيقي من اختبار أداء موقعك باستخدام Google PageSpeed Insights ليس تحقيق درجة عالية. بدلاً من ذلك ، يجب عليك العثور على نقاط المشاكل على موقعك ، بحيث يمكنك تحسينها وتقليل أوقات التحميل الفعلية والمتصورة.
كيف تستخدم Google PageSpeed Insights
بالإضافة إلى التأثير على تجربة المستخدم لموقعك (UX) ، يلعب الأداء أيضًا دورًا في تحسين محركات البحث . نظرًا لأن PageSpeed Insights يتم تشغيله بواسطة أكبر محرك بحث في العالم وأكثرها شهرة ، فمن المنطقي أن درجاتك قد يكون لها بعض التأثير على تصنيفات صفحة نتائج محرك البحث (SERP) (على الأقل على Google نفسها).
والحقيقة هي أن جوجل لا استخدام إحصاءات PageSpeed لتحديد الترتيب – نوع من. سرعة الموقع هي عامل ترتيب ، سهل وبسيط. يمكن أن تمنحك نتيجة اختبار الأداء الخاص بك فكرة جيدة عن المكان الذي تقف فيه على هذه الجبهة.
ومع ذلك ، تأخذ Google في الاعتبار أكثر من مجرد الرقم الموجود في الدائرة أعلى نتائج PageSpeed. لن يضمن لك الوصول إلى 100/100 الحصول على صدارة في SERPs.
اجلس واسترخ وزد من سرعة صفحتك – فنحن نعتني بالتخزين المؤقت في وورد بريس حتى لا تضطر إلى ذلك. جرب Kinsta مجانًا .
مع ذلك ، لا يزال بإمكانك استخدام نتائج PageSpeed Insights الخاصة بك عند تحسين مُحسّنات محرّكات البحث. على سبيل المثال ، منذ عام 2018 ، كانت سرعة صفحات الجوّال عاملاً تصنيفيًا لجوجل. ستلاحظ أن اختبار الأداء الخاص بك يوفر بيانات لكل من إصداري سطح المكتب والجوال لموقعك:
Pagespeed Insights للجوّال
علامة تبويب الجوال في Google PageSpeed Insights
نظرًا لأن أكثر من 73 بالمائة من مستخدمي الإنترنت عبر الهاتف المحمول يزعمون أنهم واجهوا موقعًا يستغرق وقتًا طويلاً في التحميل ، فإن المعلومات الموجودة في علامة التبويب Google PageSpeed Insights للجوال لا تقدر بثمن. يجب أن يمنحك استخدام التوصيات هنا لتقليل أوقات التحميل على الهواتف الذكية والأجهزة الأخرى ميزة تنافسية.
توصيات Google PageSpeed Insights (24 طريقة لتحسين الأداء)
لقد تحدثنا كثيرًا عن توصيات Google PageSpeed Insights في هذا المنشور. إنها اللحم الحقيقي لنتائج اختبار الأداء الخاص بك ، وهي أكثر قيمة بكثير من درجاتك الفعلية. لهذا السبب خصصنا بقية هذا المنشور لهم.
قبل أن يغوص في الاقتراحات الفردية، ومع ذلك، سوف تحتاج إلى فهم الفرق بين الخاص بك بيانات الحقول و البيانات مختبر . يقارن الأول موقعك بالمواقع الأخرى في تقرير تجربة مستخدم Chrome لآخر 30 يومًا.
هناك أيضا اثنين من الرسوم البيانية التي تظهر فيها الخاص بك متوسط الأولى Contentful الرسام (FCP) و الأولى الإدخال تأخير (ااا) تقع:
بيانات خاطئه
بيانات حقل Google PageSpeed Insights
في الصورة أعلاه ، FCP لموقعنا هو حوالي 45 بالمائة من المواقع في النسبة المئوية 75 ، و FID الخاص بنا هو حوالي 9 بالمائة من 95 بالمائة.
تُظهر بيانات المعمل بيانات محددة لمحاكاة تحميل الصفحة:
بيانات المختبر
بيانات مختبر Google PageSpeed Insights
ستلاحظ أن لدينا بيانات الحقول و البيانات مختبر لا تتطابق تماما . هذا طبيعي تمامًا. و البيانات مختبر تم إنشاؤه ضمن شروط ثابتة، في حين أن بيانات الحقول يستخدم سرعات التحميل الفعلية التي تم جمعها على مر الزمن.
عندما نظرت في الجمع، و بيانات الحقول و البيانات مختبر يجب أن تعطيك فكرة مرات التحميل الفعلية موقعك. كما ذكرنا سابقًا ، يعد هذا أكثر أهمية من مجموع نقاط PageSpeed الخاصة بك ، لذلك سترغب في الانتباه إلى هذه الأرقام.
بعد النظر في هذه المعلومات ، حان الوقت لبدء تحسين أداء موقعك باستخدام توصيات Google PageSpeed.
1. تخلص من موارد حظر العرض
تتمثل إحدى التوصيات الأكثر شيوعًا من Google PageSpeed Insights في التخلص من موارد حظر العرض :
القضاء على حظر الموارد
إزالة توصية موارد حظر العرض
يشير هذا إلى نصوص JavaScript و CSS التي تمنع صفحتك من التحميل بسرعة. يجب على متصفح الزائر تنزيل هذه الملفات ومعالجتها قبل أن يتمكن من عرض بقية الصفحة ، لذا فإن وجود الكثير منها في الجزء المرئي من الصفحة قد يؤثر سلبًا على سرعة موقعك.
يمكنك معرفة المزيد حول هذه المشكلة في دليلنا للتخلص من البرامج النصية التي تحظر العرض . فيما يتعلق بـ Google ، هناك حلان يجب عليك التفكير فيهما:
إذا لم يكن لديك الكثير من JavaScript أو CSS ، فيمكنك تضمينها للتخلص من هذا التحذير. تشير هذه العملية إلى دمج JavaScript و / أو CSS في ملف HTML الخاص بك. يمكنك القيام بذلك باستخدام مكون إضافي مثل Autoptimize . ومع ذلك ، هذا صحيح فقط للمواقع الصغيرة جدًا. تحتوي معظم مواقع وورد بريس على ما يكفي من JavaScript بحيث يمكن لهذه الطريقة أن تبطئك بالفعل.
الخيار الآخر هو تأجيل JavaScript الخاص بك . تقوم هذه السمة بتنزيل ملف JavaScript الخاص بك أثناء تحليل HTML ، ولكنها لا تنفذها إلا بعد اكتمال التحليل. أيضًا ، يتم تنفيذ البرامج النصية التي تحتوي على هذه السمة بترتيب ظهورها على الصفحة.
ستجد قائمة بالموارد الأكثر تأثراً بهذه المشكلة أسفل التوصية الواردة في نتائج PageSpeed.
تحقق من هذا الفيديو لمعرفة المزيد حول كيفية التخلص من موارد حظر العرض:
2. تجنب تسلسل الطلبات الحرجة
يتعلق مفهوم تسلسل الطلبات الحرجة بمسار العرض الحرج (CRP) وكيفية تحميل المتصفحات لصفحاتك. يجب تحميل عناصر معينة – مثل JavaScript و CSS التي ناقشناها أعلاه – بالكامل قبل أن تصبح صفحتك مرئية.
كجزء من هذا الاقتراح ، ستعرض لك Google PageSpeed Insights سلاسل الطلبات على الصفحة التي تقوم بتحليلها:
تجنب الطلبات المتسلسلة
تجنب تسلسل توصيات الطلبات الحرجة
سيوضح لك هذا الرسم البياني سلسلة الطلبات التابعة التي يجب الوفاء بها قبل أن تصبح صفحتك مرئية. سيخبرك أيضًا بحجم كل مورد. من الناحية المثالية ، تريد تقليل عدد الطلبات التابعة ، فضلاً عن أحجامها.
يتم تغطية العديد من الطرق لتحقيق هذه الأهداف من خلال توصيات أخرى تمت مناقشتها في هذا المنشور ، بما في ذلك:
القضاء على موارد حظر العرض
إرجاء الصور خارج الشاشة
تصغير CSS و JavaScript
بالإضافة إلى ذلك ، يمكنك تحسين الترتيب الذي يتم تحميل الأصول به ، من أجل تقصير CRP. هذا يعني نقل محتوى الجزء المرئي من الصفحة إلى أعلى ملف HTML الخاص بك. يمكنك معرفة المزيد حول تحسين CRP في منشورنا ” كيفية تحسين مسار العرض الحرج في وورد بريس “.
من المهم ملاحظة أنه لا يوجد عدد سحري من سلاسل الطلبات المهمة التي تحتاج إلى العمل عليها. لا تحسب Google PageSpeed Insights هذا التدقيق على أنه “ناجح” أو “فاشل” ، على عكس العديد من توصياته الأخرى. يتم توفير هذه المعلومات ببساطة لمساعدتك في تحسين أوقات التحميل.
3. الحفاظ على عدد الطلبات منخفض وتحويل الأحجام الصغيرة
كلما زاد عدد الطلبات التي يتعين على المتصفحات إجراؤها لتحميل صفحاتك ، وكلما زادت الموارد التي يعود خادمك إليها استجابةً ، كلما استغرق تحميل موقع الويب وقتًا أطول. لذلك ، من المنطقي أن توصي Google بتقليل عدد الطلبات المطلوبة وتقليل حجم مواردك.
مثل توصية تجنب تسلسل الطلبات الحرجة ، لا يؤدي هذا إلى “تمرير” أو “فشل”. بدلاً من ذلك ، سترى ببساطة قائمة بعدد الطلبات المقدمة وأحجامها:
يعد الطلب منخفضًا
حافظ على انخفاض عدد الطلبات وتوصية صغيرة بأحجام النقل
لا يوجد عدد مثالي للطلبات أو أحجام قصوى يجب وضعها في الاعتبار. بدلاً من ذلك ، توصي Google بأن تحدد هذه المعايير لنفسك من خلال إنشاء ميزانية أداء. هذه مجموعة من الأهداف المحددة التي قد تكون مرتبطة بجوانب مثل:
أحجام الصور القصوى
عدد خطوط الويب المستخدمة
كم عدد الموارد الخارجية التي تتصل بها
حجم البرامج النصية والأطر
يمنحك إنشاء ميزانية أداء مجموعة من المعايير لتحمل نفسك المسؤولية عنها. عندما تتجاوز ميزانيتك ، يمكنك حينئذٍ اتخاذ قرارات بشأن ما إذا كنت تريد التخلص من الموارد أو تحسينها للالتزام بالإرشادات المحددة مسبقًا. يمكنك معرفة المزيد حول إنشاء واحد في دليل Google الخاص.
4. تصغير CSS
غالبًا ما تكون ملفات CSS أكبر مما يجب أن تكون عليه ، وذلك لتسهيل قراءتها على البشر. قد تتضمن العديد من أحرف الإرجاع والمسافات غير الضرورية لأجهزة الكمبيوتر لفهم محتوياتها.
إن تصغير CSS الخاص بك هو عملية تكثيف ملفاتك عن طريق التخلص من الأحرف غير الضرورية ، والمسافات ، والتكرار. توصي Google بهذه الممارسة لأنها تقلل من أحجام ملفات CSS ، وبالتالي يمكنها تحسين سرعة التحميل:
تصغير css
تصغير توصية CSS
نوصي باستخدام مكون إضافي مثل Autoptimize أو WP Rocket لتقليل ملفات CSS.
5. تصغير JavaScript
مثلما يمكنك تقليل حجم ملف CSS من خلال التصغير ، ينطبق الأمر نفسه على ملفات JavaScript الخاصة بك:
تصغير جافا سكريبت
تصغير توصية JavaScript
يمكن لـ Autoptimize أو WP Rocket التعامل مع هذه المهمة لموقع وورد بريس الخاص بك أيضًا.
6. إزالة CSS غير المستخدمة
أي كود في ورقة الأنماط الخاصة بك هو محتوى يجب تحميله حتى تصبح صفحتك مرئية للمستخدمين. إذا كان هناك CSS على موقعك غير مفيد في الواقع ، فإنه يؤدي إلى استنزاف غير ضروري لأدائك.
تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟
انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!
إشترك الآن
لهذا السبب توصي Google بإزالة أي CSS غير مستخدم :
إزالة المغلفات غير المستخدمة
إزالة توصية CSS غير المستخدمة
الحل هنا هو في الأساس نفس الحل لإزالة CSS لحظر العرض. يمكنك تضمين الأنماط أو تأجيلها بأي طريقة تكون أكثر ملاءمة لصفحاتك. يمكنك أيضا استخدام أداة مثل DevTools كروم ل تجد CSS غير المستخدمة التي تحتاج إلى تحسين.
7. تصغير عمل الخيط الرئيسي
“الموضوع الرئيسي” هو العنصر الأساسي لمتصفح المستخدم المسؤول عن تحويل الشفرة إلى صفحة ويب يمكن للزوار التفاعل معها. يوزع وينفذ HTML و CSS و JavaScript. بالإضافة إلى ذلك ، فهو مسؤول عن التعامل مع تفاعلات المستخدم.
هذا يعني أنه عندما يعمل مؤشر الترابط الرئيسي من خلال كود موقعك ، فإنه لا يمكنه أيضًا معالجة طلبات المستخدم. إذا استغرق عمل الخيط الرئيسي لموقعك وقتًا طويلاً ، فقد يؤدي ذلك إلى ضعف UX وأوقات تحميل بطيئة للصفحة.
ستعمل Google PageSpeed على وضع علامة على الصفحات التي تستغرق أكثر من أربع ثوان لإكمال عمل سلسلة الرسائل الرئيسية وتقديم صفحة ويب قابلة للاستخدام:
تقليل عمل الموضوع الرئيسي
تصغير توصيات عمل الخيط الرئيسي
تمت بالفعل تغطية بعض الطرق المستخدمة لتقليل عمل الخيط الرئيسي في أقسام أخرى من هذا المنشور ، بما في ذلك:
تصغير الكود الخاص بك
إزالة التعليمات البرمجية غير المستخدمة
تنفيذ التخزين المؤقت
ومع ذلك ، قد ترغب أيضًا في التفكير في تقسيم الكود. تتضمن هذه العملية تقسيم JavaScript إلى حزم يتم تنفيذها عند الحاجة ، بدلاً من مطالبة المتصفحات بتحميلها جميعًا قبل أن تصبح الصفحة تفاعلية.
غالبًا ما يستخدم Webpack لتنفيذ تقسيم التعليمات البرمجية. لاحظ أن هذه تقنية متقدمة إلى حد ما ويجب على المبتدئين عادةً القيام بها بمفردهم.
8. تقليل وقت تنفيذ JavaScript
غالبًا ما يكون تنفيذ JavaScript هو المساهم الأبرز في عمل السلسلة الرئيسية. لدى PageSpeed Insights توصية منفصلة لتنبيهك إذا كانت هذه المهمة لها تأثير كبير على أداء موقعك:
تقليل تنفيذ جافا سكريبت
تقليل توصية وقت تنفيذ JavaScript
يجب أيضًا أن تحل الطرق المقترحة أعلاه لتقليل عمل سلسلة المحادثات الرئيسية هذا التحذير في نتائج PageSpeed.
9. تقليل أوقات استجابة الخادم (TTFB)
Time to First Byte (TTFB) هو مقياس للوقت الذي يستغرقه المستعرض لتلقي البايت الأول من البيانات المسترجعة من خادم موقعك بعد إجراء طلب. على الرغم من أن هذا لا يماثل سرعة موقعك الإجمالية ، إلا أن الحصول على TTFB منخفض يعد أمرًا جيدًا لأداء موقعك.
لذلك ، يعد تقليل أوقات استجابة الخادم من بين توصيات Google PageSpeed Insights. إذا كنت قادرًا على تحقيق TTFB منخفضًا ، فسترى هذه الرسالة ضمن عمليات التدقيق التي تم اجتيازها :
تقليل ttfb
أوقات استجابة الخادم رسالة منخفضة
هناك العديد من العوامل التي يمكن أن تؤثر على TTFB الخاص بك. تتضمن بعض الاستراتيجيات لخفضه ما يلي:
اختيار نوعية عالية مزود خدمة استضافة الويب أن يركز على السرعة
استخدام سمات وإضافات خفيفة الوزن
تقليل عدد المكونات الإضافية المثبتة على موقعك
استخدام شبكة توصيل المحتوى (CDN)
تنفيذ ذاكرة التخزين المؤقت للمتصفح
اختيار مزود نظام اسم المجال (DNS)
لدينا مشاركة في TTFB هي مصدر ممتاز لمزيد من التفاصيل حول الأمثل في هذا المجال.
10. حجم الصور بشكل صحيح
يمكن أن تكون ملفات الوسائط مثل الصور بمثابة تأثير حقيقي على أداء موقعك. يعد تحجيمها بشكل صحيح طريقة بسيطة لتقليل أوقات التحميل:
حجم الصور بشكل صحيح
توصية الصور ذات الحجم المناسب
إذا كانت صفحتك تحتوي على صور أكبر مما يجب ، يتم استخدام CSS لتغيير حجمها بشكل مناسب. يستغرق هذا وقتًا أطول من مجرد تحميل الصور بالحجم المناسب في البداية ، وبالتالي يؤثر على أداء صفحتك.
لإصلاح ذلك ، يمكنك إما تحميل الصور بالأحجام المناسبة ، أو استخدام “الصور المتجاوبة”. يتضمن ذلك إنشاء صور بأحجام مختلفة لأجهزة مختلفة.
يمكنك القيام بذلك باستخدام و srcset السمة ، الذي يضاف إلى <IMG> لتحديد علامات ملفات الصور البديلة في أحجام مختلفة. يمكن للمتصفحات قراءة هذه القائمة وتحديد الخيار الأفضل للشاشة الحالية وتقديم هذا الإصدار من صورتك.
على سبيل المثال ، لنفترض أن لديك صورة رأس وتريد جعلها تستجيب. يمكنك تحميل ثلاثة إصدارات منه بعرض 800 و 480 و 320 بكسل. بعد ذلك يمكنك تطبيق سمة srcset ، على النحو التالي :
<img srcset="header-image-800w.jpg 880w,
Header-image-480w.jpg 480w,
Header-image-320w.jpg 320w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="header-image-800w.jpg">
و srcset تحدد السمة الملفات المتوفرة مختلفة، و الأحجام السمة يقول المتصفحات التي ينبغي لأحد أن استخدامها على أساس حجم الشاشة الحالية.
11. تأجيل الصور خارج الشاشة
تُعرف عملية تأجيل الصور خارج الشاشة باسم “التحميل الكسول”. هذا يعني أنه بدلاً من جعل المتصفح يقوم بتحميل كل صورة على الصفحة قبل عرض محتوى الجزء المرئي من الصفحة ، فإنه سيحمل فقط تلك التي تظهر على الفور.
يعني التحميل الأقل قبل ظهور الصفحة أداءً أفضل ، ولهذا السبب توصي Google بهذه الطريقة:
تأجيل الصور خارج الشاشة
تأجيل توصية الصور خارج الشاشة
هناك العديد من مكونات وورد بريس الإضافية المصممة خصيصًا للتحميل البطيء ، بما في ذلك a3 Lazy Load و Lazy Load بواسطة WP Rocket . تحتوي العديد من المكونات الإضافية لتحسين الصورة والأداء مثل Autoptimize أيضًا على ميزات التحميل البطيء . تحقق من دليلنا الكامل حول تحميل الصور ومقاطع الفيديو الكسولة على وورد بريس .
12. تشفير الصور بكفاءة
كما ذكرنا سابقًا في هذا المنشور ، فإن الصور لها تأثير كبير على أداء موقعك. أحد أفضل ممارسات التحسين الأساسية التي قد ترغب في وضعها في الاعتبار هو الضغط ، والذي يمكن أن يساعد في تقليل أحجام الملفات الخاصة بك حتى يتم تحميلها بشكل أسرع. إنها أيضًا الطريقة الأساسية لاتباع توصيات Google لتشفير الصور بكفاءة :
ترميز الصور بكفاءة
كفاءة ترميز الصور التوصية
المفتاح هو تحقيق أصغر حجم ممكن للملفات ، دون التضحية بجودة الصور نفسها. الإضافات مثل Imagify و سجل سماش يمكن أن تساعد في هذه المهمة. يمكنك معرفة المزيد عنها في دليلنا لتحسين الصورة .
تتضمن التوصيات الأخرى التي تؤثر على ما إذا كنت ستنجح أو ستفشل في تدقيق الصور بكفاءة :
تقديم الصور بالحجم الصحيح
تنفيذ التحميل البطيء (تأجيل الصور خارج الشاشة)
تحويل الصور إلى تنسيقات ملفات من الجيل التالي ، مثل WebP
استخدام تنسيقات الفيديو لمحتوى متحرك ، مثل صور GIF
بالإضافة إلى ضغط صورك ، يمكنك اتباع الخطوات لتنفيذ هذه الاقتراحات كما هو موضح في مكان آخر في هذا المنشور.
13. عرض الصورة في تنسيقات الجيل التالي
توجد بعض تنسيقات ملفات الصور التي يتم تحميلها بسرعة أكبر من غيرها. لسوء الحظ ، هذه ليست تنسيقات PNG أو JPEG الشائعة. أصبحت صور WebP هي المعيار الجديد ، وستعلمك Google PageSpeed إذا كانت صورك لا تلتزم بها:
تنسيقات الصور nextgen
خدمة الصور في توصية تنسيقات الجيل التالي
قد يبدو هذا وكأنه توصية صعبة للوفاء بها ، حيث من المحتمل أن يكون لديك بالفعل الكثير من الصور على موقع وورد بريس الخاص بك. لحسن الحظ ، هناك مكونات إضافية يمكن أن تساعد. على سبيل المثال ، يقدم كل من Imagify و Smush ميزة تحويل WebP.
14. استخدم تنسيقات الفيديو للمحتوى المتحرك
يمكن أن تكون ملفات GIF شكلاً فعالاً من أشكال المحتوى المرئي في مجموعة متنوعة من المواقف. يمكن أن تؤدي الإرشادات الإرشادية والتعليقات المميزة وحتى الرسوم المتحركة المرحة إلى رفع مستوى مشاركاتك وجعلها أكثر إمتاعًا وقيمة للقراء.
لسوء الحظ ، تأتي هذه الفوائد على حساب أدائك. يتطلب تحميل ملفات GIF ، ولهذا السبب توصي PageSpeed Insights بتقديم محتوى الفيديو بدلاً من ذلك:
محتوى الفيديو المتحرك
استخدم تنسيقات الفيديو لتوصية المحتوى المتحرك
لسوء الحظ ، فإن تحويل صور GIF إلى تنسيقات فيديو ليس هو أكثر العمليات مباشرة. أولاً ، سيتعين عليك تحديد نوع الفيديو الذي تريد استخدامه:
MP4: ينتج ملفات أكبر قليلاً ، لكنه متوافق مع معظم المتصفحات الرئيسية .
WebM: تنسيق الفيديو الأكثر تحسينًا ، على الرغم من توافقه المحدود مع المستعرض.
بمجرد قيامك بالاختيار الأكثر منطقية لموقعك ، ستحتاج إلى تحويل تنسيقات الملفات. أفضل طريقة للقيام بذلك هي عبر سطر الأوامر. للبدء ، قم بتثبيت FFmpeg . هذه أداة مفتوحة المصدر لتحويل تنسيقات الملفات:
ffmpeg
أداة تحويل تنسيق ملف FFmpeg للفيديو والصوت
بعد ذلك ، افتح واجهة سطر الأوامر وقم بتشغيل الأمر التالي:
ffmpeg -i input.gif output.mp4
هذا سيتم تحويل GIF مع اسم الملف input.gif إلى الفيديو MP4 مع اسم الملف output.mp4 . ومع ذلك ، فإن تغيير التنسيق هو مجرد البداية. أنت الآن بحاجة إلى تضمين الفيديو الناتج على موقع وورد بريس الخاص بك بطريقة تجعله يظهر كصورة GIF متحركة.
تضمين محتوى الفيديو للرسوم المتحركة
كما لاحظت على الأرجح إذا رأيت صورة GIF من قبل ، فهي مختلفة قليلاً عن مقاطع الفيديو العادية. عادةً ما يتم تشغيلها تلقائيًا وتشغيلها في حلقة ، وتكون دائمًا بدون صوت. لن ينتج عن تضمين ملف MP4 أو WebM الجديد على موقع وورد بريس الخاص بك هذه الميزات.
ومع ذلك، يمكن إعادة لهم مع بعض رمز بسيط جدا. قم بتحميل الفيديو الخاص بك إلى مكتبة الوسائط الخاصة بك ، ثم قم بإضافة ما يلي إلى الصفحة أو النشر حيث تريد تضمين ملف GIF الخاص بك:
<video autoplay loop muted playsinline>
<source src="output.mp4" type="video/mp4">
</video>
سيؤدي هذا إلى تطبيق السمات المحددة على مقطع الفيديو الخاص بك ، مما يجعله يبدو أكثر “مثل GIF”. ما عليك سوى تعديل اسم الملف والكتابة لمطابقة اسم المورد الخاص بك. لمزيد من التفاصيل حول هذا الموضوع ، نقترح قراءة دليل Google حول تحويل ملفات GIF إلى مقاطع فيديو .
15. تأكد من بقاء النص مرئيًا أثناء تحميل خط الويب
مثل الصور ، تميل الخطوط إلى أن تكون ملفات كبيرة تستغرق وقتًا طويلاً للتحميل. في بعض الحالات ، قد تخفي المتصفحات النص الخاص بك حتى يتم تحميل الخط الذي تستخدمه بالكامل ، مما سينتج عنه هذه التوصية من Google PageSpeed Insights:
تحميل خط الويب النص المرئي
تأكد من بقاء النص مرئيًا أثناء توصية تحميل خط الويب
تنصحك Google بحل هذه المشكلة عن طريق تطبيق توجيه مبادلة Font Display API في نمط @ font-face الخاص بك . للقيام بذلك ، قم بالوصول إلى ورقة الأنماط ( style.css ) وأضف ما يلي بعد السمة src ضمن @ font-face :
عرض الخط: swap
يمكنك معرفة المزيد حول تحسين خطوط الويب في منشورنا ” كيفية تغيير الخطوط في وورد بريس ” ودليلنا المتعمق لاستضافة الخطوط المحلية .
16. تمكين ضغط النص
تشير توصية تمكين ضغط النص من Google PageSpeed Insights إلى استخدام ضغط GZIP:
تمكين ضغط النص
تمكين توصية ضغط النص
في بعض الحالات (كما ترى في الصورة أعلاه) سيتم تمكين ضغط النص على الخادم الخاص بك تلقائيًا. إذا لم يكن هذا هو الحال بالنسبة لموقعك ، فلديك خياران لاتباع هذه التوصية.
الأول هو تثبيت مكون إضافي مع ميزة ضغط GZIP. WP Rocket هو حل قابل للتطبيق إذا كنت على استعداد لدفع ثمنه.
يمكنك أيضًا ضغط النص يدويًا. يتضمن ذلك تحرير ملف htaccess الخاص بك ، والذي قد يكون محفوفًا بالمخاطر ، لذا تأكد من أن لديك نسخة احتياطية حديثة في متناول اليد.
تعمل معظم مواقع وورد بريس على خوادم Apache. يبدو رمز تمكين ضغط GZIP كما يلي:
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
يجب عليك إضافته بعد #END في ملف htaccess الخاص بك . إذا كان لديك موقع وورد بريس الخاص بك على خادم Nginx ، فيجب عليك إضافة الكود التالي إلى ملف nginx.conf بدلاً من ذلك:
36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;
إذا كنت ترغب في التحقق من ضغط النص في موقعك ، فنحن نقترح استخدام أداة مثل GiftOfSpeed :
تحقق giftofspeed
فحص ضغط GiftOfSpeed GZIP
سيتيح لك ذلك معرفة ما إذا تم تنفيذ ضغط GZIP بنجاح ، بالإضافة إلى نوع الخادم الذي يعمل عليه موقعك وبعض التفاصيل الأساسية الأخرى.
17. الاتصال المسبق بالأصول المطلوبة
هناك احتمالات كبيرة بأن يكون لديك على الأقل مورد طرف ثالث على موقعك – Google Analytics هو مثال شائع. قد تستغرق المتصفحات وقتًا لإنشاء اتصال بهذه الموارد ، مما يؤدي إلى إبطاء سرعات التحميل.
يمكن أن يؤدي استخدام سمات الاتصال المسبق إلى إخبار المتصفحات على الفور بوجود نصوص برمجية لجهات خارجية على صفحتك بحاجة إلى التحميل. يمكن بعد ذلك أن تبدأ عملية طلبها في أسرع وقت ممكن ، مما يؤدي إلى تحسين أدائك.
إذا شعرت Google أن صفحتك يمكن أن تستفيد من هذه التقنية ، فسترى اقتراح الاتصال المسبق بالأصول المطلوبة :
الاتصال المسبق بالأصول المطلوبة
توصيل مسبق لتوصية الأصول المطلوبة
هناك عدة طرق يمكنك اتباعها لتنفيذ استراتيجية التحسين هذه. إذا كنت مرتاحًا لتحرير ملفات سمة وورد بريس الخاصة بك ، فيمكنك إضافة علامة ارتباط إلى ملف header.php الخاص بك . هذا مثال:
<link rel=“preconnect” href=“example.com”>
في هذه الحالة ، تخبر العلامة المتصفحات بأنها بحاجة إلى إنشاء اتصال بـ example.com في أسرع وقت ممكن. ستدرج Google PageSpeed Insights أي موارد ذات صلة يجب عليك إضافة علامات ارتباط لها بسمات الاتصال المسبق.
الخيار الآخر هو استخدام مكون إضافي لتحقيق نفس التأثير. Perfmatters يتضمن ميزة المسبق ل(تنويه: أنا واحد من مؤسسي Perfmatters). تتضمن تلميحات موارد WP Rocket و Pre * Party وظائف مماثلة.
18. التحميل المسبق للطلبات الرئيسية
على غرار الاتصال المسبق بتوصية الأصول المطلوبة ، يتيح لك اتباع هذا الاقتراح تقليل عدد الطلبات التي يجب أن تقدمها المتصفحات إلى خادم موقعك. بدلاً من الاتصال بموارد الجهات الخارجية ، تشير طلبات مفتاح التحميل المسبق إلى تحميل الأصول الهامة على الخادم الخاص بك:
طلبات مفتاح التحميل المسبق
قبل تحميل مفتاح طلبات التوصية
تنفيذ هذه التقنية مشابه جدًا للتوصية السابقة أيضًا. يمكنك إضافة علامات ارتباط تحدد الموارد المدرجة في PageSpeed Insights إلى ملف header.php الخاص بك :
<link rel=“preload” href=“example.com”>
يمكنك أيضًا دمج هذه العلامة باستخدام Perfmatters أو WP Rocket أو Pre * Party Resource Hints.
19. تجنب عمليات إعادة توجيه الصفحات المتعددة
يتم استخدام عمليات إعادة التوجيه عندما تريد أن يشير أحد عناوين URL إلى عنوان آخر. يتم توظيفهم بشكل شائع عند نقل أو حذف صفحة على موقعك. على الرغم من عدم وجود خطأ في استخدام عمليات إعادة التوجيه بشكل عام ، إلا أنها تتسبب في حدوث تأخيرات إضافية في وقت التحميل.
إذا كان لديك عدد كبير جدًا من عمليات إعادة التوجيه على موقعك ، فقد ترى هذه التوصية في Google PageSpeed Insights:
عمليات إعادة توجيه متعددة
تجنب إعادة توجيه الصفحات المتعددة التوصية
الشيء الوحيد الذي يمكنك فعله ردًا على هذه التوصية هو التأكد من أنك تستخدم عمليات إعادة التوجيه فقط عندما يكون عليك ذلك تمامًا. يمكنك معرفة المزيد حول عملية إنشائها في منشورنا ” وورد بريس Redirect – Best Practices for Better Performance ” ( إعادة توجيه وورد بريس – أفضل الممارسات من أجل أداء أفضل) .
20. خدمة الأصول الثابتة من خلال سياسة فعالة لذاكرة التخزين المؤقت
إذا كنت تستخدم Google PageSpeed Insights لفترة من الوقت ، فقد تعرف هذه التوصية بشكل أفضل كتحذير التخزين المؤقت للمستعرض الرافعة المالية . في الإصدار 5 ، تم تصنيفها الآن على أنها خدمة الأصول الثابتة باستخدام نهج ذاكرة تخزين مؤقت فعال :
سياسات ذاكرة التخزين المؤقت الفعالة
أصول الخادم الثابتة مع توصية سياسة ذاكرة التخزين المؤقت الفعالة
يحتوي هذا الاقتراح على بضع طبقات نحتاج إلى تفصيلها. الأول هو معنى “التخزين المؤقت”. باختصار ، إنها عملية تحفظ فيها المتصفحات نسخًا من صفحاتك ، بحيث يمكن تحميلها بشكل أسرع في الزيارات المستقبلية.
الطريقة الأكثر شيوعًا التي تنفذ بها مواقع وورد بريس التخزين المؤقت هي المكونات الإضافية . يعد WP Rocket و W3 Total Cache من الخيارات الشائعة. ومع ذلك ، فإن بعض مزودي الاستضافة – بما في ذلك نحن هنا في Kinsta – يمكّنون التخزين المؤقت عبر خوادمهم. تأكد من التحقق ومعرفة ما إذا كان هذا هو الحال بالنسبة لمضيفك قبل تثبيت مكون إضافي للتخزين المؤقت.
اجلس واسترخ وزد من سرعة صفحتك – فنحن نعتني بالتخزين المؤقت في وورد بريس حتى لا تضطر إلى ذلك. جرب Kinsta مجانًا .
بمجرد تمكين التخزين المؤقت لموقعك ، يمكنك القلق بشأن الجزء الثاني من هذه التوصية ، وهو “كفاءة” سياسة ذاكرة التخزين المؤقت. تقوم المستعرضات بمسح ذاكرات التخزين المؤقت الخاصة بهم بشكل دوري لتحديثها بالنسخ المحدثة.
من الناحية المثالية ، تريد أن تكون هذه الفترة الزمنية أعلى وليس أقل. إذا كنت تقوم بمسح موقعك من ذاكرة التخزين المؤقت للمتصفح كل ساعتين ، فإن هذا يتعارض مع الغرض من استخدام هذه التقنية في المقام الأول. يمكنك تحسين فترة انتهاء صلاحية ذاكرة التخزين المؤقت باستخدام رؤوس Cache-Control و Expires .
إضافة رؤوس التحكم في ذاكرة التخزين المؤقت
استخدم الكود التالي لإضافة رؤوس Cache-Control في Nginx:
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
يجب عليك إضافة هذا إلى ملف تكوين الخادم الخاص بك. في المثال أعلاه ، تم تعيين أنواع الملفات المحددة بحيث تنتهي صلاحيتها بعد 30 يومًا.
يجب على أولئك الذين لديهم خوادم Apache استخدام هذا المقتطف في ملفات htaccess الخاصة بهم بدلاً من ذلك:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>
أضف هذا الرمز قبل #BEGIN وورد بريس أو بعد #END وورد بريس . في هذا المثال ، تم تعيين فترة انتهاء صلاحية ذاكرة التخزين المؤقت على 84،600 ثانية.
إضافة رؤوس انتهاء الصلاحية
تعتبر رؤوس التحكم في ذاكرة التخزين المؤقت هي المعيار الآن إلى حد كبير. ومع ذلك ، هناك بعض الأدوات (بما في ذلك GTMetrix) التي لا تزال تبحث عن رؤوس انتهاء الصلاحية .
يمكنك إضافة رؤوس انتهاء الصلاحية إلى خادم Nginx من خلال دمج ما يلي في كتلة الخادم الخاص بك:
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}
يجب عليك تعيين أوقات انتهاء صلاحية مختلفة بناءً على أنواع الملفات. ستنتج خوادم Apache نفس النتائج إذا أضفت هذا الرمز إلى ملف htaccess الخاص بك :
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##
مرة أخرى ، يجب إضافة هذا الرمز إما قبل #BEGIN وورد بريس أو بعد #END وورد بريس .
كفاءة التخزين المؤقت لبرنامج Google Analytics
ومن المفارقات ، أن النص البرمجي لبرنامج Google Analytics الذي ربما أضفته إلى رؤوس صفحاتك من أجل تتبع سلوك المستخدم لديه فترة صلاحية لذاكرة التخزين المؤقت تبلغ ساعتين فقط. من المحتمل أن يكون هذا ، إذا تم إجراء تحديثات على النظام الأساسي ، فسيتمكن المستخدمون من الوصول إلى التغييرات بسرعة.
سيظهر هذا النص البرمجي في قائمة الموارد التي تتطلب انتباهك ضمن عرض الأصول الثابتة مع توصية سياسة ذاكرة التخزين المؤقت الفعالة . نظرًا لأنه ينتمي إلى جهة خارجية ، فلا يمكنك تغيير فترة انتهاء الصلاحية باستخدام رؤوس Cache-Control أو Expires .
إذا كان هذا هو النص الوحيد المدرج ضمن هذه التوصية ، فلا يزال بإمكانك اجتياز التدقيق:
اجتاز التخزين المؤقت الفعال
اجتاز تدقيق سياسة ذاكرة التخزين المؤقت الفعال
ومع ذلك ، كما لاحظنا خلال هذا المنشور ، فإن درجة PageSpeed الخاصة بك أقل أهمية من أدائك الفعلي والمتصور. من أجل خدمة هذا المورد بكفاءة ، قد تفكر في استضافة Google Analytics محليًا.
ستمكنك المكونات الإضافية مثل Complete Analytics Optimization Suite ( CAOS ) و Perfmatters من القيام بذلك. يمكنك قراءة المزيد حول العملية في دليلنا الكامل لاقتراح PageSpeed هذا .
21. تقليل تأثير رمز الطرف الثالث
لقد ذكرنا الآن بعض الطرق المختلفة التي يمكن أن تؤثر بها البرامج النصية التابعة لجهات خارجية سلبًا على أدائك ، وتؤدي إلى عمليات تدقيق فاشلة من PageSpeed Insights. من الناحية المثالية ، من الأفضل الحد من اعتمادك على هذه الأدوات لمنع الآثار الضارة.
ومع ذلك ، في بعض الحالات ، يكون الحل الأفضل لاحتياجات موقعك هو تضمين برنامج نصي تابع لجهة خارجية. برنامج Google Analytics هو مثال ممتاز. البعض الآخر يشمل:
أزرار ومغذيات مشاركة الوسائط الاجتماعية
يوتيوب فيديو يضمن
إطارات iFrames للإعلانات والمحتويات الأخرى
مكتبات لجافا سكريبت وخطوط وعناصر أخرى
في الحالات التي تعتبر فيها استخدام نص برمجي تابع لجهة خارجية أمرًا ضروريًا ، من المهم الاستمرار في تقليل تأثيره على أداء موقعك ، حيث ستخبرك نتائج تحليل PageSpeed بما يلي:
تقليل رمز الطرف الثالث
تقليل تأثير توصية التعليمات البرمجية من جهة خارجية
لتحميل كود الجهة الخارجية بشكل أكثر كفاءة ، يمكنك التفكير في إحدى التقنيات التي ذكرناها بالفعل في هذا المنشور:
تأجيل تحميل JavaScript
استخدم علامات الارتباط مع سمات الاتصال المسبق
نصوص الطرف الثالث ذاتية الاستضافة (كما وصفنا في Google Analytics أعلاه)
يجب أن تقلل هذه الطرق من التأثير على أداء موقعك.
22. تجنب حمولات الشبكة الهائلة
هذه التوصية ذات صلة خاصة بزوار هاتفك المحمول. يمكن أن تتطلب الحمولات الكبيرة استخدام المزيد من البيانات الخلوية ، مما يكلف المستخدمين أموالاً. يمكن أن يؤدي تقليل عدد طلبات الشبكة اللازمة للوصول إلى صفحاتك إلى منع حدوث ذلك:
تجنب الحمولات الهائلة
تجنب توصية حمولات الشبكة الهائلة
توصي Google بالحفاظ على إجمالي حجم البايت لديك عند 1600 كيلوبايت أو أقل. تم العثور على الطرق الأكثر استخدامًا لتحقيق هذا الهدف في جميع أنحاء هذا المنشور ، بما في ذلك:
تأجيل CSS و JavaScript والصور الموجودة أسفل الجزء المرئي من الصفحة
رمز تصغير
ضغط ملفات الصور
استخدام تنسيق WebP للصور
تنفيذ التخزين المؤقت
اتبع الخطوات ذات الصلة لهذه الاستراتيجيات ، ويجب عليك اجتياز هذا التدقيق دون أي جهد إضافي.
23. علامات توقيت المستخدم والتدابير
هذه التوصية ذات صلة فقط إذا كنت تستخدم User Timing API . تنشئ هذه الأداة طوابع زمنية لمساعدتك في تقييم أداء JavaScript الخاص بك. إذا قمت بإعداد واجهة برمجة التطبيقات لموقعك ، فسترى العلامات والمقاييس الخاصة بك تحت هذا العنوان في PageSpeed Insights:
توقيت المستخدم
توقيت المستخدم علامات وقياسات التوصية
كما ترى ، هذا اقتراح آخر من Google لا ينتج عنه “تمريرة” أو “فشل”. تجعل PageSpeed Insights هذه المعلومات سهلة الاسترداد ، لذا يمكنك استخدامها لتقييم المناطق التي قد تتطلب تحسينًا.
إذا كنت مهتمًا بدمج User Timing API في موقع وورد بريس الخاص بك ، فيمكنك معرفة المزيد في دليل Mozilla حول هذا الموضوع .
24. تجنب زيادة حجم نموذج كائن المستند (DOM)
بعبارات أبسط ، فإن DOM هو كيف تحول المتصفحات HTML إلى كائنات. إنه ينطوي على استخدام هيكل شجرة مكون من عقد فردية يمثل كل منها كائنًا. بطبيعة الحال ، كلما زاد حجم DOM لصفحتك ، زاد وقت التحميل.
إذا تجاوزت صفحتك معايير معينة فيما يتعلق بحجم DOM ، فستوصي بتقليل عدد العقد بالإضافة إلى تعقيد تصميم CSS الخاص بك :
تجنب حجم دوم المفرط
تجنب اقتراح حجم DOM الزائد
يعد موضوع وورد بريس الخاص بك أحد الأسباب الشائعة إذا “فشلت” في هذا التدقيق في PageSpeed Insights. غالبًا ما تضيف السمات الثقيلة كميات كبيرة من العناصر إلى DOM ، وقد تتضمن أيضًا تصميمًا معقدًا يؤدي إلى إبطاء موقعك. إذا كانت هذه هي الحالة ، فقد تحتاج إلى تبديل السمات .
هل تكافح لتحقيق 100/100 على #Google PageSpeed؟ إليك نصيحة: لا تستحوذ على درجاتك وركز على ما يؤثر حقًا على تحميل صفحتك! 🚀📊
انقر للتغريد
ملخص
يجب أن تكون Google PageSpeed Insights عنصرًا أساسيًا في صندوق أدوات مشرفي المواقع. ومع ذلك ، فإن التركيز على درجاتك والاستحواذ على الوصول إلى 100/100 المرغوبة ربما لا يكون أفضل استخدام لوقتك. قد يأخذك ذلك بعيدًا عن المهام الهامة الأخرى التي يمكن أن توفر فوائد أكثر أهمية.
في هذا المنشور ، غطينا الطرق التي لا تهم بها نقاط Google PageSpeed الخاصة بك. شاركنا أيضًا بعض الإرشادات الموجزة لوضع توصيات النظام الأساسي للعمل على موقع وورد بريس الخاص بك ، من أجل تحسين أدائه.
هل لديك أسئلة حول Google PageSpeed Insights أو تحسين أداء موقعك؟ اسأل بعيدا في قسم التعليقات أدناه!
وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:
مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.
تكامل Cloudflare Enterprise.
يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.
التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.
كل ذلك وأكثر من ذلك بكثير ، في خطة واحدة بدون عقود طويلة الأجل ، وعمليات الترحيل المدعومة ، وضمان استرداد الأموال لمدة 30 يومًا. تحقق من خططنا أو تحدث إلى قسم المبيعات للعثور على الخطة المناسبة لك.

