دارایی های حیاتی را برای بهبود سرعت بارگذاری از قبل بارگیری کنید

حسین جرده
جرمی واگنر
میلیکا میهاجلیا

هنگامی که یک صفحه وب را باز می کنید، مرورگر سند HTML را از یک سرور درخواست می کند، محتویات آن را تجزیه می کند و درخواست های جداگانه ای را برای هر منبع ارجاعی ارسال می کند. به عنوان یک توسعه دهنده، شما از قبل در مورد تمام منابع مورد نیاز صفحه خود و اینکه کدام یک از آنها مهم هستند، می دانید. شما می توانید از این دانش برای درخواست منابع حیاتی قبل از زمان و سرعت بخشیدن به فرآیند بارگذاری استفاده کنید. این پست نحوه دستیابی به آن را با <link rel="preload"> توضیح می دهد.

نحوه کار پیش بارگذاری

پیش بارگیری برای منابعی که معمولاً دیرتر توسط مرورگر کشف می شوند مناسب است.

اسکرین شات پانل شبکه Chrome DevTools.
در این مثال، فونت Pacifico در stylesheet با قاعده @font-face تعریف شده است. مرورگر فایل فونت را تنها پس از پایان دانلود و تجزیه شیت بارگیری می کند.

با از پیش بارگذاری یک منبع خاص، به مرورگر می گویید که دوست دارید آن را زودتر از مرورگر کشف کند، زیرا مطمئن هستید که برای صفحه فعلی مهم است.

نماگرفت پانل شبکه Chrome DevTools پس از اعمال بارگیری اولیه.
در این مثال، فونت Pacifico از قبل بارگذاری شده است، بنابراین دانلود به صورت موازی با شیوه نامه انجام می شود.

زنجیره درخواست بحرانی نشان دهنده ترتیب منابعی است که اولویت بندی شده و توسط مرورگر واکشی می شوند. Lighthouse دارایی هایی را که در سطح سوم این زنجیره قرار دارند به عنوان دیر کشف شده شناسایی می کند. می‌توانید از ممیزی درخواست‌های کلید Preload برای شناسایی منابعی که باید از قبل بارگیری کنید استفاده کنید.

ممیزی درخواست کلید پیش بارگذاری فانوس.

می‌توانید با افزودن یک تگ <link> با rel="preload" به سر سند HTML خود، منابع را از قبل بارگیری کنید:

<link rel="preload" as="script" href="critical.js">

مرورگر منابع از پیش بارگذاری شده را در حافظه پنهان ذخیره می کند تا در صورت نیاز فوراً در دسترس باشند. (اسکریپت ها را اجرا نمی کند یا شیوه نامه ها را اعمال نمی کند.)

راهنمایی های منابع، به عنوان مثال، preconnect و prefetch ، همانطور که مرورگر صلاح می داند اجرا می شود. از سوی دیگر، preload برای مرورگر اجباری است. مرورگرهای مدرن در اولویت بندی منابع بسیار خوب عمل می کنند، به همین دلیل مهم است که preload کم استفاده کنید و فقط حیاتی ترین منابع را از قبل بارگذاری کنید.

پیش‌بارگیری‌های استفاده نشده، تقریباً 3 ثانیه پس از رویداد load ، یک هشدار کنسول در Chrome ایجاد می‌کنند.

اخطار کنسول Chrome DevTools درباره منابع از پیش بارگذاری شده استفاده نشده.

موارد استفاده کنید

پیش بارگیری منابع تعریف شده در CSS

فونت های تعریف شده با قوانین @font-face یا تصاویر پس زمینه تعریف شده در فایل های CSS تا زمانی که مرورگر آن فایل های CSS را دانلود و تجزیه نکند، کشف نمی شوند. بارگیری از قبل این منابع تضمین می کند که قبل از دانلود فایل های CSS واکشی شده اند.

در حال بارگذاری فایل های CSS

اگر از رویکرد CSS بحرانی استفاده می کنید، CSS خود را به دو قسمت تقسیم می کنید. CSS حیاتی مورد نیاز برای ارائه محتوای بالا در <head> سند درج شده است و CSS غیر بحرانی معمولاً با جاوا اسکریپت بارگذاری می شود. انتظار برای اجرای جاوا اسکریپت قبل از بارگیری CSS غیر بحرانی می تواند باعث تاخیر در رندر هنگام اسکرول کاربران شود، بنابراین بهتر است از <link rel="preload"> برای شروع زودتر دانلود استفاده کنید.

پیش بارگذاری فایل های جاوا اسکریپت

از آنجایی که مرورگرها فایل‌های از پیش بارگذاری شده را اجرا نمی‌کنند، بارگیری از قبل برای جدا کردن واکشی از اجرا مفید است که می‌تواند معیارهایی مانند Time to Interactive را بهبود بخشد. اگر بسته‌های جاوا اسکریپت خود را تقسیم کنید و فقط تکه‌های مهم را از قبل بارگذاری کنید، پیش‌بارگیری بهترین کار را دارد.

نحوه پیاده سازی 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 این است که مرورگر برای کشف سند نیازی به تجزیه و تحلیل ندارد، که در برخی موارد می تواند پیشرفت های کوچکی را ارائه دهد.

از پیش بارگذاری ماژول های جاوا اسکریپت با بسته وب

اگر از یک بسته‌کننده ماژول استفاده می‌کنید که فایل‌های بیلد برنامه شما را ایجاد می‌کند، باید بررسی کنید که آیا از تزریق تگ‌های پیش‌بارگذاری پشتیبانی می‌کند یا خیر. با وب‌پک نسخه 4.6.0 یا بالاتر، از پیش بارگذاری با استفاده از نظرات جادویی در داخل import() پشتیبانی می‌شود:

import(_/* webpackPreload: true */_ "CriticalChunk")

اگر از نسخه قدیمی‌تر وب‌پک استفاده می‌کنید، از یک افزونه شخص ثالث مانند preload-webpack-plugin استفاده کنید.

اثرات پیش بارگذاری روی Core Web Vitals

پیش بارگذاری یک بهینه سازی عملکرد قدرتمند است که بر سرعت بارگذاری تأثیر دارد. چنین بهینه‌سازی‌هایی می‌توانند منجر به تغییراتی در Core Web Vitals سایت شما شوند و مهم است که از آنها آگاه باشید.

بزرگترین رنگ محتوایی (LCP)

در مورد فونت ها و تصاویر، پیش بارگذاری تأثیر قدرتمندی بر بزرگترین رنگ محتوایی (LCP) دارد، زیرا هم تصاویر و هم گره های متن می توانند کاندید LCP باشند. تصاویر قهرمان و اجراهای بزرگ متنی که با استفاده از فونت‌های وب ارائه می‌شوند، می‌توانند به طور قابل‌توجهی از یک اشاره پیش‌بارگذاری مناسب بهره‌مند شوند، و باید زمانی استفاده شوند که فرصت‌هایی برای ارائه سریع‌تر این بخش‌های مهم محتوا به کاربر وجود داشته باشد.

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

در عوض، روی چند منبع با ارزش بالا تمرکز کنید که می‌دانید از یک پیش‌بارگذاری مناسب سود می‌برند. هنگام بارگیری فونت‌ها، اطمینان حاصل کنید که فونت‌ها را با فرمت WOFF 2.0 ارائه می‌کنید تا زمان بارگیری منابع را تا حد امکان کاهش دهید. از آنجایی که WOFF 2.0 از مرورگر عالی پشتیبانی می کند، استفاده از فرمت های قدیمی تر مانند WOFF 1.0 یا TrueType (TTF) اگر نامزد LCP یک گره متنی باشد، LCP شما را به تاخیر می اندازد.

وقتی صحبت از LCP و جاوا اسکریپت می شود، باید مطمئن شوید که نشانه گذاری کاملی را از سرور ارسال می کنید تا اسکنر پیش بارگذاری مرورگر به درستی کار کند. اگر تجربه‌ای را ارائه می‌دهید که کاملاً به جاوا اسکریپت برای رندر نشانه‌گذاری متکی است و نمی‌توانید HTML ارائه‌شده توسط سرور ارسال کنید، بهتر است در جایی که اسکنر پیش‌بارگیری مرورگر نمی‌تواند وارد شوید و منابعی را پیش‌بارگیری کنید که در غیر این صورت قابل شناسایی هستند. زمانی که جاوا اسکریپت بارگیری و اجرا را تمام کرد.

تغییر چیدمان تجمعی (CLS)

تغییر چیدمان تجمعی (CLS) یک معیار بسیار مهم در مورد فونت های وب است، و CLS با فونت های وب که از ویژگی font-display CSS برای مدیریت نحوه بارگذاری فونت ها استفاده می کنند، تعامل قابل توجهی دارد. برای به حداقل رساندن تغییرات طرح بندی مربوط به فونت وب، استراتژی های زیر را در نظر بگیرید:

  1. هنگام استفاده از مقدار block پیش‌فرض برای font-display فونت‌ها را از قبل بارگیری کنید. این یک تعادل ظریف است. مسدود کردن نمایش فونت ها بدون بازگشت به عقب را می توان یک مشکل تجربه کاربر در نظر گرفت. از یک طرف، بارگیری فونت ها با font-display: block; تغییرات طرح بندی مربوط به فونت وب را حذف می کند. از سوی دیگر، اگر فونت‌های وب برای تجربه کاربر حیاتی هستند، همچنان می‌خواهید در اسرع وقت بارگذاری شوند. ترکیب پیش بارگذاری با font-display: block; ممکن است یک سازش قابل قبول باشد.
  2. هنگام استفاده از مقدار fallback برای font-display فونت‌ها را از قبل بارگیری کنید. fallback بین swap و block است، به این معنا که دوره مسدود کردن بسیار کوتاهی دارد.
  3. از مقدار optional برای font-display بدون پیش بارگذاری استفاده کنید. اگر فونت وب برای تجربه کاربر حیاتی نیست، اما همچنان برای ارائه مقدار قابل توجهی از متن صفحه استفاده می شود، از مقدار optional استفاده کنید. در شرایط نامطلوب، optional متن صفحه را با فونت بازگشتی نمایش می دهد در حالی که فونت را در پس زمینه برای پیمایش بعدی بارگذاری می کند. نتیجه خالص در این شرایط CLS بهبود یافته است، زیرا فونت‌های سیستم بلافاصله رندر می‌شوند، در حالی که بارگذاری‌های بعدی صفحه فورا فونت را بدون تغییر طرح بارگذاری می‌کنند.

CLS یک معیار دشوار برای بهینه سازی برای فونت های وب است. مثل همیشه، در آزمایشگاه آزمایش کنید، اما برای تعیین اینکه آیا استراتژی‌های بارگذاری فونت شما CLS را بهبود می‌بخشد یا بدتر می‌کند، به داده‌های میدانی خود اعتماد کنید.

تعامل با رنگ بعدی (INP)

Interaction to Next Paint معیاری است که میزان پاسخگویی به ورودی کاربر را می سنجد. از آنجایی که سهم اصلی تعامل در وب توسط جاوا اسکریپت هدایت می شود، بارگذاری پیش بارگذاری جاوا اسکریپت که تعاملات مهم را تقویت می کند ممکن است به پایین نگه داشتن INP صفحه کمک کند. با این حال، توجه داشته باشید که بارگذاری بیش از حد جاوا اسکریپت در هنگام راه‌اندازی می‌تواند پیامدهای منفی ناخواسته‌ای داشته باشد، اگر منابع زیادی برای پهنای باند تلاش کنند.

همچنین باید مراقب نحوه تقسیم کد باشید. تقسیم کد یک بهینه‌سازی عالی برای کاهش مقدار جاوا اسکریپت بارگیری شده در حین راه‌اندازی است، اما اگر به جاوا اسکریپت بارگیری شده درست در شروع تعامل متکی باشد، تعاملات می‌توانند به تعویق بیفتند. برای جبران این، باید قصد کاربر را بررسی کنید و قبل از انجام تعامل، یک پیش بارگذاری برای تکه(های) ضروری جاوا اسکریپت تزریق کنید. یک مثال می‌تواند بارگذاری پیش‌بارگذاری جاوا اسکریپت مورد نیاز برای اعتبارسنجی محتوای یک فرم، زمانی که هر یک از فیلدهای فرم متمرکز است، باشد.

نتیجه

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