قسمت ۱۶ - بهینه‌سازی Third-party ها

نحوه ی load  کردن منابع از خارج سرور بدون آسیب به سرعت و راندمان سایت

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

Async or Defer Java script

اگر شما جاوا اسکریپت را Async کنید فراخوانی به صورت زیر انجام می‌شود. همانطور که در عکس زیر می‌بینید همزمان با Pasring  کد Html در قسمت جاوا اسکریپت نیز عملیات Fetch رخ می‌دهد. به محض پایان یافتن عملیات Fetch کد Html بلاک می‌شود وتازمانی که جاوا سکریپت مرحله Execute را به پایان برسد همچنان در حالت بلاک قرار دارد. پس از پایان یافتن جاوا اسکریپت مابقی Parsing در کد Html  رخ می‌دهد. این یک راهکار برای موازی کردن Fetch , Parsing است اگر از Async استفاده نشود هر دو بلاک می‌شوند و باعث افزایش مدت زمان RBT می‌شود.

روش بعدی Defer است که در انتهای Body فراخوانی کنیم یا در تگ Head از Attribute به نام Defer استفاده کنیم. همانطور که در عکس زیر مشاهده می‌کنید در حالت Defer به محض پایان یافتن parsing کد جاوا اسکریپت در مرحله Execute قرار می‌گیرد و مرحله Fetch با Parsing  کد Html همزمان انجام می‌شود که نسبت به روش قبلی بهتر است. البته هر کدام از این دو روش نسبت به یکدیگر مزایا و معایب خود را دارند.

Preconnect or Dns-Prefetch

اگر کد جاوا اسکریپت شما از یک سایت دیگر به طور مثال سایت Example.com لود می‌شود آن سایت را به صورت قطعه کدهای زیر در تگ Head فراخوانی کنید.

Lazy-Load thir-party resource

در این روش برای تصاویر از loading=lazy استفاده میکنیم برای جاوا اسکریپت هم کد دارد که در مقالات بعدی توضیح داده می‌شود.

Switch to Http/2 server

از پروتکل Http ورژن 2  استفاده کنیم که در مقالات بعدی آموزش داده می‌شود.

بارگذاری منابع از خارج سرور بدون آسیب به سرعت

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

بارگذاری منابع خارج از سرور چیست؟

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

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

مشکل بارگذاری منابع داخل سایت چیست؟

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

یکی دیگر از مشکلاتی که بارگذاری منابع از سرور دیگر دارد، این است هنگامی که منابع روی سایت دیگری میزبانی می‌شوند، قابلیت کش شدن توسط مرورگر را ندارند. در این صورت هر بار که کاربر وارد سایت می‌شود، باید منتظر باشد تا آن منابع از طریق سرور میزبانی بارگذاری شوند و و این مسئله بارگذاری را طولانی می‌کند. حال گاهی اوقات مرورگر برای بارگذاری این منابع، بارگذاری منابع اصلی سایت که روی سرور میزبانی نمی‌شوند را با مشکل مواجه می‌کند! در چنین شرایطی کاربر باید منتظر باشد تا سایت به صورت کامل بارگذاری شود که در بسیاری از مواقع، کاربر سایت را بسته و به سراغ سایت دیگری می‌رود. بنابراین اگر نمی‌خواهید کاربران و مشتریان کسب‌وکارتان را به همین سادگی از دست بدهید، باید دست به کار شوید و چنین منابعی را در سرور دیگری بارگذاری کنید. چند نمونه از چنین ابزارهایی عبارتند از:

·        تبلیغات بنری

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

·        ابزارهای هدف‌گذاری مجدد

یکی دیگر از ابزارهایی که برای استفاده از آن باید کد مربوط به آن را در سایت قرار دهید، ابزار هدف‌گیری مجدد است! هدف‌گیری مجدد به این معنی است که بتوانید بنر تبلیغاتی سایت خود را به کاربرانی نشان دهید که قبلاً در سایت شما حضور داشته‌اند تا بتوانید شانس خود را برای فروش افزایش دهید. در واقع برای استفاده از این ابزار، باید کد مربوط به آن را در سایت خود قرار دهید تا بتوانید ریتارگتینگ یا همان هدف‌گذاری مجدد را به راحتی انجام دهید. این مسئله هم می‌تواند سرعت بارگذاری سایت شما را با مشکل مواجه کند!

·        ابزارهای آنالیز سایت

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

ابزارهای دیگری هم وجود دارند که نیازمند درج کد آن‌ها در سایت خود هستید تا بتوانید از قابلیت‌های آن به خوبی استفاده کنید. یکی از مواردی که به ذهن کاربر می‌آید، این است که این ابزارها را از سایت خود حذف کنیم! شاید در قدم اول منطقی به نظر برسد اما هنگامی که متوجه شوید با حذف کد این ابزارها، امکانات و قابلیت‌های آن را از دست می‌دهید دیگر این فکر منطقی نیست. بنابراین شما باید به دنبال راه‌کار جایگزین باشید که در ادامه به بررسی آن می‌پردازیم.

راه‌کارهای مناسب برای بارگذاری منابع خارج از سرور بدون آسیب به سرعت سایت

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

Defer کردن جاوا اسکریپت

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

·        Async کردن جاوا اسکریپت

یکی از راه‌های تخصصی این است که کدهای جاوا اسکریپت خود را Async کنید! در واقع در این روش فراخوانی به این صورت خواهد بود که ابتدا کدهای اچ تی ام ال سایت بارگذاری می‌شود و در همین زمانی که HTML در حال بارگذاری است، کدهای js هم فراخوانی می‌شوند. در این روش به محض آن که کدهای جاوا اسکریپت بارگذاری شدند، کدهای HTML دیگر بارگذاری نمی‌شوند که به آن رندر بلاک گفته می شود. این مسئله باعث می‌شود که برخی سایت‌ها با مشکل مواجه شوند! دلیل آن هم این است که فرض کنید کدهای جاوا اسکریپت در بالای سایت قرار دارند که پس از بارگذاری آن، دیگر کدهای html شامل بخش‌های دیگر صفحه نمایش داده نمی‌شوند و همین مسئله باعث می‌شود تا سایت بارگذاری نشود. البته پس از مدتی که رندر بلاک به پایان می‌رسد، قسمت‌های دیگر html هم بارگذاری می‌شوند اما میان بارگذاری و نمایش آن به کاربر وقفه می‌افتد که مناسب نیست.

·        استفاده از Preconnet

در این روش شما می‌توانید جاوا اسکریپت را که از سایت دیگری بارگذاری می‌کنید، استفاده از روش Preconnet به شما کمک می‌کند تا بتوانید قبل از بارگذاری سایت، این فایل را هم بارگذاری کنید تا در زمان بارگذاری سایت حساب نشود! این مسئله به افزایش سرعت بارگذاری و کاهش مدت زمانی که کاربر باید منتظر بارگذاری سایت بماند، کمک زیادی می‌کند.

·        استفاده از Lazy Load

یکی دیگر از قابلیت‌های عالی برای بارگذاری بهتر کدهای جاوا اسکریپت، استفاده از قابلیت Lazy Loadاست که با استفاده از آن می‌توانید کدهای جاوا اسکریپت را بر اساس نیاز فراخوانی کنید و این قابلیت با تگ های مربوط به بارگذاری تنبل یا Lazy Load قابل استفاده هستند.

·        استفاده از http2

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

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

آیا می‌توانیم منابع را به جای سرور خارج، از سرور خودمان بارگذاری کنیم؟

یکی دیگر از ایده‌هایی که ممکن است برای رفع مشکل بارگذاری منابع از سرورخارجی به ذهن کاربران برسد، این است که بیاییم و منابع را در سرور خود قرار دهیم! فرض کنید شما بخواهید جاوا اسکریپت مربوط به گوگل آنالیتیکس را در سرور خود قرار دهید. در قدم اول شما باید وارد سرور کد شوید و بارگذاری آن را از طریق سرور خود انجام دهید. این مسئله یک مشکل اساسی دارد! مشکل آن هم این است که این منابع اطلاعات رد و بدل می‌کنند و انتقال آن به سرور خودتان ممکن نیست.

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

نتیجه‌گیری

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