با استفاده از زمان فکر سرور با نکات اولیه، صفحه سریعتر بارگیری می شود

دریابید که چگونه سرور شما می تواند نکاتی را در مورد منابع فرعی مهم به مرورگر ارسال کند.

کنجی باهوکس
Kenji Baheux
بری پولارد

نکات اولیه چیست؟

وب سایت ها با گذشت زمان پیچیده تر شده اند. به این ترتیب، غیرعادی نیست که یک سرور برای تولید HTML برای صفحه درخواستی نیاز به انجام کارهای غیر ضروری (مثلاً دسترسی به پایگاه های داده یا دسترسی CDN ها به سرور مبدا) داشته باشد. متأسفانه، این "زمان فکر سرور" قبل از اینکه مرورگر بتواند صفحه را شروع به رندر کند، باعث تاخیر اضافی می شود. در واقع، تا زمانی که سرور برای آماده کردن پاسخ نیاز دارد، اتصال به طور موثر بیکار می شود.

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

Early Hints یک کد وضعیت HTTP ( 103 Early Hints ) است که برای ارسال یک پاسخ HTTP اولیه قبل از پاسخ نهایی استفاده می شود. این به سرور اجازه می‌دهد تا نکاتی را درباره منابع فرعی مهم (به عنوان مثال، شیوه نامه‌های صفحه، جاوا اسکریپت مهم) یا مبداهایی که احتمالاً توسط صفحه استفاده می‌شوند، به مرورگر ارسال کند، در حالی که سرور مشغول تولید منبع اصلی است. مرورگر می تواند از این نکات برای گرم کردن اتصالات و درخواست منابع فرعی در حالی که منتظر منبع اصلی است استفاده کند. به عبارت دیگر، نکات اولیه به مرورگر کمک می‌کند تا با انجام برخی کارها از قبل، از چنین «زمان فکری سرور» استفاده کند و در نتیجه سرعت بارگذاری صفحه را افزایش دهد.

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

در برخی موارد، بهبود عملکرد به بزرگترین رنگ محتوایی می تواند از چند صد میلی ثانیه، همانطور که توسط Shopify و Cloudflare مشاهده شده است، و تا یک ثانیه سریعتر باشد، همانطور که در این مقایسه قبل و بعد مشاهده می شود:

مقایسه دو سایت
قبل و بعد از مقایسه نکات اولیه در یک وب سایت آزمایشی با WebPageTest (Moto G4 - DSL)
نحوه استفاده از نکات اولیه

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

اکنون که این فهرست اولویت‌بندی‌شده از صفحات فرود را دارید، گام بعدی این است که مشخص کنید کدام منبع یا منابع فرعی کاندیدهای خوبی برای راهنمایی‌های preconnect یا preload هستند. به طور معمول، این منابع و منابع فرعی هستند که بیشترین کمک را به معیارهای کلیدی کاربر مانند بزرگترین رنگ محتوایی یا First Contentful Paint دارند. به طور دقیق تر، به دنبال منابع فرعی مسدودکننده رندر مانند جاوا اسکریپت همزمان، شیوه نامه ها یا حتی فونت های وب باشید. به طور مشابه، به دنبال منابعی باشید که میزبان منابع فرعی هستند که سهم زیادی در معیارهای کلیدی کاربر دارند.

همچنین توجه داشته باشید که اگر منابع اصلی شما از قبل preconnect یا preload استفاده می‌کنند، می‌توانید این منابع یا منابع را در میان نامزدهای Early Hints در نظر بگیرید. برای جزئیات بیشتر ، نحوه بهینه سازی LCP را ببینید. با این حال، کپی ساده‌لوحانه دستورالعمل‌های preconnect و preload از HTML به نکات اولیه ممکن است بهینه نباشد .

هنگام استفاده از اینها در HTML، معمولاً می خواهید منابعی را که اسکنر پیش بارگذاری در HTML کشف نمی کند، preconnect یا preload - به عنوان مثال، فونت ها یا تصاویر پس زمینه که در غیر این صورت دیر کشف می شدند. برای نکات اولیه، شما HTML نخواهید داشت، بنابراین ممکن است بخواهید در عوض به دامنه‌های حیاتی از preconnect یا منابع مهمی را preload که شاید در غیر این صورت در اوایل HTML کشف می‌شدند - به عنوان مثال، بارگذاری اولیه main.css یا app.js علاوه بر این، همه مرورگرها preload برای نکات اولیه پشتیبانی نمی کنند—به پشتیبانی مرورگر مراجعه کنید.

مرحله دوم شامل به حداقل رساندن خطر استفاده از نکات اولیه در منابع یا مبداهایی است که ممکن است منسوخ شده باشند یا دیگر توسط منبع اصلی استفاده نشوند. به عنوان مثال، منابعی که اغلب به روز می شوند و نسخه می شوند (به عنوان مثال، example.com/css/main.fa231e9c.css ) ممکن است بهترین انتخاب نباشند. توجه داشته باشید که این نگرانی مختص Early Hints نیست، بلکه برای هر preload یا preconnect در هر جایی که ممکن است وجود داشته باشد، اعمال می‌شود. این جزییاتی است که به بهترین وجه در مورد اتوماسیون یا قالب‌بندی پرداخته می‌شود (برای مثال، یک فرآیند دستی به احتمال زیاد منجر به عدم تطابق URL‌های هش یا نسخه بین preload و تگ HTML واقعی با استفاده از منبع می‌شود).

به عنوان مثال، جریان زیر را در نظر بگیرید:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]

سرور پیش‌بینی می‌کند که main.abcd100.css مورد نیاز خواهد بود، و پیشنهاد می‌کند آن را با استفاده از Early Hints از قبل بارگیری کنید:

103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]

چند لحظه بعد، صفحه وب، از جمله CSS پیوند داده شده ارائه می شود. متأسفانه، این منبع CSS اغلب به روز می شود و منبع اصلی در حال حاضر پنج نسخه ( abcd105 ) از منبع پیش بینی شده CSS ( abcd100 ) جلوتر است.

200 OK
[...]
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.abcd105.css">

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

<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">

در نهایت، در سمت سرور، به دنبال درخواست‌های منبع اصلی ارسال شده توسط مرورگرهایی باشید که از نکات اولیه پشتیبانی می‌کنند و بلافاصله با 103 نکات اولیه پاسخ دهید. در پاسخ 103، نکات مربوط به پیش اتصال و پیش بارگذاری را درج کنید. پس از آماده شدن منبع اصلی، پاسخ معمول را دنبال کنید (مثلاً 200 OK در صورت موفقیت آمیز بودن). برای سازگاری با عقب، تمرین خوبی است که هدرهای Link HTTP را نیز در پاسخ نهایی اضافه کنید، شاید حتی با منابع مهمی که به عنوان بخشی از تولید منبع اصلی آشکار شد (به عنوان مثال، بخش دینامیک یک منبع کلیدی اگر دنبال کنید " تقسیم به دو» پیشنهاد). این چیزی است که به نظر می رسد:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script

چند لحظه بعد:

200 OK
Content-Length: 7531
Content-Type: text/html; charset=UTF-8
Content-encoding: br
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Link: </experimental.3eab3290.css>; rel=preload; as=style
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">
   <script src="/common.js"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
پشتیبانی از مرورگر

اگرچه 103 Early Hints در همه مرورگرهای اصلی پشتیبانی می‌شود، دستورالعمل‌هایی که می‌توان در Early Hint ارسال کرد در هر مرورگر متفاوت است:

پشتیبانی از پیش اتصال:

پشتیبانی مرورگر

  • کروم: 103.
  • لبه: 103.
  • فایرفاکس: 120.
  • سافاری: 17.

پشتیبانی از پیش بارگذاری:

پشتیبانی مرورگر

  • کروم: 103.
  • لبه: 103.
  • فایرفاکس: 123.
  • سافاری: پشتیبانی نمی شود.

Chrome DevTools همچنین از 103 Early Hints پشتیبانی می‌کند و سرصفحه‌های Link را می‌توان در منابع سند مشاهده کرد:

پانل شبکه که سرصفحه های نکات اولیه را نشان می دهد
سرصفحه‌های Link نکات اولیه در ابزار توسعه کروم نشان داده می‌شوند.

توجه داشته باشید برای استفاده از منابع Early Hints، Disable cache نباید در DevTools علامت زده شود زیرا Early Hints از کش مرورگر استفاده می کند. برای منابع از پیش بارگذاری شده، آغازگر به عنوان early-hints و اندازه (Disk cache) را نشان می دهد:

پانل شبکه که آغازگر نکات اولیه را نشان می دهد
منابع Early Hinted دارای یک آغازگر early-hints هستند و از حافظه پنهان دیسک بارگیری می شوند.

همچنین برای آزمایش HTTPS به گواهی قابل اعتماد نیاز دارد.

فایرفاکس (در نسخه 126) پشتیبانی صریح 103 Early Hints در DevTools ندارد، اما منابع بارگیری شده با استفاده از Early Hints اطلاعات HTTP Header را نشان نمی‌دهند که نشان‌دهنده بارگیری آنها با Early Hints است.

پشتیبانی سرور

در اینجا خلاصه ای سریع از سطح پشتیبانی از Early Hints در میان نرم افزارهای منبع باز محبوب نرم افزار سرور HTTP آورده شده است:

نکات اولیه را به روش ساده تر فعال کنید

اگر از یکی از CDN ها یا پلتفرم های زیر استفاده می کنید، ممکن است نیازی به پیاده سازی دستی نکات اولیه نداشته باشید. برای اطلاع از اینکه آیا از نکات اولیه پشتیبانی می کند یا خیر، به مستندات آنلاین ارائه دهنده راه حل خود مراجعه کنید یا به لیست غیر جامع در اینجا مراجعه کنید:

چگونه از مشکلاتی برای مشتریانی که از نکات اولیه پشتیبانی نمی‌کنند جلوگیری کنیم

پاسخ‌های اطلاعاتی HTTP در محدوده 100 بخشی از استاندارد HTTP هستند، اما برخی از مشتریان یا ربات‌های قدیمی ممکن است با این موارد مشکل داشته باشند زیرا قبل از راه‌اندازی 103 Early Hints به ندرت برای مرور وب عمومی استفاده می‌شدند.

فقط ارسال 103 راهنمایی اولیه در پاسخ به کلاینت هایی که sec-fetch-mode: navigate هدر درخواست HTTP باید اطمینان حاصل کند که چنین نکاتی فقط برای مشتریان جدیدتر ارسال می شود که می دانند منتظر پاسخ بعدی هستند. علاوه بر این، از آنجایی که نکات اولیه فقط در درخواست‌های ناوبری پشتیبانی می‌شوند ( محدودیت‌های فعلی را ببینید)، این مزیت اضافه‌ای را دارد که از ارسال بیهوده آنها در سایر درخواست‌ها جلوگیری می‌کند.

علاوه بر این، نکات اولیه توصیه می شود که فقط از طریق اتصالات HTTP/2 یا HTTP/3 ارسال شوند و اکثر مرورگرها آنها را فقط از طریق آن پروتکل ها می پذیرند.

الگوی پیشرفته

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

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

محدودیت های فعلی

در اینجا محدودیت‌های Early Hints که در Chrome پیاده‌سازی شده‌اند، آمده است:

  • فقط برای درخواست های ناوبری (یعنی منبع اصلی برای سند سطح بالا) در دسترس است.
  • فقط preconnect و preload پشتیبانی می کند (یعنی prefetch پشتیبانی نمی شود).
  • نکات اولیه و به دنبال آن یک تغییر مسیر متقاطع در پاسخ نهایی باعث می شود کروم منابع و اتصالاتی را که با استفاده از نکات اولیه به دست آورده است حذف کند.
  • منابعی که با استفاده از Early Hints از قبل بارگذاری شده اند در حافظه پنهان HTTP ذخیره می شوند و بعداً توسط صفحه از آنجا بازیابی می شوند. بنابراین فقط منابع قابل ذخیره کش را می توان با استفاده از Early Hints از قبل بارگذاری کرد یا منبع دوبار واکشی می شود (یک بار توسط Early Hints و بار دیگر توسط سند). در Chrome، حافظه پنهان HTTP برای گواهی‌های HTTPS غیرقابل اعتماد غیرفعال است (حتی اگر به بارگیری صفحه ادامه دهید).
  • بارگیری از قبل تصاویر پاسخگو (با استفاده از imagesrcset ، imagesizes یا media ) با استفاده از سرصفحه های HTTP <link> پشتیبانی نمی شود زیرا تا زمانی که سند ایجاد نشود، درگاه دید تعریف نشده است. این بدان معنی است که 103 نکات اولیه را نمی توان برای بارگذاری اولیه تصاویر پاسخگو استفاده کرد و ممکن است در صورت استفاده برای این کار، تصویر نادرست بارگیری شود. این بحث را در مورد پیشنهادات در مورد نحوه مدیریت بهتر این موضوع دنبال کنید.

سایر مرورگرها محدودیت‌های مشابهی دارند و همانطور که قبلاً ذکر شد ، برخی دیگر 103 راهنمایی اولیه را فقط برای preconnect محدود می‌کنند.

بعدش چی؟

بسته به علاقه جامعه، ممکن است اجرای Early Hints را با قابلیت‌های زیر تقویت کنیم:

  • نکات اولیه برای منابع غیر قابل ذخیره با استفاده از کش حافظه به جای کش HTTP.
  • نکات اولیه در مورد درخواست های زیرمنبع ارسال می شود.
  • نکات اولیه در مورد درخواست های منبع اصلی iframe ارسال می شود.
  • پشتیبانی از واکشی اولیه در Early Hints.

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

ارتباط با H2/Push

اگر با ویژگی منسوخ HTTP2/Push آشنا هستید، ممکن است تعجب کنید که Early Hints چگونه متفاوت است. در حالی که Early Hints به یک سفر رفت و برگشت نیاز دارد تا مرورگر شروع به واکشی منابع فرعی حیاتی کند، با HTTP2/Push سرور می‌تواند شروع به فشار دادن منابع فرعی در کنار پاسخ کند. در حالی که این شگفت‌انگیز به نظر می‌رسد، اما منجر به یک نزولی ساختاری کلیدی شد: با HTTP2/Push، اجتناب از فشار دادن منابع فرعی که مرورگر قبلاً داشت بسیار دشوار بود. این اثر "فشار بیش از حد" منجر به استفاده کمتر کارآمد از پهنای باند شبکه شد که به طور قابل توجهی مانع از مزایای عملکرد شد. به طور کلی، داده‌های کروم نشان داد که HTTP2/Push در واقع یک منفی خالص برای عملکرد در سراسر وب است.

در مقابل، Early Hints در عمل عملکرد بهتری دارد زیرا توانایی ارسال یک پاسخ اولیه را با نکاتی ترکیب می‌کند که مرورگر را مسئول واکشی یا اتصال به چیزی است که واقعاً به آن نیاز دارد. در حالی که Early Hints تمام موارد استفاده‌ای را که HTTP2/Push می‌تواند در تئوری به آن بپردازد را پوشش نمی‌دهد، ما معتقدیم که Early Hints راه‌حل عملی‌تری برای افزایش سرعت ناوبری است.

تصویر کوچک توسط پیر بامین .