از قبل به مبداهای مورد نیاز متصل شوید

بخش فرصت‌ها در گزارش Lighthouse شما، تمام درخواست‌های کلیدی را که هنوز درخواست‌های واکشی را با <link rel=preconnect> اولویت‌بندی نکرده‌اند، فهرست می‌کند:

تصویری از پیش اتصال فانوس دریایی به ممیزی مبدا مورد نیاز

سازگاری با مرورگر

<link rel=preconnect> در اکثر مرورگرها پشتیبانی می شود. به سازگاری مرورگر مراجعه کنید.

سرعت بارگذاری صفحه را با پیش اتصال بهبود دهید

برای ایجاد اتصالات اولیه به منابع مهم شخص ثالث، اضافه کردن نکات منبع preconnect یا dns-prefetch را در نظر بگیرید.

<link rel="preconnect"> به مرورگر اطلاع می‌دهد که صفحه شما قصد دارد با مبدأ دیگری ارتباط برقرار کند و مایلید این فرآیند در اسرع وقت آغاز شود.

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

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

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

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

با این کار مرورگر متوجه می شود که صفحه قصد دارد به example.com متصل شود و محتوا را از آنجا بازیابی کند.

به خاطر داشته باشید که اگرچه <link rel="preconnect"> بسیار ارزان است، اما هنوز هم می تواند زمان ارزشمند CPU را به خصوص در اتصالات امن اشغال کند. این امر به ویژه در صورتی بد است که اتصال در عرض 10 ثانیه مورد استفاده قرار نگیرد، زیرا مرورگر آن را می بندد و تمام کار اتصال اولیه را هدر می دهد.

به طور کلی، سعی کنید از <link rel="preload"> استفاده کنید، زیرا این یک ترفند عملکرد جامع تر است، اما <link rel="preconnect"> را در کمربند ابزار خود برای موارد لبه نگه دارید:

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

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

راهنمایی مخصوص پشته

دروپال

نکات منبع Preconnect یا dns-prefetch را می توان با نصب و پیکربندی ماژولی که امکاناتی را برای راهنمایی های منبع عامل کاربر فراهم می کند اضافه کرد.

مجنتو

طرح‌بندی طرح‌های زمینه خود را تغییر دهید و نکات منبع پیش‌اتصال یا واکشی DNS را اضافه کنید.

منابع