shift

ترکیب فایل های CSS خارجی

ترکیب فایل های CSS خارجی

عاطفه
دسته: طراحی وبسایت  تگ ها: چگونه فایل های css خارجی را ترکیب کنیم , بهینه سازی CSS برای افزایش سرعت سایت , How to combine external CSS files for quicker page speed

 

هر فایل CSS ای که شما برای وب‌سایتتان استفاده می‌کنید زمانی، به‌سرعت بارگذاری صفحاتتان اضافه می‌کند. گاهی اوقات این کار اجتناب‌ناپذیر است. به‌هرحال در بیشتر موارد می‌توانید دو فایل CSS یا بیشتر را باهم ترکیب کنید و بیشتر از کپی و Paste برای این کار استفاده می‌شود. اغلب تنها دلیلی که چندین فایل CSS فراخوانی می‌شود این است که طراح وب‌سایتتان فایلهای CSS را در بخش‌های جداگانه راحت‌تر پیدا می‌کند. مهم نیست چه کد CSS ای در آن است یا چه تعداد فایل CSS در آن است. یک فایل CSS که شامل همه اطلاعات فایل‌های CSS ترکیب‌شده است به‌خوبی کار می‌کند و سرعت صفحاتتان را بهبود می‌بخشد.
ازآنجایی‌که فایل‌های CSS به‌صورت پیش‌فرض مسدودکننده رندر (Render Blocking) هستند، لازم است تعداد فایل‌های CSS به حداقل برسد تا سرعت بارگذاری افزایش یابد.
با قرار دادن همه CSS هایتان در یک فایل، اساساً زمانی که صفحاتتان برای بارگذاری می‌گیرند کاهش می‌یابد؛ زیرا تعداد فایلهایی که مرورگر وب قبل از نمایش صفحاتتان بارگذاری می‌کند، کاهش‌یافته است.
نکته: برای تعیین اینکه صفحات وبتان چه تعداد فایل CSS بارگذاری می‌کند از ابزار CSS delivery استفاده نمایید.


وردپرس و CSS

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

 

چگونه CSS هایتان را ترکیب کنید

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

برای مثال بگویید که 3 فایل CSS دارید:

  • main.css
  • other.css
  • third.css

در این وضعیت می‌توانید فایل other.css تان را بازکنید و محتوایش را کپی کنید و به فایل main.css انتقال دهید. این کار همچنین می‌تواند برای فایل main.css انجام شود. یک‌بار این کار را انجام بدهید و فایل‌های other.css و third.css در HTML تان را حذف کنید. در این صورت فقط یک فایل CSS که مرورگر وب باید قبل از نمایش صفحه وب دانلود کند، به‌جای 3 فایلی که باید دانلود کند دارد، در این صورت صفحه وبتان سریع‌تر بارگذاری می‌شود.


ابزار

برای تست به صفحه، از ابزار CSS delivery استفاده کنید و ببینید که از CSS ها چطور استفاده‌شده است.
 

نظر خود را بنویسید...
ارسال نظر
لغو