در مطلب قبلی درباره معضل Render Blocking توضیح داده شد که وقتی مرورگر هنگام لود یک صفحه وب با یک فایل استایل یا جاوااسکریپت بیرونی برخورد می‌کند، ابتدا باید آن را دریافت و اجرا کند تا سپس نوبت به لود باقی صفحه برسد (حالت لود متقارن) و این وقفه باعث خواهد شد که کاربر تا زمان اتمام این عمل امکان مشاهده صفحه را نداشته باشد و به اصطلاح «بلاک» شود.
تا وقتی با یک فایل جاوااسکریپت بیرونی سر و کار داشتیم، برای حل این مشکل می‌شد خیلی ساده ویژگی Async یا Defer را به اسکریپت اضافه کرد تا به صورت نامتقارن لود شود.
اما در مورد فایل CSS چطور؟
این را می‌دانیم که مرورگرها به صورت پیش‌فرض فایل‌های CSS بیرونی را به صورت متقارن لود می‌کنند. بنابراین صورت مساله اینست که چطور این لود را به حالت نامتقارن تبدیل کنیم تا مشکل Render Blocking حل شود.
برخلاف اسکریپت‌ها، اینجا دیگر ویژگی‌های Async یا Defer برای فایل‌های CSS کارایی ندارند. بنابراین باید به سراغ راه‌های دیگر رفت.
یک فایل CSS بیرونی، از ویژگی link استفاده می‌کند و به این صورت نوشته می‌شود:
در اینجا می‌توان با اضافه کردن یک خط کوتاه به کد بالا، به سادگی نحوه لود فایل استایل را به حالت نامتقارن تغییر داد:
اما مفهوم این کد کوتاه HTML چیست؟ اگر دقت کنید می‌بینید که برای link، یک ویژگی media تعریف و نوع آن print تعیین شده است. Print در این کد می‌گوید که دستورات stylesheet را زمانی اعمال کن که کاربر قصد پرینت گرفتن از صفحه را دارد! در واقعیت می‌دانیم که قصد کاربر، الزاما یا صرفا پرینت گرفتن از صفحه نیست. ولی با این ترفند مرورگر را به نوعی گول می‌زنیم و به هدفی که داشتیم می‌رسیم (یعنی لود نامتقارن). ولی این هنوز کافی نیست. چون می‌خواهیم که به محض لود فایل CSS، دستورات آن نه فقط برای پرینت، بلکه واقعا برای صفحه نمایش هم اعمال شود. بنابراین یک ویژگی هم بلافاصله پشت بندش می‌آید تا بعد از اتمام لود، فایل استایل بر تمام انواع media اعمال شود (all) و نه فقط print. این ساده‌ترین روش است.
روش دیگر، پیش‌بارگذاری یا preload برای ویژگی rel است. یعنی به جای rel=stylesheet از rel=preload استفاده کنیم:
منتها این روش خیلی ایده‌آل نیست. چون اولا هنوز بعضی مرورگرها این ویژگی را ساپورت نمی‌کنند و ثانیا از آن مهمتر، استفاده از preload بالاترین حد اولویت را به دانلود فایل CSS شما می‌دهد و همین امر بالقوه می‌تواند سایر دانلودهای مهم را در اولویت پایین‌تری قرار بدهد.
اما خوشبختانه در مرورگرهایی که این قابلیت را ساپورت می‌کنند، شما می‌توانید هر دو کد بالا را ترکیب کنید تا به این ترتیب از اولویت بالای rel=preload هم بی‌بهره نمانید:
وندا نوژن
