جاوا اسکریپت شخص ثالث را به طور موثر بارگیری کنید

Milica Mihajlija

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

• اگر ارزش واضحی به سایت شما اضافه نکرد، آن را حذف کنید.
• فرآیند بارگذاری را بهینه کنید.

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

• با استفاده از ویژگی async یا defer در تگ های <script>
• ایجاد ارتباطات اولیه با مبداهای مورد نیاز
• بارگذاری تنبل
• بهینه سازی نحوه ارائه اسکریپت های شخص ثالث

از async یا defer استفاده کنید

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

ویژگی‌های async و defer به مرورگر می‌گویند که می‌تواند در حین بارگذاری اسکریپت در پس‌زمینه به تجزیه HTML ادامه دهد، سپس اسکریپت را پس از بارگیری آن اجرا کند. به این ترتیب، دانلودهای اسکریپت ساخت DOM یا رندر صفحه را مسدود نمی‌کند و به کاربر اجازه می‌دهد قبل از بارگیری تمام اسکریپت‌ها صفحه را ببیند.

<script async src="script.js">

<script defer src="script.js">

تفاوت بین ویژگی‌های async و defer زمانی است که مرورگر اسکریپت‌ها را اجرا می‌کند.

async

اسکریپت های دارای ویژگی async در اولین فرصت پس از پایان دانلود و قبل از رویداد بارگذاری پنجره اجرا می شوند. این بدان معنی است که ممکن است (و احتمالاً) اسکریپت های async به ترتیب ظاهر شدنشان در HTML اجرا نشوند. همچنین به این معنی است که اگر در حالی که تجزیه کننده هنوز در حال کار است، دانلود را به پایان برسانند، می توانند ساختمان DOM را قطع کنند.

defer

اسکریپت‌های دارای ویژگی defer پس از اتمام کامل تجزیه HTML، اما قبل از رویداد DOMContentLoaded اجرا می‌شوند. defer تضمین می کند که اسکریپت ها به ترتیبی که در HTML ظاهر می شوند اجرا می شوند و تجزیه کننده را مسدود نمی کنند.

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

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

اتصالات اولیه را با مبداهای مورد نیاز ایجاد کنید

شما می توانید 100 تا 500 میلی ثانیه با ایجاد اتصالات اولیه به منابع مهم شخص ثالث صرفه جویی کنید.

دو نوع <link> ، preconnect و dns-prefetch ، می توانند در اینجا کمک کنند:

preconnect

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

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

dns-prefetch

<link rel="dns-prefetch> زیرمجموعه کوچکی از آنچه را که <link rel="preconnect"> مدیریت می‌کند مدیریت می‌کند. ایجاد یک اتصال شامل جستجوی DNS و دست دادن TCP، و برای مبدا امن، مذاکرات TLS است. dns-prefetch به مرورگر می‌گوید فقط DNS یک دامنه خاص را قبل از فراخوانی صریح آن حل کنید.

راهنمایی preconnect بهتر است فقط برای مهم ترین اتصالات استفاده شود. برای دامنه های شخص ثالث کمتر مهم، از <link rel=dns-prefetch> استفاده کنید.

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

پشتیبانی مرورگر برای dns-prefetch کمی با پشتیبانی preconnect متفاوت است، بنابراین dns-prefetch می تواند به عنوان یک بازگشت برای مرورگرهایی باشد که از preconnect پشتیبانی نمی کنند. برای اجرای ایمن از تگ های پیوند جداگانه استفاده کنید:

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

منابع شخص ثالث با بار تنبلی

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

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

تبلیغات منبع درآمد مهمی برای بسیاری از سایت ها است، اما کاربران به دنبال محتوا هستند. با بارگذاری تنبل تبلیغات و ارائه سریعتر محتوای اصلی، می توانید درصد مشاهده کلی یک تبلیغ را افزایش دهید. به عنوان مثال، MediaVine به تبلیغات با بارگذاری تنبل روی آورد و شاهد بهبود 200 درصدی در سرعت بارگذاری صفحه بود. Google Ad Manager اسنادی در مورد نحوه بارگذاری تنبل تبلیغات دارد.

همچنین می‌توانید محتوای شخص ثالث را طوری تنظیم کنید که فقط زمانی بارگیری شود که کاربران برای اولین بار به آن بخش از صفحه پیمایش کنند.

Intersection Observer یک API مرورگر است که به طور موثر تشخیص می دهد که یک عنصر به نمای مرورگر وارد یا خارج می شود و شما می توانید از آن برای پیاده سازی این تکنیک استفاده کنید. lazysizes یک کتابخانه محبوب جاوا اسکریپت برای بارگذاری تنبل تصاویر و iframes است. از جاسازی‌ها و ویجت‌های YouTube پشتیبانی می‌کند. همچنین دارای پشتیبانی اختیاری از Intersection Observer است.

استفاده از ویژگی loading برای بارگذاری تنبل تصاویر و آیفریم ها جایگزین بسیار خوبی برای تکنیک های جاوا اسکریپت است و اخیراً در Chrome 76 در دسترس قرار گرفته است!

نحوه ارائه اسکریپت های شخص ثالث را بهینه کنید

در زیر چند استراتژی توصیه شده برای بهینه سازی استفاده از اسکریپت های شخص ثالث آورده شده است.

میزبانی CDN شخص ثالث

معمولاً فروشندگان شخص ثالث نشانی‌های اینترنتی برای فایل‌های جاوا اسکریپتی که میزبانی می‌کنند ارائه می‌کنند، معمولاً در یک شبکه تحویل محتوا (CDN) . مزایای این روش این است که می‌توانید به سرعت شروع به کار کنید—فقط URL را کپی و جایگذاری کنید—و هیچ هزینه‌ای برای تعمیر و نگهداری وجود ندارد. فروشنده شخص ثالث پیکربندی سرور و به روز رسانی اسکریپت را مدیریت می کند.

اما از آنجایی که آنها منبع مشابهی با بقیه منابع شما ندارند، بارگیری فایل‌ها از یک CDN عمومی هزینه شبکه را به همراه دارد. مرورگر باید یک جستجوی DNS انجام دهد، یک اتصال HTTP جدید ایجاد کند، و در منابع امن، یک دست دادن SSL با سرور فروشنده انجام دهد.

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

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

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

• جستجوی DNS و زمان رفت و برگشت را کاهش دهید.
• هدرهای ذخیره HTTP را بهبود بخشید.
• از HTTP/2 یا HTTP/3 جدیدتر استفاده کنید.

به عنوان مثال، کاسپر با میزبانی خودکار یک اسکریپت تست A/B توانست 1.7 ثانیه زمان بارگذاری را کاهش دهد .

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

از Service Workers برای ذخیره اسکریپت ها از سرورهای شخص ثالث استفاده کنید

شما می توانید از Service Workers برای کش کردن اسکریپت ها از سرورهای شخص ثالث به عنوان جایگزینی برای میزبانی خود استفاده کنید. این به شما کنترل بیشتری روی حافظه پنهان می دهد و در عین حال مزایای CDN های شخص ثالث را حفظ می کند.

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