كيفية الطلب

1 تسجيل الدخول أو إنشاء حساب جديد.
2 راجع طلبك أو اطلب خدمة جديدة.
3 تأكيد الدفع

إذا كنت لا تزال تواجه مشكلات ، فالرجاء إخبارنا بذلك عن طريق إرسال بريد إلكتروني إلى support@natchcenter.com . شكراً لك!

ساعات العمل

الإثنين-للجمعة 9:00AM - 20:00PM
السبت - 9:00AM-17:00PM
أيام الأحد عن طريق موعد مسبق فقط!

كيف تجعل موقعك فائق السرعة مع سي اس اس ؟

من قبل NatchCenter / يون 27, 2018 / نشرت في المواقع
كيف تجعل موقعك  فائق السرعة  مع سي اس اس ؟

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

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

فيما يلي خمس نصائح لمساعدتك في الوصول إلى هناك.

. استخدام محددات الضحلة

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

nav ul li.nav-item

يمكن التعبير عن ذلك بطريقة أكثر إيجازًا:

.nav البند

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

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

. استخدام خصائص الاختزال

باستخدام اختصار CSS سيسرع موقعك

يبدو هذا مثل المنطق السليم ، ولكنك ستفاجأ بمدى استخدامك للممتلكات المستعملة دون داعٍ. في ما يلي مثال على بعض الخصائص القديمة المستخدمة:

حجم الخط: 1.5rem؛

خط الطول: 1.618 ؛

font-family: "Arial"، "Helvetica"، sans-serif؛

هذا كثير من المغلق! دعونا نرتب ذلك:

الخط: 1.5rem / 1.618 "Arial" ، "Helvetica" ، sans-serif؛

الخاصية الخط اختزال يتكثف عدة تصريحات في واحد سهل الخطوط التي تأخذ مساحة أقل بكثير.

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

بالطبع ، الخط ليس الاختصار الوحيد المتاح لك. على سبيل المثال ، يمكن استخدام الهامش بدلاً من الخصائص الأطول مثل الهامش ، الهامش ، اليمين وهكذا.

تعمل الخاصية padding بنفس الطريقة. لمزيد من الطرق لتنظيف CSS ، تقدم Mozilla Developer Network قائمة مفيدة بمراجع الخاصية المختصرة.

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

في هذه الحالة ، يجب عليك استخدام خاصية حجم الخط الأكثر تحديدًا بدلاً من ذلك:

H1 {

    الخط: 1.5rem / 1.618 "Arial" ، "Helvetica" ، sans-serif؛

}

media (min-width: 60rem) {

    H1 {

        حجم الخط: 2rem ؛

    }

}

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

 استخدم تلميح المورد التحميل المسبق

يمكن أن يعطي تلميح مورد التحميل المسبق المتصفح السبق في تحميل CSS الخاص بموقعك. يوضح تلميح مورد التحميل المسبق للمستعرض بدء عملية جلب مبكر لمواد عرض.

يمكنك تعيينها كعلامة <link> في HTML:

<link rel = "preload" href = "/ css / styles.css" as = "style">

أو كرأس HTTP في تهيئة الخادم الخاص بك:

الرابط: </css/styles.css> ؛ يختلط = التحميل المسبق. كما = أسلوب

في كل من هذه السيناريوهات ، يعطي التحميل المسبق المتصفح السبق في التحميل /css/styles.css. يفضل استخدام التحميل المسبق في رأس HTTP ، نظرًا لأن هذا يعني أن المتصفح سيكتشف التلميح في رؤوس الردود سابقًا ، بدلاً من لاحقًا في نص الاستجابة.

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

لا يتوفر دفع الخادم على HTTP / 1. ومع ذلك ، يمكن أن يؤدي استخدام التحميل المسبق في بيئة HTTP / 1 إلى تحسين الأداء.

 تعطل مع csscss csscss

 

سيحلل csscss أي ملفات CSS تعطيه وتتيح لك معرفة الكومينتس التي تحتوي على إعلانات متكررة

يمكن أن تدفع لفحص CSS الخاص بك لقواعد مكررة مع المدقق التكرار. خذ csscss أداة روبي ، على سبيل المثال.

يمكن لمستخدمي Ruby تثبيته مع:

جوهرة تثبيت csscss

بمجرد تثبيتها ، يمكنك فحص CSS الخاص بك من أجل التكرار مثل:

csscss -v styles.css

يسرد هذا الأمر أي محددات تشارك القواعد التي يمكنك إلغاء تكرارها لتوفير مساحة:

{h1} و {p} مشاركة 3 إعلانات

  - اللون: # 000

  - خط الطول: 1.618

  - الهامش: 0 0 1.5rem

يمكنك نقل قواعد مكررة ضمن محدد واحد:

h1 ، ص {

    اللون: # 000؛

    خط الطول: 1.618 ؛

    الهامش: 0 0 1.5rem؛

}

ستندهش من مقدار المساحة التي يمكن لهذه العملية أن توفرها في المشاريع الكبيرة. استخدم الخيار --help لمشاهدة المزيد من الأوامر التي يمكنك استخدامها لإضافة المزيد من التعديلات.

 

 اذهب إلى الميل الإضافي مع cssnano

 

cssnano يأخذ CSS الخاص بك بشكل جيد ويديرها من خلال العديد من التحسينات المركزة

بالنسبة للكرز الموجود في الأعلى ، يمكنك استخدام cssnano - عقدة وأداة تعتمد على PostCSS. لا يقوم cssnano بتقليل CSS فقط ، بل يجعل العديد من التحسينات المركزة التي يمكن أن تقلل من CSS أكثر.

تثبيته على النظام الخاص بك مع npm مثل:

npm i -g cssnano-cli

ثم استخدمه لتحسين CSS الخاص بك:

cssnano styles.css optimized-styles.css

إذا لم تكن أوامر التشغيل الخاصة بك هي النمط الخاص بك ، فيمكنك تشغيل cssnano مع نظام إنشاء. إليك كيفية استخدام cssnano في ملف gulpfile:

const gulp = requires ("gulp")؛

const postcss = تتطلب ("gulp-postcss") ؛

const cssnano = تتطلب ("cssnano")؛

 

const buildCSS = () => {

    return gulp.src ("css / styles.css")

        .pipe (postcss ([cssnano ()])

        .pipe (gulp.dest ( "المغلق / الأمثل"))؛

const watch = () => {

    gulp.watch ("css / styles.css"، buildCSS)؛

exports.buildCSS = buildCSS؛

exports.watch = watch؛

تقوم مهمة buildCSS بقراءة CSS التي تكتبها في css / styles.css ، ثم تقوم بتوجيه الإخراج المحسَّن إلى الدليل css / optimized. تنطلق مهمة الساعة من buildCSS عند حدوث التغييرات في css / styles.css.

يمكن عندئذ استدعاء مهمة المراقبة في المحطة مثل:

الساعة

مع بعض التغيير والتبديل ، يمكنك إنشاء سير عمل ينفذ هذا التحسين المحدد بالإضافة إلى المهام الأخرى المرتبطة بـ CSS ، مثل إنشاء ملفات Sass / Less ، و autoprefixing والمزيد

تسجيل الدخول إلى حسابك للوصول إلى ميزات مختلفة

او استخدم وسائل التواصل

إنشاء حساب

نسيت معلومات الدخول؟

عرض سعر

سنفعل كل ما في وسعنا لجعل مشروعك أفضل مشروع لدينا!

إشترك معنا في الأخبار

سوف تتلقى إشعارات عن أحدث العروض والعروض الترويجية

لا تظهر هذا مرة أخرى!
TOP