سرعت بارگذاری سایت یکی تز مهم ترین اولویت ها برای تجربه ی کاربری است و همچنین یکی از فاکتورهای رنکینگ SEO محسوب می شود. امروزه مردم نمی توانند بیشتر از پنج ثانیه برای بالا آمدن یک سایت صبر کنند. اگر سایت شما سرعت بارگذاری مناسبی ندارد, قطعا مشتری های زیادی را از دست می دهید.
از اونجا که بیشتر از 50 درصد کاربران از طریق دستگاه های موبایل وارد سایت می شوند, هرکسی انتظار دارد به سرعت سایت مورد نظرش بارگذاری شود. در این مقاله به شما آموزش می دهیم که چطور نمرات عالی از سایت سنجش سرعت Google PageSpeed برای موبایل و دسکتاپ بگیرید.
اینجا می خواهیم تلاش کنیم که نمره ی 100/100 رو از این ابزار گوگل دریافت کنیم. سایتی که در نظر گرفتیم ابتدا نمره ی 87/100 رو داشت. بعد از انجام بهینه سازی های زیر, این نتیجه رو دریافت کردیم :
چطور بارگذاری صفحات را سریع تر کنیم
قبل از اینکه بخواهیم کارهایی که انجام دادیم رو شرح بدیم, به یک نکته توجه کنید که ابزار PageSpeed فقط یک راهنما برای تمرین بهترین عملکرد وب هست. این ابزار پیشنهادهایی رو برای بهینه سازی سایتتون به شما میده تا اینکه سرعت بارگذاری صفحات بالا بره و رسیدن به نمره دلخواه بستگی به این داره که محیط سرور شما چطور تنظیم شده باشه.
برخی از نکات زیر نیاز به تخصص فنی دارد و برخی دیگر ساده تر است. توجه کنید که این نکات رو میشه در هر سیستم مدیریت محتوایی انجام داد.
قدم اول - بهینه سازی تصاویر
ابزار تست سرعت صفحه گوگل پیشنهاد میده که تصاویرمون رو بهینه سازی کنیم تا با کاهش سایز اونها, سرعت بیشتری در بارگذاری صفحات داشته باشیم, ما دو کار انجام دادیم :
- تمامی تصاویر رو با استفاده از ابزارهایی مثل Compressor.io و TinyPNG فشرده کردیم. این ابزارها رایگان بوده و میتونند بدون اینکه کیفیت تصاویر کم بشه, تا 80 درصد سایز فایل تصاویر رو کاهش بدهند.
- اندازه تصاویر رو به حداقل خودش برسونیم, طوری که کیفیت اون ها کاهش پیدا نکنه. برای مثال اگر ما به یک تصویر با اندازه 150 در 150 نیاز داریم, باید تصویر مورد نظرمون دقیقا همین اندازه رو داشته باشه. شما هرگز نباید تصاویر بزرگ تر از چیزی که نیاز دارید رو آپلود کنید و یا با استفاده از تگ های CSS و HTML سایزش رو کاهش بدید.
ما تمام تصاویر موجود در وبسایت رو دانلود کردیم, فشرده و تغییر سایز دادیم. بعد از بهینه سازی تصاویر قبلی, برای تصاویر جدیدی که میخواهید در سایت استفاده کنید این قدم ها رو طی کنید. هر تصویر جدید باید فشرده و تغییر سایز داده بشه.
ابزار گوگل همچنین خودش بصورت پیش فرض تصاویر رو بهینه می کنه و پیشنهاد میده که اونها رو دانلود کنید, اینطوری کافیه که فقط در سایتتون آپلودشون کنید.
قدم دوم - فشرده کردن کدهای CSS و جاوا اسکریپت
نکته مهم دیگه ای که ابزار گوگل پیشنهاد میکنه فشرده کردن کدها و فایل های CSS و جاوا اسکریپت هست.
فرایند فشرده سازی سایز فایل های شما رو با از بین بردن فضای سفید, کاراکترها و کامنت ها از فایل های CSS و جاوا اسکریپت, کاهش میده. برنامه نویس ها معمولا تعداد زیادی فضای سفید و کامنت بر جا می گذارند. این ها میتونه باعث دو برابر کردن سایز فایل های شما بشه.
برای برطرف کردن این مشکل, چند راه وجود دارد. اول اینکه Gulpjs رو بر روی سرور نصب کنید. این ابزار بصورت خودکار فایل های جدید CSS می سازد و تمام فضاهای خالی را از بین می برد. همچنین تمام تغییرات رو در فایل های CSS جدید ذخیره می کند. درباره مورد ما این ابزار باعث شده که فایل CSS اصلی ما از حجم 300 کیلوبایت به چیزی نزدیک به 150 کیلوبایت برسه. اکثر تفاوت ها در کاراکترهای غیرضروری بود. راه دیگری که وجود دارد, فشرده سازی فایل ها بصورت آنلاین هست. شما میتونید با استفاده از ابزارهای آنلاین مثل Minify این کار رو انجام بدید و فایل ها رو در سرور خودتون مجددا آپلود کنید.
برای مطالعه بیشتر در این زمینه به لینک راهنمای گوگل مراجعه کنید.
اگر از وردپرس استفاده می کنید, پیشنهاد ما استفاده از پلاگین Autoptimize هست.
همچنین شما میتونید فایل های بهینه شده رو از خود ابزار گوگل دانلود کنید.
قدم سوم - کش مرورگر (Leverage browser caching)
برای خیلی از سایت ها کش مرورگر یکی از چالش های مهم است.
برای حل این مشکل, ما تمام فایل های ثابتمون رو از سرور سایت به یک CDN منتقل کردیم. CDN یک شبکه از سرورهای سایت های مختلف در سراسر جهان است. اونها میتونند نسخه ی ثابت سایت رو کش کنند, مثل تصاویر, فایل های CSS و جاوا اسکریپت. CDN ها یک کپی از محتوای سایت شما روی سرورهاشون ذخیره می کنند و وقتی فردی وارد سایت شما شد, محتوای ثابت از طریق نزدیک ترین محل به اون فرد, نمایش داده میشه.
برای مثال اگر سرور اصلی سایت شما در تکزاس باشد, بدون یک CDN کاربری از ایران باید منتظر بماند تا تمام محتوای سایت از آمریکا برایش بارگذاری شود, با استفاده از CDN سایت شما برای فرد ایرانی, از منطقه ایران باز می شود.
ما تمام تصاویر, فایل های جاوا اسکریپت و CSS رو به یک CDN منتقل کردیم و فقط فایل های HTML رو در سرور اصلی مان نگه داشتیم. استفاده از CDN برای تصاویر, تغییر بزرگی برای مخاطبین سایت شما ایجاد می کند.
بعد از این که, کار CDN رو انجام دادیم, ابزار گوگل پیشنهاد می داد که برای برخی منابع خارجی (مثل لینک های خارجی فایل های جاوا اسکریپت) کش مرورگر رو انجام بدیم :
ما فایل هایی که بهش اشاره شده رو جایگزین کردیم. برای این کار اون ها رو بصورت ثابت در CDN خودمون قرار دادیم.
این تصویر ابزار Pingdom از سایت ما هست که نشون میده همه چیز از CDN بارگذاری میشه. تنها فایلی که از طریق سرور ما بارگذاری میشه فایل صفحه اصلی هست که فقط 15٫5 کیلوبایت حجم داره.
قدم چهارم - از بین بردن منابع مسدود کننده
از بین بردن منابع مسدود کننده یکی از پیچیده ترین بخش های بهبود سرعت بارگذاری صفحه است, چون این نیاز به تخصص فنی بیشتری داره. مشکل اصلی این بود که باید تمام فایل های جاوا اسکریپت رو از هدر و body به فوتر در پایین صفحه ببریم.
اگر از وردپرس استفاده می کنید, پلاگین Autoptimize که پیشنهاد دادیم میتونه در این مورد کمک کنه. تنظیماتش رو چک کنید و تیک “Force JavaScript in <head> and check “Inline all CSS.” رو بزنید.
قدم پنجم - فعالسازی فشرده سازی
پیاده سازی این قدم یعنی فعال کردن فشرده سازی میتونه به راحتی در تنظیمات سرور شما انجام بشه. اکر شما خیلی فنی نیستید, کافیه از پشتیبانی فنی خود بخواهید فشرده سازی GZIP رو در سرور فعال کنه.
قدم ششم - بهینه سازی تجربه موبایل
تجربه موبایل در مورد نمایش ورژن موبایل واکنش گرا سایت شما, استفاده از فونت مناسب و پیمایش ساده در تمام رزولوشن هاست.
با استفاده از مرورگر کروم گوگل شما میتونید نحوه نمایش سایتتان در موبایل ها و تبلت ها رو مشاهده کنید. کافیه از منوی کروم روی More tools - developer tools کلیک کنید, به شما ابزارهای مناسب این کار رو میده.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید