ستقدم لك هذه المقالة موضوعًا يعرف باسم Minify In وأثناء العملية أيضًا تعطيك عرضًا عمليًا تفصيليًا. سيتم تغطية المؤشرات التالية في هذه المقالة ،
- ما هو التصغير؟
- لماذا التصغير مطلوب؟
- كيف يمكنك تصغير كود CSS و JS و HTML؟
- متى يجب أن تفعل ذلك؟
- فوائد التصغير؟
كما يوحي لنا الاسم جيدًا ، يتعلق التصغير بتقليل حجم الملف. في قاعدة التعليمات البرمجية ، لدينا الحرية في تصغير ملفات HTML أو CSS أو Javascript. هنا ، سنناقش حول تصغير ملف CSS.
عندما يقوم مطور برموز ، فإنه يتأكد من أن الشفرة في أفضل تنسيق قابل للقراءة لتبسيط أي عملية لإجراء المزيد من التغييرات. لذلك ، تكون أسماء المتغيرات بتنسيق يسهل فهمه وتتطلب مجموعة كبيرة من الأحرف. بعد ذلك ، يضيفون أيضًا قدرًا جيدًا من المسافات الفارغة لجعلها مقروءة بشكل كافٍ.
ولكن في العملية برمتها ، نميل إلى تخفيف القيود التي يزيد حجم ملفنا بها مما يؤدي بدوره إلى زيادة وقت تحميل موقع الويب. خاصة مع مواقع الويب التي تحتوي على جزء كبير من الوظائف والوظائف الإضافية ، فإن قاعدة الشفرة الأطول تجعل موقع الويب أسوأ.
جافا سلسلة تقسيم التعبير العادي محددات متعددة
على أي حال ، لدى Google تنسيق مقيد لترتيب مواقع الويب على صفحة البحث الخاصة بها بناءً على تجربة المستخدم المثلى التي توفرها مواقع الويب. كلما تم تحميل موقعك بشكل أفضل ، كان ترتيب موقع الويب الخاص بك على صفحة البحث أفضل.
مع وجود الكثير على المحك ، فأنت لا تريد أن يعاني المستخدمون بسبب وقت تحميل الموقع السيئ والانتقال إلى المرحلة التالية. لذلك ، فإن تصغير الكود مهم للغاية.
إنفاكت ، أثناء إنشاء موقع على شبكة الإنترنت ، نعلم ما الذي يتكون من قاعدة الشفرة القصوى؟
الأمر كله يتعلق بـ CSS و HTML و Javascript. إن المنافسة اليوم لجعل موقع الويب الخاص بك يبدو جذابًا بصريًا تؤكد على ملف CSS كثيرًا وبدون أن ندرك أننا نستفيد من موقعنا الإلكتروني باستخدام كود ثقيل.
يدخل ، تصغير ..
المضي قدما مع هذه المقالة على Minify CSS
ما هو تصغير ؟
يسمح لك التصغير بتجريد شفرتك إلى الحد الأدنى من حجم الملف الذي لا يؤثر على الكود ومع ذلك يقلل من حجم الملف. في هذه العملية ، يمكنك إزالة المسافات والأحرف غير الضرورية التي لا تؤثر في أصالة موقع الويب الخاص بك في أي مكان. بعض الأشياء التي يجب تجنبها من الكود هي:
- أحرف المسافات البيضاء
- أحرف سطر جديد
- محددات الكتلة
- تعليقات
- تقصير أسماء المتغيرات
لا يتم تضمين هذه العوامل لتشغيل موقع الويب الخاص بك بدلاً من ذلك ، فقط قم بزيادة حجم الملف وزيادة وقت تحميل موقع الويب.
قراءة الكود حصرية تمامًا لما تفهمه الآلة. لا يحتاج متصفح الويب إلى مسافات إضافية بين الأحرف لفهمها وتشغيلها. لذا ، حاول تقليلها وتقليل كود CSS و HTML.
لنأخذ مثالا:
#myContent {font-family: Montserrat} #myContent {font-size: 90٪}تصغير CSS الخاص بي
تقريبًا اختلاف بنسبة 48٪ في الملف الأصلي والملف المصغر. تم تقليله بمقدار 178 بايت. بعد التصغير
#myContent {font-family: Arialfont-size: 90٪}مرحبا بالعالم!
المضي قدما مع هذه المقالة على Minify CSS
لماذا تصغير بحاجة؟
لتحسين وقت تحميل الموقع. لا أحد يحب انتظار تحميل موقع ويب حسب الراحة. مع وجود العديد من الخيارات المتاحة ، يميل الأشخاص إلى التبديل إلى خيار آخر. لذلك ، من الأفضل تقليل حجم الملف.
المضي قدما مع هذه المقالة على Minify CSS
كيف يمكنك تصغير CSS ، JS ، كود HTML؟
للتقليل ، يوجد عدد لا يحصى من الأدوات المتاحة عبر الإنترنت والتي قد تساعدك على تقليل قاعدة الشفرة. يمكنك أيضًا الاشتراك للقيام بذلك يدويًا ولكن بالنسبة لقاعدة التعليمات البرمجية الأكبر ، يُنصح باستخدام أي من الأدوات التالية لتقليل ملف CSS الخاص بك:
CSSminifier.com: أداة بسيطة للغاية للاستخدام. ما عليك سوى نسخ الكود الموجود على الجانب الأيسر وإنشاء الملف المصغر وتنزيله. سيكون للملف المصغر امتداد .min.
سيحتوي ملف CSS المصغر على الامتداد demo.min.css.
Smallseotools.com: إما أن تقوم بنسخ الكود أو تحميل ملف الشفرة الخاص بك. سيصغر الكود الخاص بك ويتيح لك نسخه أو تنزيله.
تحسين تلقائي: هذا مكون إضافي يمكنك إضافته إلى أدوات WordPress الخاصة بك. كمكوِّن إضافي ، يمكنك اختيار تصغير رمز CSS الخاص بك بعد ذلك وهناك.
يسهل على المطور فهم الوقت الذي يتم فيه تصغير الملف ومتى لا يتم تصغيره. سيكون للملف المصغر امتداد .min.
المضي قدما مع هذه المقالة على Minify CSS
متى يجب أن تفعل ذلك؟
يجب أن يتم التصغير بشكل أساسي ، عندما تكون قد كتبت الرمز ويجب عليك إرساله على الخادم للرد. بمجرد تصغير الملفات ، يتم استخدام الإصدارات المصغرة للتوزيع على المستخدمين.
فوائد تصغير ؟
تقليل حجم الملف: عن طريق إزالة التباعد الإضافي وتقليل الأسماء المتغيرة وإزالة التعليقات ، يتم تقليل حجم الملف تقريبًا بنسبة 30-60٪. تحميل أسرع: مع وجود بيانات أقل لإرسالها عبر الشبكة ، يتم تحميل موقع الويب بشكل أسرع من ذي قبل. تكلفة نطاق ترددي أقل: عند إزالة البيانات غير الضرورية ، يكون النطاق الترددي المطلوب أقل بكثير وكذلك التكلفة.
أشياء للذكرى:
حتى قبل محاولة التصغير ، تأكد من أن شفرتك لا تتجاوز الحدود. يجب ألا يتعطل التدفق ويجب أن تظل الوظيفة بدون وجه. تحتاج إلى التحقق من أنه حتى بعد تصغير الكود الخاص بك يعمل بنفس الطريقة.
إنفاكت ، كأفضل ممارسة ، يمكنك دائمًا الاحتفاظ بالقالب جاهزًا. قم بإجراء تغييراتك في القالب المدمج والذي سيوفر لك قدرًا كبيرًا من الوقت.
هل هو مشابه للضغط؟
حسنا ، بقوة لا. التصغير يختلف عن الضغط. يؤدي الضغط إلى تقليل حجم الملف المصغر بدرجة أكبر ولكنه لا يؤثر على تصميم الكود وبنيته.
يتم تصغير الملف ثم ضغطه كملف مضغوط وإرساله عبر الشبكة عندما يطلب العميل الوصول إلى موقع الويب. ثم يتم فك ضغط الملف واستخدامه.
أمثلة:
قبل التصغير:
محفظة
- الصفحة الرئيسية
بعد التصغير:
محفظة
- الصفحة الرئيسية
من المؤكد أن الكود يصعب قراءته وفهمه بالنسبة للإنسان ، ولكنه مقبول أيضًا بالنسبة للآلة. لا تهتم الآلة حقًا بجمال الكود والتباعد ، فهي تفهم جوهرها وتعمل وفقًا لذلك.
أعجب بما فيه الكفاية مع تقنية التصغير؟
ثم جرب بنفسك. خفف عبء ملفك ودع موقعك يتدفق بحرية لجميع المستخدمين!
يقودنا هذا إلى نهاية هذه المقالة حول Minify In CSS.
إذا كنت مهتمًا بمعرفة المزيد حول تطوير الويب ، فاطلع على بواسطة Edureka. سيساعدك التدريب على اعتماد تطوير الويب في تعلم كيفية إنشاء مواقع ويب رائعة باستخدام HTML5 و CSS3 و Twitter Bootstrap 3 و jQuery و Google APIs ونشرها في Amazon Simple Storage Service (S3).
إذا كنت لا تزال مهتمًا. إذا كان لديك أي سؤال ، فيمكنك نشره في قسم التعليقات في مدونة 'Minify In CSS' ، وسنعود إليك في أقرب وقت ممكن.