مقاله آموزشی برنامه نویسی: Flash of Unstyled Content (FOUC) چیست؟ و چه تاثیری بر سئو سایت دارد؟

تصحیح یک سوءتفاهم رایج درباره FOUC

Flash of Unstyled Content= لحظه‌ای کوتاه که محتوابدون استایل(یا با استایل ناقص) روی صفحه ظاهر می‌شود و بعد ناگهان استایل می‌گیرد — یک «پرش» بصری آزاردهنده.

پیش از هر چیز، باید یک نکته کلیدی را روشن کنیم: FOUC (Flash of Unstyled Content) یک «کاربرد» یا ویژگی مفید در طراحی وب نیست؛ بلکه یک اختلال و باگ رندرینگ بصری است. زمانی که کاربران می‌پرسند «کاربرد FOUC چیست؟»، منظور اصلی آن‌ها معمولاً این است که چرا این اتفاق می‌افتد، چه تاثیری روی سئو و تجربه کاربری دارد و چگونه می‌توان از آن به نفع بهینه‌سازی سایت استفاده کرد یا آن را برطرف نمود؟

در این مطلب، از زاویه دید یک توسعه‌دهنده وب و سئوکار، زیر و بم FOUC را کالبدشکافی می‌کنیم تا بدانید چرا رفع این مشکل می‌تواند رتبه سایت شما را در نتایج جستجوی گوگل دگرگون کند.

FOUC دقیقاً چیست و چگونه رخ می‌دهد؟

اصطلاح Flash of Unstyled Content به معنای «فلش یا چشمک محتوای بدون استایل» است. این پدیده زمانی رخ می‌دهد که یک صفحه وب در مرورگر کاربر بارگذاری می‌شود، اما متن‌ها، تصاویر و عناصر HTML پیش از اینکه فایل‌های CSS (استایل‌شیت‌ها) دانلود و اعمال شوند، به مدت چند میلی‌ثانیه یا حتی چند ثانیه به صورت کاملاً خام، بی‌قواره و پیش‌فرض (با فونت‌های سیستمی و بدون رنگ‌بندی یا چیدمان) به نمایش درمی‌آیند. ناگهان با لود شدن کامل فایل CSS، صفحه پرش کرده و شکل نهایی و زیبای خود را به خود می‌گیرد.

چرخه رندرینگ مرورگر و ریشه شکل‌گیری FOUC

مرورگر برای تبدیل HTML به پیکسل روی صفحه، این مراحل را طی می‌کند:

HTML bytes
   ↓ (Decode)
HTML tokens
   ↓ (Tokenize)
DOM Tree  ←──────────────────────────┐
   ↓                                 │
CSS bytes → CSSOM Tree               │
   ↓                                 │
Render Tree (DOM + CSSOM با هم) ─────┘
   ↓
Layout (Reflow) — محاسبهٔ اندازه و موقعیت هر box
   ↓
Paint — رسم پیکسل‌ها در لایه‌ها
   ↓
Composite — ترکیب لایه‌ها روی GPU
   ↓
Pixels on screen

نکتهٔ کلیدی:Render Tree فقط وقتی ساخته می‌شود که هم DOM و هم CSSOM آماده باشند.یعنی مرورگر تا وقتی CSS را نگیرد، نمی‌تواند مطمئن شود یک عنصر «چگونه» باید دیده شود.

رفتار «مسدودکنندهٔ رندر» (Render-Blocking)

CSS به‌طور پیش‌فرض render-blocking است — یعنی وقتی مرورگر یک می‌بیند، رندر را متوقف می‌کند تا فایل برسد و CSSOM کامل شود.
JS (بدون async/defer) هم parser-blocking است— چون ممکن است DOM را تغییر دهد، و چون JS ممکن است به CSSOM نیاز داشته باشد، عملاً CSS قبل از آن هم blocking است.
مرورگرمتنوع‌سازیمی‌کند: اگر CSS دیر برسد، تا یک بازهٔ کوتاه صبر می‌کند، اما اگر خیلی طول بکشد یا شرایط خاصی پیش بیاید،ممکن است DOM را زودتر paint کند.

همین «ممکن است زودتر paint کند» ریشهٔ FOUC است.

ریشه‌های شکل‌گیری FOUC

ریشهٔ اصلی: فاصلهٔ زمانی بین «رسم DOM» و «رسیدن CSSOM»

اگر مرورگر محتوا را در DOM داشته باشدوبه هر دلیلی تصمیم بگیرد قبل از تکمیل CSSOM آن را paint کند، FOUC رخ می‌دهد. دلایل رایج:

الف) لود غیرهمگام CSS

تکنیک معروف «load CSS asynchronously». چونmedia="print"باعث می‌شود مرورگر رندر را بلاک نکند، محتوا زودتر paint می‌شود و بعد ازonloadکه media بهallتغییر می‌کند، استایل اعمال می‌شود →FOUC.

ب) @import داخل CSS

@import url("other.css");

@import داخل CSSOMحل می‌شود، نه هنگام پارس HTML. یعنی مرورگر اولmain.cssرا می‌گیرد، بعد داخلش@importرا کشف می‌کند و یک round-trip دیگر می‌زند. این تأخیر اضافه، احتمال paint زودهنگام را بالا می‌برد.

ج) تزریق CSS با جاوااسکریپت

document.head.appendChild(link); // stylesheet
// یا insertRule، یا import() در JS

مرورگر DOM را دارد، JS اجرا می‌شود، ولی تا وقتی فایل CSS جدید برسد، محتوا بدون استایل است. اگر JS بعد از paint اولیه اجرا شود → FOUC.

د) CSS دیرکشف‌شده (Late-Discovered)

مثلاً CSS داخل یک، یا در یک کامپوننت که با JS رندر می‌شود، یا در HTML که بعد از مقدار زیادی محتوا آمده. مرورگر روی HTML streaming کار می‌کند؛ اگر محتوا زودتر ازبرسد، ممکن است paint زودهنگام انجام شود.

ه) رفتار تاریخی Firefox

فایرفاکس قدیمی (پیش از Quantum در ۲۰۱۷) در حالت back/forward cache یا وقتی CSS از cache نمی‌آمد، بیشتر مستعد FOUC بود. امروز این مورد خیلی کمتر است ولی همچنان با لود async CSS دیده می‌شود.و) Blazor / SPA

در Blazor Server/WASM، HTML اولیه می‌رسد ولی CSS (مثلاً{Assembly}.styles.css) یا استایل‌های scoped ممکن است بعد از hydration یا بعد از بارگذاری WASM اعمال شوند → FOUC. همچنین در SSR، اگر

بعد از محتوا باشد یا با@importلود شود، همان مشکل کلاسیک.

FOUC یعنی مرورگر DOM را رسم کرد ولی CSSOM هنوز آماده نبود. ریشهٔ آن هر چیزی است که زمان رسیدن CSSOM را از زمان آماده شدن DOM عقب‌تر بیندازد و در عین حال مرورگر را از حالت render-blocking خارج کند: لود async، @import ، تزریق با JS، یا CSS دیرکشف‌شده. قاعدهٔ طلایی: CSS بحرانی را blocking و inline نگه دار؛ بقیه را async کن — و هرگز استایل را با JS تزریق نکن مگر اینکه واقعاً چاره‌ای نباشد.

لینک استاندارد شده: a2P7rVo82M