چطور با استفاده از ابزار Page Speed Tool گوگل به امتیاز 100 از 100 برسیم

چطور با استفاده از ابزار Page Speed Tool گوگل به امتیاز 100 از 100 برسیم؟

فهرست مطالب

سرعت بارگذاری سایت از جمله فاکتورهای مهم و تاثیر گذار در تجربیات ایجاد شده برای کاربران است و یکی از صدها فاکتور در رتبه بندی سئو محسوب می شود. واقعیت این است که امروزه، افراد تمایلی به انتظار بیش از 5 ثانیه برای بارگذاری صفحات سایت ندارند. پس اگر سرعت بارگذاری سایت شما پایین است، یعنی در حال از دست دادن مشتری هستید. با توجه به این که بیشتر از 50 درصد ترافیک سایت از طریق دستگاه های موبایل ایجاد می شود، افراد انتظار دارند که سایت تقریبا بلافاصله و در لحظه تقاضا بارگذاری شود. بنابراین، در این مقاله که آمیخته ای از تجربیات شخصی من و مطالبی از وبسایت moz.com می باشد، تلاش می کنم به شما نشان دهم که چطور با استفاده از ابزار Page Speed Tool یا گوگل پیج اسپید به امتیاز 100 از 100 برسیم؟ هم برای کامپیوتر و هم برای موبایل!

سرعت بارگذاری سایت ما از قبل بالا بود، اما باور ما این است که همیشه راهی برای بهتر شدن وجود دارد.

یک روز در حال بررسی ابزار گوگل پیج اسپید PageSpeed متوجه شدم که سایت گوگل برای دستگاه های موبایل امتیاز ضعیف 59 از 100 را دارد. نسخه کامپیوتری گوگل هم دارای امتیاز 89 از 100 است.

چطور با استفاده از ابزار Page Speed Tool گوگل به امتیاز 100 از 100 برسیم

احتمالاً خود گوگل هم باید از ابزار گوگل پیج اسپید استفاده کند!

همین موضوع باعث شد سعی کنیم سرعت بارگذاری سایتمان را افزایش داده و به شما هم ثابت کنیم که می توانید به امتیاز 100 از 100 برسید.

ما کارمان را با امتیاز 87 از 100 شروع کردیم و در شکل زیر نتیجه استفاده از تکنیک هایی را که قرار است در این مطلب به شما آموزش بدهیم، مشاهده می کنید.

چطور سرعت بارگذاری صفحات سایت را با کمک از گوگل پیج اسپید افزایش دهیم

قبل از توضیح دقیق کارهای انجام شده باید این نکته را ذکر کنیم که ابزار PageSpeed فقط شامل راهنما و توصیه هایی برای بهبود عملکرد سایت و بهینه سازی سرعت بارگذاری است؛ اما رسیدن به نتایج مطلوب بستگی به نحوه تنظیم محیط سرور شما دارد.

بعضی از مراحلی که در ادامه ذکر می کنیم نیاز به تخصص فنی دارند و بعضی خیر. اما می توان همه این مراحل و توصیه ها را تقریبا با استفاده از هر سیستم مدیریت محتوایی (CMS) اعمال کرد.

مرحله اول: بهینه سازی تصاویر

چطور با استفاده از ابزار Page Speed Tool گوگل به امتیاز 100 از 100 برسیم

ابزار PageSpeed Insights به ما پیشنهاد کرد که حجم تصاویر را کاهش دهیم تا سریع تر بارگذاری شوند. ما برای حل این مشکل دو کار مهم انجام دادیم:

  1. حجم تمام تصاویر را با استفاده از ابزارهایی مثل Compressor.io و TinyPNG کاهش دادیم. این ابزارها رایگان هستند و در بعضی موارد می توانند بدون افت کیفیت، سایز فایل را تا 80 درصد کاهش دهند.
  2. سپس سایز تمام تصاویر را به حداقل ابعاد ممکن کاهش دادیم بدون اینکه کیفیت عکس افت پیدا کند. مثلاً اگر بخواهیم از تصویری با ابعاد 150×150 پیکسل در سایت استفاده کنیم، سایز تصویر روی سرور خودمان هم باید به همین اندازه باشد. هیچ وقت نباید اندازه تصاویر بزرگتر از چیزی که قرار است ارائه شود، باشد و نباید سایز تصاویر را با استفاده از تگ های HTML یا CSS کاهش داد.

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

در گوگل پیج اسپید گزینه ای برای دانلود تصاویر بهینه سازی شده قرار داده شده است که می توانید بلافاصله آن ها را به سرورتان آپلود کنید. می توانید این کار را برای جاوا اسکریپت و CSS هم انجام بدهید.

گوگل پیج اسپید

مرحله دوم: کاهش حجم فایل های جاوا اسکریپت و CSS با کمک گوگل پیج اسپید

چطور با استفاده از ابزار Page Speed Tool گوگل به امتیاز 100 از 100 برسیم

در این مرحله گوگل پیج اسپید به ما اعلام کرد که باید حجم فایل های CSS و جاوا اسکریپت خودمان را کم کنیم.

این فرایند، سایز فایل ها را با حذف کردن فضاهای سفید، کاراکترها و کامنت های غیر ضروری در فایل های جاوا اسکریپت و CSS کاهش می دهد. معمولاً برنامه نویس ها حین کدنویسی کامنت ها و فضاهای خالی زیادی درج می کنند. ممکن است این کار سایز فایل های جاوا اسکریپت و CSS را حتی تا دو برابر افزایش دهد.

چطور با استفاده از ابزار Page Speed Tool گوگل به امتیاز 100 از 100 برسیم

برای حل این مشکل می توان روی سرور ابزار Gulpjs را نصب کرد. این ابزار به صورت خودکار یک فایل CSS ساخته و همه فاصله ها را حذف می کند. همچنین برای تمام تغییرات جدیدی که ایجاد می کنید، یک فایل CSS جدید ایجاد می کند. این ابزار به ما کمک کرد که سایز فایل CSS اصلی خودمان را تقریبا از 300 کیلوبایت به 150 کیلوبایت کاهش دهیم. این تفاوت ناشی از درج کاراکترهای غیرضروری بود. برای کسب اطلاعات و راهنمایی بیشتر درباره چگونگی حذف فضاهای خالی، از راهنمای گوگل استفاده کنید.
البته اگر از وردپرس استفاده می کنید، توصیه می کنیم پلاگین Autoptimize را نصب کنید.

همچنین می توانید فایل های بهینه سازی شده را از ابزار گوگل پیج اسپید PageSpeed دانلود کنید. در ادامه یک نمونه را مشاهده می کنید:

در شکل زیر نتایج بدست آمده برای سایت ما، بعد از کاهش سایز فایل های جاوا اسکریپت و CSS را مشاهده می کنید.

چطور با استفاده از ابزار Page Speed Tool گوگل به امتیاز 100 از 100 برسیم

مرحله سوم: استفاده از کش مرورگر

چطور با استفاده از ابزار Page Speed Tool گوگل به امتیاز 100 از 100 برسیم

برای خیلی از اپراتورهای سایت ها، استفاده از کش مرورگر چالش برانگیزترین بخش کار است.

ما برای حل این مشکل، همه فایل‌های ایستا را از سایتمان به یک CDN (شبکه تحویل محتوا) منتقل کردیم.

CDN شبکه ای از سرورهایی است که در نقاط مختلف دنیا قرار گرفته اند. این سرورها می توانند نسخه های ایستای سایت ها مثل تصاویر و فایل های CSS و جاوا اسکریپت را کش کنند. CDN نسخه هایی از محتوای سایت شما را روی سرورهای خودش ذخیره کرده و وقتی فردی وارد سایت می‌شود، محتوای ایستا از سروری که بیشتر از همه به او نزدیک باشد، بارگذاری می شود.

مثلاً اگر سرور اصلی سایت شما در تگزاس قرار داشته باشد، بدون استفاده از CDN، بازدیدکننده ای که در آمستردام هلند قرار دارد، باید منتظر بماند تا سایت شما از سرور امریکا بارگذاری شود. اما با استفاده از CDN، سایت از لوکیشنی بارگذاری می شود که به کاربر نزدیک تر باشد. در مورد مثال ذکر شده، این لوکیشن محلی است که به آمستردام نزدیک تر باشد. بنابراین سایت سریع تر بارگذاری می شود.

در ادامه تصویری را مشاهده می کنید که نشان می دهد شبکه تحویل محتوا چطور کار می کند.

چطور با استفاده از ابزار Page Speed Tool گوگل به امتیاز 100 از 100 برسیم

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

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

چطور با استفاده از ابزار Page Speed Tool گوگل به امتیاز 100 از 100 برسیم

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

کدهای مربوط به گوگل آنالیتیکس حتی از مشکل اسکریپت های شبکه های اجتماعی هم بدتر بودند و باعث کند شدن سایت شده بودند.

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

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

در صورتیکه تغییری صورت نگرفته باشد، کد آنالیتیکس از نسخه کش شده ما در CDN بارگذاری می شود.

وقتی گوگل کد جاوا اسکریپت این فایل را تغییر بدهد، سرور ما به صورت خودکار آن را دانلود و به CDN آپلود می کند. ما از این راهکار برای تمام اسکریپت های شخص ثالث بیرونی استفاده کردیم.

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

مرحله چهارم: حذف منابع render-blocking از نیمه بالایی صفحه

چطور با استفاده از ابزار Page Speed Tool گوگل به امتیاز 100 از 100 برسیم

حذف render-blocking (مسدود کننده‌ی اجرا) یکی از پیچیده ترین کارها برای افزایش سرعت صفحات سایت است و نیاز به دانش فنی بیشتری دارد. مشکل اصلی که ما با آن روبرو بودیم، انتقال تمام کدهای جاوا اسکریپت از header و body به footer در سراسر سایت بود.

اگر از وردپرس استفاده می کنید، پلاگین Autopmize که پیش از این پیشنهاد کردیم، می تواند به شما در انجام این کار کمک کند. در تنظیمات این پلاگین، تیک گزینه

“Force JavaScript in”

را برداشته و گزینه “Inline all CSS” را تیک بزنید.

مرحله پنجم: فعال سازی امکان فشرده سازی

چطور با استفاده از ابزار Page Speed Tool گوگل پیج اسپید به امتیاز 100 از 100 برسیم

فعال کردن امکان فشرده سازی را می توانید از طریق تنظیمات سرور انجام دهید. اگر اطلاعات فنی لازم را ندارید، می توانید از افراد تیم تان کمک بگیرید تا امکان فشرده سازی GZIP را برای سرورتان فعال کنند.

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

تجربیات موبایل شامل نشان دادن یک نسخه واکنشی برای دستگاه هایی با وضوح مختلف، استفاده از فونت های مناسب و امکان مرور آسان سایت است.

با استفاده از گوگل کروم می توانید تست کنید که سایتتان در نسخه های موبایل مختلف چطور نمایش داده می شود. روی منوی hamburger در سمت راست بالای گوگل کروم و سپس روی گزینه “More Tools – Developer Tools” کلیک کنید. در سمت چپ مشاهده می کنید که وبساتتان در موبایل هایی با انواع وضوح مختلف چطور به نظر می رسد.

در مورد سایت ما، نیاز به انجام تغییرات خاصی نبود.

نتیجه گیری

چطور با استفاده از ابزار Page Speed Tool گوگل به امتیاز 100 از 100 برسیم

نکات ذکر شده در این مطلب، شامل بعضی از گام های مهمی بود که ما برای رسیدن امتیاز به نمره 100 از 100 با استفاده از ابزار Google Speed طی کردیم. ما علاوه بر صفحه اصلی سایت، بعضی صفحات داخلی را هم بهینه سازی کردیم.

مهم ترین اقداماتی که باید برای بهبود سرعت سایت انجام دهید عبارتند از:

1. استفاده از یک CDN (شبکه تحویل محتوا)
2. رفع مشکلات render-blocking (در بدنه کد از جاوا اسکریپت استفاده نکنید. کدهای جاوا اسکریپت باید پایین فایل ها قرار داشته باشند.
3. بهینه سازی اندازه تصاویر و فشرده سازی آنها

آیا شما هم تا به حال چنین پروژه هایی برای سایتتان انجام داده اید؟ در این صورت نتایج را با ما در میان بگذارید.

نظرات

5 پاسخ

  1. سلام میخواستم خسته نباشید بگم به این مقاله زیبا خیلی موارد یاد گرفتم دستتون رو میبوسم و برای شما آرزوی موفقیت می کنم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

سایر مطالب بلاگ

مشاوره رایگان

سرفصل ها
  • کسب و کار خود را بشناسید
  • محصول خود را بشناسید
  • مشتریان خود را بشناسید
  • از تبلیغات گوگل انتظارات واقع بینانه ای داشته باشید
  • بررسی سایت و لندینگ ها از نظر کیفی و UI , UX
  • گوگل ادز چیست؟
  • مروری بر گوگل ادوردز
  • تبلیغات گوگل کجا نمایش داده می‌شود؟
  • نمایش تبلیغات به چه صورتی است؟
  • مزایای تبلیغات در گوگل
  • درک ساختار گوگل ادوردز
  • امتیاز کیفیت و سیستم مزایده
  • ساخت اکانت گوگل ادز
  • معرفی داشبورد گوگل ادز
  • آشنایی با انواع کمپین گوگل ادز
  • آشنایی با ادگروپ گوگل ادز
  • آشنایی با متن تبلیغات-
    امنیت و دسترسی اکانت
  • ساخت mcc
  • ابزار جستجو کلمات کلیدی
  • استفاده از Google Keyword Planner
  • بررسی میزان جستجوی کلمات کلیدی
  • انواع کلمات کلیدی
  • هدفگیری با کلمات کلیدی
  • کلمات کلیدی منفی
  • ساخت کمپین
  • تنظیمات قیمت گذاری
  • انتخاب مخاطبان شما
  • تصمیم گیری برای تنظیمات حداکثر
  • پیشنهاد هر کلیک (Bid)
  • افزونه‌های تبلیغات (ad extensions)
  • تنظیمات جنسیتی و سنی کمپین
  • تنظیم تبلیغات در
  • دستگاه‌های مختلف- دسکتاپ- تبلت- لب تاب
  • تنظیم قیمت کلمات کلیدی در دستگاه های مختلف- دسکتاپ- تبلت- لب تاب
  • زمانبندی نمایش تبلیغات
  • لوکیشن نمایش تبلیغات
  • اتصال به سرچ کنسول و بقیه اکانت‌ ها
  • ساخت لیست مخاطبان
  • تنظیمات زبان
  • دسته بندی کلمات کلیدی
  • ایجاد یک گروه آگهی (ادگروپ)
  • متن آگهی تان را بنویسید (کپی رایت)
  • افزونه های تبلیغات (ad extensions)
  • راه اندازی تبلیغات
  • بهینه سازی کلمات کلیدی
  • بررسی امتیازات
  • بررسی قیمت کیوردها
  • بررسی Auction Insight
  • بررسی CTR
  • بررسی کلیک های فیک
  • بهینه سازی ادزها
  • ساخت کمپین
  • تنظیمات قیمت گذاری
  • لوکیشن نمایش تبلیغات
  • تعیین اپ های مختلف برای نمایش
  • متن آگهی تان را برای
  • کمپین های بنری بنویسید
  • وارد کردن بنرها و سایر Asset ها
  • اتصال ادز به گوگل آنالیتیک
  • ساخت لیست ریمارکتینگ
  • ساخت کمپین
  • تنظیمات قیمت گذاری
  • لوکیشن نمایش تبلیغات
  • تعیین جایگاه های مختلف برای نمایش
  • متن آگهی تان را برای : کمپین های ریمارکتینگ بنویسید
  • وارد کردن بنرها و سایر Asset ها
  • ساخت کمپین
  • ست اپ لینک اپ Android- Ios
  • تنظیم کانورژن
  • تنظیمات قیمت گذاری
  • لوکیشن نمایش تبلیغات
  • اتصال به فایربیس
  • اتصال به گوگل پلی
  • متن آگهی تان را برای کمپین نصب اپ بنویسید
  • وارد کردن بنرها و سایر Asset ها
  • ساخت کمپین
  • انواع تبلیغات در گوگل
  • تنظیمات قیمت گذاری
  • لوکیشن نمایش تبلیغات
  • وارد کردن لینک ویدئو
  • متن آگهی تان را برای کمپین های ویدئویی یوتیوب بنویسید
  • وارد کردن جایگاه نمایش-کانال های یوتیوب
  • اتصال به یوتیوب
  • اتصال ادز به گوگل آنالیتیک
  • پیگیری خط خرید مشتری در آنالیتیک
  • ساخت goal در آنالتیکس و وارد کردن آن در ادز