في هذا الموضوع نلقي نظرة على 5 طرق لتحسين تنسيق css الخاص بك حتى يتم تحميله بشكل أسرع ويكون أقل صعوبة في الرسم به ويكون أكثر كفاءة لتسريع المدونة .
5 نصائح لتحسين أداء CSS
وفقا للمراجعات الحديثة من أرشيف http لا يزال الإنترنت في حالة من الفوضى المتضخمة مع متوسط موقع الويب الأسطوري الذي يتطلب 1700 كيلو بايت من المعلومات مقسمة إلى ثمانين طلب HTTP وتستغرق 17 ثانية للتحميل المطلق على أداة محمولة .
يقدم الدليل الكامل لتقليل وزن الصفحة بعض المؤشرات في هذه المقالة سوف ندرك على css من الفعلي أن لا يكون css في كثير من الأحيان هو الجاني الأسوأ وأن موقع الويب العادي يستخدم 40 كيلو بايت تتكشف على خمس أوراق أزياء مع ذلك هناك مع ذلك تحسينات يمكنك القيام بها وطرق لتبادل الطريقة التي نستخدم بها css بهدف تحسين أداء الموقع .
تسريع المدونة عبر ضغط الملفات
من غير المحتمل أن يكون CSS هو السبب المباشر لمشاكل الأداء ومع ذلك يمكنك تحميل أصول عالية التأثير يمكن تحسينها في دقائق أمثلة :
- قم بتمكين ضغط HTTP و GZIP على الخادم الخاص بك
- استخدم شبكة توصيل المحتوى CDN لزيادة عدد اتصالات HTTP المتزامنة ونسخ الملفات إلى مواقع أخرى حول العالم
- احذف الملفات غير المستخدمة
اطلع على هذه المواضيع :
غالبا ما تكون الصور هي السبب الرئيسي لحجم الصفحة ولكن العديد من المواقع تفشل في التحسين بشكل فعال :
- تغيير حجم الصور
- تأكد من استخدام تنسيق ملف مناسب عادة ما يكون JPG هو الأفضل للصور و SVG للصور المتجهة و PNG لكل شيء آخر يمكنك تجربة للعثور على النوع الأمثل و تنصح جوجل بشدة استخدام الصور بصيغة webp
- استخدم أدوات التصوير لتقليل أحجام الملفات عن طريق تقسيم البيانات الأولية وزيادة عوامل الضغط
تسريع المدونة عبر استخدام الصور بصيغة webp
تعتبر ملفات الصور بصيغة webp الافضل لتحميلها في المواقع الالكترونية و تنصح بها كبار الخبراء في مجال السيو و اهمها جوجل التي دائما ما توجهك الى حل مشكلة الصور او تحميل الصور بتنسيق الجيل القادم و يمكنك تحويل الصور إلى webp عبر اداة iWKP
استبدل الصور بتأثيرات CSS
ليس من الضروري على الإطلاق تطبيق الصور التاريخية السابقة للحدود والظلال والحواف الدائرية والتدرجات وبعض الأشكال الهندسية عند تحديد صورة فإن استخدام كود css يستخدم نطاقا تردديا أقل بكثير ويسهل ضبطه أو تحريكه لاحقا.
إزالة الخطوط غير الضرورية
تجعل الخدمات مثل Google Fonts من السهل إضافة خطوط مخصصة إلى أي صفحة لسوء الحظ ، يمكن لسطر أو اثنين من التعليمات البرمجية استرداد مئات الكيلو بايت من بيانات الخط التوصيات:
استخدم الخطوط التي تحتاجها فقط
حدد مجموعات الأحرف تتيح لك خطوط Google اختيار أحرف معينة عن طريق إضافة الخط الخاص بك مثل :
fonts.googleapis.com/css؟family=Open+Sans&text=SitePon
ضع في اعتبارك الخطوط المتغيرة التي تحدد الأوزان والأنماط المتعددة عن طريق الاستيفاء بحيث تكون الملفات أصغر يقتصر الدعم حاليا على Chrome و Edge وبعض إصدارات Safari ولكن يجب أن ينمو بسرعة راجع كيفية استخدام الخطوط المتغيرة .
ضع في اعتبارك خطوط نظام التشغيل قد يكون خط الويب 500 كيلو بايت الخاص بك على العلامة التجارية ولكن هل سيلاحظ أي شخص إذا قمت بالتبديل إلى Helvetica أو Arial المتاح بشكل شائع تستخدم العديد من المواقع خطوط ويب مخصصة ، لذا فإن خطوط نظام التشغيل القياسية أقل شيوعا مما كانت عليه .
تجنب استيراد @ import
تسمح import at-rule بتضمين أي ملف CSS في ملف آخر على سبيل المثال :
/ * main.css * /
import url ("base.css") ؛
import url ("layout.css") ؛
import url ("carousel.css") ؛
تبدو هذه طريقة معقولة لتحميل مكونات وخطوط أصغر ليست كذلك يمكن دمج قواعد import بحيث يجب على المتصفح تحميل وتحليل كل ملف في السلسلة .
ستعمل علامات <link> المتعددة داخل HTML على تحميل ملفات CSS بالتوازي وهو أكثر فاعلية إلى حد كبير خاصة عند استخدام HTTP
<link rel = "stylesheet" href = "base.css">
<link rel = "stylesheet" href = "carousel.css">
تسريع المدونة عبر التسلسل و التصغير
تسمح لك معظم أدوات البناء بدمج جميع الأجزاء في ملف CSS كبير واحد يحتوي على مسافات بيضاء وتعليقات وأحرف غير ضرورية .
يعتبر التسلسل أقل أهمية مع HTTP والذي تطلبه خطوط الأنابيب والمضاعفات في بعض الحالات قد تكون الملفات المنفصلة مفيدة إذا كان لديك أصول CSS أصغر يتم تغييرها بانتظام ومع ذلك من المرجح أن تستفيد معظم المواقع من إرسال ملف واحد يتم تخزينه مؤقتا على الفور بواسطة المتصفح قد لا يعود التصغير بفوائد كبيرة عند تمكين GZIP ومع ذلك ليس هناك جانب سلبي حقيقي .
أخيرا يمكنك التفكير في عملية إنشاء الخصائص بشكل متسق داخل الإعلانات يمكن لـ GZIP زيادة الضغط عند استخدام السلاسل شائعة الاستخدام في الملف .
💬تعليقات
إرسال تعليق