دو روش برای واکشی اولیه: <پیوند> برچسب ها و هدرهای HTTP

دمیان رنزولی
Demián Renzulli
X GitHub

در این لبه کد، واکشی اولیه را به دو صورت پیاده سازی خواهید کرد: با <link rel="prefetch"> و با هدر Link HTTP.

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

عملکرد را اندازه گیری کنید

ابتدا عملکرد پایه را تعیین کنید:

  1. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.

  2. روی تب Network کلیک کنید.

  3. در لیست کشویی Throttling ، Fast 3G را انتخاب کنید تا نوع اتصال کند را شبیه سازی کنید.

  4. برای بارگیری صفحه محصول، روی خرید در حال حاضر در برنامه نمونه کلیک کنید.

بارگیری صفحه product-details.html حدود 600 میلی‌ثانیه طول می‌کشد:

پانل شبکه که زمان بارگذاری محصول-details.html را نشان می دهد

صفحه محصول را با <link rel="prefetch"> از قبل واکشی کنید

برای بهبود پیمایش، یک تگ prefetch در صفحه فرود وارد کنید تا صفحه product-details.html از قبل واکشی شود:

  • عنصر <link> زیر را به سر فایل views/index.html اضافه کنید: 
<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

      <link rel="prefetch" href="/product-details.html" as="document">
      ...
</head>

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

برای تأیید اینکه واکشی اولیه کار می کند:

  1. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.

  2. روی تب Network کلیک کنید.

  3. در لیست کشویی Throttling ، Fast 3G را انتخاب کنید تا نوع اتصال کند را شبیه سازی کنید.

  4. چک باکس Disable cache را پاک کنید.

  5. برنامه را دوباره بارگیری کنید.

اکنون وقتی صفحه فرود بارگیری می شود، صفحه product-details.html نیز بارگیری می شود، اما با کمترین اولویت:

پانل شبکه که جزئیات محصول را نشان می دهد.html از پیش واکشی شده است.

صفحه به مدت پنج دقیقه در حافظه پنهان HTTP نگهداری می شود و پس از آن قوانین عادی Cache-Control برای سند اعمال می شود. در این مورد، product-details.html یک هدر cache-control با مقدار public, max-age=0 دارد، به این معنی که صفحه در مجموع پنج دقیقه نگه داشته می شود.

ارزیابی مجدد عملکرد

  1. برنامه را دوباره بارگیری کنید.
  2. برای بارگیری صفحه محصول، روی خرید در حال حاضر در برنامه نمونه کلیک کنید.

به پنل شبکه نگاهی بیندازید. در مقایسه با ردیابی اولیه شبکه دو تفاوت وجود دارد:

  • ستون Size "cache prefetch" را نشان می دهد، به این معنی که این منبع به جای شبکه، از حافظه پنهان مرورگر بازیابی شده است.
  • ستون Time نشان می دهد که زمان بارگذاری سند اکنون حدود 10 میلی ثانیه است.

این تقریباً 98٪ کاهش نسبت به نسخه قبلی است که حدود 600 میلی ثانیه طول کشید.

پانل شبکه که محصول-details.html را نشان می دهد از حافظه پنهان پیش واکشی بازیابی شده است.

اعتبار اضافی: prefetch به عنوان یک بهبود پیشرونده استفاده کنید

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

برای اجرای پیش واکشی تطبیقی، ابتدا تگ <link rel="prefetch"> را از views/index.html حذف کنید:

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
       <link rel="prefetch" href="/product-details.html" as="document">
       ...
    </head>

سپس کد زیر را به public/script.js اضافه کنید تا تابعی را اعلام کنید که به صورت پویا تگ prefetch را زمانی که کاربر در یک اتصال سریع است، تزریق می کند:

function injectLinkPrefetchIn4g(url) {
    if (window.navigator.connection.effectiveType === '4g') {
        //generate link prefetch tag
        const linkTag = document.createElement('link');
        linkTag.rel = 'prefetch';
        linkTag.href = url;
        linkTag.as = 'document';

        //inject tag in the head of the document
        document.head.appendChild(linkTag);
    }
}

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

  • ویژگی effectType API اطلاعات شبکه را بررسی می‌کند تا مشخص کند کاربر از اتصال 4G (یا سریع‌تر) استفاده می‌کند.
  • اگر این شرط برآورده شود، یک تگ <link> با prefetch به عنوان نوع اشاره ایجاد می کند، URL را که در ویژگی href از پیش واکشی می شود ارسال می کند و نشان می دهد که منبع یک document HTML در ویژگی as است.
  • در نهایت اسکریپت را به صورت پویا در head صفحه تزریق می کند.

سپس script.js به views/index.html ، درست قبل از بسته شدن تگ </body> اضافه کنید:

<body>
      ...
      <script src="/script.js"></script>
</body>

درخواست script.js در انتهای صفحه تضمین می کند که پس از تجزیه و بارگذاری صفحه بارگذاری و اجرا می شود.

برای اطمینان از اینکه واکشی اولیه با منابع حیاتی صفحه فعلی تداخل ندارد، قطعه کد زیر را برای فراخوانی injectLinkPrefetchIn4g() در رویداد window.load اضافه کنید:

<body>
      ...
      <script src="/script.js"></script>
      <script>
           window.addEventListener('load', () => {
                injectLinkPrefetchIn4g('/product-details.html');
           });
      </script>
</body>

صفحه فرود اکنون product-details.html را فقط در اتصالات سریع واکشی می کند. برای تأیید اینکه:

  1. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
  2. روی تب Network کلیک کنید.
  3. در لیست کشویی Throttling ، Online را انتخاب کنید.
  4. برنامه را دوباره بارگیری کنید.

باید product-details.html در پنل Network ببینید:

پانل شبکه که جزئیات محصول را نشان می دهد.html از پیش واکشی شده است.

برای تأیید اینکه صفحه محصول در اتصالات کند واکشی نشده است:

  1. در لیست کشویی Throttling، Slow 3G را انتخاب کنید.
  2. برنامه را دوباره بارگیری کنید.

پانل شبکه باید فقط شامل منابع صفحه فرود بدون product-details.html :

پانل شبکه که جزئیات محصول را نشان می دهد.html از قبل واکشی نشده است.

برگه سبک صفحه محصول را با سرصفحه Link HTTP واکشی کنید

هدر Link HTTP می تواند برای واکشی اولیه همان نوع منابعی که تگ link است استفاده شود. تصمیم گیری در مورد زمان استفاده از یکی یا دیگری بیشتر به ترجیح شما بستگی دارد، زیرا تفاوت در عملکرد ناچیز است. در این مورد، شما از آن برای واکشی اولیه CSS اصلی صفحه محصول استفاده خواهید کرد تا رندر آن را بهبود ببخشید.

یک هدر Link HTTP برای style-product.css در پاسخ سرور برای صفحه فرود اضافه کنید:

  1. فایل server.js را باز کنید و به دنبال handler get() برای آدرس ریشه بگردید: / .
  2. خط زیر را در ابتدای کنترل کننده اضافه کنید: 
app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});
  1. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
  2. روی تب Network کلیک کنید.
  3. برنامه را دوباره بارگیری کنید.

پس از بارگیری صفحه فرود، style-product.css اکنون در کمترین اولویت از قبل واکشی می شود:

پانل شبکه که نشان می دهد style-product.css از پیش واکشی شده است.

برای رفتن به صفحه محصول، اکنون خرید را کلیک کنید. به پنل شبکه نگاهی بیندازید:

پانل شبکه که نشان می دهد style-product.css از حافظه پنهان پیش واکشی بازیابی شده است.

فایل style-product.css از "کش پیش واکشی" بازیابی شده است و بارگیری آن تنها 12 میلی ثانیه طول کشید.