چرا سایت من روی موبایل کند است ولی روی کامپیوتر خیلی خوب لود می‌شود؟

این مشکل معمولاً به این معنی نیست که خود موبایل ضعیفه؛ بیشتر وقت‌ها موبایل هم سرعت اینترنت پایین‌تری داره و هم پردازش JavaScript سنگین برایش پرهزینه‌تره. در سایت‌های React/Next.js، چند ثانیه صفحه سفید می‌تونه از چند عامل مختلف ایجاد بشه.

اول از همه JavaScript سنگین رو بررسی کنید. اگر کامپوننت‌های زیادی Client Component باشن، کد زیادی باید روی موبایل دانلود، parse و اجرا بشه و تا قبل از تمام شدن این مرحله ممکنه کاربر صفحه کاملی نبینه. استفاده زیاد از useEffect، کتابخانه‌های سنگین، اسکریپت‌های تبلیغاتی و کامپوننت‌هایی که بدون نیاز واقعی use client دارن هم می‌تونه این وضعیت رو بدتر کنه. Next.js هم روی کم کردن JavaScript سمت کلاینت و استفاده از Server Components تأکید می‌کنه. 

عکس‌ها هم یکی از متهم‌های اصلی هستن. عکس بزرگ، مخصوصاً اگر بالای صفحه باشه، می‌تونه Largest Contentful Paint رو به‌شدت عقب بندازه. بهتره تصاویر با next/image، اندازه مناسب و فرمت‌هایی مثل WebP یا AVIF سرو بشن و تصاویر پایین صفحه هم lazy load بشن. 

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

برای پیدا کردن علت، بهترین کار اینه که یک بار صفحه رو در Chrome DevTools > Lighthouse با شبیه‌سازی موبایل اجرا کنید و در تب Performance ببینید زمان صرف چه چیزی می‌شه. اگر زمان زیادی در JS execution می‌ره، مشکل بیشتر سمت جاوااسکریپته؛ اگر LCP بالا باشه، تصاویر یا محتوای اصلی مظنون هستن؛ و اگر زمان زیادی قبل از شروع نمایش محتوا دارید، باید Server Response / TTFB رو بررسی کنید.

یک نکته مهم هم وجود داره: صفحه سفید چند ثانیه با «کند بودن یک عکس» فرق داره. اگر واقعاً هیچ محتوایی نمایش داده نمی‌شه و بعد ناگهان صفحه ظاهر می‌شه، من اول از همه Client Componentهای زیاد، JavaScript اولیه و درخواست‌هایی که قبل از رندر شدن UI منتظر می‌مونن رو بررسی می‌کنم، نه صرفاً عکس‌ها.

برای بهبود سرعت موبایل معمولاً این ترتیب بیشترین اثر رو داره: کم کردن Client Componentها → کاهش JavaScript اولیه → بهینه‌سازی تصویر اصلی → کم کردن API/queryهای قبل از نمایش → بررسی اسکریپت‌های جانبی.