هی بلاگ

7 مرحله برای بهینه سازی تجربه کاربر، سریعتر کردن وب سایت و بهبود رتبه بندی جستجوی موبایل

رایانه‌های رومیزی پردازنده‌های بهتری دارند و سرعت اتصال به اینترنت آن‌ها اغلب قابل اعتمادتر از دستگاه‌های تلفن همراه در شبکه داده یک شرکت مخابراتی است. این بدان معناست که سایت‌های روی دستگاه‌های تلفن همراه اغلب کمی کندتر از رایانه رومیزی بارگیری می‌شوند، حتی اگر سایت برای دستگاه‌های تلفن همراه بهینه شده باشد.
سرعت بارگذاری صفحه (یا وب سایت شما) یکی از جنبه های مهم بهینه سازی موتور جستجوی موبایل (SEO) است. عملکرد وب نه تنها بر رتبه بندی جستجو تأثیر می گذارد، بلکه بر تجربه تلفن همراه کاربران شما نیز تأثیر می گذارد. برای بهینه‌سازی سرعت بارگذاری صفحه برای دستگاه‌های تلفن همراه، درخواست‌های رفت و برگشت، مسدود کردن رندر، بارگذاری آهسته، فشرده‌سازی، کش کردن و گزینه‌های کد AMP-HTML (تسریع شده صفحه موبایل HTML) را در نظر بگیرید.

نحوه افزایش سرعت بارگذاری صفحه در هفت مرحله

دستورالعمل‌های موبایل گوگل جزئیات خاصی در مورد سرعت بارگذاری صفحه یا سرعت دستگاه تلفن همراه ارائه نمی‌دهند، اما به دلایل مختلفی همچنان برای سئوی موبایل مهم هستند. گوگل زمان محدودی برای خزیدن در هر سایت دارد. با افزایش سرعت بارگذاری سایت ها، گوگل تشویق می شود تا صفحات بیشتری را بخزد. این بدان معنی است که بهبود سرعت وردپرس شما می تواند باعث کشف سریعتر و نمایه سازی صفحات و محتوای جدید و همچنین خزیدن عمیق تر در سایت شود. حتی اگر رتبه شما در هر صفحه یکسان باشد، تعداد کل صفحاتی که توانایی رتبه بندی را دارند افزایش می یابد، که اغلب بر ترافیک کلی ارگانیک، به ویژه برای مدت طولانی، تأثیر می گذارد.
علاوه بر ملاحظات بودجه برای خزیدن در سایت در عمق، سرعت و زمان پاسخگویی دستگاه تلفن همراه شما نیز از دیدگاه کاربر واقعی تأثیر دارد که اغلب منجر به نرخ پرش بالا می شود.
هنگام بهینه سازی بارگذاری و عملکرد وب سایت تلفن همراه خود، هدف همیشه باید این باشد که بدترین سناریوی بارگذاری روی دستگاه های تلفن همراه را قبل از هر معیار عملکرد دیگری در نظر بگیرید. تست سرعت وب‌سایت خود را انجام دهید و عملکرد آن را بهینه کنید تا مطمئن شوید که سریع‌ترین صفحه ممکن را تا حد امکان کاربران تلفن همراه ارائه می‌دهید. حتی اگر شبکه های تلفن همراه سریعتر می شوند، ایده آل این است که یک صفحه را در کمتر از 3 ثانیه یا طبق توصیه های گوگل در کمتر از 1 یا 2 ثانیه بارگیری کنید.
با این حال، مرورگرهای تلفن همراه صفحات را متفاوت از مرورگرهای دسکتاپ تجزیه و بارگذاری می کنند. به عبارت ساده تر، مرورگرهای دسکتاپ در بارگذاری صفحاتی که درخواست های کوچک زیادی دارند بهتر عمل می کنند، در حالی که صفحات موبایلی در بارگذاری صفحاتی که درخواست های کمتر و سازماندهی بیشتری دارند، حتی اگر کمی بزرگتر باشند، بهتر عمل می کنند. تعداد عناصری که برای بارگیری یک صفحه باید از سرور واکشی شوند، مربوط به درخواست های رفت و برگشت یا RTR است. بخش بزرگی از بهینه سازی و بهبود سرعت صفحه موبایل، به حداقل رساندن RTR است.
می توانید RTR ها را به عنوان خرید مواد غذایی برای برداشتن غذا برای تهیه دستور غذا در نظر بگیرید. اگر به 4 پیاز نیاز دارید، نیازی به سفر جداگانه برای هر یک از پیازها نیست: گرفتن همه آنها به یکباره منطقی تر است، و حتی بهتر است اگر بتوانید هر 4 پیاز و برخی از مواد دیگر را یکجا تهیه کنید. . اگر 4 پیاز با مواد دیگری مانند فلفل، قارچ و کرفس که همه برای دستور غذا لازم است بسته بندی می شد، حتی بهتر بود.
در اینجا چند توصیه برای بهینه سازی سرعت سایت های تلفن همراه شما وجود دارد:

1. صفحاتی را که دارای RTR بسیار بالایی هستند شناسایی کنید

به حداقل رساندن RTR با افزایش آگاهی شروع می شود. بسیاری از صفحات حاوی بیش از 100 RTR در هر صفحه هستند، در حالی که این رقم باید کمتر از 50 باشد. اغلب توسعه دهندگان یا کارشناسان سئو که تمام درخواست های یک صفحه را بررسی می کنند، متوجه می شوند که برخی از موارد درخواستی دارای کد خطای 404 هستند که نشان می دهد صفحه ای وجود ندارد. ، و هیچ کس متوجه آن نشد. حتی اگر این صفحات ناپدید شوند، مرورگر همچنان برای ارسال درخواست و ایجاد یک نتیجه خالی زمان می برد، بنابراین این صفحات باید فورا حذف یا رفع شوند.
همچنین باید دارایی‌هایی را که منتقل شده‌اند و کدهای 301 یا 302 تولید می‌کنند، اصلاح کنید. این پاسخ‌ها به این معنی است که مرورگر باید به یک مکان برود و سپس مجموعه دستورالعمل‌های دیگری را برای رفتن به مکان دیگری دنبال کند تا بتواند کدهای فعال را دریافت کند. هر مکان جدید بیشتر طول می کشد. مثل این است که وارد یک فروشگاه مواد غذایی می شوید، فقط به شما می گویند که محصولی که به دنبال آن هستید موجود نیست، اما می توانید آن را در فروشگاه دیگری تهیه کنید. بدتر از آن، اگر زنجیره ای از تغییر مسیرها وجود داشته باشد، مانند این است که به فروشگاه مواد غذایی دوم بروید و متوجه شوید که آنها نیز محصول شما را ندارند، و شما باید به فروشگاه سوم بروید.

2. در صورت امکان فایل ها را ترکیب کنید

گام بعدی برای یک وب سایت بهینه، ترکیب فایل ها (مانند جاوا اسکریپت و CSS) در جایی که می توانید است. برای مثال، اگر یک صفحه از 10 شیوه نامه (فایل های CSS) استفاده می کند که می توانند در یک شیت ترکیب شوند، باید فوراً این کار را انجام دهید. به همین ترتیب، اگر از انواع فایل های جاوا اسکریپت استفاده می کنید که می توانند در یک فایل واحد ترکیب شوند، باید این کار را نیز انجام دهید. استفاده از عناصر در سطح سایت و مدل خاص را در نظر بگیرید. شما باید یک فایل جاوا اسکریپت برای کل سایت داشته باشید تا جاوا اسکریپت در هر صفحه سایت وجود داشته باشد و یک فایل جاوا اسکریپت مخصوص هر صفحه قالب سایت باشد. همین امر در مورد CSS نیز صادق است. با اطمینان از اینکه این فایل‌ها همیشه با نام فایل و مکان یکسانی ارجاع می‌شوند، ذخیره آن‌ها به درستی آسان‌تر خواهد بود.

3. سفارش رندر را بهینه کنید

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

4. یک استراتژی بارگذاری صفحه ایجاد کنید.

از آنجایی که موتورهای جستجو کاربران انسانی را تکرار می کنند، صفحات را به همان شیوه شما درک می کنند. بهترین کاری که می توانید برای افزایش سرعت انجام دهید این است که بدانید چه چیزی برای تجربه کاربر و خزنده در اولین ثانیه های وارد شدن به صفحه ضروری است. این معمولاً اطلاعات موجود در برچسب "head" و همچنین در متن و تصاویر موجود در صفحه است. معمولاً چند ثانیه طول می کشد تا افراد با هر چیزی تعاملی در سایت درگیر شوند، بنابراین اکثر جاوا اسکریپت ها در ابتدا نیازی به بارگذاری ندارند. در مقابل، نمایش های بصری جاوا اسکریپت، مانند جعبه های بعلاوه یا "بسط دهنده ها"، می توانند به عنوان جایگزین قبل از نیاز به جاوا اسکریپت بارگیری شوند. بارگذاری جاوا اسکریپت به خصوص کند و خسته کننده است. برای اطمینان از اینکه بارگذاری جاوا اسکریپت تجربه را به حدی کاهش نمی دهد که کاربران و ربات ها برای مدت طولانی در مقابل یک صفحه خالی بنشینند، بهتر است چیزی را بارگیری کنید که کاربران بتوانند به آن نگاه کنند، سپس جاوا اسکریپت را دوباره بارگیری کنید - برنامه ریزی کنید، در حالی که کاربران صفحه را مشاهده می کنند.
بعد از جاوا اسکریپت، ویدیوها و تصاویر کندترین عنصر برای بارگذاری هستند. ویدئوها و تصاویر در پایین صفحه نباید با تجربه بالای صفحه، جایی که کاربران و ربات‌ها معمولا بازدید خود را آغاز می‌کنند، تداخل ایجاد کند. این مفهوم به تعویق انداختن بارگذاری محتوایی که قابل مشاهده نیست، «بارگذاری تنبل» نامیده می شود. بارگذاری تنبل می تواند به روش های مختلفی انجام شود (به تعویق افتاده، ناهمزمان و متاتگ).
بهترین ابزار برای یافتن فرصت‌های بارگذاری آهسته تصویر Google PageSpeed ​​Insights است. برای بهینه سازی تصاویر، می توانید از تگ های بارگذاری آهسته گوگل نیز استفاده کنید، اما تاکنون این روش تنها در مرورگرهای کروم موبایل و دسکتاپ مورد استفاده قرار گرفته است (البته ممکن است در آینده این روش گسترش یابد). از هر روشی که استفاده می کنید، باید از ابزار بازرسی URL در کنسول جستجوی گوگل استفاده کنید تا مطمئن شوید که عناصر کم بارگذاری در رندر صفحه ابزار و در HTML تولید شده قابل مشاهده هستند.

5. هر چیزی را که می توانید فشرده کنید.

پس از به حداقل رساندن و اولویت بندی RTR برای هر قالب صفحه، باید آنچه را که می توانید فشرده کنید. فشرده سازی سرعت صفحه را با صرفه جویی در پهنای باند افزایش می دهد. فشرده‌سازی Gzip روش خوبی برای فشرده‌سازی فایل‌ها است و می‌توان آن را روی اکثر سرورها پیکربندی کرد، اما گزینه‌های دیگری نیز در دسترس هستند. همچنین می‌توانید بیشتر کدها را تحت یک فرآیند کوچک‌سازی قرار دهید، که حجم فایل انتقال نهایی را کاهش می‌دهد. با این حال، فشرده سازی تصاویر با استفاده از این روش ها دشوار است. می‌توانید از صفحه ارزیابی عملکرد در WebPageTest.org استفاده کنید تا چک لیست کامل بهینه‌سازی را بیابید، که تمام دارایی‌های صفحه را نشان می‌دهد، اینکه آیا آنها gzip شده‌اند و سطح فشرده‌سازی آنها را نشان می‌دهد.
برای فشرده‌سازی تصویر، به‌جای gzip کردن و کوچک‌سازی تصاویر، برای طراح مهم است که آنها را در فشرده‌ترین فرمت ممکن به توسعه‌دهنده تحویل دهد، بنابراین فایل‌های تصویر را کوچک می‌کند. در واقع، آنها باید اندازه فایل نهایی را تا حد امکان کوچک نگه دارند بدون اینکه ظاهر تصویر به خطر بیفتد. عکس ها به طور کلی باید به عنوان فایل های JPG و نمادها و آثار هنری به عنوان فایل های GIF ذخیره شوند. برای اینکه تصاویر بزرگ به طور مناسب در رایانه های تمام صفحه نمایش داده شوند، بدون اینکه صفحه نمایش های کوچک موبایل را به هم ریخته، از پروتکل تصویر واکنشی یا استفاده از یک سرور تصویر مانند Fastly استفاده کنید تا به صورت پویا یک نسخه از پیش اندازه تصویر را روی صفحه نمایش های کوچک ارسال کنید.

6. صفحات مناسب را در زمان مناسب کش کنید.

گام بعدی این است که به مرورگرها و خزنده‌ها کمک کنیم تا هر بار از طریق کش مرورگر چه چیزی را می‌توان دوباره استفاده کرد و چه چیزی را باید واکشی کرد، ویژگی‌ای که می‌تواند به روش‌های مختلفی تنظیم شود، از جمله واسطه CDN (شبکه تحویل محتوا). اکثر موارد موجود در یک سایت، به خصوص سایتی که بیش از یک بار در هفته تغییر نمی کند یا اطلاعات بلادرنگی مانند اخبار، آب و هوا یا امتیازات ورزشی را به اشتراک می گذارد، می تواند بیشتر عناصر صفحات خود را به مدت یک سال در حافظه پنهان نگه دارد. ذخیره سازی به این معنی است که وقتی کاربران از یک صفحه بازدید می کنند، مرورگرها حافظه آنها را به صورت محلی جستجو می کنند تا ببینند آیا قبلاً فایل مورد نیاز برای ساخت صفحه را دارند یا خیر. این روش از درخواست های رفت و برگشت جلوگیری می کند و زمان بارگذاری را بهبود می بخشد. روبات های موتورهای جستجو همیشه یک صفحه را به گونه ای می بینند که گویی قبلاً آن را ندیده اند. بنابراین آن‌ها از کش فعال استفاده نمی‌کنند، اما می‌توانند متوجه شوند که کش در حال انجام است و از آن برای تخمین زمان بارگذاری صفحه استفاده کنند.
آنچه شما باید در مورد حافظه پنهان بدانید این است که بر اساس نام فایل ها و مکان آنها در سرور است. بنابراین، اگر از یک فایل در چندین صفحه استفاده می کنید، مانند یک لوگو، همیشه باید با همان نام فایل و URL یکسان ارجاع داده شود، حتی اگر در چندین مکان در سرور شما وجود داشته باشد. این فرآیند می تواند به نفع شما باشد، زیرا به این معنی است که برای دریافت نسخه جدیدی از مورد ذخیره شده در حافظه پنهان، فقط باید نام فایل مورد و مرجع آن را در HTML به روز کنید. به عنوان مثال، اگر تغییری در لوگوی خود ایجاد کنید، به سادگی نام فایل را از "لوگو" به "logov2" تغییر دهید، نسخه جدید در حافظه پنهان ذخیره می شود و نسخه قدیمی فراموش می شود. بنابراین وقتی اجازه می‌دهید یک آیتم برای یک سال در حافظه پنهان ذخیره شود، به این معنی نیست که در طول سال آن را تغییر نمی‌دهید، اما اگر این کار را انجام دهید، به آیتم ذخیره‌شده مراجعه می‌کنید. به‌روزرسانی یا جدید با نام فایل جدید. .
تنظیمات حافظه پنهان ممکن است کمی پیچیده باشد، بنابراین بهترین کار این است که آنها را به عنوان مواد غذایی در نظر بگیرید که ممکن است منقضی شوند. بعضی غذاها سریعتر از بقیه فاسد می شوند. بنابراین باید به مرورگر اطلاع دهید که کدام محصولات قدیمی هستند و باید به سرعت دور ریخته شوند و کدام محصولات می توانند برای مدتی بدون تعویض در قفسه ها بمانند. می توانید از ابزاری مانند WebPageTest.org برای کمک به یافتن فرصت ها استفاده کنید. نکته ای که باید به خاطر بسپارید این است که تاریخ انقضا ثابت و حداکثر سنی برای وجود عنصر در حافظه پنهان وجود ندارد. بنابراین مرورگر فقط فرض می‌کند که باید هر بار تازه واکشی شود، اگر این جزئیات مشخص نشده باشند، کش مرورگر نمی‌تواند رخ دهد.
از آنجایی که تنظیمات حافظه نهان به مرورگر می‌گوید که چه زمانی یک عنصر برای استفاده خیلی قدیمی است، گاهی اوقات به آن «طول عمر حافظه پنهان» یا «طول عمر تازگی» می‌گویند. اگر یک آیتم از تازگی یا عمر حافظه پنهان خود فراتر رفته است، برای دریافت نسخه جدید باید یک رفت و برگشت به سرور انجام شود. اگر اقلام به عنوان "منقضی شده" ذکر شده است، به این معنی است که آنها از عمر مفید خود فراتر رفته اند و دفعه بعد که مورد نیاز است باید جایگزین شوند.
همانطور که پر کردن قفسه‌ها از مواد غذایی تاریخ مصرف گذشته مفید نیست، داشتن حافظه پنهان پر از محتوای وب قدیمی مفید نیست. از طرفی دور انداختن ایمیل ها (فایل ها) که همیشه مفید هستند نیز بی تاثیر است. هنگام اختصاص طول عمر کش به فایل های خود، ارزش آن را دارد که به آن فکر کنید و همچنین عواقب سخاوتمندانه بودن در طول عمر حافظه پنهان را در نظر بگیرید. اگر یک تغییر جزئی در لوگوی خود ایجاد کنید، اگر لوگوی قدیمی هنوز نشان داده شود، پایان دنیا نخواهد بود. بنابراین می توانید این کش را برای مدت طولانی نگه دارید، به خصوص اگر قصد دارید نام فایل ها را هنگام ایجاد تغییرات به روز کنید. با نام فایل های مختلف، هیچ خطری وجود ندارد که لوگوی قدیمی را نشان دهید.

7. صفحات موبایل شتاب (AMP) ایجاد کنید.

همه اینها ممکن است پیچیده به نظر برسد، و به همین دلیل است که گوگل راه حل آسان تری برای بهینه سازی سرعت بارگذاری صفحه ایجاد کرده است. صفحات موبایل تسریع شده یا AMP زیرمجموعه ای از HTML است که از دستورالعمل های بسیار سخت گیرانه تری در مورد آنچه می تواند گنجانده شود پیروی می کند. هدف کاهش زمان بارگذاری بیشتر صفحات به یک ثانیه در دستگاه های تلفن همراه است که معمولاً همینطور است. AMP به Google اجازه می‌دهد تا با ذخیره کردن و پیکربندی فرآیند بارگیری و پیکربندی بیشتر مواردی که در بالا توضیح داده شد، کنترل سخت‌ترین وظایف را در دست بگیرد تا تا حد امکان بهینه شود.
در برخی موارد، شرکت‌ها صفحات AMP جدیدی ایجاد می‌کنند و از صفحات موجود در سایت، یا از تگ "head" به آنها لینک می‌دهند. این به Google می‌گوید زمانی که شخصی که صفحه را درخواست می‌کند در یک دستگاه تلفن همراه یا از اتصال کند استفاده می‌کند، صفحه AMP را ارائه دهد. در موارد دیگر، می‌توانید صفحات موجود آن‌ها (یا صفحات تلفن همراه موجود، اگر سایت‌های جداگانه دارند) را با صفحات AMP جایگزین کنید. این فرآیند "Canonical AMP" یا "Canonical AMP" نامیده می شود. گوگل این روش را ترجیح می دهد زیرا صفحات AMP برای خزیدن، رندر، فهرست بندی و رتبه بندی برای گوگل بسیار آسان است. کسب‌وکارها ممکن است لزوماً این روش را ترجیح ندهند، زیرا محدودیت‌ها و الزامات AMP می‌تواند صفحه‌ها را کمی تیره جلوه دهد. AMP همچنین می‌تواند برخی از ردیابی و آزمایش‌هایی را که می‌توانید در صفحات دسکتاپ انجام دهید پیچیده یا محدود کند، بنابراین این دلیل دیگری است که برخی افراد از آن اجتناب می‌کنند.
سایت هایی که برای AMP معتبر هستند از تمام قوانین و دستورالعمل های AMP پیروی می کنند و به نوبه خود، گوگل آنها را کمی خاکستری در نتایج تلفن همراه نشان می دهد. گوگل به احتمال زیاد آنها را در چرخ و فلک های نتایج ویژه ای که تمایل دارند در بالای صفحه ظاهر شوند، قرار دهد. اگر اعتبار سنجی AMP برای وب سایت شما بسیار مشکل ساز است، می توانید از کد AMP بدون تأیید اعتبار استفاده کنید. توصیه می شود در صورت امکان از AMPHTML استفاده کنید، بدون اینکه نگران رعایت تمام قوانین باشید. شما همچنان سرعت AMPHTML و AMP JavaScript را دریافت خواهید کرد، که با توجه به رایگان بودن آنها بد نیست. به یاد داشته باشید که سرعت تأثیر مستقیمی بر تعامل و تبدیل دارد، اما احتمالاً به خزیدن عمیق و سایر جنبه‌های اثربخشی خزیدن نیز کمک می‌کند.
مرورگرهای موبایل متفاوت از مرورگرهای دسکتاپ کار می کنند. آنها همچنین دارای پردازنده های کندتر و اتصالات کمتر قابل اعتماد هستند. این عوامل باعث می شود که زمان بارگذاری صفحه سایت خود را از بدترین دیدگاه موبایل بررسی کنید تا بفهمید فرصت های واقعی برای بهبود کجاست.