در آخرین ماژول در مورد بهینهسازی بارگذاری منابع ، یاد گرفتید که چگونه منابع مختلف صفحه مانند CSS و جاوا اسکریپت میتوانند بر سرعت بارگذاری صفحه تأثیر بگذارند و چگونه میتوانید آنها و نحوهی تحویل آنها را برای افزایش سرعت رندر صفحه بهینه کنید. اکنون زمان مناسبی برای ورود به جنبهی پیشرفتهتری از بارگذاری منابع است و این شامل کمک به مرورگر برای بارگذاری سریعتر آنها با استفاده از resource hintها میشود.
نکات مربوط به منابع میتوانند با آگاه کردن مرورگر از نحوه بارگذاری و اولویتبندی منابع، به توسعهدهندگان در بهینهسازی بیشتر زمان بارگذاری صفحه کمک کنند. مجموعهای اولیه از نکات مربوط به منابع مانند preconnect و dns-prefetch اولین مواردی بودند که معرفی شدند. با این حال، با گذشت زمان، preload و Fetch Priority API برای ارائه قابلیتهای اضافی ارائه شدهاند.
Resource hints به مرورگر دستور میدهند تا اقدامات خاصی را قبل از زمان انجام دهد که میتواند عملکرد بارگذاری را بهبود بخشد. Resource hints میتوانند اقداماتی مانند انجام جستجوی اولیه DNS، اتصال به سرورها قبل از زمان و حتی دریافت منابع قبل از اینکه مرورگر معمولاً آنها را کشف کند، انجام دهند.
نکات مربوط به منابع ممکن است در HTML مشخص شوند - اغلب در اوایل عنصر <head> - یا به عنوان یک هدر HTTP تنظیم شوند . در محدوده این ماژول، preconnect ، dns-prefetch و preload و همچنین رفتارهای واکشی احتمالی که prefetch ارائه میدهد، پوشش داده میشوند.
preconnect
preconnect برای ایجاد اتصال به منبع دیگری که از آنجا منابع حیاتی را دریافت میکنید، استفاده میشود. به عنوان مثال، ممکن است تصاویر یا فایلهای خود را روی یک CDN یا منبع متقابل دیگری میزبانی کنید:
<link rel="preconnect" href="https://example.com">
با استفاده از preconnect ، شما پیشبینی میکنید که مرورگر قصد دارد در آیندهای بسیار نزدیک به یک سرور cross-origin خاص متصل شود و مرورگر باید در اسرع وقت، در حالت ایدهآل، قبل از اینکه منتظر تجزیهکننده HTML یا اسکنر preload برای انجام این کار باشد، آن اتصال را باز کند.
اگر تعداد زیادی منابع بینمنبعی در یک صفحه دارید، preconnect برای آن دسته از منابعی که برای صفحه فعلی بسیار حیاتی هستند استفاده کنید.
preconnect میتواند با برقراری اتصالات زودتر، به جای زمان کشف منبع cross-origin، آنها را کاهش دهد. یک مورد استفاده رایج برای preconnect فونتهای گوگل است . فونتهای گوگل توصیه میکنند که به دامنه https://fonts.googleapis.com که اعلانهای @font-face را ارائه میدهد و به دامنه https://fonts.gstatic.com که فایلهای فونت را ارائه میدهد، preconnect .
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
ویژگی crossorigin برای نشان دادن اینکه آیا یک منبع باید با استفاده از Cross-Origin Resource Sharing (CORS) واکشی شود یا خیر، استفاده میشود. هنگام استفاده از preconnect hint، اگر منبعی که از مبدا دانلود میشود از CORS استفاده میکند - مانند فایلهای فونت - باید ویژگی crossorigin را به preconnect hint اضافه کنید.
dns-prefetch
اگرچه باز کردن زودهنگام اتصالات به سرورهای cross-origin میتواند زمان بارگذاری اولیه صفحه را به میزان قابل توجهی بهبود بخشد، اما ممکن است ایجاد اتصالات به بسیاری از سرورهای cross-origin به طور همزمان منطقی یا ممکن نباشد. اگر نگران استفاده بیش از حد preconnect هستید، یک نکته بسیار کمهزینهتر در مورد منابع، نکته dns-prefetch است.
همانطور که از نامش پیداست، dns-prefetch اتصالی به یک سرور cross-origin برقرار نمیکند، بلکه فقط جستجوی 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 یکی از این ابزارها است که این کار را به طور خودکار با استفاده از جاوا اسکریپت انجام میدهد و از API Intersection Observer برای تزریق راهنمای dns-prefetch به HTML صفحه فعلی، زمانی که لینکها به وبسایتهای دیگر در نمای کاربر پیمایش میشوند، استفاده میکند.
preload
دستور preload برای شروع یک درخواست اولیه برای منبعی که برای رندر کردن صفحه مورد نیاز است، استفاده میشود:
<link rel="preload" href="/lcp-image.jpg" as="image" fetchpriority="high">
دستورالعملهای preload باید به منابع حیاتی که دیر کشف میشوند محدود شوند. رایجترین موارد استفاده، فایلهای فونت، فایلهای CSS که از طریق اعلانهای @import واکشی میشوند، یا منابع background-image CSS که احتمالاً کاندیدهای Largest Contentful Paint (LCP) هستند یا سایر منابع LCP که در HTML اولیه قابل کشف نیستند (برای مثال، اگر توسط جاوا اسکریپت بارگذاری شوند)، هستند. در چنین مواردی، این فایلها توسط اسکنر پیشبارگذاری کشف نمیشوند زیرا منبع در منابع خارجی ارجاع داده میشود.
مشابه preconnect ، دستورالعمل preload در صورتی که یک منبع CORS - مانند فونتها - را پیشبارگذاری میکنید، به ویژگی crossorigin نیاز دارد. اگر ویژگی crossorigin اضافه نکنید - یا آن را برای درخواستهای غیر CORS اضافه کنید - منبع توسط مرورگر دو بار دانلود میشود و پهنای باندی را که میتوانست بهتر صرف منابع دیگر شود، هدر میدهد.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
در قطعه کد HTML قبلی، به مرورگر دستور داده شده است که با استفاده از یک درخواست CORS، فایل /font.woff2 از قبل بارگذاری کند—حتی اگر /font.woff2 در همان دامنه باشد.
prefetch
دستور prefetch برای شروع یک درخواست با اولویت پایین برای منبعی که احتمالاً برای پیمایشهای آینده استفاده خواهد شد، استفاده میشود:
<link rel="prefetch" href="/next-page.css" as="style">
این دستورالعمل تا حد زیادی از همان قالب دستورالعمل preload پیروی میکند، فقط ویژگی rel عنصر <link> از مقدار "prefetch" استفاده میکند. با این حال، برخلاف دستورالعمل preload ، prefetch تا حد زیادی حدسی است، زیرا شما در حال شروع یک واکشی برای منبعی برای ناوبری آینده هستید که ممکن است اتفاق بیفتد یا نیفتد.
مواقعی وجود دارد که prefetch میتواند مفید باشد - برای مثال، اگر جریان کاربری را در وبسایت خود شناسایی کردهاید که اکثر کاربران آن را تا انتها دنبال میکنند، prefetch برای یک منبع حیاتی رندر برای آن صفحات آینده میتواند به کاهش زمان بارگذاری برای آنها کمک کند.
API اولویت واکشی
شما میتوانید از طریق ویژگی fetchpriority در Fetch Priority API اولویت یک منبع را افزایش دهید. میتوانید از این ویژگی به همراه عناصر <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 چه کاری انجام میدهد؟
API اولویت واکشی چه امکاناتی را در اختیار شما قرار میدهد؟
<link> ، <img> و <script> را مشخص کنید. چه زمانی باید از راهنمای prefetch استفاده کنید؟
بعدی: عملکرد تصویر
احتمالاً تا الان در مورد دانش خود در مورد ملاحظات کلی عملکرد در مورد HTML صفحه، عنصر <head> و نکات مربوط به منابع، احساس اطمینان زیادی میکنید. با این حال، بهینهسازیهای دیگری نیز وجود دارد که مختص انواع مختلف منابعی است که صفحات معمولاً بارگذاری میکنند. در مرحله بعد، عملکرد تصویر در ماژول بعدی پوشش داده میشود که میتواند به شما کمک کند تا تصاویر وبسایت خود را صرف نظر از دستگاه کاربر، با حداکثر سرعت ممکن بارگذاری کنید.