در این وبلاگ، با دلایل کند شدن سایت در تلفنهای همراه و راهکارهای عملی برای برطرف کردن مشکلات رایج سرعت در موبایل آشنا میشوید. در این مقاله به موضوعاتی مثل تصاویر سنگین، جاوااسکریپت بیشازحد، سرورهای کند، منابعی که مانع رندر شدن صفحه میشوند و تغییرات ناگهانی طرح (Layout Shifts) میپردازیم و روشهایی برای بهبود عملکرد سایت در موبایل با ابزارهایی مانند SpeedyGo معرفی میکنیم.
اگر سایت شما روی رایانه رومیزی عملکرد خوبی دارد، اما در موبایل کند است، نگران نباشید؛ این اتفاق چندان عجیب نیست. بهینهسازی عملکرد در موبایل معمولاً چالشبرانگیزتر است، چون تلفنهای همراه قدرت پردازشی کمتری نسبت به لپتاپها دارند، شبکههای موبایل معمولاً کندتر هستند و مرورگرهای موبایل نسبت به صفحات سنگین حساسیت بیشتری نشان میدهند.
بسیاری از افراد فقط تلاش میکنند یک امتیاز مشخص مربوط به سرعت موبایل را افزایش دهند و بعد، بدون بررسی دقیق، تغییرات مختلف و تصادفی انجام میدهند. این روش هم زمانبر است و هم معمولاً نتیجه مطلوبی ندارد. بهتر است ابتدا موانع واقعی را شناسایی کنید و بعد سراغ رفع مشکلاتی بروید که مستقیماً روی تجربه کاربران موبایل تأثیر میگذارند.
اول، عملکرد موبایل را بهدرستی اندازهگیری کنید
قبل از اینکه هر تغییری در سایت ایجاد کنید، باید دقیقاً بدانید چه چیزی را بررسی میکنید و مشکل اصلی کجاست.
شاخصهای اصلی تجربه وب (Core Web Vitals) بر اساس دادههای واقعی کاربران یا همان دادههای میدانی تعریف میشوند و صرفاً به آزمایشهای آزمایشگاهی متکی نیستند. (Google for Developers)
ابزار PageSpeed Insights هم دادههای آزمایشگاهی، یعنی شبیهسازی Lighthouse، و هم دادههای میدانی مربوط به تجربه واقعی کاربران را نمایش میدهد. این دو نوع داده ممکن است تفاوت قابلتوجهی با یکدیگر داشته باشند؛ بنابراین نباید تصور کنید که نتیجه یک تست آزمایشگاهی همیشه دقیقاً نشاندهنده تجربه واقعی کاربران است. (web.dev)
چه کاری انجام دهید:
• عملکرد سایت را در PageSpeed Insights و در حالت موبایل بررسی کنید.
• گزارش Core Web Vitals را در Google Search Console بررسی کنید تا وضعیت سایت را بر اساس دادههای میدانی ببینید.
• چند الگوی مهم از صفحات سایت را با هم مقایسه کنید، نه فقط صفحه اصلی را. برای مثال، پست وبلاگ، صفحه خدمات یا صفحه محصول را نیز بررسی کنید؛ بهخصوص اگر از WooCommerce استفاده میکنید.
• اگر دادههای میدانی ضعیف باشند، یعنی کاربران واقعی سایت شما واقعاً با مشکلات عملکردی مواجه هستند. اگر دادههای آزمایشگاهی ضعیف باشند، فرصتهای مشخصی برای عیبیابی و بهینهسازی در اختیار دارید.
رایجترین دلایل کندی سایت در موبایل (و راهحلهای مربوطه)
دلیل ۱: تصاویر برای موبایل بیش از حد سنگین هستند
تصاویر معمولاً یکی از سنگینترین بخشهای یک صفحه وب هستند و بهینهسازی آنها میتواند تأثیر قابلتوجهی روی عملکرد سایت داشته باشد. (web.dev)
• بارگذاری تصاویر محصول با وضوحی بالاتر از چیزی که واقعاً موردنیاز است.
• تنظیم اندازه تصاویر متناسب با حداکثر ابعادی که واقعاً در صفحه نمایش داده میشوند.
• استفاده از فرمتهای مدرن در صورت امکان. برای بیشتر سایتها، WebP یک گزینه کاربردی و مناسب برای استفاده بهعنوان فرمت پیشفرض است.
• اطمینان از اینکه تصاویر بهصورت واکنشگرا (Responsive) ارائه میشوند تا تلفنهای همراه مجبور نباشند نسخهای با اندازه مناسب رایانه رومیزی را دانلود کنند.
• به مقاله اختصاصی خود درباره WebP لینک دهید و آن را بهعنوان یکی از سادهترین راهکارهای بهینهسازی تصاویر معرفی کنید.
دلیل ۲: جاوااسکریپت بیش از حد در موبایل (INP بهشدت تحت فشار قرار میگیرد)
یکی از شاخصهای اصلی تجربه وب، INP یا پاسخگویی صفحه است. جاوااسکریپت سنگین و وظایف طولانی روی رشته اصلی اجرا (main thread) میتوانند پاسخگویی سایت را بهخصوص در تلفنهای همراه ضعیفتر، بهشدت کاهش دهند. (Google for Developers)
• اسلایدرها، انیمیشنها و صفحهسازهایی که حجم زیادی جاوااسکریپت اجرا میکنند.
• ویجتهای چت و پاپآپهایی که بلافاصله بعد از بارگذاری صفحه اجرا میشوند.
• اسکریپتهایی که در تمام صفحات سایت بارگذاری میشوند، حتی در صفحاتی که اصلاً به آنها نیازی ندارند.
• اسکریپتها را فقط در صفحاتی بارگذاری کنید که واقعاً به آنها نیاز دارند.
• اجرای اسکریپتهای غیرضروری را به تعویق بیندازید، البته بدون اینکه عملکرد اصلی سایت را مختل کنید.
• تعداد اسکریپتهای شخص ثالث را در موبایل کاهش دهید یا آنها را بعد از تعامل کاربر بارگذاری کنید.
واقعیتسنجی: اگر دائماً ابزارها و اسکریپتهای شخص ثالث جدیدی به سایت اضافه کنید، هیچ افزونهای برای افزایش سرعت نمیتواند بهتنهایی مشکل را حل کند. در واقع، با هر ابزار اضافی، حجم و پیچیدگی صفحه را بیشتر میکنید.
دلیل ۳: CSS و جاوااسکریپت مسدودکننده رندر، زمان اولین نمایش را به تأخیر میاندازند (LCP در موبایل رنج میبرد)
منابع مسدودکننده رندر میتوانند نمایش محتوای معنادار صفحه را به تأخیر بیندازند و این موضوع اغلب روی LCP تأثیر منفی میگذارد. (Google for Developers)
• بستههای بزرگ CSS که قبل از رندر شدن صفحه باید بارگذاری شوند.
• هنگام ترکیب فایلها احتیاط کنید؛ این کار ممکن است در بعضی سایتها مفید باشد و در بعضی شرایط باعث ایجاد مشکل شود.
• فایلهایی را که مشکلساز هستند از فرایند ترکیب خارج کنید، بهجای اینکه تنظیمات سختگیرانه را برای تمام فایلها و صفحات سایت اعمال کنید.
• به مقاله اختصاصی خود درباره منابع مسدودکننده رندر لینک دهید.
دلیل ۴: تغییرات طرح (Layout Shifts) باعث میشوند موبایل «خراب» به نظر برسد (مشکلات CLS)
CLS یکی از شاخصهای اصلی تجربه وب است. وقتی محتوای صفحه هنگام بارگذاری جابهجا میشود، تجربه کاربر ضعیفتر شده و کار با سایت آزاردهنده میشود. (Google for Developers)
• تبلیغات یا المانهای تعبیهشدهای که با تأخیر بارگذاری میشوند و محتوای موجود در صفحه را جابهجا میکنند.
• فضای موردنیاز برای المانهای تعبیهشده و ظروف تبلیغاتی را از قبل رزرو کنید.
• بعد از بارگذاری صفحه، بنرهای جدید را بالای محتوای موجود اضافه نکنید.
• پاپآپها را بهخصوص در نسخه موبایل با دقت بیشتری کنترل کنید.
دلیل ۵: زمان پاسخدهی کند سرور، عملکرد موبایل را بدتر میکند
پاسخدهی کند سرور روی همه کاربران تأثیر منفی دارد، اما کاربران موبایل معمولاً به دلیل تأخیر بیشتر شبکه، این مشکل را بیشتر احساس میکنند.
• استفاده از هاستینگ ضعیف یا سرور اشتراکی بیشازحد شلوغ.
• استفاده از صفحات پویا بدون کش که برای تولید هر صفحه، عملیات سنگین روی پایگاه داده انجام میدهند.
• فعال کردن کش کامل صفحه برای صفحاتی که امکان کش شدن دارند.
• استفاده از استثناهای مناسب برای صفحات پویا، بهخصوص در سایتهایی که از WooCommerce استفاده میکنند.
• استفاده از کش شیءگرا (Object Caching) برای سایتهایی که عملیات سنگین پایگاه داده دارند.
اگر از WooCommerce استفاده میکنید، این موضوع را جدی بگیرید. بهینهسازی WooCommerce معمولاً مجموعهای از اقدامات مانند استراتژی مناسب کش، بهینهسازی تصاویر، نگهداری و بهینهسازی پایگاه داده، کوچکسازی فایلها (minification) و استفاده از شبکه توزیع محتوا (CDN) را شامل میشود. (The WooCommerce Developer Blog)
دلیل ۶: تعداد درخواستهای زیاد (شبکههای موبایل جریمه میشوند)
شبکههای موبایل معمولاً تأخیر بیشتری دارند. به همین دلیل، تعداد زیادی درخواست کوچک میتواند نسبت به تعداد کمتری درخواست بهینهشده، عملکرد کندتری ایجاد کند.
• فایلها را کوچکسازی (minify) کنید و در جاهایی که واقعاً مفید است، آنها را بهصورت هوشمندانه ترکیب کنید.
دلیل ۷: شما صفحات اشتباهی را تست میکنید
یکی از اشتباهات رایج این است که افراد فقط صفحه اصلی را بهینه میکنند، در حالی که صفحات دیگری ممکن است نقش بسیار مهمتری در جذب کاربر یا ایجاد تبدیل داشته باشند.
• ابتدا تغییراتی را اعمال کنید که بیشترین تأثیر را روی صفحات مهم و ارزشمند سایت شما دارند.
چکلیست عملی برای رفع مشکلات سرعت در موبایل (به ترتیب صحیح)
• دادههای میدانی و آزمایشگاهی را در PageSpeed Insights و Search Console با یکدیگر مقایسه کنید. (Google for Developers)
• ابتدا سراغ بزرگترین تصاویر بروید و اندازه آنها را تنظیم، فشرده و در صورت امکان با یک فرمت مدرن ارائه کنید. (web.dev)
• منابع مسدودکننده رندر را کاهش دهید؛ اسکریپتهای غیرضروری را به تعویق بیندازید و منابع استفادهنشده را حذف کنید. (Google for Developers)
• تعداد اسکریپتهای شخص ثالث را کاهش دهید یا آنها را بعد از تعامل کاربر بارگذاری کنید.
• مشکلات CLS را برطرف کنید؛ برای المانها ابعاد مشخص تعیین کرده و فضای موردنیاز آنها را از قبل رزرو کنید. (Google for Developers)
همزمان ده تغییر مختلف انجام ندهید. اگر چندین تغییر را با هم انجام دهید، تشخیص اینکه کدام تغییر باعث بهبود عملکرد شده یا کدام تغییر مشکل جدیدی ایجاد کرده، بسیار سخت خواهد شد.
SpeedyGo چگونه در رفع مشکلات سرعت موبایل نقش دارد؟
SpeedyGo بهعنوان یک افزونه جامع برای بهینهسازی سرعت وردپرس معرفی میشود و قابلیتهای آن مستقیماً با بسیاری از مشکلات رایج عملکرد در موبایل ارتباط دارند. این قابلیتها شامل کش، کوچکسازی، ترکیب CSS و جاوااسکریپت، فشردهسازی، بارگذاری تنبل (lazy loading)، کش موبایل، پیشبارگذاری کش و قوانین پیشرفته است. (Google for Developers)
به زبان ساده، این یعنی میتوانید از یک ابزار برای انجام مجموعهای از کارهای مهم استفاده کنید:
• تسریع تحویل محتوا: با استفاده از کش و فشردهسازی.
• کاهش حجم انتقالی: با کوچکسازی و ترکیب کنترلشده فایلها.
• کاهش بارگذاری المانهای خارج از محدوده نمایش: با استفاده از بارگذاری تنبل.
• اعمال مدیریت اختصاصی برای موبایل: با استفاده از کش موبایل.
اما همچنان به یک رویکرد اصولی و منظم نیاز دارید. اگر سایت شما با قالبهای سنگین و تعداد زیادی اسکریپت شخص ثالث شلوغ شده باشد، هیچ افزونهای نمیتواند تصمیمات اشتباه در طراحی و پیادهسازی سایت را بهتنهایی اصلاح کند.
احساس سرعت را تجربه کنید
شروع رایگان — بدون نیاز به شماره کارت اعتباری؛ یا طرح مناسب برای سایت خود را انتخاب کنید.
پرسشهای متداول
فرقی نمیکند یک حرفهای مستقل، یک کسبوکار کوچک یا یک شرکت بزرگ باشید؛ برای شما هم طرحی وجود دارد.
چرا سایت من فقط در موبایل کند است؟
تلفنهای همراه معمولاً قدرت پردازشی کمتری دارند، شبکههای موبایل کندتر هستند و عواملی مثل تصاویر سنگین و جاوااسکریپت بیشازحد تأثیر بیشتری روی عملکرد موبایل میگذارند. شاخصهای اصلی تجربه وب نیز به شکلی طراحی شدهاند که تجربه واقعی کاربران را منعکس کنند و در بسیاری از مواقع، مشکلات عملکردی ابتدا در نسخه موبایل خود را نشان میدهند. (Google for Developers)
آیا باید روی امتیاز آزمایشگاهی یا دادههای کاربران واقعی تمرکز کنم؟
از دادههای آزمایشگاهی برای عیبیابی و پیدا کردن مشکلات استفاده کنید و برای قضاوت درباره تجربه واقعی کاربران، به دادههای میدانی توجه داشته باشید. PageSpeed Insights و Search Console از دادههای واقعی کاربران برای گزارش شاخصهای اصلی تجربه وب استفاده میکنند و این دادهها مهمترین سیگنال را درباره تجربه کاربران واقعی در اختیار شما قرار میدهند. (web.dev)
سریعترین راهحل برای بهبود عملکرد در موبایل چیست؟
در بسیاری از سایتها، تصاویر یکی از بهترین نقاط برای شروع هستند. تصاویر معمولاً سنگینترین منابع صفحه محسوب میشوند و بهینهسازی آنها میتواند عملکرد سایت را بهطور قابلتوجهی بهتر کند. (web.dev)
آیا بارگذاری تنبل (Lazy Loading) به سرعت موبایل کمک میکند؟
بله، استفاده از Lazy Loading برای تصاویر و المانهای تعبیهشدهای که خارج از محدوده نمایش (offscreen) قرار دارند، میتواند به کاهش بار اولیه صفحه کمک کند. بااینحال، بهتر است تصویر اصلی بالای خط تاپ (above-the-fold) را با Lazy Loading بارگذاری نکنید؛ زیرا این کار ممکن است بارگذاری اولیه مهمترین محتوای صفحه را به تأخیر بیندازد و در نتیجه تجربه بارگذاری اولیه را بدتر کند
رفع مشکلات CLS در وردپرس: جلوگیری از تغییرات ناگهانی طرح
در این مقاله یاد میگیرید چگونه مشکلات CLS را در وردپرس رفع کنید و تغییرات ناگهانی طرح ناشی از تصاویر، فونتها، تبلیغات، المانهای تعبیهشده، محتوای پویا، اسلایدرها و انیمیشنها را پیشگیری کنید.