آموزش کار با سایت Gtmetrix برای سئو سایت

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

ابزار های زیادی برای بررسی سئو وبسایت و پیدا کردن مشکلات ظاهری و کدنویسی قالب سایت شما در سراسر وب موجود می باشد که بعضی از این ابزار به صورت رایگان و برخی با پرداخت هزینه اشتراک در دسترس شما خواهد بود. همه ی این وبسایت ها یک هدف را دارند و آن هم بهبود وضعیت سئو با توجه به منطق گوگل و الگوریتم های پیشرفته این کمپانی بزرگ می باشد. یکی از این ابزارها استفاده از سایت GTmetrix است. بیشتر آنالیزهای این سایت به صورت رایگان در اختیار کاربران قرار می گیرد. ولی برای استفاده از برخی از آن ها شما باید به عنوان حق عضویت مبلغی را به سایت بپردازید. البته با همین امکانات رایگان هم شما می توانید تمامی مشکل های سایت خود را مشاهده و بررسی کنید.

کار با GTmetrix :

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

بعد از گذشتن زمان کوتاه و باز شدن صفحه گزارشات سئو با صفحه ای مشابه صفحه پایین روبه رو می شوید.

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

بررسی قسمت‌های مختلف سایت:

1. Page Speed Score: نمایش میزان سرعت سایت به صورت درصدی بر اساس الگوریتم‌های گوگل هست که مقدار سرعت سایت شما رو نمایش میده. در این میانگین هرچی درصد بالاتر بره به رنگ سبز و هرچی پایین‌تر باشه به رنگ قرمز منتهی خواهد شد. همچنین این امتیاز بر اساس حروف الفبا انگلیسی هم از حرف A تا F رده بندی شده که بر اساس درصد نهایی که مشخص شده یکی از این حروف نمایش داده میشه که در اینجا حرف A به معنی امتیاز بالا هست.
2. YSlow Score: این گزینه هم برای نمایش میانگین بهینه بودن سایت هست که بر اساس میزان بهینه بودن فایل‌ها نمایش داده میشه و از الگوریتم‌های یاهو در این رده بندی استفاده شده. با این رده بندی میتونید بفهمید که کدوم یک از فایل‌های سایت شما هستند که باعث کند شدن سایت شدند و به کمک همین ستون میتونید فایل‌های حجیم که باعث لود کند سایت میشه رو شناسایی کنید.
3. Fully Loaded Time: از این بخش میتونید مدت زمان لود سایت با بر حسب ثانیه ببینید. این زمان از لحظه‌ای که سرور سایت به درخواست مرورگر کاربر برای لود صفحه پاسخ میده شروع شده و تا زمانی که کلیه فایل‌ها در مرورگر کاربر لود بشه ادامه خواهد داشت. که در نهایت مدت زمانی که در این بین طول میکشه به عنوان میزان زمان لود سایت در نظر گرفته میشه.
4. Total Page Size: این گزینه هم بر اساس پارامترهایی که در سایت انجام گرفته حجم کلیه فایل‌هایی که لود میشه رو با هم جمع بسته و در نهایت نشون میده که برای صفحه‌ای که انتخاب کردید، چه میزان حجم و ترافیک مصرف خواهد شد. بر اساس MB نمایش داده میشه. بدیهی است هرچه حجم سایت شما بیشتر باشد سرعت لود و دانلود محتویات شما بیشتر طول می کشد.
5. Requests: در نهایت این گزینه هم تعداد درخواست‌های HTTP که برای لود صفحه به سرور ارسال میشه رو نمایش خواهد داد.

حالا که با هر یک از پارامترهای GTmetrix برای تست سرعت سایت آشنا شدید در ادامه به معرفی هر کدوم از پارامترها می‌پردازم و راهکارهایی که میتونید ازش برای بهینه سازی سایت با gtmetrix استفاده کنید میپردازم. هر کدوم از این پارامترها مبحث مفصلی دارند که باید به صورت اصولی در سایت خودتون مورد ارزیابی قرار بدین و امتیاز بالایی را از هر کدوم دریافت کنید.

بهینه سازی سرعت سایت با gtmetrix:

Optimize the order of styles and scripts:

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

Optimize images:

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

Specify a cache validator:

در این پارامتر هم فایل‌هایی که به درستی کش نشده باشند یا اینکه امکان کش در اونها وجود نداره بهتون نمایش داده میشه که میتونید با بررسی هر فایل وضعیت کش رو برای اونها مشخص کنید.

Leverage browser caching:

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

Defer parsing of JavaScript:

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

Minimize redirects:

در حین لود صفحه از چندین نوع فایل css، js و… استفاده میشه که هر کدوم از این فایل‌ها برای قالب یا افزونه خاصی مورد استفاده قرار میگیرند. حالا هرچقدر تعداد این فایل‌ها بیشتر باشه باعث افزایش تعداد درخواست HTTP میشه که همین موضوع باعث گرفتن امتیاز کمتر در اون پارامتر هم خواهد شد. در نتیجه تعداد درخواست از سمت مرورگر و سرور بیشتر شده و سرور به صورت دائمی درگیر پاسخ‌ها خواهد بود.

پس بهتره با ترکیب کردن این نوع فایل‌ها کاری کنید که تمامی فایل‌های CSS در یک فایل و تمامی فایل‌های JS در یک فایل دیگه قرار گرفته و لود شوند.

Specify a character set early:

این خطا مربوط به متاتگ character set است که در زبان‌های مختلف از اون استفاده میشه. پیشنهاد میکنه که از این متاتگ استفاده نشه که نیازی به تغییر این متاتگ نیست.

Avoid bad requests:

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

Enable gzip compression:

این پارامتر مربوط به فعال بودن Gzip در سرور شماست که نشون میده تا چه میزان از این قابلیت در سایت شما استفاده شده. در صورتی که از Gzip استفاده کنید صفحات شما فشرده‌تر شده و در نتیجه با سرعت بالاتر صفحه لود خواهد شد.

Enable Keep-Alive:

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

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

Inline small CSS و Inline small JavaScript:

به صورت پیش فرض مرورگرها در هر سایتی لود فایل‌های CSS و JS که از منابع خارجی لود میشه رو تا زمانی که صفحه به صورت کامل از سمت خود سرور لود نشده در نظر نمیگیرند. بعد از اینکه صفحه بر اساس فایل‌های خود سرور لود شد شروع به لود فایل‌های خارجی می‌کنند. در این صورت زمانی در این بین اتلاف میشه که بهتره استایل‌ها و js خارجی رو به صورت مستقیم در خود سایت وارد کنید. برای بهبود این پارامتر کافیه استایل‌ها و کدهای JS که از منابع خارجی لود میشه رو مستقیما در سرور سایت قرار بدین.

Minimize request size:

این پارامتر برای کاهش حجم درخواست‌ها صورت میگیره که از سمت کوکی و هدر قابل استفاده هستند. که تقریبا مشابه همون حالتی هستند که در پارامتر Minimize redirects وجود داره.

Put CSS in the document head:

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

Avoid CSS @import:

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

Specify image dimensions:

این ارور وقتی در GTmetrix به وجود میاد که در تصاویر از اتریبیوت‌های مثل width و height استفاده نکرده باشید. برای رفع این مشکل کافیه در تصاویر عرض و ارتفاع را مشخص کنید.