آموزش افزایش سرعت بارگذاری سایت در موبایل

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

بهترین تکنیک ها که به شما کمک می کند سرعت لود سایت خود را در تلفن همراه افزایش دهید.

زمان مناسب برای لود سایت در موبایل چند ثانیه است ؟

گوگل پارامترهای  زیر را به عنوان بهترین روش برای صفحات تلفن همراه توصیه می کند:

• کمتر از 3 ثانیه: صفحه تلفن همراه به سرعت محتوا را به کاربران نشان می دهد.
• زیر 1.3 ثانیه: سرور وب موبایل سریع و بهینه است (به عنوان مثال زمان لود اولین بایت).
• کمتر از 50: تعداد محتوا مورد نیاز برای نمایش کل صفحه تلفن همراه.
• کمتر از 500 کیلوبایت: اندازه کلی یک صفحه وب موبایل، اندازه گیری شده در بایت.

سرعت بارگذاری سایت شما در موبایل چقدر باید باشد؟

در اولین قدم: می بایست بررسی کنید چه مقدار زمان نیاز است تا سایت شما در موبایل بصورت کامل لود شود. جهت مشاهده این پاسخ می توانید به صفحه Test your mobile speed page مراجعه کنید و بعد از وارد کردن آدرس سایت خود، نتیجه را مشاهده کنید.

این آزمون سایت شما را با استفاده از یک اتصال استاندارد 3G یا 4G بررسی خواهد کرد و HTML و CSS، جاوا اسکریپت، فشرده سازی، قابلیت استفاده در موبایل را بررسی می کند و همچنین سرعت سایت شما را با سایر سایت ها مقایسه میکند . هنگامی که اسکن انجام می شود، شما زمان بارگذاری سایت در تلفن همراه و تخمین تعداد بازدید کنندگانی که سایت شما را ترک کرده اند را مشاهده می کنید. همچنین با چند اصلاحیه می تواند به شما بگوید که چقدر می توانید زمان بارگذاری سایت خود را در موبایل کاهش دهید.

این سایت یک گزارش رایگان ارائه می دهد که می توانید از آن برای تشخیص مشکلات سایت خود استفاده کنید. توصیه می شود که بهینه سازی در سه حوزه عمومی انجام شود:

• کاهش حجم صفحه سایت
• تعداد درخواستها را کاهش دهید (درخواست های ارسالی سمت سرور)
• اولین واکنش سایت در سریعترین زمان انجام شود

در ادامه پیشنهاد می شود جزئیات سه دسته ذکر شده را مشاهده و چگونگی رفع نواقص را مطالعه نمایید.

چگونه می توان سرعت لود سایت را در موبایل سریع تر کرد؟

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

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

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

برای کمک به تصمیم گیری آگاهانه، از Google Analytics برای پیدا کردن صفحاتی که بازدیدکنندگان با تلفن همراه آنها را بازدید می کنند استفاده کنید. برای این کار، در پنل Google Analytics خود به منوی “رفتار” سپس “محتویات سایت” رفته و در نهایت به “همه صفحات” بروید. پس از کلیک بر روی “اضافه کردن بخش” می بایست “ترافیک موبایل” را کلیک کنید (ویدئو 1) تا صفحه رفرش و اطلاعات نمایش داده شود. در صفحه باز شده می توانید صفحاتی که بیشترین بازدید را از طریق موبایل داشته اند مشاهده کنید.

در ویدئوی زیر می توانید نحوه دسترسی به آمار بازدیدکنندگان سایت از طریق موبایل را مشاهده کنید:

کاهش حجم صفحات سایت

گوگل سه اصلاح زیر بر روی سایت را برای کاهش حجم صفحات سایت توصیه می کند:

1. تصاویر را فشرده کنید

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

عکس ها را بارگیری نکنید. شما می توانید این ویژگی را در WP Rocket فعال کنید.

2. فشرده سازی اطلاعات با GZIP

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

3. Minify و یا کوچک کردن فایل های سایت

فایل های HTML، CSS و جاوا اسکریپت در زمان لود شدن سایت تعداد درخواست های HTTP که برای بارگذاری صفحات سایت نیاز دارد را به سرور ارسال می کنند. با ترکیب و حذف این فایل ها، می توانید تعداد کلی فایل هایی را که نیاز به بارگذاری دارند و همچنین حجم کل فایل های سایت خود را کاهش دهید.

Minify کردن فایل های HTML، CSS و جاوا اسکریپت به معنی حذف کاراکترهای غیر ضروری در فایل های شما از قبیل نظرات، قالب بندی، فضای سفید و فایل های جدید است که برای اجرای سایت به آنها نیاز نمی باشد.

ترکیب فایل ها به معنای ادغام دو یا چند فایل CSS به یک فایل و انجام همان کار برای فایل های HTML و جاوا اسکریپت است. این موضوع می تواند به کاهش تعداد درخواست های HTTP مورد نیاز برای بارگذاری سایت شما و در نتیجه افزایش لود سایت شما کمک کند.

توجه: اگر شما از HTTP / 2 استفاده می کنید، این بدان معنی است که چندین درخواست ممکن است در همان زمان اتفاق بیفتد و ترکیب فایل ها در کمتر شدن زمان بارگذاری صفحه تلفن همراه شما تاثیر خواهد داشت.

کاهش تعداد درخواست ها:

دسته دوم از توصیه های گوگل برای رفع نواقص سایت مربوط به کاهش تعداد درخواست های HTTP برای سایت شما می باشد. گوگل سه اصلاح زیر را برای کاهش درخواست ها توصیه می کند:

1. Leverage Browser Caching

اگر بازدیدکنندگان سایت شما از مرورگرهایی استفاده کنند که بتوانند فایلهای استاتیک را کش کنند، لزوما نیازی به دانلود محتوای استاتیک سایت شما در دفعات بعدی آن نیست. برای کمک به این روند، مطمئن شوید که ذخیره سازی مرورگر را برای سایت تلفن همراه خود در افزونه WP Rocket (ویدئو 2) فعال کرده اید.

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

2. حذف رندر-مسدود کردن جاوا اسکریپت و CSS در صفحات سایت

اگر تا کنون سایت خود را از طریق Google PageSpeed Insights اجرا کرده باشید، بدون شک با این توصیه گوگل آشنا هستید.

اساسا این بدان معنی است که فایل های جاوا اسکریپت و یا CSS هایی وجود دارد که مانع بالا رفتن سرعت بارگذاری صفحات سایت شما می شود زیرا مرورگر هر بار که با این فایل ها مواجه می شود می بایست آنها را دانلود کند و بدتر از آن اینکه آنها را قبل از بارگذاری بقیه محتوا سایت بارگیری کند. برای اطمینان از سرعت بارگذاری CSS و اسکریپت ها، می توانید CSS را بهینه سازی کنید و بارگذاری فایل های جاوا اسکریپت را در WP Rocket انجام دهید.

هنگامی که گزینه “Optimize CSS delivery” را فعال می کنید، CSS هایی اولویت کمی دارند برای سایت شما در پس زمینه ایجاد می شود و بعد از بارگذاری صفحه لود خواهند شد. پس از آن، CSS به صورت یکسان در سایت شما بارگیری و سایت شما با سرعت بالاتری لود می شود.

3. اجتناب از تغییر مسیر صفحه فرود یا لندینگ پیج

هنگامی که در سایت خود یک ریدایرکت ایجاد می کنید، آنها یک چرخه پاسخ-درخواست HTTP اضافی را اجرا می کنند و رندر صفحه را به تاخیر می اندازند.

در واقع، هنگامی که روی پیوندی کلیک می کنید، سرور محتوا را برای صفحه ای که در آن پیوند یافت می شود فراهم می کند. اما زمانی که یک تغییر مسیر وجود دارد، هیچ سندی در لینک وجود ندارد، بنابراین سرور باید به صفحه ای که سند در آن وجود دارد برود و آن را لود کند. این فرایند برای هر فایل روی یک صفحه صورت می گیرد، یعنی هر تصویر، فایل CSS و اسکریپت باید از مسیر هدایت ( ریدایرکت) عبور کند.

در اینجا چند نمونه از الگوهای تغییر مسیر وجود دارد:

• example.com : از طراحی ریسپانسیو استفاده می کند، هیچ ریدایرکتی نیاز نیست = سریع و بهینه !
• example.com → m.example.com/home = کاربران موبایل می بایست به صفحه دیگری ریدایرکت شوند.
• example.com → www.example.com → m.example.com = لود سایت تلفن همراه بسیار کند است.

• Map Redirection Varvy می تواند به شما کمک کند تا ببینید که چگونه ریدایرکت ها را در سایت خود انجام داده اید. هنگامی که شما تغییراتی را در صفحات سایت خود انجام می دهید، می توانید آنها را ردیابی کرده و هر آنچه که لازم نیست را تغییر دهید.

اولین لود در سریعترین زمان انجام شود

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

گوگل توصیه می کند این مراحل را برای بالا بردن لود اولیه انجام دهید:

• بارگذاری محتوای قابل مشاهده قبل از فایل های CSS و جاوا اسکریپت
• مدل عملکرد RAIL از گوگل توصیه می کند اولین استارت برای لود سایت در یک ثانیه تحویل داده شود و در زمان کمتر از 5 ثانیه کامل شود.
• برای رسیدن به این هدف، بر روی بهینه سازی فایل های سایت خود تمرکز کنید. گوگل توصیه می کند صفحات سایت در دستگاه های موبایل با استفاده از شبکه 3G باید در 5 ثانیه یا کمتر بارگذاری شوند و برای دفعات بعدی، هدف 2 ثانیه یا کمتر است.

زمان پاسخ دهی سرور را کاهش دهید

زمان لود اولین بایت یا TTFB، به بیان ساده، اندازه گیری مدت زمانی است که مرورگر باید قبل از دریافت اولین بایت داده از سرور منتظر بماند.

گوگل توصیه می کند TTFB زیر 200ms باشد تا بازدیدکنندگان سایت با صرف زمان کمتری برای انتظار لود اولیه آن صفحه را مشاهده کنند، این مورد باعث می شود کاربر بلافاصله از سایت خارج نشود و به یک بازدید کننده ثابت از سایت شما تبدیل شود.

هنگامی که به یک سایت وردپرسی مراجعه می کنید، عوامل متعددی وجود دارد که می توانند TTFB را تحت تاثیر قرار دهند:

• تاخیر شبکه
• ترافیک بالای سایت
• پیکربندی سرور و عملکرد
• محتوای پویا
• زمان پاسخ دهی DNS

برای حل مسائل مربوط به ترافیک وب یا مشکلات شبکه، شما نمی توانید کار خاصی انجام دهید. اما راه هایی وجود دارد که می توانید تنظیمات سرور، محتوای پویا و زمان پاسخدهی DNS را بهبود ببخشید که در ادامه بررسی خواهد شد.

در اولین قدم می بایست زمان لود اولیه سایت را بررسی کنید، برای این منظور می توانید از سایت های مانند GTMETRIX و یا WebPageTest استفاده کنید. بعد از اینکه زمان لود اولیه سایت مشخص شد می بایست با مقدار توصیه شده توسط گوگل (زیر 200ms) مقایسه کنید و اگر زمان لود بالا بود می بایست برای بهبود آن اقدام نمائید. از جمله راه های بهبود لود اولیه سایت می توان به استفاده از یک میزبان هاست سریع، بروزرسانی وردپرس، افزونه ها و قالب، کاهش درخواست های ارسالی سمت سرور، استفاده از CDN ها مانند کلودفلر و استفاده از سرویس Premium DNS اشاره کرد.