برای سرعت بخشیدن به ناوبری های آینده، منابع را از قبل واکشی کنید

درباره راهنمایی منبع rel=prefetch و نحوه استفاده از آن بیاموزید.

Demián Renzulli

Jeremy Wagner

تاریخ انتشار: 12 سپتامبر 2019، آخرین به روز رسانی: 8 فوریه 2025

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

این راهنما نحوه دستیابی به آن را با <link rel=prefetch> توضیح می دهد که به شما امکان می دهد واکشی اولیه را به روشی کارآمد پیاده سازی کنید.

بهبود عملکرد سایت با rel=prefetch

افزودن <link rel=prefetch> به یک صفحه وب به مرورگر می‌گوید که برخی از منابع (مانند اسکریپت‌ها یا فایل‌های CSS) را که کاربر ممکن است در آینده به آن‌ها نیاز داشته باشد، دانلود کند:

<link rel="prefetch" href="/css/styles.css">

اشاره prefetch بایت‌های اضافی را برای منابعی مصرف می‌کند که فوراً مورد نیاز نیستند، بنابراین این تکنیک باید با دقت اعمال شود. فقط زمانی منابع را از قبل واکشی کنید که مطمئن باشید کاربران به آنها نیاز دارند. زمانی که کاربران در اتصالات کند هستند، واکشی اولیه را در نظر نگیرید. شما می توانید آن را با API اطلاعات شبکه تشخیص دهید.

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

Prefetch موارد استفاده زیادی برای افزایش سرعت صفحات وب با دانلود منابع از قبل دارد.

صفحات بعدی را از قبل واکشی کنید

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

احتیاط: Speculation Rules API مزایای متعددی نسبت به واکشی اولیه برای واکشی از پیش پیمایش‌ها برای مرورگرهایی که از این API پشتیبانی می‌کنند، فراهم می‌کند، از جمله مدیریت ناوبری‌های غیرقابل ذخیره و مدیریت واکشی اولیه متقاطع.

به عنوان مثال، در یک صفحه فهرست محصول، می‌توانید صفحه را برای محبوب‌ترین محصول در لیست از پیش واکشی کنید. در برخی موارد، پیش‌بینی پیمایش بعدی آسان‌تر است—در صفحه سبد خرید، احتمال بازدید کاربر از صفحه پرداخت معمولاً زیاد است که آن را کاندید خوبی برای واکشی اولیه می‌کند.

توجه: eBay واکشی اولیه را برای پنج نتیجه اول در یک صفحه جستجو برای سرعت بخشیدن به بارگذاری صفحات آینده اجرا کرد و تأثیر مثبتی بر نرخ تبدیل دید.

در حالی که واکشی اولیه منابع از پهنای باند اضافی استفاده می کند، می تواند بیشتر معیارهای عملکرد را بهبود بخشد. زمان تا اولین بایت (TTFB) اغلب بسیار کمتر خواهد بود، زیرا درخواست سند منجر به ضربه حافظه پنهان می شود. از آنجایی که TTFB کمتر خواهد بود، معیارهای مبتنی بر زمان بعدی نیز اغلب پایین تر خواهند بود، از جمله بزرگترین رنگ محتوایی (LCP) و اولین رنگ محتوایی (FCP) .

دارایی های ثابت را از قبل واکشی کنید

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

برای مثال، Netflix از زمانی که کاربران در صفحاتی که از سیستم خارج شده‌اند استفاده می‌کند تا React را از قبل واکشی کند، که پس از ورود کاربران استفاده می‌شود. به لطف این، آنها زمان را به Interactive 30٪ برای پیمایش‌های آینده کاهش دادند .

در زمان نگارش این مقاله، امکان اشتراک گذاری منابع از پیش واکشی شده در بین صفحاتی که از مبداهای مختلف ارائه می شوند، وجود دارد. هنگامی که حافظه پنهان HTTP با دو کلید ارسال می شود، این فقط برای ناوبری های سطح بالا و منابع فرعی با منبع مشابه کار می کند، اما امکان استفاده مجدد از منابع فرعی از پیش واکشی شده در بین مبداهای مختلف وجود نخواهد داشت. این بدان معنی است که اگر a.com منبع b.com/library.js را از قبل واکشی کند، در حافظه پنهان c.com در دسترس نخواهد بود. برخی از مرورگرها، مانند مرورگرهای مبتنی بر WebKit، در حال حاضر حافظه پنهان و ذخیره سازی HTML5 را برای همه دامنه های شخص ثالث پارتیشن بندی می کنند .

تأثیر واکشی اولیه دارایی‌های ایستا بر معیارهای عملکرد بستگی به منبعی دارد که از قبل واکشی می‌شود:

• واکشی اولیه تصاویر می تواند زمان LCP را برای عناصر تصویر LCP به میزان قابل توجهی کاهش دهد.
• واکشی اولیه شیوه نامه ها می تواند FCP و LCP را بهبود بخشد، زیرا زمان شبکه برای بارگیری شیوه نامه حذف می شود. از آنجایی که شیوه نامه ها مسدود کننده رندر هستند، می توانند LCP را هنگام واکشی اولیه کاهش دهند. در مواردی که عنصر LCP صفحه بعدی یک تصویر پس‌زمینه CSS است که با استفاده از ویژگی background-image درخواست شده است، تصویر نیز به‌عنوان منبع وابسته از شیوه نامه از پیش واکشی شده از پیش واکشی می‌شود.
• واکشی اولیه جاوا اسکریپت به پردازش اسکریپت از پیش واکشی شده امکان می دهد خیلی زودتر از زمانی که ابتدا در طول مسیریابی توسط شبکه واکشی می شد، انجام شود. این می تواند بر تعامل صفحه با رنگ بعدی (INP) تأثیر بگذارد. در مواردی که نشانه‌گذاری روی کلاینت با استفاده از جاوا اسکریپت ارائه می‌شود، LCP را می‌توان از طریق کاهش تأخیر بار منبع بهبود داد و رندر سمت مشتری نشانه‌گذاری حاوی عنصر LCP صفحه می‌تواند زودتر رخ دهد.
• واکشی از پیش فونت‌های وب که قبلاً توسط صفحه فعلی استفاده نشده‌اند، می‌تواند تغییرات طرح‌بندی را حذف کند. در مواردی که font-display: swap; استفاده می‌شود ، دوره تعویض فونت حذف می‌شود و در نتیجه رندر سریع‌تر متن و حذف تغییرات طرح‌بندی انجام می‌شود. اگر یک صفحه آینده از فونت از پیش واکشی شده استفاده کند و عنصر LCP صفحه یک بلوک متن با استفاده از فونت وب باشد، LCP برای آن عنصر نیز سریعتر خواهد بود.

تکه های جاوا اسکریپت درخواستی را از قبل واکشی کنید

تقسیم کد بسته‌های جاوا اسکریپت به شما امکان می‌دهد ابتدا فقط بخش‌هایی از یک برنامه را بارگیری کنید و بقیه را با تنبلی بارگذاری کنید. اگر از این تکنیک استفاده می‌کنید، می‌توانید واکشی اولیه را روی مسیرها یا مؤلفه‌هایی اعمال کنید که فوراً ضروری نیستند، اما احتمالاً به زودی درخواست خواهند شد.

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

نحوه پیاده سازی rel=prefetch

ساده ترین راه برای اجرای prefetch اضافه کردن یک تگ <link> به <head> سند است:

<head>
  ...
  <link rel="prefetch" href="//css/styles.css">
  ...
</head>

همچنین می توانید واکشی اولیه را با هدر Link HTTP آغاز کنید:

Link: </css/style.css>; rel=prefetch

یکی از مزایای مشخص کردن یک اشاره از پیش واکشی در سربرگ HTTP این است که مرورگر برای یافتن راهنمایی منبع نیازی به تجزیه سند ندارد، که می تواند در برخی موارد پیشرفت های کوچکی را ارائه دهد.

توجه: prefetch در همه مرورگرهای مدرن به جز سافاری پشتیبانی می‌شود. می‌توانید یک تکنیک بازگشتی برای Safari با درخواست‌های XHR یا Fetch API پیاده‌سازی کنید.

ماژول‌های جاوا اسکریپت را با نظرات جادویی بسته وب واکشی کنید

webpack به شما امکان می‌دهد اسکریپت‌ها را برای مسیرها یا عملکردهایی که مطمئناً کاربران مطمئنی به زودی از آنها بازدید می‌کنند یا استفاده می‌کنند، از قبل واکشی کنید.

قطعه کد زیر lazy-یک تابع مرتب‌سازی را از کتابخانه lodash بارگذاری می‌کند تا گروهی از اعداد را که توسط یک فرم ارسال می‌شوند مرتب کند:

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

به جای اینکه منتظر بمانید تا رویداد «ارسال» برای بارگیری این تابع رخ دهد، می‌توانید این منبع را از قبل واکشی کنید تا زمانی که کاربر فرم را ارسال می‌کند، شانس دسترسی به آن را در حافظه پنهان افزایش دهید. webpack اجازه می دهد که با استفاده از نظرات جادویی داخل import() :

form.addEventListener("submit", e => {
   e.preventDefault()
   import(/* webpackPrefetch: true */ 'lodash.sortby')
         .then(module => module.default)
         .then(sortInput())
         .catch(err => { alert(err) });
});

این به webpack می‌گوید که تگ <link rel="prefetch"> به سند HTML تزریق کند:

<link rel="prefetch" href="1.bundle.js">

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

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

واکشی هوشمند با Quicklink و Guess.js

همچنین می‌توانید واکشی هوشمندانه‌تر را با کتابخانه‌هایی که prefetch در زیر هود استفاده می‌کنند، پیاده‌سازی کنید:

• Quicklink از Intersection Observer API استفاده می‌کند تا تشخیص دهد که چه زمانی پیوندها به viewport می‌آیند و منابع مرتبط را در زمان بی‌کاری واکشی می‌کند. امتیاز: پیوند سریع کمتر از 1 کیلوبایت وزن دارد!
• Guess.js از گزارش‌های تحلیلی برای ساخت یک مدل پیش‌بینی استفاده می‌کند که برای واکشی هوشمندانه فقط آنچه کاربر احتمالاً به آن نیاز دارد استفاده می‌کند.

هر دو Quicklink و Guess.js از Network Information API استفاده می‌کنند تا اگر کاربر در یک شبکه کند است یا Save-Data روشن کرده است، از واکشی اولیه جلوگیری کنند.

از قبل زیر کاپوت واکشی کنید

نکات منابع دستورالعمل های اجباری نیستند و این به مرورگر بستگی دارد که تصمیم بگیرد که آیا و چه زمانی اجرا شوند.

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

واکشی اولیه در اولویت «پایین‌ترین» انجام می‌شود، بنابراین منابع از پیش واکشی شده برای پهنای باند با منابع مورد نیاز در صفحه فعلی رقابت نمی‌کنند.

اگر منبع قابل کش باشد، فایل های از پیش واکشی شده در کش HTTP ذخیره می شوند، در غیر این صورت دور انداخته می شوند و استفاده نمی شوند.

نتیجه گیری

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