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

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

Demián Renzulli

Jeremy Wagner

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

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

بهبود ناوبری با rel=prefetch

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

<link rel="prefetch" href="/articles/" as="document">

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

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

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

واکشی اولیه صفحات بعدی

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

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

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

واکشی اولیه دارایی‌های استاتیک

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

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

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

• واکشی اولیه تصاویر می تواند زمان 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="/articles/" as="document">
  ...
</head>

ویژگی as به مرورگر کمک می کند تا سرصفحه های درست را تنظیم کند و تعیین کند که آیا منبع از قبل در حافظه پنهان است یا خیر. مقادیر نمونه برای این ویژگی عبارتند از: document ، script ، style ، font ، image و موارد دیگر .

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

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

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

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

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" as="script" 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 یا حافظه پنهان (بسته به اینکه منبع قابل کش است یا نه) برای مدت زمانی ذخیره می‌شوند که بسته به مرورگرها متفاوت است. به عنوان مثال، منابع در کروم به مدت پنج دقیقه در اطراف نگه داشته می شوند، پس از آن قوانین عادی Cache-Control برای منبع اعمال می شود.

نتیجه

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