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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

“Force JavaScript in”

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

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

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

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

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

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

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

نتیجه گیری

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

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