صفحات سبک Cascading می توانند اسناد HTML خسته کننده را به صفحات وب پویا تبدیل کنند، اما استفاده بی روح از CSS می تواند یک وب سایت را قبل از اینکه حتی رندر را شروع کند، فلج کند. این راهنمای برخی از راه های سریع و آسان را برای بهینه سازی عملکرد CSS وب سایت خود را به طوری که شما می توانید محتوا را سریع تر به کاربران خود ارائه دهید.
CSS چیست؟
صفحات سبک Cascading یا CSS، زبان مورد استفاده برای تعریف ارائه بصری وب سایت براساس محتوای ارائه شده در یک سند نشانه گذاری است. این یکی از “فناوری های سنگ بنای” وب در کنار HTML و جاوا اسکریپت است. CSS معمولا در شیوه های خارجی یا فایل های CSS ذخیره می شود، اما همچنین می تواند مستقیما به اسناد HTML متصل شود.
عملکرد CSS و سرعت وب سایت
هنگام ارزیابی سرعت وب سایت، اندازه گیری های عملکردی مختلفی برای اندازه گیری وجود دارد، اما دو مورد که برجسته هستند عبارتند از:
۱-زمان برای بایت اول
۲-زمان شروع رندر
زمان به بایت اول اشاره دارد که چه مدت طول می کشد تا بازدید کنندگان
برای دریافت اولین بایت داده پس از درخواست URL شما. زمان شروع رندر نقطه
ای است که مرورگر کاربر در واقع محتوای نمایش را شروع می کند. و تا حد
زیادی وابسته به نصب سرور شماست، اما این وابستگی بیشتر به نحوه ساخت CSS
شما دارد.
تا زمانی که داده ها دریافت شوند مرورگرها شروع به رندر کردن نمی کنند ،
بنابراین زمان آهسته تا بایت اول، قطعا زمان خود را برای شروع رندر فشار می
دهد. بنابراین، قبل از اینکه بتوانید از مزایای کامل بهینه سازی عملکرد
CSS خود استفاده کنید، اولویت بندی مسائل بالقوه را با سرور خود تعیین
کنید.
عملکرد CSS چگونه بر روی زمان شروع رندر تأثیر می گذارد:
قبل از اینکه مرورگر بتواند محتویات محتوای وب را شروع کند، به
دستورالعمل ها به صورت HTML و CSS نیاز دارد. بنابراین، رندرینگ نمیتواند
شروع شود تا تمام شیوه های خارجی دانلود و پردازش شود. سفرهای طولانی تر
این نیاز است.
با استفاده از CSS خارجی شامل یک یا چند درخواست HTTP می شود، بنابراین هدف
شما باید حداقل شمار درخواست های مورد نیاز باشد تا حد امکان. به عنوان
مثال، قرار دادن پلاگین، بنر و سبک پیوند طرح خود را در یک فایل .css تنها
می توانید زمان خود را برای اولین بار رندر کنید. ما آموزش هایی در مورد
راه های دیگر برای محدود کردن درخواست های HTTP در وب سایت های وردپرس
داریم.
بهبود عملکرد CSS شما: مقدمه ای بر Inlining
یکی از راه های اطمینان از تحویل سریع CSS این است که عملیات Inlining
انجام می شود. Inlining به معنای قرار دادن منابع خارجی CSS به طور مستقیم
به اسناد HTML است. این تکنیک برای منابع کوچکتر مناسب است، اما با این
وجود تفاوت قابل ملاحظه ای دارد.
Inlining CSS کاهش میزان داده هایی که مرورگر باید بارگیری کند قبل از
اینکه بتواند صفحه را رندر کند شروع به کاهش می کند. هنگامی که از فایل های
CSS خارجی استفاده می کنید، بعد از اینکه سند نشانه گذاری آنها به پایان
رسید، باید آنها را به طور جداگانه دانلود کنید. Inlining به شما اجازه می
دهد که دو پرنده را با یک سنگ کشته، بنابراین صحبت کنید.
برای inline CSS، به سادگی کد مورد نظر CSS را از فایل CSS خارجی خود کپی
کنید و آن را بین تگ های سبک در بخش سر سند HTML خود قرار دهید مانند:
<head>
<!-- Your header markup -->
<style>
.your-styles {
font-weight: bold;
}
.etc-etc {
color: #222222;
}
</style>
</head>
درج منابع CSS بزرگتر:
اگر سعی می کنید یک فایل CSS بزرگ را وارد کنید، ممکن است یک هشدار از
ابزار تست عملکردی خود را دریافت کنید که نشان می دهد که محتوای فوق العاده
شما بیش از حد بزرگ است. بنابراین، برای فایلهای بزرگتر CSS، فقط باید CSS
مورد نیاز برای ارائه محتوای فوق العاده خود را درون خطی قرار دهید. سپس
شما باید سبک کامل را به صورت یکپارچه بارگذاری کنید تا صفحه بتواند در حین
تجزیه و تحلیل، رندر را ادامه دهد.
Critical CSS یک پروژه GitHub است که به شما کمک می کند تا انتخاب کنید که
CSS متعلق به بالا است، اما شما همچنین باید یک چک دستی را انجام دهید تا
اطمینان حاصل کنید که هیچ اجزای بحرانی از بین نرفته است.
پس از اصلاح کردن و فشرده سازی Gzip، تمام سبک ها، اسکریپت ها، نشانه گذاری
شما باید به طور مطلوب وزن کمتر از ۱۴ کیلوبایت را داشته باشند. از
آنجائیکه ۱۴ کیلوبایت تقریبا مقدار داده ای است که یک سرور می تواند در
اولین سفر دور ارسال کند. باقی ماندن در آن آستانه به کاربران امکان می دهد
همه چیز را در بالای بسته در اولین بسته داده که دریافت می کنند دریافت
کنند.
بهبود عملکرد CSS با Async بارگذاری و ذخیره سازی
ترفند فوق، یک مرورگر کاربر را به سرور خود ذخیره می کند، بنابراین
محتوای آنها را سریع تر از اولین بازدید خود مشاهده می کند. متاسفانه، این
نسخه با هزینه ای همراه است: مرورگر کاربر CSS را ذخیره نمی کند، بنابراین
همه چیز باید از ابتدا بر روی هر بازدید بعدی بارگیری شود. اگر شما CSS
نسبتا ساده دارید، این یک مشکل نیست با این حال، در بیشتر موارد، شما هنوز
هم می خواهید مرورگر کاربران را به ذخیره سازی اکثر CSS خود. به همین دلیل
است که بسیاری از توسعه دهندگان وب فقط CSS را در صفحه اصلی یا صفحات فرود
خود در هنگام استفاده از CSS خارجی برای بقیه سایت خود درج می کنند.
یک روش هوشمندانه برای برطرف کردن این مسئله شامل بارگیری غیرخطی است.
متاسفانه، هیچ راهی برای بارگزاری فایلهای CSS به طور غیرمستقیم وجود
ندارد، اما میتوانید از یک اسکریپت مانند loadCSS.js برای انجام کار
استفاده کنید.
ابزار بهبود عملکرد CSS
اگر می خواهید ببینید که چگونه سایر توسعه دهندگان CSS خود را ساختند، ابزار تحویل CSS Varvy می تواند به شما یک مرور کلی از نحوه استفاده از هر وب سایت از CSS بدهد. این یک ابزار عالی برای ارزیابی پروژه های خود و مقایسه آنها با دیگران است.
نکات بیشتر برای بهبود عملکرد CSS
۱- استفاده از preload / HTTP
اشاره گر پیش بار به مرورگرها می دهد تا منابع را از قبل بدست آورند تا در غیر این صورت. برای دادن CSS خود به یک سر شروع، آن را به عنوان یک تگ لینک در سند HTML خود را مانند این:
<link rel = "preload" href = "/ css / styles.css" as = "style”>
همچنین شما می توانید preload را به عنوان هِدر HTTP در پیکربندی سرور خود قرار دهید:
Link: </css/styles.css>; rel=preload; as=style
اگر سرور شما برای HTTP / 2 پیکربندی شده باشد (که باید باشد)، پیش بارگذاری خواهد شد به عنوان فشار سرور تفسیر شده است. KeyCDN همچنین پشتیبانی از سرور را پشتیبانی می کند که به شما کمک می کند تا حتی تحویل فوری CSS اولویت اول را تحویل دهید. برای کسب اطلاعات بیشتر، وبلاگ ما HTTP / 2 را فشار دهید.
۲-همه چیز را inline نکنید:
نگران نباشید همه چیز را در فایل HTML خود بگذارید زیرا این باعث می شود که ابتدای HTML در اندازه بزرگ شود و بنابراین برای TTFB طول می کشد.
۳-ترکیب CSS خود را محدود کنید:
ترکیب سبک های خود را به یک فایل و ارسال یک نسخه منحصر به فرد می تواند به شدت به کاهش اندازه CSS خود را. درباره این فرآیند در CSS، JS و مقالات HTML کمتر بدانید.
۴-برگه های استایل خود را کاهش دهید:
سبک های کوچکتر شما، و انتخابگرهای کمتری که در آنها وجود دارد، مرورگرهای کار کمتر هنگام انجام نمایش صفحه وب شما باید انجام دهند. بنابراین، شما باید بهترین کار خود را برای حذف selector های غیر ضروری، استفاده از کلاس های ابزار و اجتناب از کد تکراری CSS. شما می توانید یک ابزار مانند uncss را استفاده کنید تا اطمینان حاصل کنید که شیوه نامه شما فقط شامل کد مورد نیاز CSS است.
۵-انتخابگر (selector) خود را انتخاب کنید:
صحبت از انتخابگرها، با استفاده از انتخاب فرزند، مرورگرها را برای بررسی تمام عناصر فرزند خود برای یک مسابقه، به طوری که آنها می توانند مشکلات بیشتری نسبت به چرخش ایجاد کنند. انتخاب های جهانی همچنین می تواند نسبتا گران باشد، بنابراین از آنها نیز اجتناب کنید. در صورت امکان، از selectors های کم عمق استفاده کنید.
۶- اجتناب از ویژگی های گران قیمت:
برخی خصوصیات CSS به طور قابل توجهی گران تر از سایرین هستند، بنابراین باید از نظر محافظه کارانه استفاده شوند.
این ویژگی های چندگانه برای مراقبت از موارد زیر است:
• border-radius
• box-shadow
• filter
• :nth-child
• position: fixed
• transform
خوب است که از ویژگیهای بالا در اینجا و اینجا استفاده کنید، اما اگر آنها به صدها بار در هر صفحه ظاهر شوند، عملکرد کلی CSS شما ممکن است رنج ببرد.
۷- ازimport اجتناب کنید:
هرگز از دستورimport برای استفاده از شیوه های بیرونی استفاده نکنید چون بلوک های موازی را مسدود می کند. این یک عمل باستانی است. در عوض، همیشه از برچسب لینک استفاده کنید.
عملکرد CSS
مهم نیست که چگونه یک صفحه وب خیره کننده پس از بارگیری به پایان می رسد، هیچ یک از تلاش های شما مهم نیست اگر بازدید کنندگان قبل از آن نقطه دور بمانند. ادغام استراتژی های فوق در برنامه نویسی شما به شما امکان می دهد که وب سایت هایی را ایجاد کنید که سریع تر اجرا شوند و به صورت پیوسته اجرا شوند، که مهمان های جدید را تشویق به بازگشت می کند.
شرکت طراحی سایت اینتن با تیم حرفه ایی خود توانسته یکی از بهترین شرکت های طراحی سایت در تهران را به خود اختصاص دهد این شرکت با بیش از ۸ سال سابقه در زمینه ی طراحی سایت های اینترنتی و سئو بهینه سازی سایت در حال فعالیت است و بیش از ۴۰۰ سایت معتبر را طراحی و به نام خود اختصاص داده است،برای کسب اطلاعات بیشتر با کارشناسان ما در قسمت تماس با ما در ارتباط باشید تا در حیطه ی کاری خود اطلاعات بیشتری کسب نمایید.
