در آخرین ماژول در مورد بهینه سازی بارگذاری منابع ، یاد گرفتید که چگونه منابع مختلف صفحه مانند CSS و جاوا اسکریپت می توانند بر سرعت بارگذاری صفحه تأثیر بگذارند و چگونه می توانید آنها و تحویل آنها را برای سرعت بخشیدن به رندر صفحه بهینه کنید. این زمان عالی برای حرکت به جنبه پیشرفتهتر بارگیری منابع است، و این زمان شامل کمک به مرورگر برای بارگیری سریعتر آنها با استفاده از نکات منابع است.
نکات منابع می تواند به توسعه دهندگان کمک کند تا با اطلاع رسانی به مرورگر نحوه بارگیری و اولویت بندی منابع، زمان بارگذاری صفحه را بیشتر بهینه کنند. مجموعه اولیه ای از نکات منابع مانند preconnect
و dns-prefetch
اولین مواردی بودند که معرفی شدند. با این حال، با گذشت زمان، preload
و Fetch Priority API برای ارائه قابلیتهای اضافی دنبال شد.
نکات منابع به مرورگر دستور می دهد تا اقدامات خاصی را زودتر از موعد انجام دهد که می تواند عملکرد بارگیری را بهبود بخشد. نکات منابع می توانند اقداماتی مانند انجام جستجوهای اولیه DNS، اتصال پیش از موعد به سرورها و حتی واکشی منابع قبل از اینکه مرورگر معمولاً آنها را کشف کند، انجام دهند.
نکات منبع ممکن است در HTML مشخص شوند - اغلب در اوایل عنصر <head>
- یا به عنوان سرصفحه HTTP تنظیم شوند . برای دامنه این ماژول، preconnect
، dns-prefetch
و preload
پوشش داده شده است، و همچنین رفتارهای واکشی احتمالی که prefetch
فراهم می کند، پوشش داده شده است.
preconnect
راهنمایی preconnect
برای برقراری ارتباط با مبدأ دیگری از جایی که منابع حیاتی را دریافت می کنید استفاده می شود. به عنوان مثال، شما ممکن است تصاویر یا دارایی های خود را روی CDN یا سایر منابع متقاطع میزبانی کنید:
<link rel="preconnect" href="https://example.com">
با استفاده از preconnect
، پیشبینی میکنید که مرورگر قصد دارد در آینده نزدیک به یک سرور متقاطع خاص متصل شود و مرورگر باید آن اتصال را در اسرع وقت باز کند، در حالت ایدهآل قبل از اینکه منتظر تجزیهکننده HTML یا اسکنر پیشبارگیری باشد. بنابراین
اگر تعداد زیادی منابع متقاطع در یک صفحه دارید، preconnect
برای آن دسته از منابعی که برای صفحه فعلی حیاتی هستند، استفاده کنید.
یک مورد معمول استفاده از preconnect
، فونت های گوگل است . فونتهای Google توصیه میکنند که preconnect
به دامنه https://fonts.googleapis.com
که اعلانهای @font-face
ارائه میکند و به دامنه https://fonts.gstatic.com
که فایلهای فونت را ارائه میکند متصل شوید.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
ویژگی crossorigin
برای نشان دادن اینکه آیا یک منبع باید با استفاده از اشتراکگذاری منابع متقاطع (CORS) واکشی شود یا خیر استفاده میشود. هنگام استفاده از راهنمایی preconnect
، اگر منبعی که از مبدأ دانلود میشود از CORS استفاده میکند - مانند فایلهای فونت - پس باید ویژگی crossorigin
را به راهنمایی preconnect
اضافه کنید.
dns-prefetch
در حالی که باز کردن زودهنگام اتصالات به سرورهای متقاطع می تواند زمان بارگذاری اولیه صفحه را به میزان قابل توجهی بهبود بخشد، ممکن است ایجاد اتصال به بسیاری از سرورهای متقاطع به طور همزمان معقول یا ممکن نباشد. اگر نگران این هستید که ممکن است preconnect
بیش از حد استفاده کنید، یک راهنمایی منبع بسیار کم هزینه تر، راهنمایی dns-prefetch
است.
dns-prefetch
با توجه به نام خود، اتصالی به سرور متقاطع ایجاد نمی کند، بلکه فقط جستجوی DNS را زودتر از موعد برای آن انجام می دهد. جستجوی DNS زمانی اتفاق میافتد که یک نام دامنه به آدرس IP اصلی خود حل شود. در حالی که لایههای کش DNS در سطح دستگاه و شبکه کمک میکنند تا این فرآیند به طور کلی سریع باشد، اما هنوز مقداری زمان میبرد.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
جستجوهای DNS نسبتاً ارزان هستند و به دلیل هزینه نسبتاً کمی که دارند، ممکن است در برخی موارد ابزار مناسب تری نسبت به preconnect
باشند. به طور خاص، ممکن است در مواردی از پیوندهایی که به وبسایتهای دیگری که فکر میکنید کاربر احتمالاً دنبال میکند، هدایت میشوند، یک اشاره منبع مطلوب باشد. dnstradamus یکی از این ابزارهاست که این کار را به طور خودکار با استفاده از جاوا اسکریپت انجام می دهد و از Intersection Observer API برای تزریق نکات dns-prefetch
به HTML صفحه فعلی استفاده می کند، زمانی که پیوندهای وب سایت های دیگر در نمای کاربر اسکرول می شوند.
preload
دستورالعمل preload
برای شروع یک درخواست اولیه برای منبع مورد نیاز برای رندر صفحه استفاده می شود:
<link rel="preload" href="/lcp-image.jpg" as="image">
دستورالعمل های preload
باید به منابع حیاتی دیر کشف شده محدود شود. رایجترین موارد استفاده، فایلهای فونت، فایلهای CSS واکشی شده از طریق اعلانهای @import
، یا منابع background-image
CSS هستند که احتمالاً بزرگترین نامزدهای رنگ محتوایی (LCP) هستند. در چنین مواردی، این فایل ها توسط اسکنر پیش بارگذاری کشف نمی شوند زیرا منبع در منابع خارجی ارجاع می شود.
اگر منبع CORS را preconnect
بارگذاری میکنید، دستورالعمل preload
به ویژگی crossorigin
نیاز دارد - مانند فونتها. اگر ویژگی crossorigin
را اضافه نکنید - یا آن را برای درخواستهای غیر CORS اضافه کنید - آنگاه منبع دو بار توسط مرورگر دانلود میشود و پهنای باندی را که میتوانست برای منابع دیگر صرف شود، تلف میکند.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
در قطعه HTML قبلی، به مرورگر دستور داده شده است که /font.woff2
با استفاده از یک درخواست CORS از قبل بارگذاری کند—حتی اگر /font.woff2
در همان دامنه باشد.
prefetch
دستورالعمل prefetch
برای شروع یک درخواست با اولویت پایین برای منبعی که احتمالاً برای پیمایشهای آینده استفاده میشود، استفاده میشود:
<link rel="prefetch" href="/next-page.css" as="style">
این دستورالعمل تا حد زیادی از همان فرمت دستورالعمل preload
پیروی میکند، فقط ویژگی rel
عنصر <link>
از مقدار "prefetch"
استفاده میکند. با این حال، برخلاف دستورالعمل preload
، prefetch
تا حد زیادی حدس و گمان است زیرا شما در حال شروع واکشی برای یک منبع برای ناوبری آینده هستید که ممکن است اتفاق بیفتد یا نشود.
مواقعی وجود دارد که prefetch
میتواند مفید باشد - برای مثال، اگر یک جریان کاربری در وبسایت خود شناسایی کردهاید که اکثر کاربران تا تکمیل آن را دنبال میکنند، یک prefetch
برای یک منبع رندر حیاتی برای آن صفحات آینده میتواند به کاهش زمان بارگذاری برای آنها کمک کند. .
واکشی API اولویت
می توانید از Fetch Priority API
از طریق ویژگی fetchpriority
برای افزایش اولویت یک منبع استفاده کنید. می توانید از ویژگی با عناصر <link>
، <img>
و <script>
استفاده کنید.
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
بهطور پیشفرض، تصاویر با اولویت پایینتری واکشی میشوند. پس از چیدمان، اگر مشخص شد که تصویر در نمای اولیه قرار دارد، اولویت به اولویت بالا افزایش می یابد. در قطعه HTML قبلی، fetchpriority
بلافاصله به مرورگر میگوید که تصویر LCP بزرگتر را با اولویت بالا دانلود کند، در حالی که تصاویر کوچکتر با اولویت کمتر دانلود میشوند.
مرورگرهای مدرن منابع را در دو مرحله بارگیری می کنند. مرحله اول برای منابع حیاتی رزرو شده و پس از دانلود و اجرا شدن تمامی اسکریپت های مسدود کننده به پایان می رسد. در طول این مرحله، دانلود منابع با اولویت پایین ممکن است به تاخیر بیفتد. با استفاده از fetchpriority="high"
می توانید اولویت یک منبع را افزایش دهید و مرورگر را قادر می سازد تا آن را در مرحله اول دانلود کند.
دموهای راهنمایی منابع
دانش خود را تست کنید
راهنمایی منبع preconnect
چه کاری انجام می دهد؟
Fetch Priority API به شما اجازه انجام چه کاری را می دهد؟
<link>
، <img>
و <script>
مشخص کنید. چه زمانی باید از راهنمایی prefetch
استفاده کنید؟
بعدی: عملکرد تصویر
در حال حاضر، احتمالاً در مورد دانش خود در مورد ملاحظات عملکرد کلی در مورد HTML صفحه، عنصر <head>
و نکات منابع کاملاً مطمئن هستید. با این حال، بهینهسازیهای اضافی وجود دارد که مختص انواع منابع مختلف است که صفحات معمولاً بارگذاری میشوند. در مرحله بعد، عملکرد تصویر در ماژول بعدی پوشش داده شده است، که می تواند به شما کمک کند تا بدون توجه به دستگاه کاربر، تصاویر وب سایت خود را با حداکثر سرعت ممکن بارگذاری کنید.