۱۴ ترفند بهینه‌سازی موبایل که نباید از دست بدی!
برای اینکه بهترین نسخه موبایل سایتتون رو داشته باشید، باید مطمئن بشید که این ۱۴ تا نکته مهم رو رعایت کردید.
یه مدتی میشه که گوگل از ایندکس موبایل-اول (mobile-first index) رونمایی کرده.
وقتی این خبر برای اولین بار اعلام شد، متخصص‌های سئو دست به کار شدن تا مطمئن بشن سایتشون با Core Web Vitals گوگل و بهترین شیوه‌های طراحی سایت برای موبایل هماهنگه.
بهینه‌سازی برای موبایل، خودش یه دنیای جدا و تخصصی تو حوزه سئو محسوب میشه که برای موفقیت توش، باید دانش و ترفندهای خاص خودش رو بلد باشی.
این موضوع اونقدر مهمه که خیلی از کسب‌وکارها به یه نسخه کامل و باکیفیت از سایتشون برای موبایل نیاز دارن. ولی خب، همه از پسش برنمیان.
در خیلی از موارد، بیشتر سایت‌ها تو رسیدن به این هدف ناکام می‌مونن.
معلومه که این یه اشتباه بزرگه، چون طراحی موبایل بخش خیلی مهمی از دنیای دیجیتال امروزه:
- ۹۶ درصد آمریکایی‌های ۱۸ تا ۲۹ ساله گوشی هوشمند دارن.
- تا سال ۲۰۲۰، بیش از ۳.۶ میلیارد نفر تو کل دنیا از گوشی هوشمند استفاده می‌کردن. این عدد تا سال ۲۰۲۳ به ۴.۳ میلیارد نفر میرسه.
- تو سال ۲۰۲۰، کاربرا ۹۰ درصد از وقتشون رو تو اپلیکیشن‌ها می‌گذروندن، نه تو مرورگرهای موبایل.
- گوگل ۹۳.۲۲ درصد از سهم بازار جستجوی موبایل تو آمریکا رو در سال ۲۰۲۱ در اختیار داشته.
- اولین نتیجه جستجوی ارگانیک تو گوگل، معمولاً نرخ کلیک (CTR) ۲۶.۹ درصدی رو به دست میاره.
برای اینکه بتونید بهترین حضور آنلاین ممکن رو تجربه کنید، باید سایتتون رو برای دستگاه‌ها و رزولوشن‌های مختلف بهینه کنید، نه فقط برای دسکتاپ.
و حالا، گوگل داره آپدیت تجربه کاربری دسکتاپ (desktop page experience update) رو هم ارائه میده. البته این آپدیت خارج از بحث این مقاله است، ولی در کل روی تجربه کاربری صفحه تاثیرگذاره.
برای اینکه بهترین نسخه موبایل سایتتون رو پیاده‌سازی کنید، مهمه که مطمئن بشید سایت موبایلتون با این شیوه‌های استاندارد هماهنگه و فرصت‌هایی برای بهبود نمره‌های Core Web Vitals شما ایجاد می‌کنه.
با استفاده از طراحی واکنش‌گرا (responsive) و کنار گذاشتن ساب‌دامین‌های m-dot، بهینه‌سازی و فشرده‌سازی تصاویر، و همینطور فشرده‌سازی و کوچک‌سازی (minification) کدها، می‌تونید یه سایت موبایل باکیفیت داشته باشید که به دست بیشترین تعداد ممکن از مخاطبانتون برسه.
موفقیت سایت موبایل شما دقیقاً از همین نقطه شروع میشه.
۱. مطمئن بشید که محتوای دسکتاپ و موبایل یکسانه
هدف اصلی از این کار، جلوگیری از محتوای تکراری (duplicate content) و متهم شدن به کلاکینگ (cloaking) هست.
برای اینکه خیالتون راحت باشه، همیشه مطمئن بشید که تمام محتوای نسخه دسکتاپ سایتتون با نسخه موبایل یکسانه.
یکی از بهترین تکنیک‌ها برای این کار، استفاده از طراحی واکنش‌گراست.
طراحی واکنش‌گرا (Responsive design)، برای اونایی که نمی‌دونن، یعنی یه استایل شیت (style sheet) بسازید که با استفاده از «media queries» به طور خودکار طراحی سایت رو برای پلتفرم‌ها و دستگاه‌های مختلف تنظیم می‌کنه.
اگه می‌خواید نهایت سرعت رو از سایتتون بگیرید و یه طراحی سبک و سریع داشته باشید، می‌تونید از CSS sprites استفاده کنید تا تعداد درخواست‌ها به سرور رو کم کنید.
۲. مفهوم «بالای صفحه» هنوز به طور کامل از بین نرفته
یادتون باشه که تو محیط موبایل که همه چیز با اسکرول بی‌پایان همراهه، مفهوم «بالای صفحه» یا Above the fold هنوز کاملاً از بین نرفته.
هنوز هم بهتره که حداقل بخشی از محتوای متنی، بالای صفحه نمایش داده بشه تا به کاربر نشون بدید دلیلی برای اسکرول کردن وجود داره.
مزایای روانی و تمایل کاربر برای دیدن چیزهایی که شما ارائه میدید هنوز از بین نرفته، پس باید تا حدی سایتتون رو برای این بخش روی دستگاه‌های موبایل مختلف بهینه کنید.
۳. از رویکرد توسعه «از بالا به پایین» استفاده کنید
رویکرد توسعه «از بالا به پایین» (Top-down) یعنی شما از همون اول کار، تمام عواقب احتمالی هر تصمیمی که تو طراحی می‌گیرید رو در نظر می‌گیرید.
یعنی اول برای موبایل طراحی می‌کنید، نه اینکه اول دسکتاپ رو بسازید و بعد یه نسخه موبایل بهش اضافه کنید. این رویکرد ایده‌آله چون دیگه مشکلات پیش‌بینی نشده تو طراحی نهایی به وجود نمیاد.
بذارید یه مثال بزنم: شما یه سایت دسکتاپ طراحی می‌کنید. تقریباً سه چهارم راه رو که رفتید، تصمیم می‌گیرید یه سایت موبایل هم روش سوار کنید.
ماکاپ (mockup) رو می‌سازید. ولی بعد از کدنویسی و تست کردن، می‌بینید اینجا یه باگ هست، اونجا یه باگ دیگه، و یه باگ هم اونور! این اتفاق میفته چون رویکرد از پایین به بالا (bottom-up) کار نمی‌کنه و باعث چیزی به اسم «خزش محدوده» (scope creep) میشه.
این پدیده زمانی اتفاق میفته که مشکلات پیش‌بینی نشده لحظه آخر سر و کله‌شون پیدا میشه و باعث به وجود اومدن باگ‌های غیرمنتظره و افزایش ساعت کاری میشه که تو برآورد اولیه پروژه در نظر گرفته نشده بود.
حقیقت اینه که اگه از همون اول رویکرد از بالا به پایین برای طراحی واکنش‌گرای موبایل در نظر گرفته می‌شد، این باگ‌ها و مشکلاتی که باید حل بشن، آخر کار سر و کله‌شون پیدا نمی‌شد و این دردسرها به وجود نمیومد.
۴. البته فقط روی کاربر موبایل هم تمرکز نکنید
همونطور که مرز بین موبایل و دسکتاپ کمرنگ‌تر میشه، اهداف و خواسته‌های کاربران این پلتفرم‌ها هم به هم نزدیک‌تر میشه.
وقتی تمرکزتون رو روی هدفی که کاربرتون میخواد بهش برسه (بر اساس پلتفرمی که استفاده می‌کنه) میذارید، یه رویکرد جامع و یکپارچه ایجاد می‌کنید که مشتری‌ها رو به شکل موثرتری از طریق سایتتون جذب می‌کنه.
چه کاربری در حال خرید محصول باشه و چه در حال تحقیق در مورد خدمات شما، این ترکیب اهداف کاربر و اهداف تجاری شما همیشه ادامه خواهد داشت.
تا جایی که تمرکز ویژه روی این ایده‌ها و ارزش‌ها، کمتر از قبل ضروری خواهد بود.
البته دقت کنید، گفتم کمتر ضروری، نه کمتر مهم! این روند ترکیب موبایل و دسکتاپ همچنان ادامه داره.
۵. از تکنیک‌های طراحی واکنش‌گرا استفاده کنید
روزهای سایت‌های جداگانه با آدرس m.example.com دیگه تموم شده.
تو عصر موبایل-اول، هیچ دلیل منطقی و قابل دفاعی برای استفاده از این روش وجود نداره.
این ساختار می‌تونه خیلی شلخته و به‌هم‌ریخته باشه و اگه به درستی بهینه نشه، URLهای متعدد باعث مشکلات محتوای تکراری میشن.
تکنیک‌های زیادی برای انتقال درست از این ساختار قدیمی وجود داره، اما در غیر این صورت، پیاده‌سازی‌های m-dot با ظهور تکنولوژی‌های جدید، دیگه منسوخ شدن.
امروزه، بهترین روش پیاده‌سازی، استفاده از طراحی واکنش‌گرا (responsive design) است. این طراحی‌ها از چیزی به نام «media queries» استفاده می‌کنن تا رزولوشن‌های نمایشی که طراحی ازشون پشتیبانی می‌کنه رو مشخص کنن.
هر رزولوشن جداگانه، یک «نقطه شکست» یا «breakpoint» تو طراحی محسوب میشه؛ یعنی نقطه‌ای که طراحی واکنش‌گرا از یک رزولوشن به رزولوشن بعدی تغییر حالت میده.
مزیت استفاده از این نوع ساختار اینه که با مشکلات محتوای تکراری که تو پیاده‌سازی‌های m-dot وجود داشت، مواجه نمیشید.
علاوه بر این، سایت موبایل شما با جدیدترین تکنولوژی روز ساخته میشه.
۶. برای افزایش سرعت سایت، به جای «عکس» به «کد» فکر کنید
واقعاً لازمه که از اون پس‌زمینه دو رنگ به عنوان یه تصویر تکرارشونده با عرض ۲ پیکسل و ارتفاع ۱۲۰۰ پیکسل استفاده کنید؟
اگه نیازی نیست و می‌تونید به جاش کدنویسی کنید، حتماً این کار رو بکنید.
شاید یه تغییر به این کوچیکی تاثیر خیلی زیادی روی سرعت سایت نداشته باشه، ولی وقتی این بهینه‌سازی‌ها روی هم جمع بشن، تفاوت بزرگی ایجاد می‌کنن.
دفعه بعدی که دارید سایتتون رو آنالیز می‌کنید یا یه سایت جدید می‌سازید، از خودتون بپرسید: «واقعاً به این عکس اینجا نیاز دارم یا می‌تونم به سادگی با کدنویسی ایجادش کنم؟»
اگه اون تصویر واقعاً ضروری نیست، کدنویسی اون بخش می‌تونه به طرز چشمگیری سرعت سایت رو افزایش بده، مخصوصاً تو طراحی‌هایی که از تعداد زیادی گرافیک استفاده می‌کنن.
۷. وردپرس رو برای موبایل سفارشی‌سازی کنید
پلاگین‌های زیادی برای وردپرس وجود داره.
اونقدر زیاد که بعضی از اونها حتی قابلیت‌های بیشتری برای سازگاری با موبایل ارائه میدن.
مفیدترین پلاگین‌ها برای این منظور Duda Mobile، W3 Total Cache و همچنین پلاگین‌هایی برای کوچک‌سازی (minify) کدهای HTML و CSS هستن.
۸. برای فروش محصولتون از پاپ‌آپ‌های مزاحم استفاده نکنید
آره، می‌دونیم. محصول شما بهترین و خفن‌ترین چیزیه که روی این کره خاکی وجود داره. احتمالاً به همین دلیله که داریم از سایتتون بازدید می‌کنیم و قبل از خرید در موردش تحقیق می‌کنیم.
ولی، واقعاً نیازی نیست که یه تبلیغ مزاحم، فعالیت ما رو تو سایتتون مختل کنه و برای فروش محصول بهمون اصرار کنه.
تا جایی که ممکنه، از پاپ‌آپ‌های مزاحم (intrusive interstitials) کمتر استفاده کنید و تبلیغات رو پایین صفحه یا کنار صفحه قرار بدید و حداقل یه گزینه برای کلیک کردن و بستن تبلیغ بذارید.
یادتون باشه که گوگل سایت‌هایی که از پاپ‌آپ‌های مزاحم استفاده می‌کنن رو جریمه می‌کنه.
حتماً راهنمای توسعه‌دهندگان گوگل و وبمستر گایدلاینز رو در این مورد بخونید. خوندن پست وبلاگ گوگل در این مورد هم خالی از لطف نیست.
۹. سایتتون رو روی سیستم‌عامل‌ها و نمایشگرهای مختلف چک کنید
هر سئوکاری باید بلد باشه که چطور نقاط ضعف پیاده‌سازی فعلی یه وب‌سایت رو شناسایی کنه، از جمله اینکه کجا و چطور مشکلات رو روی نمایشگرها و دستگاه‌های مختلف پیدا کنه.
شما باید سایتتون رو روی بیشتر از یک سیستم‌عامل و همچنین بیشتر از یک دستگاه نمایشگر بررسی کنید. این کار تضمین می‌کنه که سایت شما با طیف وسیعی از نمایشگرها و پلتفرم‌ها سازگاره.
ولی، اگه نتونید هزارتا دستگاه مختلف بخرید تا سایتتون رو چک کنید چی؟
اینجاست که چند تا اپلیکیشن به کمکتون میان. بله! میشه این نوع مشکلات رو با بیشتر از یک اپلیکیشن بررسی کرد.
اکستنشن کروم Web Developer گوگل
اگه بودجه محدودی دارید، استفاده از اکستنشن کروم Web Developer گوگل می‌تونه بهتون کمک کنه تا ببینید سایتتون تو سایزها و رزولوشن‌های مختلف چطور به نظر میرسه.
این ابزار همچنین به شما این امکان رو میده که ببینید سایتتون تو جهت‌های مختلف دستگاه (عمودی و افقی) چطور نمایش داده میشه، ورودی‌های لمسی رو شبیه‌سازی کنید و خیلی کارهای دیگه.
همچنین می‌تونید از ابزار دیباگ اون برای بررسی کد سایت و پیدا کردن مشکلات استفاده کنید.
BrowserStack
BrowserStack.com یه ابزار عالی برای تست سایت روی مرورگرها، سیستم‌عامل‌ها و رزولوشن‌های مختلفه. اونها یه اکستنشن کروم هم دارن که می‌تونید برای این کار ازش استفاده کنید.
شما می‌تونید هر سایتی رو روی بیش از ۲۰۰۰ دستگاه، مرورگر و سیستم‌عامل واقعی تست کنید.
با داشتن اکانت پولی، دسترسی نامحدودی به اکستنشن مرورگر اونها برای تست خواهید داشت.
Cross Browser Testing
CrossBrowserTesting.com یه جایگزین برای BrowserStack هست که می‌تونید برای تست مرورگرها و دستگاه‌ها ازش استفاده کنید.
این ابزار با ارائه بیش از ۱۵۰۰ مرورگر و پلتفرم برای تست، امکانات کاملی رو در اختیارتون میذاره.
با ابزار اونها می‌تونید اسکرین‌شات‌ها رو با هم مقایسه کنید و رفتار وب‌سایتتون رو روی دستگاه‌های واقعی شبیه‌سازی کنید.
۱۰. بهترین شیوه‌های سئو ویدیو در موبایل رو دنبال کنید
بله، بهترین شیوه‌ها برای سئو ویدیو در موبایل هم وجود داره! گوگل هنوز به سیگنال‌هایی در صفحه نیاز داره تا ویدیویی که در اون صفحه قرار داره رو بهتر درک کنه.
این مقاله از مت ساترن در Search Engine Journal، پنج روش پیشنهادی گوگل برای سئو ویدیو رو توضیح میده.
مواردی مثل متن روی صفحه، لینک‌های ارجاعی، داده‌های ساختاریافته و فایل‌های ویدیویی اهمیت دارن.
چیزهای دیگه‌ای هم هست که باید موقع ساخت ویدیو بهشون دقت کنید.
مثلاً، باید مطمئن بشید که ویدیوهای شما برای عموم قابل دسترسه. این یعنی تنظیمات حریم خصوصی یوتیوب شما باید روی public باشه و باید یه صفحه وب قابل دسترس برای گوگل با اون ویدیو داشته باشید.
برای داده‌های ساختاریافته، استفاده از نوع داده VideoObject در Schema.org توصیه میشه.
گوگل برای پیاده‌سازی بی‌نقص ویدیو در موبایل، رعایت نکات زیر رو توصیه می‌کنه:
- استفاده از کنترل‌های سفارشی با یک عنصر ریشه div، به همراه یک عنصر رسانه ویدیو و یک عنصر فرزند div که به کنترل‌های ویدیو اختصاص داده شده.
- استفاده از دکمه پخش/توقف ویدیو.
- اطمینان از اینکه کاربر می‌تونه ویدیو رو به عقب و جلو ببره.
- راهنمای فنی جامع اونها برای پیاده‌سازی ویدیوی موبایل، بی‌نظیره و شما رو قدم به قدم در این فرآیند راهنمایی می‌کنه.
همونطور که گوگل میگه:
«اگه دلیل اصلی بازدید کاربر از صفحه، دیدن ویدیو باشه، این تجربه کاربری باید کاملاً فراگیر و جذاب باشه.»
جدا از موارد واضح، نکات مهم دیگه برای سئو ویدیو در موبایل عبارتند از:
تا جایی که ممکنه، پیدا کردن ویدیوها رو برای گوگل آسون کنید. این یعنی:
- از سایت‌مپ ویدیو استفاده کنید: اگه سایت‌مپ ویدیو رو ارسال نکنید، ممکنه گوگل نتونه مستقیماً ویدیوهای شما رو پیدا کنه. سایت‌مپ ویدیو این امکان رو به شما میده که به راحتی این سایت‌مپ رو در سرچ کنسول گوگل ثبت کنید و کار گوگل رو برای خزش و ایندکس کردن ویدیوها راحت‌تر کنید.
- از اقدامات پیچیده کاربری یا فرگمنت‌های URL استفاده نکنید: اگه از این موارد برای بارگذاری ویدیوها استفاده کنید، ممکنه گوگل اصلاً ویدیوهای شما رو پیدا نکنه، چون این موارد در صفحه شما برای درک گوگل بیش از حد پیچیده هستن.
- از تگ‌های HTML قابل شناسایی استفاده کنید: برخی از تگ‌های معتبر عبارتند از video، iframe، object یا embed. وقتی ویدیوها داخل تگ‌های رایج قرار می‌گیرن، شناسایی اونها برای گوگل راحت‌تره.
- مطمئن بشید ویدیوهای شما واقعاً قابل ایندکس شدن هستن. این اتفاق میفته: گاهی اوقات ممکنه کسی تغییری تو فایل robots.txt ایجاد کنه که جلوی خزش فایل‌های ویدیویی رو بگیره (امیدوارم تقصیر شما نباشه!). اگه ویدیوهای شما قبلاً ایندکس می‌شدن و حالا یهو ایندکس نمیشن، حتماً یه نگاهی به فایل robots.txt بندازید تا مطمئن بشید که مسدود نشدن.
- از فرمت‌های تصویر بندانگشتی (thumbnail) مورد تایید گوگل استفاده کنید: در مستندات توسعه‌دهندگان گوگل که در بالا بهش اشاره شد، بهترین شیوه‌ها برای تصاویر بندانگشتی هم ذکر شده که باید رعایت کنید.
سئو ویدیو در موبایل همیشه اونقدر که فکر می‌کنید ساده نیست.
با اینکه لازم نیست تک‌تک موارد رو رعایت کنید، اما بعضی از موارد اگه رعایت نشن، می‌تونن به خزش و ایندکس ویدیوهای موبایل شما آسیب جدی بزنن.
۱۱. از داده‌های ساختاریافته Schema.org استفاده کنید
داده‌های ساختاریافته Schema.org نه تنها برای شناسایی صفحاتی از سایت شما که اطلاعات ساختاریافته و ویژه‌ای برای موتورهای جستجو دارن مهمه، بلکه با کامل شدن ایندکس موبایل، باید انتظار داشته باشید که اتکای گوگل به اسکیما بیشتر هم بشه.
این یک روش مختصر و آسون برای درک اطلاعاته که بعداً می‌تونه به ریچ اسنیپت (rich snippets) در نتایج جستجوی موبایل تبدیل بشه.
اما در هر صورت، به نظر من داده‌های ساختاریافته اسکیما باید حتی در نسخه‌های دسکتاپ هم استفاده بشن، چون می‌تونن به شما کمک کنن تا بر اساس کلمه کلیدی مورد نظرتون، در نتایج ریچ اسنیپت ظاهر بشید. این کار در صورت پیاده‌سازی صحیح، می‌تونه به افزایش دیده شدن سایت شما کمک کنه.
۱۲. فایل‌های پشتیبان مثل جاوااسکریپت، CSS یا تصاویر رو مسدود نکنید
این باید یه اصل بدیهی در توسعه سایت برای هر پلتفرمی، چه دسکتاپ و چه موبایل، باشه، اما بعضی‌ها هنوز این کار رو می‌کنن.
مهمه که مطمئن بشید فایل‌های پشتیبان طراحی موبایل شما مسدود نیستن، چون این مسدودیت می‌تونه در آینده منجر به مشکلاتی مثل خطاهای soft 404 در موبایل بشه. حتی می‌تونه باعث خطاهای ۴۰۴ در دسکتاپ هم بشه.
وقتی شما جلوی خزش این فایل‌ها توسط گوگل رو می‌گیرید، اونها نمی‌تونن این فایل‌ها رو بررسی کنن تا ببینن وب‌سایت شما به درستی کار می‌کنه یا نه.
وقتی نتونن این کار رو بکنن، ممکنه رتبه‌های شما کاهش پیدا کنه، چون نمی‌تونن وب‌سایت شما رو به طور کامل درک کنن.
۱۳. فشرده‌سازی و بهینه‌سازی تصاویر
برای وب موبایل، بهینه‌سازی تصاویر یه جزء حیاتیه که باید درست انجام بشه. این یعنی شما باید مطمئن بشید که تصاویر برای تمام اندازه‌ها و رزولوشن‌های ممکن به درستی بهینه شدن.
نمیشه فقط یه تصویر ایجاد کرد و انتظار داشت که همه جا خوب نمایش داده بشه. خب، می‌تونید این کار رو بکنید، ولی تو رزولوشن‌هایی که براش ساخته نشده، تصویر شما کج و معوج به نظر میرسه.
به جای این کار، توصیه میشه که از بهترین شیوه‌های جامع سئو استفاده کنید و مطمئن بشید که تصاویری با کیفیت بالا در هر رزولوشنی ایجاد می‌کنید که در عین حال سریع هم بارگذاری بشن.
به همین دلیله که گوگل چندین روش استاندارد در طراحی واکنش‌گرا رو برای بهینه‌سازی تصاویر شما برای پلتفرم موبایل توصیه می‌کنه. توصیه‌های اونها به شرح زیره:
- از اندازه‌های نسبی برای تصاویر استفاده کنید. اگه از اندازه‌های نسبی استفاده کنید، از بیرون زدن تصاویر از تگ دربرگیرنده‌شون جلوگیری می‌کنید.
- از تصاویر درون‌خطی (inline) استفاده کنید. میشه با استفاده از تصاویر درون‌خطی، سرعت صفحه رو افزایش داد چون تعداد درخواست فایل‌ها کم میشه. این روش باید برای تصاویری استفاده بشه که ممکنه جای دیگه‌ای در سایت شما استفاده نشن.
- برای دستگاه‌هایی با DPI بالاتر، از ویژگی srcset برای تصاویر استفاده کنید. این کار به شما کمک می‌کنه تا برای دستگاه‌های مختلف، چندین فایل تصویری متفاوت اضافه کنید.
- اگه سئو فروشگاهی انجام میدید، بهتره تصاویر محصولاتتون رو قابل بزرگ‌نمایی کنید. مشتری‌ها ممکنه بخوان تصویری از محصولی که قصد خریدش رو دارن، روی دستگاهشون بزرگ کنن تا بهتر ببیننش. پس فراهم کردن این گزینه منطقیه.
ترفند اصلی در ادغام تصاویر با بهینه‌سازی‌های موبایل اینه: ایجاد تعادل بین حجم تصویر، بارگذاری اونها روی دستگاه موبایل، و تضمین سرعت مناسب صفحه بدون کاهش کیفیت تصویر روی هیچ‌کدوم از دستگاه‌های اصلی که مخاطبان شما از اونها برای جستجو استفاده می‌کنن.
۱۴. حجم کلی صفحه رو بهینه کنید
حجم صفحه یه فاکتور خیلی مهم برای یه وب‌سایت موبایل-پسند (mobile-friendly) هست. برای اینکه واقعاً موبایل-پسند باشید، حجم صفحه باید طوری باشه که سایت سریع بارگذاری بشه. برای این کار، بهینه‌سازی حجم کلی DOM ضروریه.
برای انجام موثر این کار، باید علاوه بر نکاتی که در لینک بالا گفتم، موارد زیر رو هم در نظر بگیرید:
از فونت‌های سفارشی غیرضروری استفاده نکنید
استفاده از فونت‌های سفارشی غیرضروری می‌تونه فرآیند بارگذاری صفحه شما رو پیچیده کنه و تعداد اسکریپت‌های مورد نیاز برای پردازش صفحه رو افزایش بده.
این موضوع به افزایش زمان بارگذاری صفحه منجر میشه و می‌تونه نمره‌های Core Web Vitals شما رو از محدوده مطلوب خارج کنه.
تا جایی که ممکنه، به جای فونت‌های سفارشی از فونت‌های سیستمی استفاده کنید تا تاثیر منفی این مورد رو به حداقل برسونید.
تصاویرتون رو بهینه کنید
شما باید مطمئن بشید که تصاویرتون رو بهینه می‌کنید و در عین حال کیفیت اونها رو حفظ می‌کنید. اگه کسی وارد سایت شما بشه و کیفیت تصویر به خاطر فشرده‌سازی بیش از حد، دون‌دون یا تار باشه، شما به نتیجه ایده‌آل نرسیدید.
در حالت ایده‌آل، باید از حجم فایل‌هایی برای تصاویر استفاده کنید که بالاترین کیفیت ممکن رو روی دستگاه‌های موبایلی که سایتتون براشون بهینه شده، تولید کنن و در عین حال مطمئن بشید که کیفیت از اون حد پایین‌تر نمیاد.
این کار یه هنر ظریفه و برای رسیدن به نتایج مطلوب، به کسی نیاز داره که در بهینه‌سازی تصاویر تخصص داشته باشه.
تعداد منابع مورد نیاز برای DOM و Critical Rendering Path رو کم کنید
هرچقدر صفحه شما برای رندر شدن به منابع بیشتری نیاز داشته باشه، سرعت دانلود صفحه شما هم بیشتر میشه. شما هرگز نباید برای پردازش یک صفحه وب به بیشتر از ۱۰ پلاگین (حداکثر) و سه تا چهار فایل اسکریپت نیاز داشته باشید.
من خودم مواردی رو دیدم که ۱۶۰ تا پلاگین در حال بارگذاری بودن و حجم فایل صفحه ۱۰ مگابایت بود. این اصلاً جایی نیست که شما می‌خواید باشید.
به نظر من، برای اینکه بیشترین اثربخشی رو داشته باشید، صفحات یک سایت وردپرسی هرگز نباید به طور متوسط از ۱۵۰-۲۵۰ کیلوبایت بیشتر باشن و نباید بیشتر از پنج تا هفت منبع حداکثر (CSS، فونت خارجی در صورت نیاز، یک فایل تبلیغاتی، یک فایل جاوااسکریپت و سه پلاگین) داشته باشن. اگه به بیشتر از این نیاز دارید، پس ممکنه اونقدر که فکر می‌کنید بهینه نباشید.
و صرفه‌جویی که با استفاده از فونت‌های سیستمی به جای فونت‌های وب خارجی به دست میارید رو دست کم نگیرید.
صفحاتتون رو کوچک‌سازی (Minify) کنید
فرآیند کوچک‌سازی (minification) در صفحات شما شامل فشرده‌سازی فایل‌ها برای صرفه‌جویی در فضا و در نتیجه، کاهش زمان بارگذاری کلی اونهاست.
استفاده از کوچک‌سازی به شما کمک می‌کنه تا از شر فضاهای خالی ناخواسته در کدتون خلاص بشید و اون کد رو طوری فشرده کنید که کمترین فضای ممکن رو اشغال کنه.
در حالت ایده‌آل، بهترین فرآیند شامل هیچ پلاگینی نمیشه. شما باید یک توسعه‌دهنده استخدام کنید تا به صورت دستی صفحات شما رو کوچک‌سازی کنه.
اگه همین الان هم کلی پلاگین دارید، اضافه کردن یه پلاگین دیگه برای کوچک‌سازی صفحات، ایده بدیه. در این موارد، باید از یک توسعه‌دهنده حرفه‌ای استفاده کنید تا بهترین نتیجه رو بگیرید.
اگه از قبل پلاگین‌های کمی دارید، استفاده از یک توسعه‌دهنده حرفه‌ای برای این کار به شما کمک می‌کنه تا به زمان بارگذاری صفحه و نمره‌های Core Web Vitals بهتری دست پیدا کنید.
اگه واقعاً مجبورید از پلاگین استفاده کنید، حتماً اون رو به عنوان یه راه‌حل موقت در نظر بگیرید تا زمانی که بتونید یه توسعه‌دهنده حرفه‌ای بیارید و کدتون رو به صورت دستی کوچک‌سازی کنه.
ایندکس موبایل-اول از راه رسیده؛ حالا وقتشه که دست به کار بشید
با فرا رسیدن ایندکس موبایل-اول گوگل، پیاده‌سازی وب‌سایت سازگار با پلتفرم‌ها و دستگاه‌های مختلف، به یک اولویت بسیار مهم تبدیل شده.
این یعنی هرچقدر بیشتر این کار رو عقب بندازید، نداشتن یه سایت موبایل، یا بهتره بگم، نداشتن یه سایت موبایل *درست و حسابی*، از جنبه‌های مختلفی براتون گرون تموم میشه.
و فقط بحث رتبه نیست.
اگه هنوز سایتتون رو برای موبایل آماده نکردید، منتظر چی هستید؟
پاسخی بگذارید