وقتی یک صفحه وب را باز می‌کنید، مرورگر سند HTML را از سرور درخواست می‌کند، محتوای آن را تجزیه می‌کند و درخواست‌های جداگانه‌ای را برای منابع ارجاع‌شده ارسال می‌کند. به عنوان یک توسعه‌دهنده، شما از قبل در مورد تمام منابعی که صفحه شما نیاز دارد و مهمترین آنها می‌دانید. می‌توانید از این دانش برای درخواست منابع حیاتی از قبل و افزایش سرعت بارگذاری استفاده کنید. این پست نحوه دستیابی به این هدف را با <link rel="preload"> توضیح می‌دهد.
نحوه‌ی عملکرد پیش‌بارگذاری
پیش بارگذاری برای منابعی که معمولاً دیر توسط مرورگر کشف می‌شوند، مناسب‌ترین گزینه است.
@font-face در فایل استایل تعریف شده است. مرورگر تنها پس از اتمام دانلود و تجزیه فایل استایل، فایل فونت را بارگذاری می‌کند.با پیش‌بارگذاری یک منبع خاص، به مرورگر می‌گویید که می‌خواهید آن را زودتر از زمانی که مرورگر در حالت عادی آن را پیدا می‌کرد، دریافت کنید، زیرا مطمئن هستید که برای صفحه فعلی مهم است.
زنجیره درخواست‌های حیاتی، ترتیب منابعی را نشان می‌دهد که توسط مرورگر اولویت‌بندی و دریافت می‌شوند. لایت‌هاوس دارایی‌هایی را که در سطح سوم این زنجیره قرار دارند، به عنوان منابعی که دیر کشف شده‌اند، شناسایی می‌کند. می‌توانید از حسابرسی درخواست‌های کلید Preload برای شناسایی منابعی که باید از قبل بارگذاری شوند، استفاده کنید.
شما می‌توانید منابع را با اضافه کردن یک تگ <link> با rel="preload" به ابتدای سند HTML خود، پیش‌بارگذاری کنید:
<link rel="preload" as="script" href="critical.js">
مرورگر منابع از پیش بارگذاری شده را ذخیره می‌کند تا در صورت نیاز فوراً در دسترس باشند. (اسکریپت‌ها را اجرا نمی‌کند یا استایل‌شیت‌ها را اعمال نمی‌کند.)
برای مثال، نکات مربوط به منابع، مانند preconnect و prefetch ، به صلاحدید مرورگر اجرا می‌شوند. از سوی دیگر، preload برای مرورگر اجباری است. مرورگرهای مدرن در اولویت‌بندی منابع بسیار خوب عمل می‌کنند، به همین دلیل است که استفاده preload به صورت محدود و فقط بارگذاری منابع حیاتی بسیار مهم است.
بارگذاری‌های اولیه‌ی استفاده نشده، تقریباً ۳ ثانیه پس از رویداد load ، یک هشدار کنسول در کروم ایجاد می‌کنند.
موارد استفاده
پیش بارگذاری منابع تعریف شده در CSS
فونت‌هایی که با قوانین @font-face تعریف شده‌اند یا تصاویر پس‌زمینه‌ای که در فایل‌های CSS تعریف شده‌اند، تا زمانی که مرورگر آن فایل‌های CSS را دانلود و تجزیه نکند، شناسایی نمی‌شوند. پیش‌بارگذاری این منابع تضمین می‌کند که آنها قبل از دانلود فایل‌های CSS دریافت می‌شوند.
پیش بارگذاری فایل‌های CSS
اگر از رویکرد Critical CSS استفاده می‌کنید، CSS خود را به دو بخش تقسیم می‌کنید. CSS Critical مورد نیاز برای رندر محتوای بالای صفحه در <head> سند قرار می‌گیرد و CSS غیر Critical معمولاً با جاوا اسکریپت به صورت lazy load می‌شود. انتظار برای اجرای جاوا اسکریپت قبل از بارگذاری CSS غیر Critical می‌تواند باعث تأخیر در رندر هنگام اسکرول کاربران شود، بنابراین ایده خوبی است که از <link rel="preload"> برای شروع سریع‌تر دانلود استفاده کنید.
پیش بارگذاری فایل‌های جاوا اسکریپت
از آنجا که مرورگرها فایل‌های از پیش بارگذاری شده را اجرا نمی‌کنند، پیش‌بارگذاری برای جداسازی واکشی از اجرا مفید است که می‌تواند معیارهایی مانند زمان تعامل را بهبود بخشد. پیش‌بارگذاری در صورتی بهترین عملکرد را دارد که بسته‌های جاوا اسکریپت خود را تقسیم کرده و فقط بخش‌های مهم را از قبل بارگذاری کنید.
نحوه پیاده‌سازی rel=preload
ساده‌ترین راه برای پیاده‌سازی preload ، اضافه کردن یک تگ <link> به <head> سند است:
<head>
<link rel="preload" as="script" href="critical.js">
</head>
ارائه ویژگی as به مرورگر کمک می‌کند تا اولویت منبع از پیش واکشی شده را بر اساس نوع آن تعیین کند، هدرهای مناسب را تنظیم کند و مشخص کند که آیا منبع از قبل در حافظه پنهان وجود دارد یا خیر. مقادیر پذیرفته شده برای این ویژگی عبارتند از: script ، style ، font ، image و موارد دیگر .
برخی از انواع منابع، مانند فونت‌ها، در حالت ناشناس بارگذاری می‌شوند. برای این موارد، باید ویژگی crossorigin را با preload تنظیم کنید:
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
عناصر <link> همچنین یک ویژگی type را می‌پذیرند که شامل نوع MIME منبع لینک شده است. مرورگرها از مقدار ویژگی type استفاده می‌کنند تا مطمئن شوند که منابع فقط در صورتی که نوع فایل آنها پشتیبانی شود، از قبل بارگذاری می‌شوند. اگر مرورگری از نوع منبع مشخص شده پشتیبانی نکند، <link rel="preload"> را نادیده می‌گیرد.
همچنین می‌توانید هر نوع منبعی را از طریق هدر Link HTTP از قبل بارگذاری کنید:
Link: </css/style.css>; rel="preload"; as="style"
یکی از مزایای تعیین preload در هدر HTTP این است که مرورگر برای کشف سند نیازی به تجزیه آن ندارد، که در برخی موارد می‌تواند پیشرفت‌های کوچکی را ارائه دهد.
پیش بارگذاری ماژول‌های جاوا اسکریپت با webpack
اگر از یک module bundler استفاده می‌کنید که فایل‌های ساخت برنامه شما را ایجاد می‌کند، باید بررسی کنید که آیا از تزریق تگ‌های preload پشتیبانی می‌کند یا خیر. با webpack نسخه ۴.۶.۰ یا بالاتر، preloading از طریق استفاده از کامنت‌های جادویی درون import() پشتیبانی می‌شود:
import(_/* webpackPreload: true */_ "CriticalChunk")
اگر از نسخه قدیمی‌تر webpack استفاده می‌کنید، از یک افزونه شخص ثالث مانند preload-webpack-plugin استفاده کنید.
تأثیرات پیش بارگذاری بر روی Core Web Vitals
پیش بارگذاری یک بهینه‌سازی قدرتمند برای عملکرد است که بر سرعت بارگذاری تأثیر می‌گذارد. چنین بهینه‌سازی‌هایی می‌تواند منجر به تغییراتی در Core Web Vitals سایت شما شود و آگاهی از آنها مهم است.
بزرگترین رنگ محتوا (LCP)
پیش‌بارگذاری تأثیر قدرتمندی بر Largest Contentful Paint (LCP) در مورد فونت‌ها و تصاویر دارد، زیرا هم تصاویر و هم گره‌های متنی می‌توانند کاندیدهای LCP باشند. تصاویر برجسته و متن‌های حجیم که با استفاده از فونت‌های وب رندر می‌شوند، می‌توانند از یک اشاره پیش‌بارگذاری مناسب بهره‌مند شوند و باید زمانی که فرصت‌هایی برای ارائه سریع‌تر این بخش‌های مهم محتوا به کاربر وجود دارد، استفاده شوند.
با این حال، هنگام پیش‌بارگذاری و سایر بهینه‌سازی‌ها باید مراقب باشید! به طور خاص، از پیش‌بارگذاری منابع زیاد خودداری کنید. اگر منابع زیادی در اولویت قرار گرفته باشند، در واقع هیچ‌کدام از آنها اولویت‌بندی نمی‌شوند. اثرات هشدارهای پیش‌بارگذاری بیش از حد، به ویژه برای شبکه‌های کندتر که در آنها اختلاف پهنای باند بیشتر مشهود است، مضر خواهد بود.
در عوض، روی چند منبع با ارزش بالا تمرکز کنید که می‌دانید از یک پیش‌بارگذاری مناسب بهره‌مند می‌شوند. هنگام پیش‌بارگذاری فونت‌ها، مطمئن شوید که فونت‌ها را با فرمت WOFF 2.0 ارائه می‌دهید تا زمان بارگذاری منابع تا حد امکان کاهش یابد. از آنجایی که WOFF 2.0 پشتیبانی عالی از مرورگر دارد، استفاده از فرمت‌های قدیمی‌تر مانند WOFF 1.0 یا TrueType (TTF) در صورتی که کاندید LCP یک گره متنی باشد، LCP شما را به تأخیر می‌اندازد.
وقتی صحبت از LCP و جاوا اسکریپت می‌شود، باید مطمئن شوید که نشانه‌گذاری کامل را از سرور ارسال می‌کنید تا اسکنر پیش‌بارگذاری مرورگر به درستی کار کند. اگر تجربه‌ای ارائه می‌دهید که کاملاً به جاوا اسکریپت برای رندر نشانه‌گذاری متکی است و نمی‌تواند HTML رندر شده توسط سرور را ارسال کند، مفید خواهد بود که در جایی که اسکنر پیش‌بارگذاری مرورگر نمی‌تواند وارد عمل شوید و منابعی را پیش‌بارگذاری کنید که در غیر این صورت فقط زمانی قابل کشف هستند که بارگذاری و اجرای جاوا اسکریپت به پایان برسد.
تغییر چیدمان تجمعی (CLS)
تغییر چیدمان تجمعی (CLS) یک معیار بسیار مهم در مورد فونت‌های وب است و CLS تعامل قابل توجهی با فونت‌های وب دارد که از ویژگی font-display CSS برای مدیریت نحوه بارگذاری فونت‌ها استفاده می‌کنند. برای به حداقل رساندن تغییرات چیدمان مربوط به فونت وب، استراتژی‌های زیر را در نظر بگیرید:
- فونت‌ها را هنگام استفاده از مقدار
blockپیش‌فرض برایfont-displayپیش‌بارگذاری کنید. این یک تعادل ظریف است. مسدود کردن نمایش فونت‌ها بدون یک جایگزین می‌تواند یک مشکل تجربه کاربری تلقی شود. از یک طرف، بارگذاری فونت‌ها باfont-display: block;تغییرات طرح‌بندی مربوط به فونت وب را از بین می‌برد. از طرف دیگر، اگر فونت‌های وب برای تجربه کاربری حیاتی هستند، شما هنوز هم می‌خواهید در اسرع وقت بارگذاری شوند. ترکیب پیش‌بارگذاری باfont-display: block;ممکن است یک مصالحه قابل قبول باشد. - فونت‌ها را هنگام استفاده از مقدار
fallbackبرایfont-displayاز قبل بارگذاری کنید.fallbackترکیبی بینswapوblockاست، به این معنی که دوره انسداد بسیار کوتاهی دارد. - از مقدار
optionalبرایfont-displayبدون پیش‌بارگذاری استفاده کنید. اگر یک فونت وب برای تجربه کاربری حیاتی نیست، اما همچنان برای رندر کردن مقدار قابل توجهی از متن صفحه استفاده می‌شود، استفاده از مقدارoptionalرا در نظر بگیرید. در شرایط نامطلوب،optionalمتن صفحه را با یک فونت جایگزین نمایش می‌دهد در حالی که فونت را در پس‌زمینه برای پیمایش بعدی بارگذاری می‌کند. نتیجه نهایی در این شرایط بهبود CLS است، زیرا فونت‌های سیستم بلافاصله رندر می‌شوند، در حالی که بارگذاری‌های بعدی صفحه، فونت را بلافاصله بدون تغییر طرح بارگذاری می‌کنند.
بهینه‌سازی CLS در مورد فونت‌های وب، معیار دشواری است. مثل همیشه، در آزمایشگاه آزمایش کنید، اما برای تعیین اینکه آیا استراتژی‌های بارگذاری فونت شما CLS را بهبود می‌بخشند یا آن را بدتر می‌کنند، به داده‌های میدانی خود اعتماد کنید.
تعامل با رنگ بعدی (INP)
تعامل با Next Paint معیاری است که میزان پاسخگویی به ورودی کاربر را می‌سنجد. از آنجایی که بخش عمده‌ای از تعامل در وب توسط جاوا اسکریپت هدایت می‌شود، پیش‌بارگذاری جاوا اسکریپتی که تعاملات مهم را پشتیبانی می‌کند، می‌تواند به پایین نگه داشتن INP یک صفحه کمک کند. با این حال، توجه داشته باشید که پیش‌بارگذاری بیش از حد جاوا اسکریپت در هنگام راه‌اندازی می‌تواند عواقب منفی ناخواسته‌ای داشته باشد، اگر منابع زیادی برای پهنای باند رقابت کنند.
همچنین باید در مورد نحوه تقسیم کد دقت کنید. تقسیم کد یک بهینه‌سازی عالی برای کاهش میزان جاوا اسکریپت بارگذاری شده در هنگام راه‌اندازی است، اما اگر تعاملات به بارگذاری جاوا اسکریپت درست در ابتدای تعامل متکی باشند، می‌توانند به تأخیر بیفتند. برای جبران این موضوع، باید قصد کاربر را بررسی کنید و قبل از انجام تعامل، یک پیش‌بارگذاری برای بخش(های) لازم از جاوا اسکریپت تزریق کنید. یک مثال می‌تواند پیش‌بارگذاری جاوا اسکریپت مورد نیاز برای اعتبارسنجی محتوای یک فرم در زمانی باشد که هر یک از فیلدهای فرم متمرکز شده‌اند.
نتیجه‌گیری
برای بهبود سرعت صفحه، منابع مهمی را که مرورگر دیر کشف می‌کند، از قبل بارگذاری کنید. بارگذاری همه چیز نتیجه‌ی معکوس خواهد داشت، بنابراین preload به میزان کم استفاده کنید و تأثیر آن را در دنیای واقعی بسنجید .