هر کسی دوست دارد که سرعت وب سایتش بالا باشد. این کار باعث می شود کاربر احساس راحتی بکند و همچنین از نظر SEO هم تاثیر مثبت زیادی دارد. در این مطلب یک نکته CSS را یاد می گیرید که با استفاده از آن می توانید زمان لود شدن سایت را پایین بیاورید.
فایل های CSS یکی از فاکتور های سرعت لود شدن صفحه هستند. هرگاه که مرورگر به قسمتی از صفحه می رسد که یک فایل CSS را فراخوانی کرده است، لود کردن آن فایل CSS را در اولویت قرار می دهد. بر اساس فایل CSS مدل های شی CSS یا CSS Object Models یا CSSOM ساخته می شود. سپس CSSOM با درخت DOM (Document Object Model) ترکیب می شود و درخت رندر یا Render tree ساخته می شود. حال می توان با استفاده از Render tree المان های صفحه را با همان شکل و شمایل و قالب خواسته شده ساخت. حال هرچقدر که اندازه و تعداد فایل های CSS بیشتر باشد زمان بیشتری لازم است تا درخت رندر ساخته شود. وقتی که مرورگر در فایل html به خط لود کردن CSS می رسد منتظر می ماند تا فایل مورد نظر دانلود شود و CSSOM ساخته شود و با DOM ترکیب شود و درخت رندر ساخته شود. به همین خاطر فایل های CSS را render-blocking می نامیم زیرا باعث می شوند فرایند رندر کردن متوقف شود تا دانلود شده و کارشان تمام شود.
برای حل این مشکل یک راه ساده وجود دارد. هدف ما این است که مرورگر هنگام لود صفحه منتظر دانلود شدن فایل CSS نباشد. برای این کار می توانیم برخی قسمت های CSSOM را که لازم و بحرانی نیست را دیرتر بسازیم. برای مثال حالتی را تصور کنید که عناصری در صفحه هستند که لازم نیست که همان موقع لود شدن استایل بندی شوند پس لازم نیست صبر کنیم تا آنها قالب بندی شوند و بعد صفحه را لود کنیم.
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
به خط کد بالا دقت کنید. مقدار media را برابر print قرار داده ایم. این به این معنی است که این فایل css زمانی که می خواهیم صفحه را پرینت بگیریم اعمال شود. پس نیازی به رندر کردن آن نداریم. اما در رویداد onload آن نوشته ایم که وقتی که صفحه به صورت کامل لود شد. خاصیت media را به all برمی گردانیم. همین کار باعث می شود که این فایل بعد از لود شدن صفحه رندر شود و در سرعت لود اولیه صفحه تاثیری نداشته باشد.
با وب سایت Tosinso همراه باشید.