-->
نصيحة اليوم :
إذا وجدت رجلا يمدحك و لا يملك أي ضغينة تجاهك فأعلم انه يحبك | اشتركوا في قنواتنا على اليوتيوب KPear , GOKP
    1 | 6
iPhone 7 plus vs Galaxy s8 plus vs Galaxy A20s vs Galaxy A30
مقارنة بين iPhone 7 plus vs Galaxy s8 plus vs Galaxy A20s vs Galaxy A30 التحديث الجديد من لعبة Freefire
    2 | 6
كيف أنجح في اليوتيوب ؟ السر الذي تم إخفاؤه عنك؟
كيف أنجح في اليوتيوب ؟ السر الذي تم إخفاؤه عنك؟
    3 | 6
 حل مشكلة تقييد الإعلانات في جوجل ادسنس اليكم الحل النهائي
حل مشكلة تقييد الإعلانات في جوجل ادسنس اليكم الحل النهائي
    4 | 6
 أخطاء مرعبة من لعبة efootball pes 2021 و إليك طرق تحميلها على الأندرويد و الكمبيوتر ؟
أخطاء مرعبة من لعبة efootball pes 2021 و إليك طرق تحميلها على الأندرويد و الكمبيوتر ؟
    5 | 6
أداة لتحويل الصور من اي صيغة بضغطة زر واحدة إلى Webp
أداة لتحويل الصور من اي صيغة بضغطة زر واحدة إلى Webp ؟
    6 | 6
 افضل تطبيقات للمونتاج و تعديل الفيديوهات بإحترافية للاندرويد
افضل تطبيقات للمونتاج و تعديل الفيديوهات بإحترافية للاندرويد
موضوع مميز أو حصة جديدة:

جميع إصدارات iPhone 13 مع مواصفاتهم و هذا ثمن كل واحد فيهم

إصدارات iPhone 13 الرسمية شركة ابل تبتكر تصميم جديد لاجهزتها الايفون في نسختها الجديدة تحت اسم iPhone 13 و الذي سيتم اطلاق بيعه في جميع انحا...

5 نصائح لتحسين أداء CSS و تسريع المدونة

5 نصائح لتحسين أداء CSS و تسريع المدونة 

5 نصائح لتحسين أداء CSS

في هذا الموضوع  نلقي نظرة على 5 طرق لتحسين تنسيق css الخاص بك حتى يتم تحميله بشكل أسرع ويكون أقل صعوبة في الرسم به ويكون أكثر كفاءة لتسريع المدونة .

وفقا للمراجعات الحديثة من أرشيف http لا يزال الإنترنت في حالة من الفوضى المتضخمة مع متوسط موقع الويب الأسطوري الذي يتطلب 1700 كيلو بايت من المعلومات مقسمة إلى ثمانين طلب HTTP وتستغرق 17 ثانية للتحميل المطلق على أداة محمولة .

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

تسريع المدونة عبر ضغط الملفات

من غير المحتمل أن يكون CSS هو السبب المباشر لمشاكل الأداء ومع ذلك يمكنك تحميل أصول عالية التأثير يمكن تحسينها في دقائق أمثلة :

  1. قم بتمكين ضغط HTTP و GZIP على الخادم الخاص بك
  2. استخدم شبكة توصيل المحتوى CDN لزيادة عدد اتصالات HTTP المتزامنة ونسخ الملفات إلى مواقع أخرى حول العالم
  3. احذف الملفات غير المستخدمة
اطلع على هذه المواضيع :

غالبا ما تكون الصور هي السبب الرئيسي لحجم الصفحة ولكن العديد من المواقع تفشل في التحسين بشكل فعال :

  • تغيير حجم الصور 
  • تأكد من استخدام تنسيق ملف مناسب عادة ما يكون 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 زيادة الضغط عند استخدام السلاسل شائعة الاستخدام في الملف .

شارك هذه الحصة أو الموضوع :

قد يهمك

KindlyPear | كمثري | Kemtheri

موقع كمثري Kemtheri يرحب بكم , إهتماماتك هنا كل ما يخص التقنية , التكنولوجيا , ألعاب الفيديو و الثقافة بأنواعها , مع تجارب و إختراع مختارة و حصرية

موقع كمثري