يمكن أن يتسبب أي CSS غير مستخدم على صفحتك في تأخير عرض المحتوى لأول مرة لأنه يستغرق المزيد من الوقت حتى يقوم المتصفح بمعالجة وتنزيل ملفات CSS المطلوبة. يجب عليك إزالة CSS غير المستخدمة لتحسين صفحة الويب الخاصة بك والتأكد من تحميلها بسرعة عندما يصل الزائر إليها.
في هذه المقالة ، سنشرح كيف يمكنك إصلاح تحذير "إزالة CSS غير المستخدمة" من اختبار Google PageSpeed Insights.
هيا لنبدأ مع الأساسيات.
ما هو CSS غير المستخدم؟
CSS غير المستخدمة هي التعليمات البرمجية الموجودة في أوراق الأنماط التي لا يتم استخدامها لتصميم أي عنصر صفحة ضروري لعرض المحتوى أولاً على الصفحة. ومع ذلك ، فمن الطبيعي تمامًا وجود بعض CSS غير المستخدمة في بعض أجزاء الشفرة التي تتكون منها صفحات الويب الخاصة بك.
هذا لأنه في بعض الأحيان يتم تحديد عنصر صفحة في التعليمات البرمجية ولكن لا يتم استخدامه في الصفحة التي يتواجد فيها المستخدم. على سبيل المثال ، قد تحتوي شفرة CSS الموجودة في صفحات أنماط موقعك على شفرة CSS إضافية لمستخدمي أجهزة الجوّال والأجهزة اللوحية الذين يزورون موقعك. لن يتم استخدام هذا الرمز المحدد للمستخدمين الذين يزورون صفحة الويب الخاصة بك على جهاز سطح المكتب.
إذا كنت قد أضفت CSS إلى موقعك (على سبيل المثال في أداة التخصيص) ولكنك قررت لاحقًا تصميم موقع ويب مختلف ، فمن المحتمل أن يكون هناك CSS غير مستخدم. هذا يعني أن جميع CSS التي أضفتها مسبقًا لن يتم استخدامها مع التصميم الجديد الذي قررت الالتزام به.
بالإضافة إلى ذلك ، يمكن أيضًا إنشاء CSS غير مستخدم عند إضافة بعض الميزات إلى موقعك أثناء مرحلة التطوير ولكن تنس إزالة كود CSS عند التخلص من هذه الميزات. لهذا السبب ، قد تظل بعض عناصر ورقة الأنماط باقية في شفرتك على الرغم من أنها ليست قيد الاستخدام.
قد تكون CSS غير المستخدمة أحد أهم العوامل التي تساهم في بطء الاستجابة وسرعة الصفحة البطيئة على موقعك. نظرًا لأنه يتم إضافة CSS غير الضرورية إلى أوراق الأنماط ، فإنه يزيد من الحجم الكلي للملف. ونتيجة لذلك ، فإنه يؤدي إلى إبطاء أوقات الاستجابة بشكل كبير ويسبب تأخيرًا في عرض المحتوى لأول مرة على صفحة الويب الخاصة بك.
كيف تؤثر CSS غير المستخدمة على سرعة الصفحة؟
قد تبدو CSS غير المستخدمة مشكلة غير مهمة ولكن الحقيقة هي أنها تؤثر سلبًا على سرعة الصفحة ومقاييس Core Web Vitals الهامة الأخرى.
المتصفح مطلوب لمعالجة وتنزيل جميع ملفات CSS الخارجية قبل أن يتمكن من بدء عرض المحتوى على شاشة المستخدم. كلما زاد عدد ملفات CSS ، كلما طال انتظار المستخدم قبل أن يرى أي عناصر صفحة يتم تحميلها عند زيارته لصفحة الويب الخاصة بك لأول مرة.
لا يؤثر ذلك على تجربة المستخدم فحسب ، بل يؤدي أيضًا إلى إبطاء الأداء العام لموقع الويب الخاص بك ويجعل من الصعب على المتصفح تحميل عناصر الصفحة بسرعة. بالإضافة إلى ذلك ، في النهاية الخلفية ، يصعب على المطورين إدارة أوراق الأنماط التي تحتوي على تعليمات برمجية غير ضرورية. لا تريد أن تزدحم أوراق أنماط CSS باستخدام CSS غير المستخدمة حيث قد يكون من الصعب إصلاح الأخطاء لاحقًا على الطريق.
يحتاج المستعرض أولاً إلى البحث عن ملفات CSS التي تحتاجها الصفحة وتنزيلها قبل أن يبدأ أولاً في عرض المحتوى على إطار عرض المستخدم. وهذا يعني أنه عندما تحتوي ملفات CSS على شفرة CSS غير مستخدمة بالإضافة إلى حجم ملف أكبر ، فسيستغرق إنشاء شجرة عرض الصفحة وقتًا أطول. وبالتالي ، سيستغرق تحميل عناصر الصفحة المطلوبة وقتًا أطول عندما يبدأ زوار الموقع في تنزيل صفحة الويب لأول مرة.
ماذا يعني تحذير "إزالة CSS غير المستخدمة"؟
يظهر تحذير "إزالة CSS غير المستخدم" عندما تحتوي صفحة الويب الخاصة بك على بعض أكواد CSS غير الضرورية لعرض المحتوى لأول مرة. هذا يعني أن المتصفح يقوم بتنزيل ملفات CSS غير المستخدمة ولكنه لا يستخدمها في أي مكان. هذا هو الوقت الحاسم الضائع الذي ينتظره المستخدم لرؤية المحتوى أولاً على شاشتهم.
من الممكن أيضًا أن يكون حجم شفرة CSS أكبر. بشكل عام ، هذا يعني أن هناك فرصًا أكبر لوجود CSS غير مستخدم فيه. بالإضافة إلى ذلك ، إذا كان موقعك على الويب يستخدم مكونات إضافية أو أدوات إنشاء صفحات أو أي سمات تابعة لجهات خارجية ، فقد يكون هناك بعض CSS غير المستخدمة للميزات التي لا تستخدمها. نظرًا لأن المكون الإضافي أو منشئ الصفحة أو سمة الجهة الخارجية مصممة مع وضع جميع أنواع المستخدمين في الاعتبار ، فإنها تحتوي على رمز CSS لجميع الميزات ، بما في ذلك الميزات التي تقوم بإيقاف تشغيلها لموقع الويب الخاص بك.
تؤثر CSS غير المستخدمة على المقاييس الأساسية لأهمية الويب لصفحة الويب الخاصة بك والتي تعتبر مهمة لترتيب موقعك في نتائج محرك البحث. تتأثر مقاييس PageSpeed Insights مثل Largest Contentful Paint و First Contentful Paint و Compulative Layout Shift سلبًا بواسطة CSS غير المستخدمة في التعليمات البرمجية الخاصة بك.
هذا ليس سيئًا فقط لنتائج Core Web Vitals ولكن يمكن أن يتسبب أيضًا في استجابة أبطأ على صفحات الويب الخاصة بموقعك. بالإضافة إلى ذلك ، يزيد CSS غير المستخدم من إجمالي وقت الحظر الذي يعد أيضًا مقياسًا مهمًا لأهمية الويب الأساسية.
ما الذي يسبب تحذير "إزالة CSS غير المستخدمة"؟
هناك طريقة سهلة لمعرفة ما إذا كانت صفحة الويب الخاصة بك تحتوي على CSS غير مستخدمة أم لا. ما عليك سوى إدخال عنوان URL لموقعك في اختبار PageSpeed Insights والنقر فوق إدخال.
إذا كان موقع الويب الخاص بك يحتوي على CSS غير مستخدمة بشكل مفرط مما يعيق الأداء ، فسوف يعرض تحذيرًا "إزالة CSS غير المستخدمة". بهذه الطريقة ، يمكنك فهم المشكلة الأساسية بشكل أفضل في أوراق أنماط CSS واتخاذ خطوات لمنع ظهور التحذير مرة أخرى.
بالإضافة إلى ذلك ، من الممكن أيضًا معرفة ما إذا كان هناك CSS غير مستخدم باستخدام Chrome Dev Tools. كل ما عليك فعله هو فتح قائمة الفحص ثم التوجه إلى علامة التبويب التغطية لعرض CSS غير المستخدمة في صفحة الويب.
أحد الأسباب الرئيسية لتحذير "إزالة CSS غير المستخدمة" هو استخدام ملف CSS واحد لإدارة جميع عناصر ورقة الأنماط الخاصة بك. بهذه الطريقة ، هناك فرصة أكبر لوجود CSS غير مستخدمة في ملف الشفرة ويصعب عليك تحديد شفرة CSS غير المستخدمة من الشفرة المطلوبة لعناصر الصفحة على موقعك.
يمكن أيضًا أن يكون التحذير "إزالة CSS غير المستخدم" ناتجًا عن إدراج CSS في موقع الويب الخاص بك من خلال المكونات الإضافية أو سمات الجهات الخارجية. حتى إذا قمت بتعطيل بعض الميزات ، فلا يزال يتم حقن ملفات CSS في ملف التعليمات البرمجية الخاص بك. وبالمثل ، قد تحتوي العناصر الديناميكية على موقعك مثل مربعات البحث أو مربعات إشعارات التراكب على CSS غير مستخدم موجود بالفعل في الشفرة.
كيفية إزالة CSS غير المستخدمة
سنعرض لك هنا طرقًا مختلفة لإصلاح تحذير "إزالة CSS غير المستخدمة" من صفحات الويب الخاصة بك.
استخدم سمة WooCommerce خفيفة الوزن
هناك طريقة رائعة لتسريع موقع الويب الخاص بك وهي استخدام سمة WooCommerce خفيفة الوزن ومحسّنة للأداء مثل Shoptimizer.
إذا كان موضوع WooCommerce الخاص بك مبهرجًا ويحتوي على ميزات ضخمة تحتوي على الكثير من أوراق أنماط CSS ، فهناك احتمالية أن يؤدي ذلك إلى إبطاء موقعك وتجعل من الصعب عليك اكتشاف CSS غير المستخدمة وإزالتها.
من ناحية أخرى ، يمكن أن يؤدي استخدام سمة WordPress خفيفة الوزن إلى تقليل أوراق أنماط CSS اللازمة لترتيب عناصر الصفحة على موقعك. هذا يعني أنه مع وجود عدد أقل من الميزات وعناصر التصميم المضمنة مسبقًا في السمة ، سيكون هناك عدد أقل من أوراق أنماط CSS ذات أحجام ملفات أصغر. نتيجة لذلك ، هناك فرص أقل لأي كود CSS غير مستخدم يجب إزالته.
عادةً ما تحتوي سمة WooCommerce المُحسَّنة للأداء على ملفات CSS لعناصر الصفحة المهمة فقط. هذا يعني أن المتصفح يستغرق وقتًا أقل للعثور على ملفات CSS المطلوبة ومعالجتها لعرض المحتوى أولاً على صفحة الويب الخاصة بك.
احذف CSS غير المستخدمة يدويًا
تتمثل إحدى أفضل الطرق لإزالة CSS غير المستخدمة من موقع الويب الخاص بك في حذفها يدويًا إما بنفسك أو بمساعدة أحد المطورين. على الرغم من أنها عملية تستغرق وقتًا طويلاً ، إلا أنها تعمل بشكل أفضل من حيث إزالة كل جزء من CSS غير المستخدم من أوراق الأنماط الخاصة بك.
إنها أيضًا طريقة رائعة للتأكد من أن جميع ملفات CSS المطلوبة لعرض الصفحة لا تزال موجودة في التعليمات البرمجية الخاصة بك بعد إزالة ملفات CSS غير المرغوب فيها من صفحات الويب الخاصة بك.
على سبيل المثال ، سيبدو كود CSS لمستخدمي الهاتف المحمول وسطح المكتب والجهاز اللوحي متشابهًا ولكنه يقوم بأشياء مختلفة. لا ترغب في حذف ملفات CSS المهمة واكتشف لاحقًا أنه يتعين عليك إضافتها إلى شفرتك مرة أخرى لأن هذه الملفات ضرورية حتى يعمل موقع الويب الخاص بك بشكل صحيح عبر الأجهزة المختلفة.
يمكن أن يكون فحص ملفات CSS يدويًا مفيدًا أيضًا بطرق أخرى. قد تجد CSS على موقعك يمكنك تقصيرها. هذا يعني أنه سيكون لديك مساحة أكبر للتحسين عندما تنظر في جميع ملفات CSS لموقعك على الويب واحدًا تلو الآخر.
نصيحة احترافية: من المهم جدًا إجراء نسخ احتياطي لملفات CSS قبل أن تبدأ يدويًا في تحرير وحذف CSS غير المستخدمة من التعليمات البرمجية الخاصة بك. هذا عندما تنتهي بإزالة الكثير من CSS وتحتاج إلى العودة إلى كود CSS "العامل" مرة أخرى.
قسّم ملفات CSS الأكبر حجمًا إلى عدة ملفات أصغر
من الناحية المثالية ، تريد استخدام ملفات CSS متعددة وأصغر بدلاً من استخدام ملف CSS كبير. بهذه الطريقة ، يمكنك تقليل عدد قواعد CSS اللازمة لتحميل المحتوى أولاً على صفحة الويب الخاصة بك. يمكن للمتصفح تحميل أنماط CSS التي يحتاجها لجهاز المستخدم فقط ، بدلاً من تحميل جميع أنماط CSS واستخدام أحدها.
هذا لا يوفر الكثير من الوقت فحسب ، بل يقصر سلسلة الطلبات الحرجة أيضًا. بالنسبة لأولئك غير المألوفين ، يستخدم المتصفح سلسلة الطلبات الحرجة لمعالجة العناصر الموجودة في السلسلة ثم تنزيلها. كلما كانت سلسلة الطلبات الحرجة أقصر ، قل الوقت الذي سيستغرقه المتصفح لعرض المحتوى أولاً على شاشة الزائر.
يقسم Shoptimizer CSS إلى أجزاء مكونة ، بحيث يتم تحميل أنماط CSS لقسم المدونة على صفحات المدونة على سبيل المثال. يؤدي هذا إلى تقليل حجم ورقة الأنماط الرئيسية ، حيث لا تحتاج إلى تصميم المدونة على سبيل المثال ، صفحة عربة التسوق.
يمكنك استخدام سمة الوسائط في كود CSS لإعطاء "اتجاه" أفضل للمتصفح. تخبر سمة الوسائط المستعرض الخاص بك باستخدام أوراق أنماط CSS فقط عندما تتطابق الوسائط المطلوبة مع سمة الوسائط التي ذكرتها في الكود. بهذه الطريقة ، لا يهدر المتصفح الموارد في تحميل CSS غير مستخدمة ويحسن سرعة تحميل الصفحة على موقعك.
استخدام البرنامج المساعد التلقائي الأنظف CSS
هناك طريقة أخرى لإزالة CSS غير المستخدمة وهي استخدام مكون إضافي لتنظيف CSS لموقعك على الويب. بهذه الطريقة ، يمكنك إزالة CSS غير المستخدمة تلقائيًا من صفحات الويب الخاصة بك.
فيما يلي المكونات الإضافية التي نوصي بها لتنظيف CSS غير المستخدمة تلقائيًا من موقع الويب الخاص بك:
تنظيف الأصول: معزز سرعة الصفحة
Asset CleanUp: يقدم المكون الإضافي Page Speed Booster حلاً شاملاً لإزالة CSS غير المستخدمة من صفحات الويب الخاصة بك. إنه سهل الاستخدام وكل ما عليك فعله هو السماح للمكون الإضافي بفحص صفحات الويب الخاصة بك ثم تحديد ملفات CSS وجافا سكريبت التي تريد إزالتها.
يوفر WP Rocket أيضًا خيار Remove Unused CSS الذي يتيح لك تقليل الحجم الكلي للصفحة وعدد أوراق أنماط CSS اللازمة لتحميل المحتوى أولاً على صفحات الويب الخاصة بك. يكتشف تلقائيًا "CSS المستخدمة" من صفحة الويب الخاصة بك ويزيل CSS غير المستخدم بسرعة.
يُعد Perfmatters مكونًا إضافيًا خفيف الوزن يتيح لك تحسين أداء موقعك على الويب وسرعته. كما يوفر أدوات لإزالة ملفات أكواد CSS غير المستخدمة وأجزاء أخرى من التعليمات البرمجية غير مطلوبة.
ما الذي يمكنك فعله أيضًا لإصلاح CSS غير المستخدمة؟
تصغير ملفات CSS. يعد تصغير ملفات CSS أمرًا رائعًا لتحسين سرعة الصفحة ويساعد في تقليل فرص ترك أي CSS غير مستخدم في الكود.
استخدم شبكة توصيل المحتوى (CDN). يمكن استخدام شبكة توصيل المحتوى لتسليم ملفات CSS. لا يزال من الممكن تسليم أي CSS غير مستخدم إلى متصفحك بسرعة ، مما يؤدي إلى أوقات تحميل أسرع للصفحة.
مضمنة CSS الحرجة وتأجيل CSS غير الحرجة. تريد التأكد من أن CSS المهمة فقط هي الموجودة في الجزء المرئي من موقع الويب الخاص بك وأن جميع CSS غير الهامة مؤجلة.
خاتمة
قد لا تبدو إزالة CSS غير المستخدمة كثيرًا ولكنها مهمة لتحسين سرعة الصفحة وأوقات الاستجابة على موقعك. تؤثر CSS غير المستخدمة على جميع مقاييس Core Web Vital على موقع الويب الخاص بك مما قد يؤدي إلى ترتيب ضعيف في خوارزميات محرك بحث Google.
فيما يلي بعض المؤشرات التي يجب وضعها في الاعتبار عند التعامل مع تحذير "إصلاح CSS غير المستخدم":
- استخدم سمة WooCommerce المحسّنة للأداء لموقعك على الويب. تتميز السمات خفيفة الوزن بأحجام ملفات CSS أصغر مقارنة بموضوع WordPress التقليدي. هذا يجعل اكتشاف وإزالة أي CSS غير مستخدم من موقعك أسهل بكثير.
- قد ترغب في محاولة حذف CSS غير المستخدمة يدويًا أو استخدام مكون إضافي منظف CSS تلقائي. بناءً على موقعك ، ومهاراتك ، والوقت الذي ترغب في تخصيصه لهذا الغرض ، هناك خيارات مختلفة متاحة لإزالة CSS غير المستخدمة.
- قد ترغب أيضًا في تقسيم ملفات CSS الكبيرة إلى ملفات أصغر متعددة لتقليل فرص تجاهل أي CSS غير مستخدم أثناء مرحلة الاكتشاف.