همه چیز در مورد PreBrowsing در وب

DNS-Prefetch
DNS-Prefetch

تکنولوژی PreBrowsing

یکی از تکنیک های فنی در مبحث SEO تکنیک PreBrowsing هست که میشه اون رو زیر مجموعه‌ی روش‌های بهبود Resource Hints دونست؛ این تکنیک شامل چندین نوع و روش هست که در این مطلب قصد دارم به بسط ۶ نوع زیر از روش‌های استفاده‌ی اون بپردازم:

  • DNS-Prefetch
  • PreConnect
  • PreFetch
  • SubResource
  • PreLoad
  • PreRender

امیدوارم با من همراه بشین و در وب سایت یا پروژه‌های توسعه‌ی وب‌تون ازش بهره ببرین ?

منطق بوجود آمدن PreBrowsing با وجود تکنولوژی Cache

برخی معتقدند با وجود تکنولوژی Caching دیگر نیازی به تکنیک‌های بیشتر برای Reduce Resource Hint نیست زیرا که به کمک این تکنولوژی تمامی منابع مورد نیاز از روی دیسک کاربر (کش مرورگر) یا نزدیک ترین Cache Server سرور به سیستم کاربر مانند انواع UTM‌ها و CDN‌ها دانلود و نمایش داده می‌شود.

اما باید در نظر داشت که Caching لازم است اما به دلایل زیر کافی نیست:

  • اولین لود: روش Caching برای اولین لود اصلا کاربرد ندارد و تنها برای لودهای بعدی موثره.
  • پاک شدن کش: ۱۹٪ کش مرورگرها به دلایل مخلتفی خواسته یا نا خواسته توسط مرورگر پاک می‌شود.
  • کش بی مصرف: منابع کش شده که بین چند سایت لود شده مشترک هستند با پاک شدن یکی، روی باقی سایت ها تاثیر می‌گذارد.
  • انقضا: ۶۹٪ منابع سایت ها غیر قابل کش شدن هستند یا اینکه زمان انقضا کمتر از یک روز دارند.
  • تجدید حیات: برخی از منابع کش شده به دلیل اینکه با نسخه‌ی بروز شده بر روی سرور سایت تفاوت دارند موجب اختلال در عملکرد سایت می‌شوند که کاربر حرفه‌ای را مجبور به پاک کردن کش می‌کند (بنده خدا کاربر عادی).

روش‌های DNS-Prefetch و PreConnect

آشنایی بسیار کوتاه با DNS

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

DNS Resolve
DNS Resolve

سرویس نام دامنه یا DNS به یک سرویس تحت شبکه گفته می‌شود که عمل تبدیل نام دامنه به آدرس IP و بلعکس رو انجام میده. این سرویس بسیار مهمه و می‌شه گفت یکی از ارکان اصلی وب و اینترنت هست.

تمامی درخواست های تبادل اطلاعات در اینترنت از طریق IP یا همون آدرس منابع شبکه (کلاینت‌ها، سرورها، روترها و ...) صورت می گیره؛ نسخه ی چهارم IP یا IPv4 از 4 عدد بین 0 تا 255 تشکیل شده که آدرس تحت شبکه‌ی هر منبع رو تعیین می‌کنه. مثال: ‍‍216.3.128.12. اما همونطور که واضحه، به خاطر سپردن همچنین آدرس هایی برای هر وب سایتی که ما میخوایم باز بکنیم کاری سخت و تقریبا نشدنیه.

اینجاست که سرویس DNS به کمک ما میاد و تناظر بین نام دامنه و آدرس IP رو برقرار میکنه. حالا هر کلاینت با کافیه با ارسال نام دامنه به سرویس دهنده‌ی این سرویس، آدرس IP اون رو به دست بیاره و بعد درخواستش رو که در مثال ما میتونه یک HTTP Request باشه به سایت مورد نظرش ارسال کنه.

حالا مشکل کجاست؟!

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

خب مشخصه که ارسال و دریافت هر درخواست DNS‌، هر چند ناچیز اما زمان بره که در تعداد بالا و بسته به ترافیک شبکه و سرعت DNS Server‌ی که کاربر روی کارت شبکه ش تنظیم کرده میتونه کاملا محسوس باشه.

بله، مشکل همینجاست؛ این مشکل میتونه با کلیک کردن کاربر بر روی هر لینک وب سایت که به خارج از دامنه‌ی ما اشاره می‌کنه هم پیش بیاد.

و اما راه حل پیشنهادی

یکی از راهکارهای پیشنهادی استفاده از DNS Prefetching هست؛ به این شکل که حین برنامه نویسی وب‌سایت‌مون کار می‌کنیم که به یکباره تمامی این دامنه‌ها به IP متناظرشون تبدیل میشه، در سیستم کاربر کش می‌شه و دیگه چه به ازای لود هر منبع و چه به ازای کلیک روی هر لینک خارجی دیگه این درخواست تکرار نمی‌شه و در نتیجه سرعت سایت بالا میره و در نهایتتتتت، ما رو به هدف اصلیمون که بهبود دو پارامتر مهم تجربه‌ی کاربری و SEO‌ی سایت هست نزدیک می‌کنه. ?

حالا چطور استفاده کنیم؟

خیلی ساده‌س؛ کافیه در تگ Head سایت‌مون از لینک تگ زیر به ازای هر دامین استفاده بشه:

<link rel=&quotdns-prefetch&quot href=&quothttps://example.com/&quot>

بطور مثال:

<html>
    <head>
        <link rel=&quotdns-prefetch&quot href=&quothttps://fonts.gstatic.com/&quot>
        <link rel=&quotdns-prefetch&quot href=&quothttps://facebook.com&quot>
        <link rel=&quotdns-prefetch&quot href=&quothttps://w3schoools.com&quot>
        <link rel=&quotdns-prefetch&quot href=&quothttps://virgool.io&quot>
        <!-- and all other head elements -->
    </head>
    <body>
        <!-- your page content -->
    </body>
</html>

بهترین تجربه‌ها (Best Practices)

پیش از استفاده از این روش باید ۳ نکته رو در ذهن داشته باشین:

  1. این لینک ها رو فقط برای دامنه هایی غیر از دامنه‌ی سایت خودتون استفاده کنین چون IP دامنه‌ی خود شما از پیش توسط سیستم یافت و کش شده که کاربر تونسته به صفحه‌ی وب سایتتون برسه.
  2. این تکنیک میشه به روش دیگه ای (‍‍Cross-Origin) استفاده بشه و اون هم ارسال پارامتر preconnect در قالب HTTP Header هست (این هدر با اون هدر فرق می‌کنه ----> HTML head Tag و HTTP Header) به این شکل:

برای یک نام دامنه:

Link: <https://example.com>; rel=&quotpreconnect&quot

برای چندین نام دامنه:

Link: <https://one.example.com>; rel=&quotpreconnect&quot, <https://two.example.com>; rel=&quotpreconnect&quot, <https://three.example.com>; rel=&quotpreconnect&quot

۳. پشتیبانی از dns-prefetch توسط مرورگرها بهتر از preconnect هست چون preconnect علاوه بر ارسال DNS Request، یک TCP Handshake و TLS negotiation هم ایجاد می کنه پس سرعت dns-prefetch هم بالاتره و یادتون باشه دور روش dns-prefetch و preconnect رو با هم به کارنبرین مخصوصا اگه سایتتون https هست چون بسیار باعث کند شدن اون میشه مگه اینکه بخواین راهی برای مرورگرهای قدیمی باز بذارین که بتونن از preconnect استفاده کنن که در اون شرایط هم باید حتما از خصیصه‌ی crossorigin در لینک preconnect‌تون استفاده بشه:

<link rel=&quotpreconnect&quot href=&quothttps://fonts.gstatic.com/&quot crossorigin>
<link rel=&quotdns-prefetch&quot href=&quothttps://fonts.gstatic.com/&quot>

روش Prefetch یه کاربرد با حال و پر‌ استفاده‌‌‌ی دیگه

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

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

<link rel=&quotprefetch&quot href=&quotimage.png&quot>

روش SubResource (اولویت بندی در لود منابع)

روش Prefetch زمانی استفاده می‌شه که شما احتمال میدین منبع مورد نظر توسط کاربر درخواست می‌شه اما زمان‌هایی هم هست که شما میدونین بطور مثال یه منبع یا یه استایلی حتما نیاز میشه اما نه در حین لود صفحه یعنی چیزی بین لود اولیه‌ی صفحه و شروع Prefetch برای درخواست‌های احتمالی کاربر؛ در این مواقع بهتره از روش SubResource استفاده بشه که اولویت بالاتری نسبت به Prefetch داره:

<link rel=&quotsubresource&quot href=&quotstyles.css&quot>

روش Preload

همونطور که گفتم در روش Prefetch، مرورگر در صورت تشخص Idle بودن به سراغ دانلود منابع مربوطه میره که اگه نره هم مشکل حادی پیش نمیاد و فوقش کاربر با کلیک بر روی یک تصویر باید کمی صبر کنه که تازه تصویر لود و نمایش داده بشه اما گاهی اوقات پیش‌لود نشدن به موقع برخی منابع موجب اختلال در سایت ما میشه و ما باید به مرورگر بگیم که فراتر از تشخیص خودت این منبع رو لود کن؛ اینجاست که از روش Preload در تگ Link استفاده میشه:

<link rel=&quotpreload&quot href=&quotimage.png&quot>

روش Prerender

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

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

امیدوارم مطالب بالا نظرتون رو جلب کرده باشه و کاربردی باشه براتون ?
خوشحال میشم نظرتون رو بدونم.

منابع:

https://css-tricks.com/prefetching-preloading-prebrowsing/

http://www.stevesouders.com/blog/2013/11/07/prebrowsing/

https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch

https://www.w3.org/TR/resource-hints/

https://www.chromium.org/developers/design-documents/dns-prefetching