رسم اولین محتوا (FCP) یک معیار حیاتی در عملکرد وب مدرن است. این معیار زمان بین ناوبری تا زمانی که اولین متن یا تصویر روی صفحه نمایش داده شود را اندازهگیری میکند. در حالی که بسیاری از توسعهدهندگان بر زمان مسدودسازی کل (TBT) یا بزرگترین محتوای قابل مشاهده (LCP) تمرکز دارند، بهینهسازی FCP تضمین میکند که کاربران صفحه را از اولین میلیثانیه به سرعت بارگذاری میبینند.
مسیر رندر حیاتی (CRP) توالی مراحل است که مرورگر برای تبدیل HTML، CSS و JavaScript به پیکسلهای روی صفحه طی میکند. با درک این مسیر، میتوانیم گلوگاههایی را که مرورگر در آنجا برای منابع منتظر میماند تا بتواند صفحه را ترسیم کند، شناسایی کنیم. این مقاله بررسی میکند که چگونه نشانههای منابع و استراتژیهای پیشبارگذاری میتوانند زمان مسدودکننده رندر را به طور قابل توجهی کاهش دهند.
درک مسدودسازی رندر
به طور پیشفرض، مرورگر اسکریپتهای خارجی را دانلود و اجرا میکند که اغلب تجزیه HTML را متوقف میسازد. به همین ترتیب، فایلهای CSS تا زمانی که بارگیری و تجزیه نشوند، رندر را مسدود میکنند. این همگامسازی میتواند باعث تأخیر قابل توجهی در FCP شود. برای کاهش این مشکل، باید منابع حیاتی را اولویتبندی کرده و منابع غیرحیاتی را به تعویق بیندازیم یا از حالت غیرهمزمان (async) استفاده کنیم.
پیادهسازی پیشبارگذاری
پیشبارگذاری به مرورگر میگوید که منابع را در مراحل اولیه بارگذاری صفحه، اغلب قبل از اینکه تجزیهگر HTML به تعریف منبع برسد، دریافت کند. این کار برای فونتها، تصاویر کلیدی یا جاوااسکریپتی که برای نمای اولیه مورد نیاز است، بسیار مفید است.
از عنصر <link> با ویژگی rel="preload" استفاده کنید. ویژگی as را مشخص کنید تا نوع محتوا را تعریف کند که به مرورگر در اولویتبندی درخواست کمک میکند.
<head>
<link rel="preload" href="critical-font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero-image.jpg" as="image">
</head>هنگام پیشبارگذاری یک فونت، همیشه ویژگی crossorigin را شامل کنید. فونتها با نوع MIME و زمینه مبدأ متفاوتی ارائه میشوند؛ بدون این ویژگی، مرورگر ممکن است منبع پیشبارگذاری شده را رد کند یا نتواند آن را به درستی اعمال کند.
استفاده از پیشخوانی DNS
اگر صفحه شما به منابع شخص ثالثی که در دامنههای مختلف میزبانی میشوند وابسته است، مرورگر باید قبل از برقراری اتصال، آدرس DNS را حل کند. حل DNS باعث ایجاد تأخیر میشود، به ویژه در شبکههای کند. میتوانید به مرورگر نشانه دهید که این حل را در پسزمینه انجام دهد.
از رابطه dns-prefetch برای مشخص کردن دامنههایی که مرورگر باید آنها را زودتر حل کند، استفاده کنید. این روش سبک است و تأثیر کمی بر پهنای باند دارد.
<head>
<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://analytics.example.com">
</head>استفاده از Preconnect برای اتصالات سریعتر
در حالی که پیشخوانی DNS فقط آدرس را حل میکند، preconnect یک قدم جلوتر میرود. این ویژگی یک اتصال اولیه به مبدأ هدف را آغاز میکند، شامل حل DNS، دستتکانی TCP و به صورت اختیاری مذاکره TLS است. این کار تأخیر را برای درخواستهای بعدی به طور قابل توجهی کاهش میدهد.
از preconnect برای منابع حیاتی شخص ثالث مانند اسکریپتهای تحلیلی، درگاههای پرداخت یا APIهای کلیدی که برای رندر اولیه یا تعامل فوری مورد نیاز هستند، استفاده کنید.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://api.yourservice.com">
</head>توجه داشته باشید که preconnect منابع بیشتری نسبت به dns-prefetch مصرف میکند. فقط از آن برای مبدأهایی استفاده کنید که مطمئن هستید درخواستی به زودی از آنجا خواهد آمد. استفاده بیش از حد از آن میتواند پهنای باند و عمر باتری در دستگاههای موبایل را هدر دهد.
پیادهسازی استراتژیک
همه منابع نباید پیشبارگذاری یا پیشاتصال شوند. مرورگر محدودیتی در اتصالات همزمان به ازای هر مبدأ دارد و نشانهگذاری تهاجمی میتواند منابع CSS یا HTML حیاتی برای تجزیه را دچار کمبود کند. منابعی را که برای نمای اولیه ضروری هستند اولویتبندی کنید. از ابزارهایی مانند Lighthouse یا WebPageTest برای شناسایی فرصتهایی استفاده کنید که در آنها نشانهها بیشترین تأثیر را بر FCP خواهند داشت.
نتیجهگیری
تسلط بر مسیر رندر حیاتی برای بهینهسازی اولین محتوای قابل مشاهده ضروری است. با استفاده استراتژیک از نشانههای منابع مانند preload، dns-prefetch و preconnect، میتوانید مرورگر را برای دریافت زودتر منابع ضروری هدایت کنید، زمان انتظار را کاهش دهید و ادراک کاربر را بهبود بخشید. به یاد داشته باشید که نتایج خود را اندازهگیری کنید و استراتژی خود را بر اساس دادههای کاربر واقعی تنظیم کنید تا بهترین عملکرد ممکن را تضمین کنید.