14 بهترین شیوه‌های بهینه‌سازی موبایل که باید بدانید

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

• 96٪ از آمریکایی‌های 18 تا 29 ساله یک گوشی هوشمند دارند.
• تا سال 2020 بیش از 3.6 میلیارد کاربر از دستگاه‌های هوشمند در سراسر جهان استفاده کرده‌اند. این تعداد تا سال 2023 به 4.3 میلیارد نفر خواهد رسید.
• در سال 2020، کاربران موبایل 90٪ از زمان خود را در برنامه‌ها صرف کرده‌اند، نه مرورگرهای موبایل.
• گوگل 93.22٪ از سهم بازار جستجوی موبایل در ایالات متحده را در سال 2021 به خود اختصاص داده است.
• نتیجه اولیه جستجوی موبایل در گوگل به طور معمول 26.9٪ نرخ کلیک طبیعی (CTR) دارد.

برای بهره‌برداری از بهترین حضور آنلاین ممکن، باید برای انواع مختلف دستگاه‌ها و وضوح صفحه نمایش بهینه‌سازی کنید، نه فقط برای دسکتاپ‌ها.
گوگل در حال راه‌اندازی به‌روزرسانی تجربه صفحه دسکتاپ است. اما این به‌روزرسانی فراتر از محدوده این مقاله است، هرچند که به تجربه صفحه به طور کلی مرتبط است.
برای دستیابی به بهترین پیاده‌سازی موبایل، مهم است که اطمینان حاصل کنید که سایت موبایل شما با این بهترین شیوه‌ها سازگار است و همچنین فرصت‌هایی برای افزایش اعداد Core Web Vitals شما ایجاد می‌کند.
با استفاده از طراحی واکنش‌گرا و نه یک زیر دامنه m-dot، رعایت بهترین شیوه‌ها در ایجاد و بهینه‌سازی تصاویر، و رعایت فشرده‌سازی و کوچک‌سازی، می‌توانید یک سایت موبایل با کیفیت ایجاد کنید که به بیشترین تعداد ممکن از افراد در مخاطبان شما دسترسی پیدا کند.
در اینجاست که سایت موبایل شما موفق خواهد بود.

1-اطمینان حاصل کنید که تمام محتوا در دسکتاپ و موبایل یکسان است

ایده پشت این بهترین شیوه این است که از محتوای تکراری و اتهامات «کلک زدن» (cloaking) اجتناب شود.
برای ایمنی، همیشه اطمینان حاصل کنید که تمام محتوا در نسخه دسکتاپ سایت شما با نسخه موبایل یکسان است.
یکی از بهترین تکنیک‌ها برای اطمینان از این امر استفاده از طراحی واکنش‌گرا است.
طراحی واکنش‌گرا برای کسانی که نمی‌دانند، شامل ایجاد یک سبک‌نامه (style sheet) است که از “پرس‌و‌جوهای رسانه‌ای” (media queries) برای انتقال خودکار طراحی‌ها بین انواع مختلف پلتفرم‌ها و دستگاه‌ها استفاده می‌کند.
اگر می‌خواهید تمام سرعت ممکن را از سایت خود بیرون بکشید و طراحی خود را سبک و کارآمد کنید، به بررسی CSS sprites برای کاهش درخواست‌های سمت سرور فکر کنید.

2-مفهوم “بالای صفحه” کاملاً از بین نرفته است

مهم است که به یاد داشته باشید در یک محیط موبایل که همه چیز به طور بی‌پایان پیمایش می‌شود، “بالای صفحه” (Above The Fold) کاملاً از بین نرفته است.
هنوز هم ترجیح داده می‌شود که حداقل بخشی از محتوای متنی بالای صفحه در طراحی موبایل باشد تا به کسی نشان دهد که دلیل پیمایش وجود دارد.
مزایای روان‌شناختی و تمایل به دیدن آنچه که شما ارائه می‌دهید کاملاً از بین نرفته است، بنابراین هنوز هم باید تا حدودی برای این مورد در بسیاری از دستگاه‌های موبایل مختلف بهینه‌سازی کنید.

3-از یک رویکرد توسعه “از بالا به پایین” استفاده کنید

یک رویکرد توسعه “از بالا به پایین” به این معنی است که تمام پیامدهای بالقوه هر تصمیمی که در یک طراحی گرفته می‌شود را از ابتدا تا انتها در نظر بگیرید.
برای موبایل ابتدا توسعه دهید نه برای دسکتاپ، و سپس یک طراحی موبایل را به آن اضافه کنید. این رویکرد توسعه ایده‌آل است زیرا مشکلات را به طراحی نهایی وارد نمی‌کنید.
در اینجا یک مثال وجود دارد: شما یک وب‌سایت دسکتاپ ایجاد می‌کنید. حدود سه‌چهارم از راه در این فرآیند تصمیم می‌گیرید که می‌خواهید یک سایت موبایل روی آن ایجاد کنید.
شما موکاپ را ایجاد می‌کنید. اما پس از کدنویسی موکاپ و حرکت در میان انتقال‌ها، یک اشکال اینجا پیدا می‌کنید. و یک اشکال آنجا. سپس یک اشکال دیگر در آنجا. این به این دلیل است که رویکرد از پایین به بالا کار نمی‌کند و باعث بروز مسائلی به نام «سرایت حوزه» می‌شود.
این پدیده‌ای است که در آن مسائل غیرمترقبه در آخرین لحظه بروز می‌کنند و باعث بروز اشکالات و افزایش ساعت‌هایی می‌شوند که در ابتدا برای پروژه در نظر گرفته نشده بودند.
حقیقت این است که اگر رویکرد از بالا به پایین برای طراحی واکنش‌گرای موبایل از ابتدا در نظر گرفته می‌شد، این اشکالات و مواردی که نیاز به رفع دارند در انتها بروز نمی‌کردند و این مشکل نگران‌کننده ایجاد نمی‌شد.

4-با این حال فقط بر روی مصرف‌کننده موبایل تمرکز نکنید

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

5-از تکنیک‌های طراحی واکنش‌گرا استفاده کنید

دوران وب‌سایت‌های جداگانه m-dot (m.example.com) به پایان رسیده است.
هیچ دلیلی برای استفاده از چنین پیاده‌سازی در دوران موبایل-محور وجود ندارد.
این ساختار می‌تواند بسیار بی‌نظم باشد و با چندین URL مشکلات محتوای تکراری ایجاد کند اگر به درستی بهینه‌سازی نشده باشند.
روش‌های زیادی وجود دارد که می‌توان اطمینان حاصل کرد که یک انتقال مؤثر انجام می‌شود، اما به جز این پیاده‌سازی‌های m-dot با ظهور فناوری‌های جدید به سرنوشتی مشابه دودو دچار شده‌اند.
امروزه پیاده‌سازی ایده‌آل شامل طراحی واکنش‌گرا است. این طراحی‌ها از چیزی به نام پرس‌و‌جوهای رسانه‌ای استفاده می‌کنند تا وضوح‌های نمایشی که طراحی پشتیبانی می‌کند را تعریف کنند.
هر وضوح جداگانه‌ای که طراحی واکنش‌گرا از یک وضوح به وضوح بعدی منتقل می‌شود، به عنوان یک «نقطه شکست» (breakpoint) شناخته می‌شود.
مزیت استفاده از این نوع ساختار این است که شما با مشکلات محتوای تکراری که در پیاده‌سازی m-dot داشتید، مواجه نمی‌شوید.
همچنین پیاده‌سازی موبایل شما بر روی جدیدترین فناوری‌ها خواهد بود.

6-به جای “تصاویر در همه جا”، به “کد” فکر کنید تا سرعت سایت را افزایش دهید

آیا واقعاً نیاز دارید که آن پس‌زمینه دو رنگ را به عنوان یک پس‌زمینه تکراری 2 پیکسلی در عرض 1200 پیکسل استفاده کنید؟
اگر نمی‌توانید و می‌توانید آن را کدنویسی کنید، به جای آن کدنویسی کنید.
در حالی که چیزی به این کوچکی تغییر بزرگی در سرعت سایت ایجاد نمی‌کند، بهینه‌سازی‌ها می‌توانند جمع شوند.
دفعه بعد که یک ممیزی سایت انجام دادید یا به هر نحوی یک وب‌سایت ایجاد کردید، فکر کنید: “آیا واقعاً به این تصویر در اینجا نیاز دارم یا می‌توانم به جای آن کدنویسی کنم؟”
اگر تصویر واقعاً ضروری نیست، کدنویسی شیء می‌تواند به افزایش سرعت سایت به طور قابل‌توجهی کمک کند، به ویژه در طراحی‌هایی که از تعداد زیادی گرافیک استفاده می‌کنند.

7-وردپرس را برای موبایل سفارشی کنید

افزونه‌های زیادی برای وردپرس موجود است.
به قدری که حتی برخی از آنها قابلیت افزایش سازگاری موبایل را فراهم می‌کنند.
مفیدترین افزونه‌ها برای این منظور شامل Duda Mobile، W3 Total Cache و همچنین افزونه‌هایی برای کوچک‌سازی HTML و CSS می‌باشد.

8-از استفاده از اینترستشیال‌های مزاحم برای فروش محصول خود خودداری کنید

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

9-سایت خود را روی سیستم‌های عامل و نمایش مختلف بررسی کنید

هر SEO باید بداند چگونه ضعف‌های موجود در پیاده‌سازی یک وب‌سایت را شناسایی کند، از جمله اینکه کجا و چگونه مشکلات را در نمایش‌ها و دستگاه‌های مختلف پیدا کند.
شما می‌خواهید سایت خود را در بیش از یک سیستم‌عامل و همچنین بیش از یک دستگاه نمایش بررسی کنید. انجام این کار اطمینان می‌دهد که سایت شما با بیشترین تعداد ممکن از نمایش‌ها و پلتفرم‌ها سازگار است.
اما اگر نمی‌توانید هزاران دستگاه برای بررسی آنها بخرید چه؟
همه اینها به چند برنامه می‌رسد. بله! این امکان وجود دارد که این نوع مشکلات را با بیش از یک برنامه بررسی کنید.
افزونه توسعه‌دهنده وب گوگل برای کروم
اگر بودجه‌تان محدود است، استفاده از افزونه توسعه‌دهنده وب گوگل برای کروم می‌تواند به شما کمک کند تا ببینید سایت شما در اندازه‌ها و وضوح‌های مختلف صفحه نمایش چگونه به نظر می‌رسد.
همچنین این امکان را می‌دهد که ببینید سایت شما از طریق جهت‌گیری‌های مختلف دستگاه چگونه به نظر می‌رسد، چگونه ورودی‌های لمسی از طریق شبیه‌سازی تعامل دارند و موارد دیگر.
همچنین امکان استفاده از ابزار اشکال‌زدایی آنها برای بررسی کد سایت برای مشکلات وجود دارد.
BrowserStack
BrowserStack.com یک ابزار عالی برای تست در بسیاری از مرورگرها، سیستم‌عامل‌ها و وضوح‌های نمایش است. آنها همچنین یک افزونه گوگل کروم دارند که می‌توانید برای این منظور استفاده کنید.
شما می‌توانید هر سایتی را روی بیش از 2000 دستگاه واقعی، مرورگرها و سیستم‌عامل‌ها تست کنید.
با داشتن یک حساب کاربری پولی، دسترسی نامحدود به افزونه مرورگر آنها برای تست دارید.
Cross Browser Testing
CrossBrowserTesting.com یک جایگزین برای BrowserStack است که می‌توانید برای تست مرورگرها و دستگاه‌ها استفاده کنید.
بیش از 1500 مرورگر و پلتفرم برای تست ارائه می‌دهد، محصول آن در مورد کاری که می‌توانید انجام دهید کم نیست.
مقایسه اسکرین‌شات‌ها با ابزار آنها ممکن است، همراه با امکان شبیه‌سازی نحوه رفتار وب‌سایت شما بر روی دستگاه‌های واقعی.

10-بهترین شیوه‌های ویدئوی موبایل را دنبال کنید

بله، بهترین شیوه‌های SEO برای ویدئوی موبایل وجود دارد! گوگل هنوز هم نیاز دارد که برخی از سیگنال‌ها در صفحه قرار داده شود تا موتور جستجوی آن بهتر ویدئوی موجود در آن صفحه را درک کند.
این مقاله از خود متیو ساترن از ژورنال موتور جستجو پنج بهترین شیوه SEO برای ویدئو گوگل را شرح می‌دهد.
مواردی مانند متن در صفحه، لینک‌های ارجاعی، داده‌های ساختاریافته و فایل‌های ویدئویی مهم هستند.
همچنین موارد دیگری نیز وجود دارد که هنگام ایجاد ویدئوها باید به آنها توجه کنید.
برای مثال، باید اطمینان حاصل کنید که ویدئوهای شما برای عموم قابل دسترسی هستند. این به معنای اطمینان از این است که تنظیمات حریم خصوصی یوتیوب شما روی عمومی تنظیم شده باشد و باید یک صفحه وب قابل دسترسی توسط گوگل با آن ویدئو داشته باشید.
با استفاده از داده‌های ساختاریافته، استفاده از نوع داده VideoObject در Schema.org توصیه می‌شود.
گوگل استفاده از بهترین شیوه‌های ویدئوی موبایل زیر را برای یک پیاده‌سازی بی‌نقص ویدئوی موبایل توصیه می‌کند:

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

پیاده‌سازی فنی جامع ویدئوی موبایل آنها بی‌نظیر است و شما را در این فرآیند گام به گام هدایت می‌کند.
همان‌طور که گوگل می‌گوید:
«اگر دلیل اصلی بازدید کاربر برای ویدئو است، این تجربه کاربری باید همه‌گیر و مجدداً جذب‌کننده شود.»
علاوه بر موارد واضح، دیگر بهترین شیوه‌های SEO برای ویدئوی موبایل شامل موارد زیر است:
تا حد ممکن کار را برای گوگل آسان کنید تا ویدئوهای شما را پیدا کند. این به معنای:

• استفاده از یک نقشه سایت ویدئویی: اگر یک نقشه سایت ویدئویی ارسال نکنید، گوگل ممکن است نتواند ویدئوهای شما را به طور مستقیم پیدا کند. یک نقشه سایت ویدئویی این امکان را فراهم می‌کند که این نقشه سایت را در کنسول جستجوی گوگل ارسال کنید، که این امر به گوگل کمک می‌کند تا به راحتی ویدئوهای شما را بخزد و احتمالا آنها را ایندکس کند.
• از اقدامات پیچیده کاربر یا قطعات URL استفاده نکنید: اگر این‌ها برای بارگذاری ویدئوهای شما استفاده شوند، ممکن است گوگل به هیچ وجه نتواند ویدئوهای شما را پیدا کند، زیرا این موارد در صفحه شما برای گوگل بسیار پیچیده هستند.
• از یک تگ HTML به راحتی قابل شناسایی استفاده کنید: برخی از تگ‌های معتبر شامل ویدئو، iframe، شیء یا جاسازی هستند. برای گوگل راحت‌تر است که ویدئوها را شناسایی کند وقتی که آنها در داخل تگ‌های معمول جاسازی شده باشند.
• اطمینان حاصل کنید که ویدئوهای شما واقعاً قابل ایندکس شدن هستند. این اتفاق می‌افتد: گاهی اوقات ممکن است کسی تغییراتی در یک فایل robots.txt ایجاد کند که باعث شود فایل‌های ویدئو از خزیدن منع شوند (به تقصیر شما… امیدواریم که نه). اگر ویدئوهای شما در حال ایندکس شدن بودند و حالا ناگهان دیگر ایندکس نمی‌شوند، ارزش آن را دارد که نگاهی به فایل robots.txt بیندازید تا مطمئن شوید آنها مسدود نشده‌اند.
• از فرمت‌های تصویر کوچک (thumbnail) پشتیبانی شده توسط گوگل استفاده کنید: همچنین بهترین شیوه‌های تصویر کوچک وجود دارد که باید در مستندات توسعه‌دهنده وب گوگل رعایت کنید.
  SEO ویدئوی موبایل همیشه به اندازه‌ای که یک نفر ممکن است فکر کند آسان نیست.
  اگرچه هر جعبه‌ای لازم نیست تیک بخورد، اما مواردی وجود دارد که اگر آنها رعایت نشوند، می‌توانند برای خزیدن و ایندکس شدن ویدئوهای موبایل شما مضر باشند.

11-از داده‌های ساختاریافته Schema.org استفاده کنید

داده‌های ساختاریافته Schema.org نه تنها برای شناسایی صفحاتی در سایت شما که اطلاعات ساختاری ویژه‌ای دارند که موتورهای جستجو باید ببینند مهم است، بلکه وقتی شاخص موبایل به طور کامل اجرایی شود، انتظار می‌رود که اتکای بیشتری به Schema وجود داشته باشد.
این یک روش مختصر و آسان برای درک اطلاعات است که می‌تواند به ریچ اسنیپت‌ها در نتایج جستجوی موبایل ترجمه شود.
اما به هر حال، این نظر نویسنده است که داده‌های ساختاریافته Schema حتی در پیاده‌سازی‌های دسکتاپ نیز استفاده شود، زیرا می‌تواند به شما کمک کند در نتایج ریچ اسنیپت بر اساس کلمه کلیدی هدف شما ظاهر شوید. این می‌تواند به افزایش دیده‌شدن سایت شما در صورتی که به درستی پیاده‌سازی شود کمک کند.

12-اسکریپت‌های پشتیبانی مانند جاوا اسکریپت، CSS یا چیزهایی مانند تصاویر را مسدود نکنید

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

13-فشرده‌سازی و بهینه‌سازی تصویر

برای وب موبایل، بهینه‌سازی تصویر یک جزء حیاتی است که باید به درستی انجام شود. این بدان معناست که باید اطمینان حاصل کنید که تصاویر به درستی برای همه اندازه‌های تصویر در همه وضوح‌های ممکن بهینه‌سازی شده‌اند.
امکان ایجاد یک تصویر و اطمینان از اینکه در همه جا قابل مشاهده است وجود ندارد. خب، می‌توانید. اما در وضوح‌هایی که برای آن ساخته نشده است، به صورت تحریف شده به نظر می‌رسد.
در عوض، با استفاده از بهترین شیوه‌های SEO جامع و اطمینان از ایجاد تصاویری که با کیفیت بالا در هر وضوحی هستند اما به سرعت بارگذاری می‌شوند، چیزی است که توصیه می‌شود.
به همین دلیل است که گوگل چندین بهترین شیوه برای طراحی واکنش‌گرا را توصیه می‌کند که باید در بهینه‌سازی تصاویر برای پلتفرم موبایل استفاده شوند. آنها موارد زیر را توصیه می‌کنند:

1. استفاده از اندازه‌های نسبی تصویر. اگر از اندازه‌های نسبی تصویر استفاده کنید، آنها را از سرریز شدن برچسب ظرفی که تصویر را در خود جای داده است جلوگیری می‌کنید.
2. استفاده از تصاویر درون‌خطی. امکان کاهش سرعت صفحه با اطمینان از استفاده از تصاویر درون‌خطی برای کاهش درخواست‌های فایل وجود دارد. اینها باید در صفحاتی که ممکن است در جای دیگری در سایت شما استفاده نشوند، استفاده شوند.
3. برای دستگاه‌های با DPI بالاتر از ویژگی srcset برای تصاویر استفاده کنید. این به شما کمک می‌کند بیش از یک فایل تصویر برای دستگاه‌های مختلف اضافه کنید.
4. اگر در حال انجام SEO برای تجارت الکترونیکی هستید، ممکن است بخواهید تصاویر محصول خود را قابل گسترش کنید. مشتریان ممکن است بخواهند تصویری که احتمالاً در حال خرید آن هستند را بر روی دستگاه خود بزرگ کنند تا آن را بهتر ببینند. بنابراین ارائه این گزینه منطقی است.

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

14-بهینه‌سازی اندازه کلی صفحه

اندازه صفحه یک ملاحظه اصلی برای یک وب‌سایت موبایل دوستانه است. برای اینکه واقعاً موبایل دوستانه باشد، اندازه صفحه باید سریع بارگذاری شود. برای انجام این کار، بهینه‌سازی اندازه کلی DOM ضروری است.
برای انجام این کار به طور مؤثر، باید نه تنها آنچه در لینک بالا بحث کرده‌ام را در نظر بگیرید، بلکه موارد زیر را نیز در نظر بگیرید:
از فونت‌های سفارشی غیرضروری استفاده نکنید
استفاده از فونت‌های سفارشی غیرضروری می‌تواند فرآیند بارگذاری صفحه شما را پیچیده کند و تعداد اسکریپت‌هایی که برای پردازش صفحه شما لازم است را افزایش دهد.
این به زمان بارگذاری صفحه افزوده می‌شود و می‌تواند امتیازات Core Web Vitals شما را از محدوده مطلوب خارج کند.
در صورت امکان، از فونت‌های سیستم به جای آن استفاده کنید و می‌توانید تأثیری که این مسئله ایجاد می‌کند را به حداقل برسانید.
تصاویر خود را بهینه کنید
همچنین باید اطمینان حاصل کنید که تصاویر خود را بهینه‌سازی می‌کنید در حالی که کیفیت تصویر را حفظ می‌کنید. نتیجه‌ای حرفه‌ای نیست اگر کسی به سایت شما برسد و کیفیت تصویر شما به دلیل فشرده‌سازی بیش از حد دانه‌دانه به نظر برسد، شما به بهترین نتیجه نرسیده‌اید.
ایده‌آل این است که از اندازه‌های فایل تصویری استفاده کنید که با چیزی که بالاترین کیفیت را در دستگاه‌های موبایلی که سایت شما برای آنها بهینه‌سازی شده است تولید می‌کند هم‌خوانی داشته باشد، در حالی که اطمینان حاصل کنید که از آن نقطه کیفیتی پایین نمی‌آیید.
این یک عمل تعادل ظریف است و نیازمند کسی است که تخصص در بهینه‌سازی تصاویر داشته باشد تا به نتایج مطلوب برسد.
میزان منابعی که کل DOM و مسیر رندر حیاتی نیاز دارد را کاهش دهید
هر چه منابعی که صفحه شما برای رندر نیاز دارد بیشتر باشد، سرعت دانلود صفحه شما بالاتر خواهد بود. شما هرگز نباید به بیش از 10 افزونه (حداکثر) و سه تا چهار فایل اسکریپت برای پردازش یک صفحه وب نیاز داشته باشید.
این نویسنده مواردی را دیده است که در آن 160 افزونه در حال بارگذاری هستند و اندازه فایل صفحه 10 مگابایت است. این به هیچ وجه جایی نیست که می‌خواهید باشید.
برای مؤثر بودن، نظر این نویسنده این است که صفحات یک سایت وردپرس هرگز نباید بیش از 150-250 کیلوبایت – به طور متوسط – و نباید بیش از پنج تا هفت منبع داشته باشند (CSS، فونت خارجی در صورت نیاز، یک فایل تبلیغاتی، یک فایل جاوا اسکریپت و سه افزونه). اگر بیشتر نیاز دارید، ممکن است به اندازه‌ای که فکر می‌کنید بهینه‌سازی نشده باشید.
و از صرفه‌جویی‌هایی که استفاده از فونت‌های سیستم به جای فونت‌های وب خارجی برای شما به ارمغان می‌آورد، غافل نشوید.
صفحات خود را کوچک‌سازی کنید
فرآیند کوچک‌سازی صفحات شما شامل فشرده‌سازی فایل‌های شما برای صرفه‌جویی در فضا و کاهش زمان بارگذاری کلی صفحه‌های شما به عنوان نتیجه است.
استفاده از کوچک‌سازی به عنوان یک فرآیند به شما کمک می‌کند تا فضای خالی ناخواسته در کد خود را از بین ببرید و آن کد را فشرده کنید تا کمترین فضای ممکن را اشغال کند.
بهترین فرآیند به طور ایده‌آل بدون افزونه‌ها خواهد بود. شما می‌خواهید یک توسعه‌دهنده را استخدام کنید تا صفحات شما را به صورت دستی کوچک‌سازی کند.
اگر قبلاً با افزونه‌ها زیاد بارگذاری شده‌اید، افزودن یک افزونه دیگر برای کوچک‌سازی صفحات شما ایده بدی است. در این موارد، شما می‌خواهید از یک توسعه‌دهنده حرفه‌ای برای این کار استفاده کنید تا بهترین نتیجه را بگیرید.
اگر افزونه‌های حداقلی دارید، استفاده از یک توسعه‌دهنده حرفه‌ای برای این کار به شما کمک می‌کند تا زمان بارگذاری صفحات و امتیازات Core Web Vitals بهتری را بدست آورید.
اگر مجبورید از یک افزونه استفاده کنید، فقط مطمئن شوید که از آن به عنوان یک اقدام موقت استفاده کنید تا زمانی که بتوانید یک توسعه‌دهنده حرفه‌ای داشته باشید که به طور دستی کد شما را کوچک‌سازی کند.

موبایل-محور اینجاست؛ نیاز به پیاده‌سازی به اوج خود رسیده است

با ورود شاخص موبایل-محور گوگل، پیاده‌سازی وب‌سایت سازگار با چندین پلتفرم، چندین دستگاه و چندین سازگاری اکنون به اولویت بزرگی تبدیل شده است.
این به این معنی است که هرچه بیشتر تأخیر کنید، بیشتر از نداشتن تنها یک پیاده‌سازی موبایل، بلکه نداشتن پیاده‌سازی مناسب موبایل هزینه خواهید کرد.
نه تنها رتبه‌بندی‌ها.
اگر هنوز به موبایل جهش نکرده‌اید، چرا نه؟
(عکس)

منبع: https://www.searchenginejournal.com/mobile-optimization-best-practices-mobile-first/250449/