كيفية تحسين تسليم المغلق – 7 خطوات بسيطة

CSS التحسين صورة ناقلاتلقد ولت الأيام التي أوصى فيها خبراء التصميم والمدونون الرائدون في الصناعة ببناء صفحات ويب لا تزيد عن 30 كيلوبايت …


في ذلك الوقت ، كان من المتوقع أن يتعامل هذا “الغطاء” مع HTML و JavaScript والصور و CSS و Flash. لنكن صادقين ، لا يتطلب الأمر أكثر من 30 كيلوبايت.

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

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

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

إليك 5 أشياء بسيطة يمكنك القيام بها لتحسين CSS الآن.

كيفية تحسين تسليم المغلق بالكامل

1. استخدم الاختزال

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

خاصية الخط المغلق

هناك العديد من العناصر التي يمكنك استخدامها للاختزال ، ولكن الأكثر شيوعًا تشمل:

  • حافة
  • حشوة
  • الخط
  • الخطوط العريضة
  • الحدود
  • خلفية
  • نمط قائمة

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

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

إذا كنت تستخدم اختصارًا في كل منطقة ممكنة ، فقد يؤدي ذلك إلى تقليل الحجم الإجمالي للملف بشكل كبير.

2. تخلص من المأجورون

أي حكم المغلقلخدمة قواعد CSS الخاصة بـ IE ، يمنحك استخدام الاختراق المشروط CSS ميزة عرض ملف CSS افتراضي أصغر وأنظف.

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

إذا كان عليك استخدام اختراق ، فمن الضروري أن يكون الرمز الذي تستخدمه خاصًا بإصدار Internet Explorer الذي تركز عليه.

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

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

3. كن ذكيا في استخدام المسافات البيضاء

لرمز CSS الخاص بك, مسافة بيضاء أمر حتمي لقراءة.

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

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

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

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

الآن ، بالنسبة إلى إصدار إنتاج ملف CSS ، يمكنك إزالة المسافة البيضاء. ستظل موجودة في ملف العمل الخاص بك.

هذه طريقة أخرى للتسوية بحيث يكون لديك ملفات أصغر وتنسيقات قابلة للقراءة.

4. إعادة تقليم وأطر

عند استخدامك لإطار CSS ، من الضروري مراجعة الوثائق.

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

إزالة قواعد المغلق غير المستخدمة

قد تجد أنه يمكنك تحقيق تفاصيل العرض بطريقة أكثر دقة وأنيقة …

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

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

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

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

5. إثبات المستقبل CSS الخاص بك

بناء الجملة Css

خيار آخر مفيد لتحسين CSS: افصل غالبية قواعدك عن الإعلانات الخاصة بالتخطيط.

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

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

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

بمجرد حدوث هذا الدعم ، لن يكون من الصعب جدًا تبديل خصائص النموذج الصندوقي التي يتم اختراقها لتلك المخصصة للتخطيطات.

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

6. احرص دائمًا على تحديث الوثائق المتعلقة بعملك

سواء كنت تعمل على موقع ويب كفريق أو بمفردك ، فمن الضروري تتبع كل ما قمت به.

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

مضيفا تعليق المغلقتعد ازدواجية الرموز مجالًا كبيرًا للقلق لكل من الفرق والمصممين الفرديين ، خاصة عند استخدام منشئي المواقع المشهورين. Wix و Squarespace وبرامج بناء مواقع الويب الأخرى معروف بتكرار الرمز ، أو فقده تمامًا من قاعدة بياناتهم.

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

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

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

7. ضغط ملفاتك (CSS Optimization 101)

ضغط المغلق والتحسين gif

الضغط: هناك ما هو أكثر من ذلك …

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

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

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

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

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

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

دورك

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

ومع ذلك ، تساعد المبادئ التي تمت مناقشتها هنا في كل من تجربة التطوير وتجربة المستخدم.

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

لقد اختبرنا كل واحد من مضيفي الويب الكنديين ونوصي باستخدام SiteGround. فهي لا تساعدك فقط على تحسين تسليم CSS ، ولكن دعمها الفني لا مثيل له.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map