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

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

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

• از صفات async و defer  بر روی تگ‌های script استفاده کنید
• در مواقع لزوم، از کانکشن‌هایی مقدم و سریع‌تر برای اوریجین‌ها استفاده کنید
• LazyLoading
• عملکرد اسکریپت شخص ثالث خود را بهینه‌سازی کنید

در مقاله «چگونه جاوا اسکریپت شخص ثالث (Third-Party) کند را پیدا کنیم؟» توضیح داده‌ایم که چطور این منابع را پیدا کنیم. در ادامه این مقاله از منتوریکس همراه ما باشید تا هر یک از راهکارهای بهینه‌سازی بارگذاری وبسایت در عین استفاده از اسکریپت‌های شخص ثالث را به‌صورت کامل معرفی کنیم.

آنچه در این مطلب می خوانید:

1. از صفات async و defer بر روی تگ‌های script استفاده کنید
2. بررسی async
3. بررسی defer
4. در مواقع لزوم، از کانکشن‌هایی مقدم و سریع‌تر برای اوریجین‌ها استفاده کنید
5. بررسی Preconnect
6. بررسی dns-prefetch
7. بررسی Lazy-load third-party resources
8. عملکرد اسکریپت شخص ثالث خود را بهینه‌سازی کنید
9. استفاده از Service Worker برای کَش اسکریپت از سرورهای شخص ثالث

از صفات async و defer  بر روی تگ‌های script استفاده کنید

اسکریپت‌های هم‌زمان، باعث تأخیر در ساختار DOM و همچنین رندرینگ می‌شوند. به همین خاطر شما باید همیشه از اسکریپت‌ها به‌صورت غیرهمزمان استفاده کنید، یا اینکه اسکریپت‌ها پیش از آنکه صفحه رندر شود بارگذاری شوند.
صفات async و defer به مرورگر اعلام می‌کند که ابتدا در حین اینکه اسکریپت را در پس‌زمینه بارگذاری می‌کند، HTML را آنالیز کرده و سپس کد را بعد از بارگذاری کامل صفحه، اجرا کند. به این طریق دانلود اسکریپت باعث انسداد ساختار DOM و همچنین رندرینگ صفحه نمی‌شود. در نتیجه کاربر می‌تواند پیش از آنکه بارگذاری تمامی اسکریپت‌ها تمام شد، صفحه نمایش را مشاهده کند. 

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

بررسی async

زمانی که یک اسکریپت با صفت async اجرا شود، در اولین فرصت بعد از اینکه دانلود و بارگذاری پنجره تمام شد، اجرا می‌شود. این یعنی امکان دارد که async با توجه به ترتیبی که در کد HTML وجود دارد، اجرا نشود. همچنین این مسئله بدان معناست که امکان دارد اگر دانلود آن پیش از اتمام آنالیز (Parsing) تمام شود، سریع‌تر اجرا شده و باعث اختلال در ساختار DOM بشود.

بررسی defer

زمانی که یک اسکریپت با صفت defer اجرا شود، بعد از آنکه آنالیز HTML به‌صورت کامل تمام شد و قبل از آنکه DOMContentLoadedاجرا شود، اجرا خواهد شد. در حقیقت defer این اطمینان را به ما می‌دهد به ترتیبی که در کد HTML قرار دارد اجرا می‌شود و به‌هیچ‌وجه باعث انسداد Parser یا همان فرآیند آنالیز نخواهد شد.

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

 استفاده از این صفحات می‌تواند به شکل چشم‌گیری باعث افزایش سرعت بارگذاری وبسایت شما شود. به‌عنوان مثال Telegraph به تازگی تمام اسکریپت‌ها را به تأخیر می‌اندازد. این شامل تمام تبلیغات و آنالیتیکس می‌شود. با همین کار توانسته تا سرعت بارگذاری وبسایت خود را 4 ثانیه افزایش دهد.

نکته

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

 در مواقع لزوم، از کانکشن‌هایی مقدم و سریع‌تر برای اوریجین‌ها استفاده کنید

شما می‌توانید با ایجاد Early Connection برای اسکریپت‌های مهم و ضروری، 100 تا 500 میلی ثانیه را صرفه‌جویی کنید.
در این باره دو  link می‌توانند مفید واقع شوند:

بررسی Preconnect

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

توجه

فقط پری – کانکتد به دامین Critical از کانکشن سریعتر استفاده می‌کند. دلیل این است که مرورگر هر کانکشنی که در عرض 10 ثانیه مورد استفاده قرار نگیرد را از بین می‌برد. زمانی که در مواقع غیرضروری از پری – کانکتینگ استفاده کنید، باعث به تأخیر افتادن منابع خود خواهید شد. پس تعداد دامین‌های پری – کانکتد خود را محدود کنید و برای بررسی تأثیر آن‌ها بر عملکرد وبسایت خود، از تست‌ مربوطه استفاده نمایید.

بررسی  dns-prefetch

link rel="dns-prefetch در حقیقت بخشی از link rel="preconnect" را مدیریت می‌کند. ایجاد یک کانکشن جدید شامل DNS LookUp و همچنین TCP Handshake می‌شود. در ضمن این فرآیند برای یک اوریجین Secure، شامل TLS Negotiation نیز خواهد شد. dns-prefetch چنین دستور می‌دهد که مرورگر فقط DNS یک دامین خاص را قبل از اینکه به‌صورت واضح و کامل درخواست شود را ریزالور (Resolve) کند.
روش Preconnect برای کاکنکش‌های ضروری و Critical بسیار مفید است و در مورد دامین‌های شخص ثالثی که ضرورت و ارزش کمتری دارند می‌توانید از روش dns-prefetch استفاده کنید. 

لازم به ذکر است مرورگرهایی که از dns-prefetch پشتیبانی می‌کنند، با مرورگرهایی که از Preconnect پشتیبانی می‌کنند، کمی تفاوت دارند. پس می‌توان گفت که از dns-prefetch می‌توانید به‌عنوان فال – بک مرورگری که از Preconnect پشتیبانی نمی‌کند استفاده کنید. برای این کار می‌توانید از کد زیر استفاده نمایید:

بررسی Lazy-load third-party resources

زمانی که به‌خوبی از منابع شخص ثالث استفاده نکنید، این منابع می‌توانند باعث کاهش چشم‌گیر سرعت بارگذاری صفحه شما شوند. اگر منابع شما خیلی حیاتی و ضروری نیستند یا اینکه در نیمه دوم صفحه شما قرار دارند و مخاطب باید برای دیدن آن‌ها صفحه را به‌سمت پایین بکشد، می‌توانید از روش lazy-loading استفاده کنید تا استاندارد Paint و شاخص سرعت صفحه شما افزایش پیدا کند. به این طریق بخش مهم صفحه شما که در نیمه اول صفحه نمایش قرار دارد سریع‌تر نمایش داده می‌شود و به این ترتیب کاربر تجربه رضایت‌بخشی خواهد داشت.

یکی از روش‌های موثر این است که محتوای lazy-load شخص ثالث را بعد از بارگذاری محتوای صفحه اصلی قرار دهیم. محتوای تبلیغاتی یک کاندیدای مناسب برای این روش هستند. محتوای تبلیغاتی یکی از مهم‌ترین منابع درآمد برای بسیاری از وبسایت‌ها به حساب می‌آیند؛ اما کاربران شما برای دریافت محتوای اصلی و نه تبلیغات به وبسایت شما مراجعه می‌کنند. با کمک روش lazy-load، شما می‌توانید محتوای اصلی سایت را ابتدا به مخاطب خود برسانید و به این شکل باعث بهتر دیده شدن تبلیغات نیز شوید. به‌عنوان مثال وبسایت MediaVine با استفاده از روش lazy-load برای تبلیغات، تا 200% سرعت بارگذاری وبسایت خود را افزایش داد.
به شکلی دیگر نیز می‌توان از lazy-load استفاده کرد. در این روش، محتوای بخش دوم صفحه وبسایت خود را به‌صورت lazy-load اجرا می‌کنید. این یعنی محتوای نیمه دوم صفحه وبسایت خود که کاربر برای دیدن آن باید صفحه را به پایین بکشد را lazy-load کنید. به زبان ساده‌تر، با این کار بخش بالایی سایت که مخاطب ابتدا با آن تعامل دارد، سریع‌تر از مابقی بخش‌های سایت بارگذاری می‌شود. به این ترتیب کاربر تجربه رضایت‌بخشی را از وبسایت شما خواهد داشت.
Intersection Observer یک API است که ابزاری مناسب برای اجرای این روش به حساب می‌آید. این API قادر است ViewPort مرورگر را بررسی کنید و تمام المان‌هایی که به ویوپورت وارد شده یا از آن خارج می‌شوند را تشخیص دهد. علاوه بر این، کتابخانه Lazysizes نیز یک اسکریپت محبوب برای بارگذاری تصاویر و iframe ها به‌صورت Lazy-load محسوب می‌شود. این کتابخانه از ویجت‌ها و ایمبدهای یوتیوب نیز پشتیبانی می‌کند و دارای پشتیبانی  مناسب است.

توجه

مراقب میزان مصرف جاوا اسکریپت از منابع خودتان هنگام استفاده از روش Lazy-Loadng باشد. اگر جاوا اسکریپت به هر دلیل اجرا نشود، منابع شما به‌صورت کامل بارگذاری نخواهند شد. شرایط flaky network می‌تواند باعث بروز چنین مشکلی شود.
شما می‌توانید برای بارگذاری تصاویر به روش Lazy-Loading از صفت loadingبه جای جاوا اسکریپت استفاده کنید. این قابلیت در Chrome 76  نیز وجود دارد.

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

برای این کار چند روش وجود دارد که در ادامه آن‌ها را توضیح خواهیم داد:

بررسی هاستینگ CND شخص ثالث

ارائه URLهای فایل جاوا اسکریپت بر روی CDN توسط وِندور شخص ثالثی که آن را ارائه می‌دهد، بسیار رایج است. مزیت این روش این است که شما می‌توانید به سرعت و فقط با کپی و پیست کردن URL، به نتیجه برسید. شما برای این کار به‌عنوان یک توسعه‌دهنده نیازی نیست کاری انجام دهید. تمام کارها و تنظیمات از سمت سرور و وندور آپدیت می‌شوند.
اما خب اوریجین منابع این وندورها با اورجینی که مابقی منابع شما بر روی آن قرار دارد، یکسان نیست. به همین خاطر بارگذاری فایل‌ها از یک CDN عمومی باعث ایجاد هزینه شبکه برای شما خواهد شد. به این ترتیب مرورگر باید DNS Lookup انجام دهد تا یک کانکشن جدید HTTP درست کند. اگر اورجین Secure باشد، باید اورجین با سرور وندور یک SSL Handshake انجام دهد.
زمانی که از فایل‌های یک سرور شخص ثالث استفاده کنید، هیچ کنترلی بر حافظه کش آن نخواهید داشت. به همین خاطر باید به استراتژی کش یک فرد دیگر متکی باشید. این استراتژی ممکن است باعث ری – فچ غیرضروری اسکریپت از شبکه شود.

اسکریپت‌های Self-host third-party

استفاده از اسکریپت‌های شخص ثالث Self-host به شما این امکان را می‌دهد که کنترل بیشتری بر روند بارگذاری اسکریپت داشته باشد. با کمک Self-hosting شما می‌توانید:

• زمان DNS Lookup و Round-Trip را کاهش دهید
• هدر HTTP Caching را بهبود ببخشید
• از مزایای سرویس HTTP/2 Server Push بهره‌مند شوید

به‌عنوان مثال کسپر با کمک Self-Hosting اسکریپت A/B Testing، 1.7 ثانیه زمان بارگذاری سایت خود را کاهش داد. البته باید بدانید سلف هاستینگ یک ایراد بسیار بزرگ دارد. در این حالت اسکریپت‌ها از حالت به‌روز خارج می‌شوند و به‌صورت خودکار بروزرسانی نمی‌شوند. البته یک API برای حل این مشکل طراحی شده است.
اخطار: به روز رسانی دستی اسکریپت باعث بروز مشکلات بسیاری در فرآیند توسعه وبسایت شما می‌شوند و امکان دارد بروزرسانی‌های بسیار مهمی را از دست دهید. از طرف دیگر از CDN Hosting برای تمام منابع خود استفاده نکنید، edge-caching را از دست خواهید داد و باید فشرده‌سازی سرور خود را بهینه‌سازی کنید.

استفاده از Service Worker برای کَش اسکریپت از سرورهای شخص ثالث

یک روش دیگر برای سلف هاستینگ که باعث می‌شود کنترل بیشتری بر روند کش داشته باشید و در عین حال از مزایای استفاده از CDN شخص ثالث بهره‌مند شوید، استفاده از Service Worker ها برای کش اسکریپت از سرورهای شخص ثالث است. این کار باعث می‌شود تا کنترل بیشتری بر روند ری – فتج شدن اسکریپت‌ها از شبکه داشته باشید. همچنین این کار باعث ایجاد یک استراتژی عالی می‌شود. در این استراتژی شما می‌توانید درخواست‌هایی که از یک منبع غیرضروری شخص ثالث به وجود می‌آید را تا زمانی که صفحه به لحظه کلیدی برسد، محدود می‌کند. در ضمن شما می‌توانید از Preconnect برای ایجاد یک کاکنش سریع استفاده کنید تا هزینه شبکه شما تا حد امکان کاهش پیدا کند.

اگر به مطالعه در این زمینه علاقه‌مندید، پیشنهاد می‌کنیم از مجموعه مقالات Core web vitals منتوریکس دیدن کنید. همچنین شما می‌توانید برای کسب‌وکارتان از منتوریکس مشاوره دیجیتال مارکتینگ و سئو سایت دریافت کنید. برای دریافت این مشاوره با ما تماس بگیرید.

تحریریه منتوریکس

این مطلب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.

انتشار مطالب فوق تنها با ذکر مرجع به همراه لینک وب‌سایت منتوریکس مجاز می‌باشد.
لطفا به حقوق هم احترام بگذاریم.