CSS می‌تواند سندهای خسته کننده HTMLتان را به برگه‌های زیبایی تبدیل کند، اما گاهی اوقات نیز قبل از اینکه حتی شروع به رندر شدن بکند، می‌تواند وبسایت‌تان را از کار بیاندازد یا آن را بسیار کند نماید. در این آموزش قصد داریم برخی از ساده‌ترین و سریع‌ترین راه‌ها را برای بهبود کارایی CSS وبسایت‌تان ارائه دهیم، بنابراین در پایان کار می‌توانید محتوا را سریع‌تر برای کاربران‌تان ارسال نمایید.
CSS چیست؟
CSS در واقع زبانی برای تعیین نحوه نمایش المان‌هایی است که در یک زبان نشانه‌گذاری مانند HTML تعیین می‌شود. از این مورد به عنوان یکی از تکنولوژی‌های سنگ بنایی در کنار HTML و Javascript در دنیای وب نام برده می‌شود. CSS معمولا در یک فایل استایل‌شیت (.css) خارجی ذخیره می‌شود، اما می‌شود از آن نیز به صورت مستقیم در HTML استفاده کرد.
CSS یک جداسازی را بین حالت نمایشی و محتوای وبسایت ایجاد می‌کند که باعث می‌شود تا وبسایت دسترسی‌پذیری بیشتری برای دستگاه‌های مختلف داشته باشد. از آنجایی نیز که اطلاعات راجع به نمایش رنگ‌ها، فونت‌ها و... در یک فایل جداگانه نگه‌داری می‌شود، بنابراین با پیچیدگی کمتری طرف خواهیم بود. همچنین از آنجایی که ممکن است چندین سند HTML از یک فایل CSS بهره ببرد بنابراین کدهای بهینه‌تری خواهید داشت. با این حال اگر از CSS به صورتی نادرست استفاده کنید، در نهایت ممکن است منجر به نابودی وبسایت‌تان شود.
کارایی CSS و سرعت وبسایت
وقتی که در رابطه با سرعت وبسایت صحبت می‌شود، فاکتورهای بسیار زیادی برای موضوع کارایی وجود دارد که باید در نظر بگیرید، با این حال دو موردی که بسیار حائز اهمیت هستند عبارت‌اند از:
- Time to first byte
- Time to start render
منظور از «time to first byte» مدت زمانی است که بازدیدکننده بعد از ارسال درخواست Url منتظر دریافت اولین بایت از داده می‌ماند. و منظور از «Time to start render» نقطه‌ای است که مرورگر کاربر شروع به نمایش محتوا می‌کند. اولین مورد بیشتر بستگی به شیوه پیکربندی و خود سرورتان دارد اما دومین حالت روی چگونگی ساختار CSS بیشتر تمرکز دارد.
این بدان معناست که مرورگر تا زمانی که اطلاعات بدست‌ش نرسد توانایی رندرینگ را ندارد، بنابراین اگر زمان مورد اول طول بکشد روی زمان مورد دوم نیز به صورت مستقیم تاثیر می‌گذارد. بنابراین اولویت کاری شما قبل از اینکه هرگونه فایده را از بهینه‌سازی کارایی CSS بخواهید این است که هر مشکلی که در سرورتان وجود دارد را حل نمایید.
چگونه مسئله کارایی در CSS روی بحث Time to start Render اثر می‌گذارد؟
قبل از اینکه یک مرورگر شروع به ساخت محتوای صفحه اصلی ما بکند، نیاز به ساختاری در قالب کدهای HTML و CSS دارد. بنابراین پروسه رندرینگ تا زمانی که تمام محتوای خارجی مربوط به استایل‌شیت دانلود و پردازش نشوند، شروع نمی‌شود. هر چقدر زمان دانلود و پردازش بیشتر طول بکشد، کاربر مجبور است تا زمان بیشتری را منتظر بماند.
با استفاده کردن از CSS به صورت خارجی، در نظر بگیرید که باید درخواست‌های HTTP را برای دریافت آن‌ها ایجاد کنید. هدف شما در این پروسه باید این باشد که تعداد این درخواست‌ها را به حداقل برسانید. برای مثال، سعی کنید که استایل‌های مربوط به قست‌های مختلف را در یک فایل .css قرار دهید، اینگونه سرعت اولین رندرتان افزایش پیدا می‌کند.
بهبود کارایی CSS: مقدمه‌ای بر inline
یک راه که برای اطمینان از تحویل سریع CSS استفاده می‌شود حالت inlining است. منظور از inlining یا داخلی‌سازی این است که منابع CSSتان را مستقیما در سندهای HTML قرار دهید. این تکنیک برای منابع کم بسیار عالی است اما در غیر اینصورت تفاوت چشمگیری را بوجود خواهد آورد.
داخلی‌سازی CSS مقداری از داده را که مرورگر برای رندرینگ اولیه نیاز است تحویل مروگر می‌دهد. اما وقتی که از حالت CSS خارجی استفاده می‌کنید، فایل CSS باید بعد از دانلود کامل فایل HTML به صورت جداگانه دانلود شود. داخلی‌سازی –در حجم کم- به شما این قابلیت را می‌دهد تا با یک سنگ دو پرنده را هدف بگیرید.
برای داخلی‌سازی CSS تنها کافی‌ست که کدهای CSS خارجی‌تان را کپی کرده و بین دو تگ style در تگ head قرار دهید.
<head>
<!-- Your header markup -->
<style>
.your-styles {
font-weight: bold;
}
...
.etc-etc {
color: #222222;
}
</style>
</head>
داخلی‌سازی منابع بزرگ‌تر CSS
اگر که سعی در داخلی‌سازی منابع بزرگ‌تر CSS بکنید، هشداری را از ابزار تست کارایی یا Performance Testing Tool دریافت خواهید کرد. در این هشدار بیان شده که فایل محتوای‌تان بسیار بزرگ است. بنابراین همواره در نظر داشته باشید که باید کدهایی را داخلی‌سازی کنید که برای رندرینگ اولیه محتوای‌تان ضروری هستند. بعد از آن مرورگر فایل استایل‌شیت اصلی‌تان را نیز به صورت غیرهمزمان با رندرینگ اولیه، دریافت می‌کند.
Critical CSS یک پروژه گیت‌هاب است که به شما کمک می‌کند تا قسمت حیاتی CSS برای رندرینگ اولیه را پیدا کنید، اما به یاد بسپارید که نیاز به بررسی دستی نیز دارید. در غیر اینصورت ممکن است برخی محاسبات انجام شود و برخی از کامپوننت‌ها به صورت اشتباه قرار گرفته شده باشند.
به یاد داشته باشید که تمام استایل‌های مهم شما بعد از فشرده‌سازی و بهینه‌سازی باید حجمی کمتر از ۱۴ کیلوبایت داشته باشند.
بهبود کارایی CSS با کشینگ و لودینگ Async
در این تکنیک مرورگر کاربر قابلیت ذخیره‌سازی محتوای وبسایت را خواهد داشت، بنابراین بعد از اولین بازدید، در بازدیدهای بعدی محتوا به صورتی بسیار سریع‌تر به کاربر نشان داده خواهد شد. متاسفانه این تکنیک همراه با استثناهایی می‌آيد: مرورگر CSS را کش نمی‌کند، بنابراین در هر بازدید همه چیز از ابتدا بارگذاری می‌شود. اگر شما CSS ساده‌ای داشته باشید این موضوع نمی‌تواند مشکلی اساسی برای شما باشد، با این حال شما باز هم می‌خواهید که مرورگر قسمت اعظم کدهای‌تان را کش کند. به همین دلیل است که برخی از توسعه‌دهندگان وب در صفحات خانگی و صفحات فرودشان از حالت inline استفاده می‌کنند.
یک راه هوشمندانه برای این کار بارگذاری غیرهمزمان است. اما به صورت نیتیو قابلیت بارگذاری غیرهمزمان پیاده‌سازی نشده است، اما برای این موضوع می‌توانید از کتابخانه loadCSS.js استفاده کنید.
ابزارهایی برای بهبود کارایی CSS
اگر می‌خواهید شیوه ساختاردهی CSS مربوط به توسعه‌دهندگان دیگر را مشاهده کنید، ابزار CSS delivery به شما دید خوبی راجع به اینکه وبسایت‌های مختلف چگونه از CSS استفاده می‌کنند را می‌دهد. این مورد ابزاری عالی برای ارزیابی پروژه‌های‌تان و مقایسه آن با پروژه دیگران است.
نکاتی بیشتر برای بهبود کارایی CSS
۱. استفاده از قابلیت preload http/2
Preload کردن منابع به مرورگر این قابلیت را می‌دهد تا زودتر از هر هنگامی منابع را دریافت کند. برای اینکه به CSSتان چنین قابلیتی را بدهید در سند HTML از خاصیت rel استفاده کنید:
<link rel="preload" href="/css/styles.css" as="style">
می‌توانید یک کار دیگر نیز در این حالت انجام دهید: در قسمت پیکربندی سرورتان به عنوان یک سربرگ HTTP، کد زیر را قرار دهید:
Link: </css/styles.css>; rel=preload; as=style
۲. همه چیز را inline نکنید
از آنجایی که داخلی‌سازی کدها باعث می‌شود که فایل HTMLتان بسیار بزرگ شود، بنابراین سعی کنید در حد معقولی از حالت inline استفاده کنید.
۳. ترکیب و کوچک کردن CSS
ترکیب کردن فایل‌های مختلف استایل‌شیت و همچنین ارائه یک نسخه کوچک‌سازی شده از آن می‌تواند اندازه فایل CSSتان را بسیار کوچک کند.
۴. کم کردن اندازه استایل‌شیت
هرچقدر یک استایل‌شیت کوچک‌تر باشد، تعداد سلکتور کمتری در آن قرار می‌گیرد و همچنین مرورگر کار کمتری را برای رندر صفحه خانگی انجام می‌دهد. بنابراین باید بهترین کارهای‌تان را برای حذف کردن سلکتورهای غیر ضروری انجام دهید. از قابلیت کلاس‌هایی که قبلا ایجاد کرده‌اید استفاده کنید و از انجام کارهای تکراری در کدهای CSS خودداری نمایید. می‌توانید از ابزاری مانند uncss برای شناسایی کدهای غیر ضروری استفاده کنید.
۵. برای سلکتورهای‌تان سخت‌گیر باشید
سعی کنید در تعیین سلکتورهای‌تان دقت بسیاری بکنید و تا جایی که می‌توانید به صورت شفاف آن‌ها را تعیین نمایید. دوری کردن از روند خصوصی‌سازی یا بهتر است بگوییم منحصربه‌فرد سازی می‌تواند تاثیر مثبت بسیاری روی کدهای‌تان داشته باشد. همچنین سعی کنید که از سلکتورهای تودرتو نیز خودداری کنید.
۶. دوری از خصوصیات گران
برخی از خصوصیات CSS به صورتی شگفت انگیز گران‌تر –از نظر کارایی- از بقیه موارد است، بنابراین باید با دقت بیشتری از آن‌ها استفاده کنید. چند مورد از اینان را می‌توانید در زیر مشاهده کنید:
- border-radius
- box-shadow
- filter
- :nth-child
- position: fixed;
- transform
استفاده کردن بیش از اندازه از این خصوصیات می‌تواند کارایی فایل CSS کلی‌تان را به صورت کلی نابود کند.
۷. از @import خودداری کنید
هیچوقت برای استفاده از استایل‌شیت‌های خارجی در یک فایل CSS از @import استفاده نکنید. به این دلیل که این مورد باعث می‌شود تا از دانلود‌های موازی یا پارالل جلوگیری شود. بجای آن همواره از تگ link استفاده کنید.
کارایی در CSS - خلاصه
وقتی که کاربر قبل از بارگذاری کامل یک وبسایت از آن خارج می‌شود، دیگر زیبا بودن ظاهر آن اهمیتی ندارد. با استفاده کردن از تکنیک‌هایی که گفته شد می‌توانید کارایی و سرعت بسیار بالایی را به کدهای‌تان ببخشید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید