ووردبريس » كيفية تحسين تسليم CSS في ووردبريس (الخطأ تخلص من موارد حظر العرض)

كيفية تحسين تسليم CSS في ووردبريس (الخطأ تخلص من موارد حظر العرض)

آخر تعديل في 2022-05-17 بواسطة رامي محمد
كيفية-تحسين-تسليم-CSS-في-ووردبريس

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

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

إذا كنت هنا ، فمن المحتمل أنك تلقيت هذا الإشعار في اختبار PageSpeed ​​Insights من Google :

كيفية-تحسين-تسليم-CSS-في-ووردبريس

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

في هذا الدليل ، سأوضح لك ثلاث طرق لتسريع موقع ووردبريس من خلال تقديم CSS محسّن. هناك خيارات لكل من المبتدئين والمطورين الجدد في ووردبريس المدرجة هنا.

لنبدأ من الأعلى - ماذا يعني بالضبط تحسين تسليم CSS على موقع ووردبريس الخاص بك؟

ماذا يعني "تحسين تسليم CSS"؟

اسمحوا لي أن أكون واضحًا حقًا بشأن ما أعنيه أولاً.

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

يتم تحميل جميع ملفات CSS قبل عرض موقعك.

هذا يعني أن الزائرين سيرون شاشة بيضاء فارغة حتى ذلك الحين. الآن هذا هو الشيء …

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

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

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

تحسين مسارات العرض الحرجة أثناء العمل

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

1. WP Rocket

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

مراجعة WP Rocket

لا يمكن أن يكون تحسين تسليم CSS الخاص بك باستخدام WP Rocket أسهل من ذلك. في علامة التبويب "تحسين الملفات" ، يوجد مربع اختيار لتشغيل هذه الميزة.

تسريع موقع ووردبريس,تسريع ووردبريس,ووردبريس,كيفية تسريع موقع ووردبريس,تحسين موقع ووردبريس,زيادة سرعة الموقع ووردبريس,تسريع مدونة ووردبريس,تسريع الووردبريس,كيفيه تسريع موقع الوردبريس,تسريع الوردبريس,كيفية تسريع ووردبريس,تسريع موقع الووردبريس,رفع سرعة موقع ووردبريس,تحسين سرعة موقع ووردبريس,تسريع موقع,زيادة سرعة موقع ووردبريس,اضافة تسريع ووردبريس,تحسين سرعة ووردبريس,أفضل اضافة تسريع ووردبريس,تسريع موقعك,تسريع ووردبريس بتفعيل gzip#1,تسريع الموقع,تحسين تسليم CSS

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

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

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

في رأيي ، هذا هو أفضل حل لتحسين تسليم CSS باستخدام ووردبريس.

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

2. Autoptimize

الطريقة الثانية التي أوصي بها هي المكون الإضافي Autoptimize .

تسريع موقع ووردبريس,تسريع ووردبريس,ووردبريس,كيفية تسريع موقع ووردبريس,تحسين موقع ووردبريس,زيادة سرعة الموقع ووردبريس,تسريع مدونة ووردبريس,تسريع الووردبريس,كيفيه تسريع موقع الوردبريس,تسريع الوردبريس,كيفية تسريع ووردبريس,تسريع موقع الووردبريس,رفع سرعة موقع ووردبريس,تحسين سرعة موقع ووردبريس,تسريع موقع,زيادة سرعة موقع ووردبريس,اضافة تسريع ووردبريس,تحسين سرعة ووردبريس,أفضل اضافة تسريع ووردبريس,تسريع موقعك,تسريع ووردبريس بتفعيل gzip#1,تسريع الموقع,تحسين تسليم CSS

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

للعثور على هذا الخيار ، تحتاج إلى التوجه الى اعدادت المكون الاضافي.

سترى بعد ذلك خيار Inline all CSS.

تسريع موقع ووردبريس,تسريع ووردبريس,ووردبريس,كيفية تسريع موقع ووردبريس,تحسين موقع ووردبريس,زيادة سرعة الموقع ووردبريس,تسريع مدونة ووردبريس,تسريع الووردبريس,كيفيه تسريع موقع الوردبريس,تسريع الوردبريس,كيفية تسريع ووردبريس,تسريع موقع الووردبريس,رفع سرعة موقع ووردبريس,تحسين سرعة موقع ووردبريس,تسريع موقع,زيادة سرعة موقع ووردبريس,اضافة تسريع ووردبريس,تحسين سرعة ووردبريس,أفضل اضافة تسريع ووردبريس,تسريع موقعك,تسريع ووردبريس بتفعيل gzip#1,تسريع الموقع,تحسين تسليم CSS

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

ومع ذلك ، لن يعثر تلقائيًا على CSS المهم بالنسبة لك مثل WP Rocket.

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

على الرغم من أنني لم أختبر هذه الأداة من أجل الموثوقية بنفسي ، فإن أداة Critical Path CSS Generator المجانية هذه ستكون طريقة قابلة للتطبيق. أدخل عنوان URL الخاص بموقعك وسيعيد CSS الذي تحتاج إلى تحميله بشدة.

يمكنك بعد ذلك نسخ ولصق هذا الرمز في مربع Eliminate render-blocking CSS في Autoptimize.

تسريع موقع ووردبريس,تسريع ووردبريس,ووردبريس,كيفية تسريع موقع ووردبريس,تحسين موقع ووردبريس,زيادة سرعة الموقع ووردبريس,تسريع مدونة ووردبريس,تسريع الووردبريس,كيفيه تسريع موقع الوردبريس,تسريع الوردبريس,كيفية تسريع ووردبريس,تسريع موقع الووردبريس,رفع سرعة موقع ووردبريس,تحسين سرعة موقع ووردبريس,تسريع موقع,زيادة سرعة موقع ووردبريس,اضافة تسريع ووردبريس,تحسين سرعة ووردبريس,أفضل اضافة تسريع ووردبريس,تسريع موقعك,تسريع ووردبريس بتفعيل gzip#1,تسريع الموقع,تحسين تسليم CSS

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

طريقة اخرى

تستطيع اضافة الـ CSS المهم ليتم تحميل الموقع بشكل اسرع بواسطة علامة التبويب critcss CSS في المكون الاضافي Autoptimize سيسمح لك بإنشاء CSS مهم لموقعك تلقائيًا باستخدام خدمة criticalcss.com .

ستحتاج إلى التسجيل في CriticalCSS للحصول على حساب مدفوع لاستخدام هذا الخيار.

3. Speed Up

هذا الخيار الأخير سريع جدًا وسيكون بسيطًا على مطور ووردبريس لتنفيذه.

Speed ​​Up هو مكون إضافي خفيف الوزن يتيح لك تأجيل أي أوراق أنماط غير مهمة.

تسريع موقع ووردبريس,تسريع ووردبريس,ووردبريس,كيفية تسريع موقع ووردبريس,تحسين موقع ووردبريس,زيادة سرعة الموقع ووردبريس,تسريع مدونة ووردبريس,تسريع الووردبريس,كيفيه تسريع موقع الوردبريس,تسريع الوردبريس,كيفية تسريع ووردبريس,تسريع موقع الووردبريس,رفع سرعة موقع ووردبريس,تحسين سرعة موقع ووردبريس,تسريع موقع,زيادة سرعة موقع ووردبريس,اضافة تسريع ووردبريس,تحسين سرعة ووردبريس,أفضل اضافة تسريع ووردبريس,تسريع موقعك,تسريع ووردبريس بتفعيل gzip#1,تسريع الموقع,تحسين تسليم CSS

على الرغم من أن هذا لن يؤدي إلى تحسين تسليم CSS تمامًا ، إلا أنه سيساعدك.

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

يمنحك Speed ​​Up مرشحًا بسيطًا يمكنك إضافته إلى ملف function.php للقالب الفرعي (أو ملحق) لتأجيل أي أوراق أنماط تريدها.

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

تصغير اكواد CSS

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

يساعد تصغير CSS في جعل حجم الملف صغيرًا بقدر الإمكان.

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

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

على سبيل المثال ، قد يكون لديك جدول محتويات أعلى ملف CSS الخاص بك يبدو كالتالي:

>>> جدول المحتويات:
--------------------------------
# H2
# H2
# H2
 # H3
 # H3
  # H4
   # H5
# H2

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

الآن دعنا نأخذ الكتلة التالية من CSS ، وهي ليست تعليقًا وهي ضرورية للموقع لكي يعمل بشكل صحيح :

html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }

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

لنرى الآن كيف تبدو CSS مصغرة:

html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}

تتم إزالة كل شيء غير ضروري لكي يعمل الموقع ، وسيصبح حجم ملفك أصغر بكثير . حجم ملف أصغر = وقت تحميل أسرع .

طرق لتصغير CSS للمنفذين والمستخدمين

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

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

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

1. أدوات على الإنترنت

يمكنك استخدام الأدوات عبر الإنترنت لتقليل CSS. يسمح لك Dan's Tools CSS Minifier بنسخ ولصق CSS في مربع نص والضغط على زر لتصغيره.

تصغير ملفات css

2. إضافات ووردبريس

يمكن أن تساعدك إضافات ووردبريس أيضًا في تصغير CSS.

كما ذكرنا سابقا توفر لك اضافة WP Rocket خيار تصغير ملفات CSS في قسم تحسين الملفات.

تصغير ملفات css

يعتبر WP Rocket هو الكل في واحد، لانه يجمع لك جميع الامتيازات في مكون واحد ويقدم الافضل في تسريع الموقع.

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

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

اختبار تحسينات سرعة الصفحة

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

استنتاج

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

آمل أن تكون قد تعلمت شيئًا أو شيئين حول تحسين أداء ووردبريس في هذا المنشور.

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

"لا تقرأ وترحل، ضع بصمتك.. وشاركنا برأيك ..."

أحدث المقالات

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني.