سرعت موبایل در سئو | راهنمای بقا در Mobile-First – طاها سئو

پاییز ۱۴۰۰ بود. مدیر مارکتینگ یک فروشگاه اینترنتی پوشاک با ناامیدی زنگ زد: «طاها، رتبه‌هایمان دارد آب می‌شود. من که هر روز دارم محتوا منتشر می‌کنم، بک‌لینک هم می‌سازم، ولی از وقتی گوگل Mobile-First Indexing را برای ما کامل اعمال کرد، ترافیک ارگانیک ۴۰٪ افت کرده. سرچ کنسول هم مدام خطای LCP و CLS می‌دهد. انگار گوگل با موبایل جنگ دارد با ما.»

وارد Search Console و PageSpeed Insights شدم. نسخهٔ دسکتاپ سایتش امتیاز ۸۵ داشت، اما نسخهٔ موبایل عدد ۲۲ را نشان می‌داد. LCP روی موبایل ۷.۸ ثانیه بود. تصاویر محصولات بدون هیچ بهینه‌سازی با حجم ۲ مگابایت روی موبایل لود می‌شدند. بنرهای تبلیغاتی متحرک مثل بمب CLS عمل می‌کردند. و یک فونت گوگل ۴۰۰ کیلوبایتی از سرور خارجی، عامل نصف آن تأخیر بود.

به او گفتم: «شما یک بوتیک شیک دارید که در ورودی‌اش را برای ۷۰٪ مشتریان که با موبایل می‌آیند، با آجر بسته‌اید. بیایید این در را باز کنیم.»

۵ ماه بعد، امتیاز Core Web Vitals موبایل سبز شد. ترافیک ارگانیک نه تنها برگشت، که ۴۵٪ رشد کرد. نرخ تبدیل موبایل هم ۲ برابر شد.

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

چرا سرعت موبایل حالا حرف اول و آخر را در سئو می‌زند؟

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

• از سال ۲۰۱۹، گوگل برای تمام سایت‌های جدید Mobile-First Indexing را پیش‌فرض کرده و برای سایت‌های قدیمی هم به مرور مهاجرت داده است. یعنی رتبهٔ تو را نسخهٔ موبایلت تعیین می‌کند، نه دسکتاپ.

• Core Web Vitals (شامل LCP، INP و CLS) یک فاکتور مستقیم رتبه‌بندی هستند. گوگل صریحاً گفته: «اگر دو صفحه از نظر کیفیت برابر باشند، صفحه‌ای که Core Web Vitals بهتری دارد، رتبهٔ بالاتری می‌گیرد.»

• در ایران، بیش از ۷۰٪ جستجوهای گوگل روی موبایل انجام می‌شود. مشتری تو دارد در تاکسی، پشت ترافیک، با اینترنت نوسان‌دار موبایل، به دنبال خدمات تو می‌گردد. اگر سایتت ۳ ثانیه بیشتر طول بکشد، انگشتش را روی دکمهٔ بازگشت می‌گذارد.

• نرخ تبدیل موبایل به شدت به سرعت وابسته است. تحقیقات نشان می‌دهد هر ۱ ثانیه تأخیر در لود صفحات موبایل، نرخ تبدیل را تا ۲۰٪ کاهش می‌دهد.

پس بازی عوض شده. دیگر سئوکار فقط محتوانویس نیست؛ یک مهندس تجربهٔ موبایل هم هست.

قدم صفر: قبل از هر چیز، بدان کجای کار ایستاده‌ای

تا زمانی که عدد و رقم نداری، هر اقدامی مثل تیراندازی در تاریکی است.

۱. PageSpeed Insights، اما فقط برای موبایل

وارد PageSpeed Insights شو، URL بده و سربرگ «Mobile» را نگاه کن. چهار بخش حیاتی دارد:

• Performance Score: عدد بالای ۹۰ یعنی سبز، ۵۰-۹۰ یعنی نارنجی (نیاز به بهبود) و زیر ۵۰ یعنی قرمز (فاجعه). این امتیاز یک تخمین آزمایشگاهی (Lab Data) است.

• Core Web Vitals Assessment: این بخش را جدی‌تر بگیر. اگر اینجا خطا داری، یعنی کاربران واقعی (Field Data) هم مشکل دارند. این همان جایی است که گوگل برای رتبه‌بندی نگاه می‌کند.

• Opportunities و Diagnostics: پیشنهادهای عملی مثل «تبدیل تصاویر به WebP»، «کاهش CSS استفاده‌نشده»، «بهبود زمان پاسخگویی سرور».

۲. Chrome DevTools در حالت موبایل

مرورگر کروم را باز کن، F12 بزن، و از نوار بالایی Device Toolbar را انتخاب کن. یک گوشی میان‌رده (مثلاً Galaxy S8) انتخاب کن و Network را روی Slow 3G بگذار. حالا صفحه را Refresh کن. این دقیق‌ترین شبیه‌سازی از تجربهٔ کاربر ایرانی با اینترنت همراه است.

در تب Network، ببین کدام فایل‌ها بیشترین حجم و زمان را دارند. آبشار (Waterfall) را تحلیل کن: اگر فایل‌های CSS و JS زنجیره‌ای طولانی از درخواست‌ها ساخته‌اند، باید Combine یا حذفشان کنی.

۳. WebPageTest

برای تحلیل عمیق‌تر، WebPageTest.org را باز کن. لوکیشن را روی یک سرور نزدیک به ایران بگذار (مثلاً دبی)، مرورگر را موبایل (Chrome on a Motorola G یا iPhone) و سرعت اتصال را 3G تنظیم کن. گزارش این ابزار بی‌نظیر است: دقیقاً نشان می‌دهد که اولین بایت چه زمانی رسیده، چه فایلی صفحه را بلوکه کرده، و CLS از کجا آمده است.

۴. اسکریپت پایش خودم

من یک اسکریپت کوچک Python دارم که هر شب، لیست ۵۰ URL پربازدید یک سایت را از گوگل آنالیتیکس می‌گیرد، با PageSpeed Insights API تست می‌کند، و اگر امتیاز موبایل زیر ۵۰ بود، برایم ایمیل می‌فرستد. اینطوری قبل از اینکه گوگل بفهمد، من می‌فهمم.

قدم اول: تصاویر، فیل‌های نامرئی که سرعت موبایل را می‌بلعند

در ۸۰٪ سایت‌هایی که بهینه‌سازی کرده‌ام، بزرگترین مقصر سرعت موبایل، تصاویر بوده‌اند. عکس‌های ۴K که برای یک صفحهٔ ۳۶۰ پیکسلی موبایل آپلود می‌شوند.

۱. WebP؛ نه یک انتخاب، که یک ضرورت

فرمت WebP حجم تصاویر را نسبت به JPEG تا ۵۰٪ و نسبت به PNG تا ۳۰٪ کاهش می‌دهد، بدون افت محسوس کیفیت. از سال ۲۰۲۰، تمام مرورگرهای مدرن از WebP پشتیبانی می‌کنند. اگر وردپرس داری، افزونه‌های Imagify، ShortPixel یا Converter for Media می‌توانند همهٔ تصاویر قدیمی را یکجا به WebP تبدیل کنند. من خودم برای پروژه‌های بزرگ، یک اسکریپت Python با کتابخانهٔ Pillow می‌نویسم که یک پوشه را می‌گیرد و همهٔ عکس‌ها را به WebP با کیفیت ۸۵ تبدیل می‌کند، بعد روی سرور آپلود می‌کنم.

۲. srcset و اندازه‌های ریسپانسیو

در موبایل، یک تصویر با عرض ۲۰۰ پیکسل نمایش داده می‌شود، اما اگر تو فقط فایل ۲۰۰۰ پیکسلی را سرو کنی، یعنی مرورگر باید یک تصویر ۱۰ برابر بزرگتر را دانلود و سپس کوچک کند. هم حجم دانلود را بالا برده‌ای، هم CPU گوشی درگیر شده.

باید از اتریبیوت srcset استفاده کنی. در وردپرس، خود سیستم از نسخهٔ ۴.۴ به بعد برای هر تصویر، چند سایز می‌سازد و srcset را خودکار در تگ <img> قرار می‌دهد. اما مراقب باش: بعضی قالب‌های ضعیف این قابلیت را غیرفعال می‌کنند. در افزونه‌های بهینه‌سازی مثل WP Rocket، می‌توانی ابعاد اضافی که نمی‌خواهی را حذف کنی.

۳. Lazy Loading بومی، بدون حتی یک افزونه

از HTML استاندارد استفاده کن: <img src="image.webp" loading="lazy" alt="...">. این اتریبیوت در تمام مرورگرهای مدرن پشتیبانی می‌شود و نیازی به جاوااسکریپت اضافی ندارد. تصاویر فقط وقتی که قرار است دیده شوند، دانلود می‌شوند. در وردپرس از نسخهٔ ۵.۵ به بعد، این اتریبیوت خودکار اضافه می‌شود. اگر نشد، افزونهٔ Lazy Load فعال کن، اما آن را روی «بومی» بگذار.

۴. CDN تصاویر

تصاویرت را از یک CDN سرو کن. Cloudflare رایگان می‌تواند تمام تصاویر را کش کند و از نزدیک‌ترین سرور به کاربر بدهد. حتی با فعال‌سازی Polish، تصاویر را به صورت خودکار به WebP تبدیل و فشرده می‌کند. ابر آروان هم همین قابلیت را دارد.

قدم دوم: CSS و جاوااسکریپت، قاتلان خاموش سرعت موبایل

گوگل برای رندر صفحه، باید تمام CSS و JS مسدودکننده (Render-blocking) را دانلود و پردازش کند. روی موبایل با اینترنت ضعیف، این یعنی فاجعه.

۱. Critical CSS را استخراج و در <head> قرار بده

Critical CSS یعنی حداقل کد CSS که برای نمایش محتوای بالای صفحه (Above the fold) لازم است. به جای اینکه مرورگر منتظر بماند تا کل فایل ۲۰۰ کیلوبایتی CSS لود شود، این ۱۰-۲۰ کیلوبایت ضروری را همان اول در <head> تزریق کن. با WP Rocket یا افزونهٔ Autoptimize می‌توانی این کار را خودکار انجام دهی. من برای سایت‌های سفارشی، یک اسکریپت PHP دارم که CSS حیاتی را از فایل اصلی استخراج و در قالب جاسازی می‌کند.

۲. CSS و JS را Minify و Defer کن

• Minify: فاصله‌های خالی، خطوط اضافی و کامنت‌ها را از فایل‌های CSS و JS حذف کن. با Autoptimize یا WP Rocket.

• Defer/Async برای JS: هر اسکریپتی که برای نمایش اولیه ضروری نیست (تحلیل‌گرها، چت آنلاین، دکمه‌های شبکه‌های اجتماعی) را با اتریبیوت defer یا async بارگذاری کن. defer یعنی بعد از لود HTML اجرا شود، async یعنی هر وقت دانلود شد، اجرا شود. برای Google Analytics و گوگل تبلیغات، async بهتر است. در توابع قالب وردپرس می‌توانی با wp_enqueue_script این کار را انجام دهی.

۳. حذف CSS و JS استفاده‌نشده در هر صفحه

بزرگ‌ترین مشکل سایت‌های وردپرسی و فروشگاهی این است که CSS و JS افزونه‌ها در همهٔ صفحات لود می‌شود. صفحهٔ «درباره ما» نیازی به JS اسلایدر محصولات ندارد. با افزونهٔ Asset CleanUp یا Perfmatters می‌توانی تعیین کنی که کدام فایل CSS/JS در کدام صفحه لود شود. من یکبار روی یک فروشگاه، CSS ووکامرس را در صفحهٔ اصلی غیرفعال کردم و زمان لود موبایل ۴۰۰ میلی‌ثانیه بهبود یافت.

۴. Font Awesome و آیکون‌ها را رژیم بده

فونت‌آسوم کامل، حجمی بالای ۱۰۰ کیلوبایت دارد، در حالی که تو فقط ۳ آیکون استفاده می‌کنی. دو راه داری: یا از SVG های جداگانه استفاده کن (بهترین)، یا با ابزارهایی مثل Fontello فقط آیکون‌های مصرفی را در یک فونت سفارشی استخراج کن و دیگر فونت‌آسوم کامل را لود نکن.

قدم سوم: فونت‌ها را روی هاست خودت بیاور و از نمایش نامرئی نجات بده

فونت‌های گوگل از یک سرور خارجی لود می‌شوند. روی اینترنت ایران، این یعنی ۲-۳ ثانیه تأخیر اضافی، و در این مدت، کاربر متن را نمی‌بیند (پدیدهٔ Flash of Invisible Text یا FOIT).

۱. فونت‌ها را خودمیزبانی (Self-host) کن

فایل‌های فونت را دانلود کن و در پوشهٔ fonts/ قالب بگذار. سپس در CSS با @font-face آنها را معرفی کن. در وردپرس، افزونهٔ OMGF (Optimize My Google Fonts) این کار را یک‌کلیکه انجام می‌دهد. فایل‌ها روی CDN تو کش می‌شوند و دیگر نیوز به سرور گوگل نیست.

۲. از font-display: swap; استفاده کن

حتی اگر فونت را خودمیزبانی کنی، باز هم تا دانلود نشود، مرورگر متن را نشان نمی‌دهد (مگر اینکه بگویی). با اضافه‌کردن font-display: swap; به @font-face، مرورگر ابتدا متن را با یک فونت Fallback سیستمی نمایش می‌دهد و به محض آماده‌شدن فونت اصلی، آن را swap می‌کند. کاربر منتظر نمی‌ماند.

۳. وزن‌های غیرضروری را حذف کن

اگر از فونت IRANSans استفاده می‌کنی، آیا واقعاً به ۹ وزن (Thin, Light, UltraLight, …) احتیاج داری؟ ۳ وزن Bold، Regular و Light کافی است. هر وزن اضافی یعنی ۵۰-۱۰۰ کیلوبایت دانلود اضافه.

قدم چهارم: سرور و TTFB، حتی اگر هاست ضعیف است، تسلیم نشو

Time to First Byte (TTFB) یعنی مدت زمانی که طول می‌کشد تا مرورگر اولین بایت پاسخ را از سرور دریافت کند. برای موبایل، گوگل توصیه می‌کند زیر ۸۰۰ میلی‌ثانیه باشد. اگر هاست تو در ایران نیست یا قدرت پردازش پایینی دارد، TTFB اوج می‌گیرد.

۱. صفحهٔ HTML را کش کامل کن

با Varnish، Nginx FastCGI Cache یا افزونه‌های وردپرس مثل WP Rocket، صفحات را به صورت ایستا ذخیره کن. وقتی یک صفحه کش شود، TTFB می‌تواند از ۲ ثانیه به ۵۰ میلی‌ثانیه برسد، چون PHP و دیتابیس اصلاً اجرا نمی‌شوند.

۲. Cloudflare APO (Automatic Platform Optimization) برای وردپرس

اگر از Cloudflare استفاده می‌کنی، افزونهٔ Cloudflare را نصب کن و APO را فعال کن (نسخهٔ رایگان هم تا حدی پشتیبانی می‌کند). این کار کل صفحهٔ HTML را روی Edgeهای Cloudflare کش می‌کند و کاربر نسخهٔ کش‌شده را از نزدیک‌ترین سرور می‌گیرد. TTFB برای کاربران ایرانی می‌تواند به ۱۰۰-۲۰۰ میلی‌ثانیه کاهش یابد.

۳. PHP را آپدیت کن و OPcache را فعال کن

اگر روی هاست اشتراکی هستی، از میزبان بخواه PHP را به نسخهٔ ۸.۱ یا بالاتر ببرد. PHP 8.x تا ۳۰٪ سریع‌تر از 7.x کد را اجرا می‌کند. و در تنظیمات PHP، مطمئن شو OPcache فعال باشد. این یعنی کدهای PHP یکبار کامپایل می‌شوند و در حافظه می‌مانند، نه اینکه برای هر درخواست از صفر کامپایل شوند.

قدم پنجم: CLS (تغییرات ناگهانی چیدمان) را ریشه‌کن کن

هیچ‌چیز برای کاربر موبایل آزاردهنده‌تر از این نیست که بخواهد روی یک دکمه کلیک کند، ناگهان یک بنر تبلیغاتی ظاهر شود و انگشتش روی «خرید» آن بنر برود. CLS (Cumulative Layout Shift) یعنی مجموع جابه‌جایی‌های غیرمنتظرهٔ المان‌ها. گوگل حساسیت فوق‌العاده‌ای روی این دارد.

۱. برای تمام تصاویر و ویدیوها ابعاد رزرو کن

بزرگ‌ترین عامل CLS، تصاویر بدون عرض و ارتفاع مشخص هستند. مرورگر ابتدا فضایی برای تصویر در نظر نمی‌گیرد، بعد که تصویر لود می‌شود، صفحه پایین می‌پرد. همیشه در تگ <img> اتریبیوت‌های width و height را بگذار. در CSS هم height: auto; و max-width: 100%; بگذار تا تصویر ریسپانسیو بماند. وردپرس از نسخهٔ ۵.۶ به بعد، این کار را خودکار انجام می‌دهد.

۲. بنرها، فرم‌های ایمیل و پاپ‌آپ‌ها را با فضای رزرو شده بارگذاری کن

هر المانی که دیرتر به صفحه اضافه می‌شود (مثل یک پاپ‌آپ خبرنامه)، باید یک Container با ابعاد مشخص داشته باشد که قبل از لود آن المان، فضایش خالی باشد. با min-height در CSS می‌توانی این کار را بکنی.

۳. از web fonts با font-display: swap و fallback متناسب استفاده کن

اگر فونت اصلی دیر لود شود و فونت fallback ارتفاع خط متفاوتی داشته باشد، متن جابه‌جا می‌شود. از فونت‌های fallback با ارتفاع خط تقریباً مشابه استفاده کن (مثلاً اگر IRANSans داری، Arial می‌تواند fallback مناسبی باشد).

۴. تبلیغات داینامیک را محدود کن

اگر در سایت تبلیغات نمایشی داری، آنها را در یک <div> با عرض و ارتفاع ثابت قرار بده. و در جاوااسکریپت، ابعاد بنر را قبل از لود مشخص کن. گوگل ادسنس خودش راهکارهایی برای CLS داده که باید اجرا شوند.

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

سرعت فقط فنی نیست. گوگل از طریق سیگنال‌هایی مثل نرخ پرش (Pogo-sticking) می‌فهمد که کاربر در سایت تو راضی است یا نه. اگر دکمه‌ها کوچک باشند، متن خوانا نباشد، یا یک پاپ‌آپ تمام صفحه بیاید و راه دسترسی به محتوا را ببندد، کاربر فرار می‌کند و سئو آسیب می‌بیند.

۱. دکمه‌ها و لینک‌ها را برای انگشت طراحی کن

اندازهٔ لمسی (Tap Target) حداقل باید ۴۸×۴۸ پیکسل باشد. فاصلهٔ بین دکمه‌ها هم نباید کمتر از ۸ پیکسل باشد. در CSS، padding و min-height را طوری تنظیم کن که کاربر با انگشت راحت کلیک کند.

۲. اندازهٔ فونت پایه برای موبایل را ۱۶px بگذار

متن‌ها باید بدون زوم خوانا باشند. فونت زیر ۱۲px برای موبایل جرم است. در CSS از font-size: 16px; برای بدنه و line-height: 1.6; استفاده کن.

۳. پاپ‌آپ‌های مداخله‌گر (Intrusive Interstitials) را به کل حذف کن

از ژانویه ۲۰۱۷، گوگل سایتی را که یک پاپ‌آپ تمام‌صفحه بلافاصله بعد از ورود نشان دهد، جریمه می‌کند. این شامل پاپ‌آپ‌های خبرنامه، کوکی و تبلیغات می‌شود. اگر پاپ‌آپ ضروری است، آن را با تأخیر (مثلاً بعد از اسکرول ۵۰٪) و با قابلیت بستن آسان نمایش بده، نه تمام صفحه و چسبان.

۴. AMP؟ دیگر یک الزام نیست

AMP زمانی برای گوگل نیوز واجب بود. حالا که Core Web Vitals آمده، اگر سایتت سریع باشد، AMP نیاز نیست. اما اگر خبرگزاری هستی و می‌خواهی در Top Stories باشی، AMP هنوز می‌تواند کمک کند. ولی برای یک فروشگاه، وقتت را روی بهینه‌سازی خود سایت بگذار، نه یک نسخهٔ AMP جداگانه.

یک مطالعهٔ موردی واقعی: فروشگاه پوشاک (همان ابتدای مقاله)

وضعیت اولیه:

• ترافیک موبایل: ۶۵٪ کل بازدیدها.

• امتیاز PageSpeed Insights موبایل: ۲۲ (قرمز).

• LCP: ۷.۸s, CLS: 0.38, INP: 320ms.

• نرخ تبدیل موبایل: ۰.۸٪.

• مشکلات اصلی: تصاویر PNG 2-3MB بدون srcset، فونت گوگل ۴۵۰KB، CSS و JS رندر-بلاکر بدون defer، بدون هیچ کش، TTFB 2.6s.

اقدامات طی ۵ ماه:

1. تصاویر: تبدیل تمام تصاویر به WebP با کیفیت ۸۲ (با یک اسکریپت Python). تنظیم srcset و sizes در قالب. فعال‌سازی Lazy Loading بومی. استفاده از Cloudflare Polish برای فشرده‌سازی خودکار.

2. CSS/JS: استخراج Critical CSS و تزریق در <head>. Minify و defer کردن تمام JS های غیرضروری. حذف ۲۰۰KB CSS استفاده‌نشده با PurgeCSS. بارگذاری اسکریپت‌های تبلیغاتی با ۳ ثانیه تأخیر.

3. فونت: خودمیزبانی یک فونت IRANSans با فقط ۳ وزن. فعال‌سازی font-display: swap. کاهش حجم کل فونت از ۴۵۰KB به ۹۰KB.

4. سرور: فعال‌سازی کش صفحه با Nginx FastCGI Cache. TTFB از ۲.۶s به ۳۰۰ms رسید. انتقال دیتابیس به یک سرور سریع‌تر با ایندکس‌های بهینه.

5. CLS: رزرو فضا برای تمام تصاویر و بنرها. حذف یک پاپ‌آپ تمام‌صفحه که CLS ایجاد می‌کرد. اصلاح ابعاد آیکون‌های شبکه‌های اجتماعی.

6. پایش: اسکریپت Python برای تست هفتگی Core Web Vitals و ارسال هشدار.

نتایج بعد از ۵ ماه:

مدیر فروشگاه بعد از ۵ ماه گفت: «طاها، انگار که یک سایت جدید ساخته‌ای. تازه مشتری‌ها می‌گویند با موبایل راحت‌تر خرید می‌کنند. قبلاً همیشه خطا می‌داد و کند بود.»

نتیجه‌گیری: موبایل، نه یک نسخهٔ فرعی، که صحنهٔ اصلی است

دیگر نمی‌شود سئو کار کرد و سرعت موبایل را به فال نیک گرفت. گوگل موبایل را گذاشته روی صندلی قاضی. اگر سایتت روی موبایل نرم، سریع و بدون لگ کار نکند، حتی اگر بهترین محتوای جهان را داشته باشی، در نتایج پایین می‌مانی. بهینه‌سازی سرعت موبایل یک پروژهٔ یک‌باره نیست، یک فرایند مداوم پایش و بهبود است.

من طاها هستم. ۱۵ سال است که از دل کدهای PHP، لاگ‌های سرور و اسکریپت‌های Python، نسخهٔ موبایل سایت‌ها را از یک زامبی کند به یک ماشین جذب مشتری تبدیل می‌کنم. اگر Core Web Vitals موبایل سایتت قرمز است و می‌خواهی بدانی از کجا شروع کنی، با طاها حرف بزن. یک جلسه تحلیل، می‌تواند معمای کندی سایتت را حل کند و نقشهٔ راهی به تو بدهد که موبایل، از بزرگترین دردسرت به قوی‌ترین کانال فروشت تبدیل شود.