با نکات منابع به مرورگر کمک کنید

در آخرین ماژول در مورد بهینه سازی بارگذاری منابع ، یاد گرفتید که چگونه منابع مختلف صفحه مانند 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 برای آن دسته از منابعی که برای صفحه فعلی حیاتی هستند، استفاده کنید.

تصویری از زمان‌بندی اتصال برای یک منبع در پانل شبکه Chrome DevTools. راه اندازی اتصال شامل زمان توقف، مذاکره پروکسی، جستجوی DNS، تنظیم اتصال و مذاکره TLS است.
تجسم زمان‌بندی اتصال همانطور که در پانل شبکه Chrome DevTools مشاهده می‌شود. زمان‌بندی‌های درون کادر قرمز مربوط به راه‌اندازی یک اتصال با یک سرور متقاطع است که می‌تواند با برقراری ارتباط زودتر از زمان کشف منبع متقاطع، preconnect را کاهش دهد.

یک مورد معمول استفاده از preconnect ، فونت های گوگل است . فونت‌های Google توصیه می‌کنند که از قبل به دامنه 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 برای نشان دادن اینکه آیا یک منبع باید با استفاده از اشتراک‌گذاری منابع متقاطع (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 برای یک منبع رندر حیاتی برای آن صفحات آینده می‌تواند به کاهش زمان بارگذاری برای آنها کمک کند. .

واکشی Priority 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 چه کاری انجام می دهد؟

قبل از زمانی که مرورگر در غیر این صورت آن را کشف کند، یک اتصال به یک سرور متقاطع، از جمله جستجوی DNS، و همچنین اتصال و مذاکره TLS را باز می کند.
درست!
فقط جستجوی DNS را برای سرور متقاطع انجام می دهد.
دوباره امتحان کنید.

Fetch Priority API به شما اجازه انجام چه کاری را می دهد؟

اولویت دانلود HTML صفحه فعلی را مشخص کنید.
دوباره امتحان کنید.
اولویت نسبی را برای عناصر <link> ، <img> و <script> مشخص کنید.
درست!

چه زمانی باید از prefetch استفاده کنید؟

برای همه منابع یا صفحاتی که کاربر ممکن است نیاز داشته باشد، چه در آینده واقعاً به آنها نیاز داشته باشد یا نه.
دوباره امتحان کنید.
زمانی که اطمینان بالایی دارید که منابع یا صفحاتی که قصد دارید از قبل واکشی کنید مورد نیاز کاربر هستند.
درست!
اگر کاربر ترجیح صریح برای کاهش مصرف داده را اعلام نکرده باشد.
درست!

بعدی: عملکرد تصویر

در حال حاضر، احتمالاً در مورد دانش خود در مورد ملاحظات عملکرد کلی در مورد HTML صفحه، عنصر <head> و نکات منابع کاملاً مطمئن هستید. با این حال، بهینه‌سازی‌های اضافی وجود دارد که مختص انواع منابع مختلف است که صفحات معمولاً بارگذاری می‌شوند. در مرحله بعد، عملکرد تصویر در ماژول بعدی پوشش داده شده است، که می تواند به شما کمک کند تا بدون توجه به دستگاه کاربر، تصاویر وب سایت خود را با حداکثر سرعت ممکن بارگذاری کنید.