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

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

<link rel="prefetch" href="/fa/style.css" as="style" />
<link rel="preload" href="/fa/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />

بیایید به طور خلاصه توضیح دهیم که آنها چه کاری انجام می دهند و چه زمانی از آنها استفاده کنیم.

پرش به: پیش بارگذاری · واکشی اولیه · پیش اتصال · dns-prefetch · پیش اجرا

پیش بارگذاری

<link rel= "preload"> به مرورگر می‌گوید که در اسرع وقت یک منبع (مانند یک اسکریپت یا شیوه نامه) را بارگیری و ذخیره کند. این زمانی مفید است که چند ثانیه پس از بارگیری صفحه به یک منبع نیاز باشد - و شما می خواهید روند را تسریع کنید.

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

نحو

<link rel="preload" href="/fa/style.css" as="style" />

href به منبعی که می خواهید دانلود کنید اشاره می کند.

as می تواند هر چیزی باشد که می توان در مرورگر دانلود کرد:

• style برای شیوه نامه ها،
• script برای اسکریپت ها،
• font برای فونت ها
• fetch برای منابع بارگیری شده با استفاده از fetch() یا XMLHttpRequest,
• لیست کامل را ببینید در MDN.

مهم است که ویژگی را مشخص کنید as - این به مرورگر کمک می کند تا بارگیری ها را به درستی اولویت بندی و زمان بندی کند.

چه موقع باید استفاده کرد

زمانی که در آینده نزدیک به منبع مورد نیاز است از پیش بارگذاری استفاده کنید. مثلا:

• فونت های غیر استاندارد از یک فایل خارجی:

  <!-- index.html -->
  <link rel="stylesheet" href="index.css" />
  /* index.css */
  @font-face {
    src: url('comic-sans.woff2') format('woff2');
  }

  به طور پیش فرض comic-sans.woff2 فقط پس از دانلود و تجزیه شروع به بارگیری می کند index.css. برای جلوگیری از انتظار طولانی، می توانید فونت را زودتر با استفاده از آن دانلود کنید <link rel= "preload">:

  <link rel="preload" href="comic-sans.woff2" as="font" />

• اگر سبک های خود را با توجه به رویکرد جدا کنید CSS بحرانی به دو بخش بحرانی (برای رندر فوری) و غیر بحرانی:

  <style>
  /* Inlined critical styles */
  </style>
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

  با این رویکرد، سبک‌های غیر بحرانی تنها زمانی شروع به بارگیری می‌کنند که جاوا اسکریپت اجرا می‌شود، که می‌تواند چند ثانیه پس از رندر انجام شود. به جای انتظار از JS استفاده کنید <link rel= "preload">برای شروع زودتر دانلود:

  <style>
  /* Inlined critical styles */
  </style>
  
  <link rel="preload" href="/fa/app/non-critical.css" as="style" />
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

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

نباید با واکشی اولیه اشتباه شود. استفاده نکن <link rel= "preload">، اگر بلافاصله پس از بارگیری صفحه به منبع نیاز ندارید. اگر بعداً به آن نیاز دارید، مثلاً برای صفحه بعد، از آن استفاده کنید <link rel= "prefetch">.

اطلاعات بیشتر

این یک برچسب الزامی است توسط مرورگر اجرا شود (اگر از آن پشتیبانی می کند)، بر خلاف سایر برچسب ها مربوط به پیش بارگذاری مرورگر باید منبع مشخص شده را دانلود کند <link rel="preload">. در موارد دیگر ممکن است بارگذاری اولیه را نادیده بگیرد، برای مثال اگر با اتصال آهسته در حال اجرا باشد.

اولویت های. مرورگرها معمولا اولویت های مختلفی را به منابع مختلف (سبک ها، اسکریپت ها، فونت ها و غیره) اختصاص می دهند تا ابتدا مهم ترین منابع را بارگیری کنند. در این حالت، مرورگر اولویت را با ویژگی تعیین می کند as. برای مرورگر کروم می توانید نگاه کنید جدول اولویت کامل.

واکشی اولیه

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

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

نحو

<link rel="prefetch" href="/fa/style.css" as="style" />

href به منبعی که می خواهید دانلود کنید اشاره می کند.

as می تواند هر چیزی باشد که می توان در مرورگر دانلود کرد:

• style برای شیوه نامه ها،
• script برای اسکریپت ها،
• font برای فونت ها
• fetch برای منابع بارگیری شده با استفاده از fetch() یا XMLHttpRequest,
• لیست کامل را ببینید در MDN.

مهم است که ویژگی را مشخص کنید as - این به مرورگر کمک می کند بارگیری ها را به درستی اولویت بندی و زمان بندی کند.

چه موقع باید استفاده کرد

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

• شما یک فروشگاه آنلاین دارید و 40 درصد از کاربران صفحه اصلی را به سمت صفحه محصول ترک می کنند. استفاده کنید <link rel= "prefetch">، بارگیری فایل های CSS و JS برای ارائه صفحات محصول.
• شما یک برنامه تک صفحه ای دارید و صفحات مختلف بسته های متفاوتی را بارگذاری می کنند. هنگامی که کاربر از یک صفحه بازدید می کند، بسته های مربوط به تمام صفحاتی که به آنها پیوند می دهد می توانند از قبل بارگذاری شوند.

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

نه برای درخواست های فوری. استفاده نکن <link rel= "prefetch">، زمانی که منبع در چند ثانیه مورد نیاز است. در این صورت استفاده کنید <link rel= "preload">.

اطلاعات بیشتر

برچسب اختیاری. مرورگر نیازی به پیروی از این دستورالعمل ندارد، ممکن است آن را نادیده بگیرد، مثلاً در یک اتصال آهسته.

اولویت در کروم. در کروم <link rel= "prefetch"> معمولاً با حداقل اولویت اجرا می شود (نگاه کنید به جدول اولویت کامل) یعنی بعد از بارگذاری هر چیز دیگر.

پیش اتصال

<link rel= "preconnect"> از مرورگر می‌خواهد زمانی که می‌خواهید در آینده راه‌اندازی اتصال را افزایش دهید، از قبل به دامنه متصل شود.

اگر مرورگر منابعی را از یک دامنه شخص ثالث جدید بازیابی کند، باید یک اتصال برقرار کند. برای مثال، اگر فونت‌های Google، فونت‌های React را از CDN بارگیری می‌کند، یا از یک سرور API درخواست پاسخ JSON می‌کند.

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

نحو

<link rel= "preconnect" href="https://api.my-app.com" />

href نشان دهنده نام دامنه ای است که می خواهید آدرس IP را برای آن تعیین کنید. می توان با یک پیشوند مشخص کرد (https://domain.com) یا بدون آن (//domain.com).

چه موقع باید استفاده کرد

برای دامنه هایی که به زودی مورد نیاز خواهند بود استفاده کنید برای دانلود یک سبک، اسکریپت یا تصویر مهم از آنجا، اما هنوز URL منبع را نمی‌دانید. مثلا:

• برنامه شما در میزبانی می شود my-app.com و درخواست های AJAX را به api.my-app.com: شما پرس و جوهای خاص را از قبل نمی دانید زیرا آنها به صورت پویا از JS ساخته می شوند. در اینجا استفاده از یک تگ برای اتصال از قبل به دامنه کاملاً مناسب است.
• برنامه شما در میزبانی می شود my-app.com و از فونت های گوگل استفاده می کند. آنها در دو مرحله دانلود می شوند: ابتدا فایل CSS از دامنه دانلود می شود fonts.googleapis.com، سپس این فایل فونت هایی را با آن درخواست می کند fonts.gstatic.com. شما نمی توانید بدانید که از کدام فایل فونت خاص هستند fonts.gstatic.com تا زمانی که فایل CSS را بارگیری نکنید، نیاز خواهید داشت، بنابراین ما فقط می توانیم از قبل یک اتصال اولیه ایجاد کنیم.

از این تگ برای سرعت بخشیدن به اسکریپت یا استایل شخص ثالث استفاده کنید به دلیل اتصال از قبل ایجاد شده

بیش از حد استفاده نکنید. ایجاد و حفظ اتصال یک عملیات گران قیمت برای مشتری و سرور است. از این تگ برای حداکثر 4-6 دامنه استفاده کنید.

اطلاعات بیشتر

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

فرآیند اتصال شامل چه مواردی است؟. برای اتصال به هر سایت، مرورگر باید موارد زیر را انجام دهد:

• وضوح DNS. آدرس IP سرور را پیدا کنید (216.58.215.78) برای نام دامنه مشخص شده (google.com).
• دست دادن TCP. مبادله بسته ها (مشتری → سرور → مشتری) برای شروع اتصال TCP با سرور.
• دست دادن TLS (فقط سایت های HTTPS). دو دور تبادل بسته (مشتری → سرور → مشتری → سرور → مشتری) برای شروع یک جلسه امن TLS.

توجه: HTTP/3 مکانیسم دست دادن را بهبود می‌بخشد و سرعت می‌بخشد، اما هنوز راه زیادی باقی مانده است.

dns-prefetch

<link rel= "dns-prefetch"> اگر به زودی به دامنه متصل می شوید و می خواهید سرعت اتصال اولیه را افزایش دهید، از مرورگر می خواهد که رزولوشن DNS را برای دامنه از قبل انجام دهد.

مرورگر باید آدرس IP دامنه را تعیین کند اگر بتواند منابعی را از یک دامنه شخص ثالث جدید بازیابی کند. برای مثال، بارگیری فونت‌های Google، فونت‌های React از CDN یا درخواست پاسخ JSON از یک سرور API.

برای هر دامنه جدید، وضوح رکورد DNS معمولاً حدود 20-120 میلی ثانیه طول می کشد. این فقط بر بارگیری اولین منبع از یک دامنه معین تأثیر می گذارد، اما همچنان یک تاخیر ایجاد می کند. اگر رزولوشن DNS را از قبل انجام دهیم، در زمان صرفه جویی می کنیم و منبع را سریعتر بارگذاری می کنیم.

نحو

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href نشان دهنده نام دامنه ای است که می خواهید آدرس IP را برای آن تنظیم کنید. می توان با یک پیشوند مشخص کرد (https://domain.com) یا بدون آن (//domain.com).

چه موقع باید استفاده کرد

برای دامنه هایی که به زودی مورد نیاز خواهند بود استفاده کنید برای دانلود منابعی از آنجا که مرورگر از قبل از آنها اطلاعی ندارد. مثلا:

• برنامه شما در میزبانی می شود my-app.com و درخواست های AJAX را به api.my-app.com: شما پرس و جوهای خاص را از قبل نمی دانید زیرا آنها به صورت پویا از JS ساخته می شوند. در اینجا استفاده از یک تگ برای اتصال از قبل به دامنه کاملاً مناسب است.
• برنامه شما در میزبانی می شود my-app.com، و از فونت های گوگل استفاده می کند. آنها در دو مرحله دانلود می شوند: ابتدا فایل CSS از دامنه دانلود می شود fonts.googleapis.com، سپس این فایل فونت هایی را با آن درخواست می کند fonts.gstatic.com. شما نمی توانید بدانید که از کدام فایل فونت خاص هستند fonts.gstatic.com تا زمانی که فایل CSS را بارگیری نکنید، به آن نیاز خواهید داشت، بنابراین ما فقط می توانیم از قبل یک اتصال اولیه ایجاد کنیم.

از این تگ برای سرعت بخشیدن به اسکریپت یا استایل شخص ثالث استفاده کنید به دلیل اتصال از قبل ایجاد شده

لطفا به ویژگی های مشابه توجه کنید <link rel= "dns-prefetch"/> и <link rel= "preconnect">. معمولاً استفاده از آنها با هم برای یک دامنه منطقی نیست: <link rel= "preconnect"> قبلا شامل می شود <link rel= "dns-prefetch"/> و خیلی بیشتر. این امر در دو مورد قابل توجیه است:

• آیا می خواهید از مرورگرهای قدیمی پشتیبانی کنید؟. <link rel= "dns-prefetch" /> پشتیبانی شده توسط از IE10 و Safari 5. <link rel= "preconnect"> مدتی در کروم و فایرفاکس پشتیبانی شد، اما فقط در نسخه 11.1 و به سافاری اضافه شد هنوز در IE/Edge پشتیبانی نمی شود. اگر نیاز به پشتیبانی از این مرورگرها دارید، استفاده کنید <link rel= "dns-prefetch" /> به عنوان یک گزینه پشتیبان برای <link rel= "preconnect">.
• شما می خواهید سرعت اتصال به بیش از 4-6 دامنه را افزایش دهید. برچسب بزنید <link rel= "preconnect"> استفاده از آن با بیش از 4-6 دامنه توصیه نمی شود، زیرا ایجاد و حفظ اتصال یک عملیات گران است. <link rel= "dns-prefetch" /> منابع کمتری مصرف می کند، بنابراین در صورت لزوم از آن استفاده کنید.

اطلاعات بیشتر

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

DNS چیست؟. هر سرور در اینترنت دارای یک آدرس IP منحصر به فرد است که به نظر می رسد 216.58.215.78. نام سایت معمولاً در نوار آدرس مرورگر وارد می شود (به عنوان مثال، google.com، و سرورهای DNS (سیستم نام دامنه) آن را با آدرس IP سرور مطابقت می دهند (216.58.215.78).

برای تعیین یک آدرس IP، مرورگر باید سرور DNS را پرس و جو کند. هنگام اتصال به یک دامنه شخص ثالث جدید 20-120 میلی ثانیه طول می کشد.

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

پیش اجرا

<link rel= "prerender"> از مرورگر می خواهد که URL را دانلود کرده و در یک برگه نامرئی نمایش دهد. هنگامی که کاربر روی لینک کلیک می کند، صفحه باید بلافاصله نمایش داده شود. اگر مطمئن هستید که کاربر از صفحه خاصی بازدید می کند و می خواهد سرعت نمایش آن را افزایش دهد، مفید است.

علیرغم (یا به دلیل) اثربخشی استثنایی این برچسب، در سال 2019 <link rel= "prerender"> در مرورگرهای اصلی پشتیبانی ضعیفی دارد. جزئیات بیشتر را ببینید. در زیر.

نحو

<link rel="prerender" href="https://my-app.com/pricing" />

href به نشانی اینترنتی که می‌خواهید در پس‌زمینه نمایش داده شود اشاره می‌کند.

چه موقع باید استفاده کرد

وقتی واقعا مطمئن هستید که کاربر به صفحه خاصی می رود. اگر یک "تونل" دارید که از طریق آن 70 درصد از بازدیدکنندگان صفحه A به صفحه B می روند، پس <link rel= "prerender"> در صفحه A به نمایش سریع صفحه B کمک می کند.

بیش از حد استفاده نکنید. پیش رندر از نظر پهنای باند و حافظه بسیار گران است. استفاده نکن <link rel= "prerender"> برای بیش از یک صفحه

اطلاعات بیشتر

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

برای ذخیره حافظه Chrome رندر کامل را انجام نمی دهدو فقط NoState را پیش بارگذاری کنید. این بدان معناست که کروم صفحه و تمام منابع آن را بارگیری می کند، اما جاوا اسکریپت را رندر یا اجرا نمی کند.

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

خلاصه

استفاده کنید:

• <link rel= "preload"> - زمانی که در چند ثانیه به یک منبع نیاز دارید
• <link rel= "prefetch"> - زمانی که به منبع موجود در صفحه بعد نیاز دارید
• <link rel= "preconnect"> - زمانی که می دانید به زودی به یک منبع نیاز خواهید داشت، اما هنوز URL کامل آن را نمی دانید
• <link rel= "dns-prefetch"> - به طور مشابه، هنگامی که می دانید به زودی به یک منبع نیاز خواهید داشت، اما هنوز URL کامل آن را نمی دانید (برای مرورگرهای قدیمی تر)
• <link rel= "prerender"> - وقتی مطمئن هستید که کاربران به صفحه خاصی می روند و می خواهید سرعت نمایش آن را افزایش دهید

منبع: www.habr.com