نحوه بهینه سازی تحویل CSS – 7 مرحله ساده

تصویر برداری بهینه سازی cssروزهایی که کارشناسان طراحی و وبلاگ نویسان پیشرو در صنعت توصیه می کنند ساخت صفحات وب بیش از 30 کیلوبایت نیست …


در آن زمان انتظار می رفت که این “کلاه” HTML ، JavaScript ، تصاویر ، CSS و Flash را مدیریت کند. راستش را بخواهید ، بیش از 30 کیلوبایت کاملاً طول نمی کشد.

با جاوا اسکریپت و CSS محبوبیت بیشتری پیدا کرد ، تنها برای CSS متداول شد که از سقف 30KB فراتر رود. این امر به ویژه در مورد وب سایتهای بزرگتر صادق است.

با این حال ، هنگام ساخت و طراحی صفحات برای وب سایت خود نباید بیش از حد به “تعداد کیلوبایت” خود توجه کنید. مهم است که صفحات خود را حفظ کنید بهینه سازی شده و هنگام نوشتن CSS خود را محکم کنید.

بهینه سازی فقط در مورد کم کردن اندازه پرونده های شما نیست. این در مورد نگه داشتن صفحات شما از درهم و برهمی و نفخ ، ساختن آنها تا حد امکان سازمان یافته و کارآمد است. هنگامی که درباره بهترین روشهای بهینه سازی CSS اطلاعات بیشتری کسب می کنید ، متوجه خواهید شد که به طور خودکار اندازه پرونده های کوچکتر را ایجاد می کنید.

در اینجا 5 کار ساده برای انجام بهینه سازی CSS در حال حاضر ارائه شده است.

چگونه به طور کامل تحویل CSS را بهینه کنیم

1. از Shorthand استفاده کنید

نوشتن به صورت کوتاه به روشی بسیار رایج تبدیل شده است. این تا کنون ساده ترین روش برای کاهش کد شما و مدت زمان نیاز به کدگذاری شماست. اگر هنوز این کار را انجام نمی دهید ، زمانی مانند زمان وجود ندارد.

خاصیت قلم css

تعداد زیادی عنصر وجود دارد که می توانید برای آنها از shorthand استفاده کنید ، اما رایج ترین آنها عبارتند از:

  • لبه
  • لایه گذاری
  • قلم
  • طرح کلی
  • مرز
  • زمینه
  • لیست سبک

مقادیر پیکربندی shorthandهمچنین می توانید مقادیر را با استفاده از shorthand ترکیب کنید. با مشخص کردن مقادیر مختلف ، در واقع مرورگر از روشی مشخص برای تفسیر قوانین استفاده می کند.

با استفاده از هر اراده ای کوتاه مدت کد کلیه خود را به مراتب موجزتر کنید. شما در حال صرفه جویی در هر دو شخصیت و خط هستید.

اگر در هر منطقه ممکن از shorthand استفاده می کنید ، این می تواند اندازه کلی پرونده را بطور چشمگیری کاهش دهد.

2. از هک ها خلاص شوید

یعنی قانون CSSبرای خدمت به قوانین CSS مخصوص IE ، استفاده از هک های CSS مشروط به شما این مزیت را می دهد که یک پرونده CSS پیش فرض کوچکتر و تمیزتر ارائه می دهید..

به مرورگرهایی که سازگار با استانداردها هستند کمک می کند. با این حال ، وزن اضافی صفحه فقط توسط مرورگرهایی که به آن نیاز دارند بارگیری می شود.

اگر باید از هک استفاده کنید ، ضروری است کدی که استفاده می کنید مخصوص نسخه اینترنت اکسپلورر است که روی آن متمرکز هستید.

کدهای از پیش نوشته شده متعدد وجود دارند که اگر نمی خواهید خودتان را بنویسید ، به عنوان هک عمل می کنند. فقط وقت بگذارید تا واقعاً به کد پیش نوشته شده نگاهی بیندازید و از صحت آن اطمینان حاصل کنید یا در غیر این صورت این ممکن است منجر به مشکلات بیشتر شود.

حال اگر می توانید از CSS برای به دست آوردن نتایج مورد نظر خود استفاده کنید ، این کار را بدون هیچگونه مشکلی انجام دهید. البته این به همه مساوی بودن با هم بستگی دارد. وقتی از هک های کمتری در سایت خود استفاده می کنید ، کد کلی شما بسیار سبک تر و ساده تر خواهد بود.

3. در استفاده از فضای سفید هوشمند باشید

برای کد CSS خود, فضای سفید امری ضروری است برای خوانایی.

فضای سفید شامل عناصری مانند زبانه ها ، فاصله ها و شکستن خط اضافی است. هر بیت از فضای سفید که شما قادر به از بین بردن آن هستید ، شبیه به حذف یک شخصیت است.

خطوط خالی را حذف کنیدبا این حال ، اغلب به دلیل داشتن پرونده کوچکتر ، کم کردن فضای سفید توصیه نمی شود. شما هنوز هم باید خوانایی بهینه را در صفحات وب خود حفظ کنید.

فضای سفید برای قالب بندی مهم است ، بنابراین می خواهید تعادل پیدا کنید. اگر برای از بین بردن فضای سفید در بلوک های بزرگ متن می نویسید, فاصله کوتاهی از خوانندگان در اینترنت باعث می شود که آنها دور شوند.

یک راه برای تهیه اندازه پرونده و خوانایی هر چه کوچکتر ، خندق زبانه هاست و فقط قرار دادن یک خط بین پاراگراف ها. این امر فضای کافی از دیدگاه قابلیت خواندن را فراهم می کند ، اما همچنین برخی از فضای سفید را که لازم نیست از بین می برد..

اکنون ، برای نسخه تولید پرونده CSS خود ، می توانید فضای سفید را حذف کنید. هنوز هم در پرونده کار شما موجود است.

این یک روش دیگر برای سازش است به گونه ای که فایل های کوچکتر و قالب بندی قابل خواندن داشته باشید.

4- تنظیم مجدد هرس و چهارچوب

هنگامی که از چارچوب CSS استفاده می کنید ، ضروری است که اسناد را مرور کنید.

به همان اندازه مهم است که به هر خطی که در پرونده CSS شماست نگاه کنید. مواقعی وجود دارد که خواهید فهمید که برخی قوانین در چارچوب وجود دارد که شما برای پروژه فعلی خود نمی خواهید. اینها قابل حذف هستند.

قوانین CSS استفاده نشده را حذف کرد

ممکن است دریابید که می توانید به جزئیات خلاقانه و ظریف تری به جزئیات ارائه دهید …

این ممکن است آن چیزی نباشد که معمولاً از آن استفاده می کنید ، اما اگر کار کند ، این می تواند چارچوب تمیزتری را فراهم کند. هنگامی که در مورد آنها می دانید ، این همچنین به شما کمک می کند تا از تکثیر غیر عمد مجموعه های قوانین جلوگیری کنید.

همین اطلاعات در مورد تنظیم مجدد نیز صدق می کند. هنگام استفاده از تنظیم مجدد ، آنها به خنثی سازی سبک پیش فرض مرورگر کمک می کنند. حال اگر با وب سایتی که ایجاد می کنید آشنا باشید ، پیدا کردن اظهارنامه های خاصی که می دانید نیازی به نیاز ندارید ، غیر معمولی نیست..

به عنوان مثال ، در یک وبلاگ عمومی ، به احتمال زیاد از آنها استفاده نخواهید کرد. فقط از هر چیزی که برای سایت خاصی که می خواهید احتیاج نداشته باشید خلاص شوید. تو می توانی هنگام استفاده از مجموعه قوانین ، از کارهای بهینه شده بهتر اطمینان حاصل کنید در مورد تنظیم مجدد یا چارچوب.

اما در حالت پیش فرض آنها نباید پذیرفته شوند. برای خواندن و خواندن لاغر پرونده های CSS ، به هر بیانیه به صورت جداگانه نگاه کنید و موارد غیر ضروری را قطع کنید.

5. CSS خود را اثبات کنید

نحو CSS

یکی دیگر از گزینه های بهینه سازی CSS مفید: اکثر قوانین خود را از اعلامیه های مربوط به طرح خود جدا کنید.

در صورت امکان این طرح را به پرونده شخصی خود اختصاص دهید. اگر اینگونه نباشد ، حداقل دادن بخش خاص خود می تواند سودمند باشد.

در نهایت ، موقعیت یابی و شناور – که روش های فعلی با استفاده از CSS هستند – به معنای خدمت به عنوان ابزار چیدمان نبودند.

برخی تا آنجا پیش می روند که می گویند اینها در واقع شبیه به هک های طرح هستند. در حال حاضر یک جایگزین مناسب وجود ندارد و امیدوارم که پس از توافق با استانداردهای طرح ، آنها شروع به دریافت پشتیبانی از مرورگرها کنند.

پس از وقوع این پشتیبانی ، تغییر ویژگی های جعبه مدل که برای کسانی که برای طرح بندی ها هک شده اند ، دشوار نخواهد بود..

در حال حاضر ، بهترین انتخاب این است که طرح خود را با استفاده از خصوصیات مناسب انجام دهید. این معمولاً وزن صفحه را به مراتب مؤثرتر از استفاده از مجموعه محدودی از خواصی که در حال حاضر برای جبران quirks موجود هستند ، متراکم می کند.

6. همیشه مستندات به روز شده را در رابطه با کار خود نگه دارید

چه شما در وب سایت به عنوان تیم کار کنید و چه به تنهایی ، پیگیری همه کارهایی که انجام داده اید ضروری است.

به عنوان مثال ، به تنهایی ، ممکن است کاری را که انجام داده اید فراموش کنید. به عنوان یک تیم ، ممکن است شخصی کاری انجام دهد ، و ممکن است شما تا زمانی که تغییری ایجاد نکنید که می تواند با عناصر مختلف کد ایجاد مشکل کند ، آگاهی نداشته باشید..

اضافه کردن نظر CSSتکثیر کد یک منطقه بزرگ برای نگرانی هم برای تیم ها و هم برای طراحان انفرادی است ، به خصوص هنگام استفاده از سازندگان محبوب وب سایت. Wix ، Squarespace و سایر نرم افزارهای ساخت وب سایت هستند مشهور به کپی کردن کد یا حذف کامل آن از پایگاه داده آنها است.

استفاده از راهنماهای شیوه نامه و راهنماهای نشانه گذاری گزینه های مفید اسناد است. همچنین می توانید از نظرات CSS استفاده کنید گزینه دیگری است و این می تواند برای بخش بندی عناصر پرونده های CSS طولانی باشد مفید است. قرار دادن این موارد در سبک یا راهنمای نشانه گذاری ، از افزودن آنها به اندازه پرونده جلوگیری می کند.

یکی از سریعترین راه ها برای نفخ کردن کد ، انجام همان کار دو بار است. کد نویسی پیچیده است ، بنابراین ضروری است که مدارک دقیق هر کاری را که انجام داده اید ، نگه دارید.

اگر به تنهایی کار می کنید ، ایده آل است که هر بار که می نشینید ، برای شروع کار ، این اسناد را مرور کنید. هنگام کار به عنوان بخشی از تیم ، اطمینان حاصل کنید که همه در همان سند کدگذاری می کنند به سبک جامعه یا راهنمای نشانه گذاری پیروی می کند به طوری که تغییرات کدگذاری به راحتی توسط همه افراد گروه قابل درک است.

7. فايلها را فشرده كنيد (CSS Optimization 101)

فشرده سازی CSS و بهینه سازی gif

فشرده سازی: چیزی بیش از این وجود دارد …

یکی از راه های موثر برای بهینه سازی CSS استفاده از فشرده سازی است. این روشی است برای اطمینان از اینکه فایل های شما با مرورگر سازگار هستند حتی اگر قابل خواندن توسط انسان نباشد.

در مقایسه با نسخه های کار شده ، اینها کسری از اندازه خواهند بود. برنامه های مختلفی وجود دارد که می توانید از آن ها استفاده کنید تا فرآیند فشرده سازی آسان تر شود.

این کارها کارهایی از قبیل پیدا کردن و رفع هرگونه ویژگی CSS که در حال رونویسی از یکدیگر هستند ، فضای سفید را فشرده کرده و به دنبال شانس استفاده از corthand CSS می شوند..

علاوه بر راحتی این برنامه ها ، آنها همچنین می توانند به شما کمک کنند در صورت ترجیح ، بیشتر در مورد کارهایی که می توانید با دستی انجام دهید ، اطلاعات کسب کنید. همچنین می توانید از ویرایشگرهای متن مختلف برای کمک به فرمت کردن فایلهای CSS استفاده کنید.

آنها می توانند نسخه های فشرده فایل های مختلف CSS شما را ارائه دهند. این به طور معمول با استفاده از PHP انجام می شود. اگر می خواهید از ابزارهای بهینه سازی و فشرده سازی استفاده کنید ، قبل از انتخاب گزینه مناسب برای شما ، چندین گزینه را مرور کنید.

اکنون ، این برنامه ها به طور کلی در به حداقل رساندن خطاها خوب هستند ، اما کامل نیستند. به همین دلیل ، همیشه باید CSS خود را پس از استفاده از برنامه مرور کنید تا از صحت آن اطمینان حاصل کنید. کدی که بهینه شده و تمیز باشد برای اندازه پرونده ، بلکه برای خوانایی و نگهداری نیز بسیار مهم است.

نوبت شما

اصول مورد بحث در اینجا ملاحظات محکمی برای CSS ، بلکه برای JavaScript ، 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