آموزش رفع مشکل Render Blocking CSS
آموزش رفع مشکل Render Blocking CSS » در این مقاله، خطای Render blocking CSS را تعریف کرده و برای رفع این مشکل، راهکارهایی را ارائه می دهیم. روشها عبارتند از: اعلان صحیح فایل css، تعداد فایل های css کمتر، استفاده کمتر از CSS

آموزش رفع مشکل Render Blocking CSS

Fix Render Blocking CSS

آموزش رفع مشکل Render Blocking CSS

 

درباره خطای Render Blocking CSS و نحوه حل آن

 

Render blocking CSS چیست؟

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

 

Render blocking CSS چیست؟

 

چرا Render blocking CSS بد است؟

 

چرا Render blocking CSS بد است؟

 

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

  • وب سایت های نمایش دهنده تبلیغات Adsense گوگل در آمد بیشتری کسب خواهند کرد اگر این تبلیغات سریع تر لود شوند.
  • وب سایت های فروشگاهی (Ecommerce sites) فروش و درآمد بیشتری خواهند داشت در صورتیکه کاربران در صفحه سبد خریدشان سایت را ترک نکنند و همچنین اگر تجربه کاربری بهتر (User Experience: UX) را برای بازدیدکنندگان فراهم کند. 

 

چگونه می توان مشکل بلاک بودن رندر CSS را برطرف کرد؟

۱- تعریف صحیح فایل css قالب سایت

۲- کاهش تعداد فایل های css

۳- بطور کلی استفاده کمتر از css

 

در این مقاله سعی می کنیم موارد فوق را بصورت عمیق تشریح کنیم و نحوه انجام هر کدام را آموزش دهیم. نکات و دستورالعمل های لازم برای مدیران و طراحان وب سایت را نیز بیان خواهیم کرد. ما با بیان ساده ترین روش یعنی "تعریف صحیح فایل css" این آموزش را شروع می کنیم:

 

۱- اعلان صحیح فایل css (Properly calling CSS file):

فایل css به روش های مختلفی می تواند در یک صفحه وب تعریف شود. اما برخی از این روش ها برای دستگاه های موبایل مناسب نمی باشند. بطور کلی در هنگام تعریف css به دو نکته زیر دقت کنید:

  • از @import برای فراخوانی فایل css استفاده نکنید.
  • اعلان صحیح فایل های css

 

استفاده از @import برای تعریف فایل css و اعلان ناصحیح css از مواردی است که باعث بلاک شدن رندر css (render blocking css) می شود. بیایید نگاهی عمیق تر به این موارد بیاندازیم:

 

از @import برای فراخوانی فایل css استفاده نکنید:

 

از @import برای فراخوانی فایل css استفاده نکنید

 

مشکل: این روش فراخوانی فایل CSS خوب نیست زیرا یک زمان اضافی به زمان لود وب سایت اضافه می کند و باعث کندی وب سایت خواهد شد.

راه حل: تمام @import ها را انتخاب کرده و آنها را جایگزین کنید.

تشخیص: از ابزار pagespeed وب سایت varvy استفاده کنید. در ستون سمت چپ، یکی از آیتم ها، اجتناب از CSS @import می باشد (avoid css @import). اگر یک علامت سبزرنگ در این قسمت برای شما نمایش داده شده باشد بدین معنیست که شما در وب سایت خود اصلا از @import استفاده نکرده اید. اما اگر در فرخوانی css از @import استفاده کرده باشید، با یک x قرمزرنگ روبرو خواهید شد.

توضیحات: CSS import بصورت زیر تعریف می شود:

@import url("style.css")

بجای تعریف فایل css بصورت CSS import ، بهتر است css های قالب سایت خود را در یک فایل css تجمیع کنید و آنرا بصورت زیر تعریف کنید:

<link rel="stylesheet" href="style.css">

به یاد داشته باشید که حتما آدرس فایل css خود را بهمراه نام آن در ساختار فوق تصحیح کنید.

 

اعلان صحیح فایل های css:

مشکل: وقتی CSS بطور صحیح فراخوانی نشود، مرورگر بصورت پیش فرض، تمام CSS ها را قبل از رندر (RENDER) صفحه وب، لود می کند.

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

تشخیص: فایل HTML وب سایت خود را چک کنید و نحوه اعلان فایل CSS را بصورت زیر بررسی نمائید.

توضیحات: یک فایل CSS در حالت عادی بصورت زیر فراخوانی می گردد:

<link href="style.css" rel="stylesheet">

در عبارت فوق گفته ایم اینجا یک لینک است که برای فایل CSS سایت می باشد.

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

<link href="print.css" rel="stylesheet" media="print">

دستور بالا به مرورگر می گوید اینجا یک لینک است که برای css می باشد و ضمنا این css تنها مختص پرینت است.

از آنجائیکه که در اعلان فوق، media=”print” تعریف شده است، مرورگرهای مدرن، متوجه می شوند که این فایل css برای رندر این صفحه وب موردنیاز نمی باشد و تنها در هنگام پرینت کردن باید لود شود. بنابراین، مرورگر اولویت پایین تری برای لود این فایل درنظر می گیرد. با اینحال، مروگر فایل print.css را بلاک نمی کند و تنها اولویت لود آنرا پایین می آورد. به تصویر زیر دقت کنید:

 

اعلان صحیح فایل های css

 

همانطور که در تصویر فوق مشاهده می کنید، اگر فایل های css بطور صحیح نشانه گذاری نشوند، تمام آنها قبل از رندر سایر المان های صفحه، لود می شوند (main.css و print.css و…) اما اگر فایل های css با اعلان صحیح تعریف شوند، ابتدا فایل main.css رندر و لود می شود و سپس المان های صفحه وب و در نهایت فایل print.css به منظور پرینت.

حالا یک سناریوی دیگر را درنظر بگیرید: در فراخوانی زیر، فایل css در یک عرض (width) مشخصی از اسکرین استفاده می شود.

<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

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

 

۲- استفاده از تعداد فایل های css کمتر (Use less CSS file):

Critical rendering path (مسیر رندر حیاتی) روشی است برای اعلام به مرورگر که چه کارهایی باید قبل از لود کامل صفحه وب انجام شوند.

اگر شما فایل های css قالب سایت خود را بدرستی فراخوانی کنید (همانطور که قبلا در این مقاله ذکر کرده ایم)، فایل های غیرضروری را از مسیر حیاتی رندر حذف کرده اید. اما با اینحال، کارهای دیگری در این زمینه قابل انجام می باشد.

ما در این قسمت درباره فایل های main.css و page.css و غیره صحبت می کنیم. هر اندازه بتوانید تعداد فایل های فیزیکی را حذف کنید، سرعت لود صفحات وب سایت خود را افزایش داده اید.

بطور کلی دو راه برای کاهش تعداد فایل های css وجود دارد:

  • ادغام فایل های css (Combine CSS files)
  • استایل درون‌خطی (inline CSS)

 

 ادغام فایل های CSS: 

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

راه حل: فایل های CSS قالب وب سایت خود را در یک فایل ادغام (Combine) کنید. یا در صورت حجم بالای فایل های css ، می توانید تمام آنها را در دو فایل css ترکیب کنید.

توضیحات: بطور معمول، یک صفحه وب دارای یک فایل اصلی و بزرگ css (مثلا main.css) و چندین فایل کوچک می باشد. اگر از سیستمهای مدیریت محتوا (CMS: Content Management System) مانند وردپرس استفاده می کنید، ممکن است در صورت نصب پلاگین یا قالب، چندین فایل کوچک به وب سایت تان اضافه شود.

این مشکل (داشتن چندین فایل css) ممکن است برای وب سایت های استاتیک نیز پیش بیاید. زیرا طراحان مبتدی وب سایت احتمالا تصور می کنند داشتن چندین فایل css بصورت مجزا بهتر است زیرا خواناتر می باشد و قابلیت توسعه سریع تری دارد.

متاسفانه این قضیه باعث پایین آمدن کارایی سایت خواهد شد.

 

ادغام فایل های CSS

 

داشتن چندین فایل css برای قالب وب سایت بسیار مرسوم است. اگر شما بتوانید تعداد فایل های css سایت خود را کاهش دهید، نسبت به رقبای خود از امتیاز ویژه ای برخوردار خواهید بود. تفاوت بین فراخوانی یک یا دو فایل css با چندین فایل css ممکن است یک یا چند ثانیه در لود سایت باشد. بنابراین اگر سایت شما یک یا چند ثانیه زودتر لود شود، بازدید بیشتری از طرف کاربران دریافت خواهد کرد.

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

همچنین اگر می خواهید کاربران از وب سایت فروشگاهی شما بیشتر لذت ببرند و تجربه کاربری خوبی برای آنها رقم بزنید (UX: User Experience)، فراخوانی تعداد کمتر فایل های css می تواند یک وب سایت سریع تری برای شما فراهم کند.

 

نحوه ادغام فایل های CSS:

برای ادغام یا ترکیب فایل های css (combine CSS) باید استایل ها را از یک فایل به فایل دیگر کپی پیست (copy-paste) کنید. سپس فراخوانی یا اعلان فایل اول را از هدر صفحه وب سایت خود حذف کنید. به تصویر زیر توجه کنید:

 

نحوه ادغام فایل های CSS

 

در مثال تصویر فوق، فایل های other.css و third.css در فایل main.css ادغام شده اند.

با اینکار، ما یک صفحه وب که در آن ۳ فایل css فراخوانی میشد را به صفحه وبی تبدیل کردیم که فقط باید یک فایل css را فراخوانی کند.

 

استایل های درون‌خطی (Inline CSS):

مشکل: هر فایل CSS که به صفحه وب سایت خود اضافه می کنید، زمان بیشتری را برای لود آن صفحه وب صرف می کند.

راه حل: یک فایل CSS را با جایگزین کردن آن با استایل های Inline در فایل html سایت تان حذف کنید.

توضیحات: با استفاده از تگ style در المان های html می توان استایل های css را در فایل html تعریف کرد بجای اینکه در یک فایل css خارجی (external) تعریف شوند.

 

نحوه استایل‌نویسی css بصورت Inline:

به منظور inline نویسی استایل های css باید استایل های موردنظر خود را از فایل css کپی کرده و با فرمت زیر، در فایل html وب سایت پیست (paste) کنیم. پس از اینکه تمام استایل های تعریف شده در فایل css را به فایل html صفحه وب اضافه کردیم، باید فراخوانی این فایل css را از هدر سایت خود حذف کنیم.

<style>

…. your css instructions here …..

</style>

فرمت فوق را باید در بخش head صفحه وب سایت خود تعریف کنیم.

 

نحوه استایل‌نویسی css بصورت Inline

 

در تصویر بالا، محتوای فایل small.css را به فایل html منتقل کرده ایم و اعلان small.css را حذف نمودیم. بنابراین در فایل HTML فایل main.css بهمراه استایل های small.css بصورت inline تعریف شده اند.

 

۳- استفاده کمتر از CSS:

گفتن "استفاده کمتر از CSS" ساده است اما در عمل کار مشکلی است. دلایل متعددی وجود دارد که در اکثر وب سایت ها، یک سری CSS بلا استفاده لود می شود:

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

 

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

 

نتیجه‌گیری:

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

ابزارها:

با استفاده از ابزار CSS Delivery Tool می توانید نحوه تعریف فایل های css را در صفحات وب سایت خود چک کنید.

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

 

مطالعه بیشتر:

اگر می خواهید درباره دلایل اهمیت بهینه سازی فایل های css بیشتر بدانید، به مقاله CSS Object Model مراجعه کنید.

 

منبع: https://varvy.com/pagespeed/render-blocking-css.html


برچسب‌ها:

Render Blocking CSSادغام فایل های CSSاستایل‌نویسی cssاعلان صحیح فایل cssبلاک بودن CSSبلاک بودن رندر CSSرفع مشکل Render Blocking CSS

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

یک × 3 =