دلیل کندی در پیشخوان و وب‌سایت در زمان قطعی اینترنت

دلیل کندی در پیشخوان و وب‌سایت در زمان قطعی اینترنت

در مواقعی که دسترسی به اینترنت بین‌الملل با مواردی مانند محدودیت، اختلال یا ایزوله‌ سازی (Iran Access) روبه‌رو است، وضعیتی که بین کاربران با عنوان «ملی شدن اینترنت» شناخته شده است، یکی از مهم‌ترین چالش‌های فنی برای وب‌سایت‌ها محسوب‌ می‌شود. این موضوع به‌ ویژه در وب‌سایت‌های وردپرسی از اهمیت بیش‌تری برخوردار می‌باشد، چون هسته وردپرس، قالب‌ها و بسیاری از افزونه‌ها، نیاز به سرویس‌ها و منابع خارجی دارند.

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

تکرار این وضعیت در قسمت‌های مختلف سایت، از مرورگر کاربر (Frontend) تا پیشخوان وردپرس و پردازش‌های سمت سرور (Backend) می‌تواند سبب افزایش قابل توجه زمان بارگذاری صفحات، مصرف بیش‌ از حد منابع سرور، و در موارد حادتر، منجر به از دسترس خارج شدن کامل وب‌سایت شود؛ بنابراین، شناخت دقیق درخواست‌ها و اجرای سیاست‌های کنترلی برای مدیریت یا حذف وابستگی‌های غیرضروری، علاوه بر این که یک اقدام مهم در بهینه‌سازی عملکرد وب‌سایت است، در شرایط خاص به عنوان زیرساختی برای حفظ پایداری و در دسترس‌ بودن سرویس عمل خواهد کرد.

پیشنهاد نویسنده: ابزارهای توسعه در زمان قطعی اینترنت

چرا هنگام قطع اینترنت، سرعت پیشخوان وردپرس و سایت کاهش می‌یابد؟

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

درخواست خارجی (External Request) سایت چیست؟

زمانی که از «درخواست‌های خارجی وب‌سایت» صحبت می‌کنیم منظورمان درخواست‌هایی است که سایت به سرورهای دیگر منتقل می‌کند.

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

مدیریت درخواست‌های خارجی در سمت فرانت

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

هر فایل CSS ،JavaScript، فونت، تصویر یا اسکریپتی که از دامنه‌ای خارج از سرور اصلی سایت لود شود، یک درخواست خارجی (External Request) به حساب می‌آید.

در شرایط عادی، این درخواست‌ها در ‌مدت زمان کوتاهی پاسخ داده می‌شوند و تأثیر به خصوصی بر روی سرعت بارگذاری صفحه یا تجربه کاربری (UX) ندارند.

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

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

به همین علت، اولین و مهم‌ترین گام برای مدیریت و کاهش وابستگی به منابع خارجی، شناسایی دقیق این درخواست‌ها است.

پیشنهاد نویسنده: مهارت‌های مورد نیاز طراح تجربه کاربری UX

نحوه شناسایی درخواست‌های خارجی در مرورگر

Developer Tool مرورگر یکی از بهترین ابزارها برای شناسایی درخواست‌های خارجی در لایه فرانت است. این ابزار کمک می‌کند تا تمام درخواست‌هایی را که در زمان بارگذاری یک صفحه ارسال می‌شوند، بتوان بررسی و مشاهده کرد. برای این کار مراحل زیر را طی کنید:

ابتدا وارد صفحه مدنظرتان در وب‌سایت شوید و روی صفحه راست‌ کلیک و گزینه Inspect را انتخاب یا ازکلیدهای میانبر زیر استفاده نمایید.

اگر که کاربر ویندوز یا لینوکس هستید با:

F12 یا Ctrl + Shift + I

اگر هم که کاربر مک هستید با:

Cmd + Option + I

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

برای شناسایی درخواست‌های خارجی در بخش Network مرورگر، مهم‌ترین معیار بررسی آدرس (URL) هر Asset (محتوای فراخوانی شده توسط مرورگر) است. اگر دامنه موجود در آدرس آن درخواست، با دامنه اصلی سایت شما متفاوت بود، آن درخواست، خارجی (External Request) محسوب می‌شود. این روش در تمامی مرورگرها معتبر است و به ساختار ستون‌های ابزار توسعه وابستگی ندارد.

در برخی از مرورگرها مانند Chrome، ستون Initiator به ما می‌گوید که هر درخواست توسط کدام فایل یا اسکریپت ایجاد شده است؛ اما نحوه نمایش این ستون در مرورگرهای مختلف (مانند مرورگر Firefox) یکسان نیست و ممکن است اطلاعات متفاوتی مانند stack trace یا نوع فایل نمایش داده شود. بنابراین برای تشخیص خارجی بودن درخواست، ملاک اصلی، بررسی دامنه در URL است.

برای دسترسی به URL هر درخواست در مرورگر کروم، کافی است روی درخواست در ستون Name کلیک کنید تا پنجره جدید زیر باز شود.

در بخش Header به قسمت Request URL دقت و آدرس آن درخواست را چک کنید.

برای دسترسی به URL هر درخواست در مرورگر فایرفاکس، در تب Network بر روی درخواست کلیک کنید تا صفحه زیر برایتان باز شود. در بخش مشخص شده در تصویر زیر می‌توانید URL درخواست را بررسی کنید.

در صورتی که وضعیت یک درخواست در ستون Status در حالت Pending باقی ماند، معمولاً نشان‌ دهنده اختلال در دسترسی به آن سرویس خارجی و مشکل درباره با آن منبع است.

رایج‌ترین درخواست‌های خارجی در سایت‌های وردپرسی

همانطور که گفتیم درخواست‌های خارجی در سایت‌های وردپرسی معمولا برای بارگذاری فونت، اسکریپت، کتابخانه‌ها یا ارسال داده‌های آماری به کار برده می‌شوند. در ادامه، رایج‌ترین درخواست‌های خارجی (External Request) را بررسی می‌کنیم:

درخواست‌های Gravatar در مرورگر

یکی از رایج‌ترین درخواست‌های خارجی در سایت‌های وردپرسی، بارگذاری تصاویر آواتار کاربران از سرویس Gravatar است. وردپرس به‌ صورت Default برای نمایش تصویر نویسندگان، کاربران و آواتار دیدگاه‌ها، از سرویس Gravatar استفاده می‌کند و این تصاویر را از دامنه‌هایی مانند gravatar.com دریافت می‌کند. این فرآیند بدون نیاز به تنظیمات خاص و به ‌صورت خودکار در هسته وردپرس فعال است.

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

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

نکته مهم این است که این درخواست‌ها حتی در صورتی که مدیر سایت مستقیماً از Gravatar به کار نبرده باشد هم فعال هستند؛ زیرا این قابلیت به‌ صورت پیشفرض در وردپرس وجود دارد. به همین علت، در مواقعی که دسترسی به نت بین‌الملل محدود یا ناپایدار است، غیرفعال‌ کردن Gravatar می‌تواند تأثیر قابل‌ توجهی در بهبود سرعت بارگذاری صفحات داشته باشد.

روش غیرفعال‌سازی Gravatar در وردپرس

برای غیرفعال‌ کردن گراواتار (Gravatar) در وردپرس، راه خیلی آسانی را پیش رو دارید:

• به پیشخوان وردپرس بروید.
• به تنظیمات –> گفت‌وگو (Discussion) بروید.
• در بخش «نیم‌رخ‌ها»، تیک گزینه نمایش نیم‌رخ‌ها را غیرفعال کنید.
• تغییرات را ذخیره کنید.

با این راه، وردپرس دیگر هیچ درخواستی به Gravatar ارسال نخواهد کرد و وابستگی به این سرویس خارجی متوقف می‌شود.

درخواست‌های Google Fonts در وردپرس

در بسیاری از وب‌سایت‌های وردپرسی، فونت‌های سایت از طریق سرویس Google Fonts بارگذاری می‌شوند و مرورگر کاربر برای دریافت فایل‌های CSS و فونت، درخواست‌هایی به منابع خارجی مثل fonts.googleapis.com ارسال می‌کند. این درخواست‌ها معمولاً توسط قالب وردپرس، افزونه‌ها یا کتابخانه‌های رابط کاربری به‌ شکل خودکار ایجاد می‌شوند.

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

این اتفاق سرعت بارگذاری صفحه را خیلی کاهش می‌دهد و در برخی از موارد سبب تغییر ناگهانی ظاهر متن (Font Swap)، یا نمایش ناهماهنگ عناصر سایت می‌شود.

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

غیرفعال‌سازی Google Fonts از تنظیمات Elementor

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

روش غیرفعال‌ کردن Google Fonts از تنظیمات افزونه المنتور

• وارد پیشخوان وردپرس بشوید و به مسیر المنتور –> تنظیمات –> پیشرفته بروید.
• در بخش فونت‌های گوگل، از منوی کشویی غیرفعال را بزنید.
• تغییرات را ذخیره کنید.

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

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

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

درخواست‌های Google Tag Manager در وردپرس

Google Tag Manager به شما اجازه می‌دهد تا اسکریپت‌ها و ابزارهای مختلف مانند Google Analytics یا ابزارهای تبلیغاتی و بازاریابی را روی سایت نصب نمایید.

استفاده از سرویس Google Tag Manager (GTM) در سایت‌های وردپرسی، یک درخواست خارجی (External Request) ایجاد می‌کند، چون وقتی کاربر از سایت بازدید می‌کند، مرورگر درخواست‌هایی به سرور GTM ارسال می‌کند تا کدهای پیکربندی شده بارگذاری و اجرا شوند.

در شرایط اختلال یا محدودیت نت بین‌الملل، درخواست‌هایی که از سمت مرورگر برای بارگذاری و اجرای تگ‌ها و اسکریپت‌ها به دامنه‌های خارجی مانند googletagmanager.com ارسال می‌شوند، در وضعیت Pending می‌مانند یا با Timeout مواجه خواهند شد.

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

مدیریت درخواست‌های خارجی Google Tag Manager

در این بخش راهی برای مدیریت و جلوگیری از کندی یا خطا در سایت به علت درخواست‌های خارجی Google Tag Manager وقتی دسترسی به نت بین‌الملل و سرویس‌های گوگل قطع است، را توضیع می‌دهیم:

غیرفعال کردن موقت کد GTM

سریع‌ترین شیوه برای جلوگیری از ارسال درخواست‌های GTM در شرایط قطعی نت بین الملل، غیرفعال کردن موقت کد GTM می‌باشد. برای این کار کافی است قطعه کد GTM را که در head قالب سایت یا فایل HTML قرار دارد پیدا کرده و آن را بین کامنت‌های HTML (<!– code –>) قرار بدهید.

با این شیوه، مرورگر هیچ درخواستی به googletagmanager.com ارسال نمی‌کند و صفحات بدون Pending Requests یا Timeout سریع و پایدار لود می‌شوند و تجربه کاربری را کند نمی‌کند.

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

پیامدهای Pending شدن درخواست‌ها در شرایط محدودیت اینترنت

در شرایط محدودیت یا قطع نت بین‌الملل، زمانی مرورگر نمی‌تواند به یک سرویس خارجی مانند CDN ،Google Fonts یا Google Tag Manager وصل شود، درخواست‌های خارجی در حالت Pending می‌مانند و اتفاقات زیر برای سایت می‌افتد:

• کندی بارگذاری صفحات (Page Load Delay).
• افزایش مصرف منابع سرور و مرورگر.
• خطاهای Timeout.
• اجرای ناقص اسکریپت‌ها.
• تجربه کاربری منفی.

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

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

• استفاده از افزونه‌های وردپرس: از افزونه‌هایی که به‌ صورت خودکار منابع خارجی مثل Google Fonts یا کتابخانه‌های JS از CDN را غیرفعال یا جایگزین می‌کنند، استفاده نمایید.
• استفاده از تنظیمات داخلی قالب یا پیج بیلدرها: در این شیوه از گزینه‌هایی برای غیرفعال کردن فونت‌ها، اسکریپت‌ها و سایر منابع خارجی استفاده می‌شود. همانطور که در قسمت‌های قبلی توضیع دادیم، این شیوه می‌تواند در تنظیمات المنتور باشد یا از قطعه کدی برای غیر فعال سازی یک اسکریپت.
• جایگزینی فایل‌ها با نسخه‌های محلی (Self-Hosting): در این شیوه، باید فایل‌های JS ،CSS یا فونت‌هایی که معمولاً از CDN بارگذاری می‌شوند، دانلود و روی هاست سایت میزبانی شوند تا با اعمال تنظیمات لازم در اسکریپت وب‌سایت، سایت بدون ارسال درخواست به منابع خارجی و بدون کندی یا Pending Request لود شود.

مدیریت درخواست‌های خارجی در سمت بک‌اند از طریق wp-config.php

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

معمولا درخواست‌های خارجی سمت بک‌اند شامل:

• بررسی آپدیت هسته.
• بررسی قالب و افزونه‌ها.
• License Check افزونه‌های تجاری.
• فراخوانی APIهای خارجی.
• بررسی Webhookها.

هستند و در شرایط محدودیت یا قطع نت بین‌الملل، می‌توانند سبب Timeout، اشغال Workerهای سرور و کندی یا توقف پردازش صفحات شوند. مدیریت هوشمندانه این درخواست‌ها در لایه بک‌‌اند، به ویژه از طریق فایل wp-config.php، کلید پایداری سایت در زمان اینترنت ملی است.

تعریف درخواست‌های خروجی سرور

درخواست‌های خروجی سرور (Outbound Requests) به هر ارتباطی که سرور سایت با دامنه‌ها یا سرویس‌های خارجی برقرار می‌کند، گفته می‌شود. این درخواست‌ها معمولاً توسط توابع PHP مانند wp_remote_get() و wp_remote_post() انجام می‌شوند و در شرایط محدودیت اینترنت، پردازش‌های php را مختل یا کند می‌کنند.

مسدود کردن درخواست‌های خارجی با WP_HTTP_BLOCK_EXTERNAL

با فعال نمودن این گزینه در فایل wp-config.php، وردپرس اجازه نمی‌دهد درخواست‌های خارجی به سرورهای دیگر ارسال شوند:

define('WP_HTTP_BLOCK_EXTERNAL', true);

تعریف لیست سفید با WP_ACCESSIBLE_HOSTS

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

define('WP_ACCESSIBLE_HOSTS', '.zarinpal.com, .shaparak.ir, torob.com, YOURDOMAIN.COM');

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

غیرفعال‌ کردن Auto Update

برای غیرفعال کردن آپدیت خودکار هسته وردپرس، می‌توانید قطعه کد زیر را کپی کرده و از آن استفاده کنید:

define('AUTOMATIC_UPDATER_DISABLED', true);
define('WP_AUTO_UPDATE_CORE', false);

با این شیوه، ارسال درخواست‌های متعدد هسته وردپرس به سمت API‌های این CMS برای بررسی نسخه افزونه‌ها و قالب‌های سایت متوقف می‌شوند.

جایگزینی Cron Jobهای وابسته به سرورهای بیرون از کشور

وردپرس برای اجرای کارهای زمان‌ بندی شده (مثل انتشار پست یا چک کردن آپدیت) از سیستم WP-Cron استفاده می‌نماید. این سیستم با هر بار بازدید از سایت، یک درخواست HTTP داخلی یا خارجی به سایت ارسال می‌کند. در شرایط اختلال شبکه، این درخواست‌ها ممکن است با خطا مواجه شوند.

به صورت کلی، موضوع Cron Jobها تنها در شرایطی برای بحث بررسی درخواست‌های خارجی مهم هستند که خودتان اقدام به تعریف یک کرون که درخواستی به سرورهای بیرون از ایران ارسال می‌کند، کرده باشید؛ به غیر این حالت، نگران نباشید.

راهکار حرفه‌ای برای مدیریت Cron سایت از سمت پنل کاربری سرویس میزبانی

• ابتدا WP-Cron داخلی هسته وردپرس را در wp-config.php غیرفعال نمایید.

define('DISABLE_WP_CRON', true);

• یک System Cron در پنل DirectAdmin تعریف نمایید تا مستقیماً فایل PHP را بدون نیاز به درخواست HTTP اجرا نماید:

/usr/bin/wget -O /dev/null https://domain.com/wp-cron.php >/dev/null 2>&1

در دستور بالا، لازم است که آدرس دامنه سایت خود را به جای عبارت “domain.com” بگذارید.

کش کردن پاسخ‌های API (API Caching)

برای APIهای خارجی (مانند قیمت ارز یا وضعیت آب و هوا) باید از Transients API به کار ببرید تا پاسخ‌ها در دیتابیس ذخیره شوند و در زمان قطع اینترنت، سایت همچنان داده‌های قدیمی را نمایش دهد. به عنوان مثال:

$weather = get_transient('weather_data');

if (false === $weather) {

$response = wp_remote_get('https://api.external.com/data');

if (!is_wp_error($response)) {

$weather = wp_remote_retrieve_body($response);

set_transient('weather_data', $weather, 12 * HOUR_IN_SECONDS);

}

}

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

جمع بندی

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

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