آموزش  کار با ابزار  gtmetrix بصورت تصویری

سلام به همه  دوستان  در این پست از سایت ژانیا سعی بر آن است تا بتوانیم برای آموزش و کار با ابزار gtmetrix به شما کمک کنیم .

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

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

در ادامه در طول آموزش با قسمت های مختلف سایت gtmetrix آشنا میشوید .

 

 

 

روش login کردن در سایت gtmetrix

آموزش ثبت نام در سایت gtmetrix

ثبت نام در سایت gtmetrix

در ابتدای ورود به سایت  نیاز است که شما  در سایت gtmetrix ثبت نام کرده باشید

تا بتوانید به یکسری از تنظیمات  دسترسی پیدا کنید اگر برای اولین بار است

که وارد سایت میشود یا اینکه قبلا ثبت نام نکرده اید روی دکمه ی sign up   کلیک کنید

و اطلاعات خواسته شده را وارد کنید در غیر این صورت log in کنید و پسورد و ایمیل خود را بدهید

آمورش وارد کردن آدرس  سایت در آدرس بار بصورت تصویری :

 

روش قرار دادن آدرس سایت در آدرس بار

روش قرار دادن آدرس سایت در آدرس بار

 

آنالیز سایت توسط gtmetrix

مراحل انالیز سایت توسط gtmetrix

 

روش کار با analysis option(تنظیمات gtmetrix) :

روش ورود به تنظیمات gtmetrix

 

آموزش تنظیمات سایت gtmetrix

روش کار با تنظیمات gtmetrix

 

test format: در این قسمت گزینه هایی وجود دارد که از شما  میخواهد یکسری از تنظیمات را  در رابطه با این که کجا و چطور

میخواهید سایت  آنالیزشود را انجام دهید

Test url in: از شما میپرسد که مایل هستید از چه کشوری آنالیز  تست و آنالیز سایت شما  انجام شود

که باید یکی از گزینه ای پیشنهادی را انتخاب کنید

using : مایل هستید از چه مرور گری برای اینکار استفاده شود؟

 

with: از چه نوع اتصالی  برای تست استفاده شود گزینه ی پیشفرض  یعنی  فرقی نمی کند

و هر اتصالی که در دسترس بود

 

option: تنظیمات مربوط به ویژگی ها و عملکرد های  که ممکن است در قسمت هایی از کار باعث نتیجه گیری بهتر شود.

 

create video: همزمان با آنالیز سایت شما یک ویدیو از زمان بارگذاری سایت شما تهیه میکند که  میتوانید آن را مشاهده کنید.

adblock plus: فعال سازی افزونهadblockplusd برای شناسایی بعضی از تبلیغات سایت و بستن  آن ها

stop test onload:  متوقف کردن حالت تست در زمان اتصال gtmerix به سایت

سایت شما از نظر سرعت بهینه سازی دارای چه امتیازی  نزد موتور های جستجو است؟

 

روش های بهینه سازی سایت از طریق gtmetrix

امتیاز دهی موتور های جستجو به سایت شما

 

برای اینکه  متوجه شوید که سرعت سایت شما چه امتیازی نزد موتور های جستجو دارد دو بخش وجود دارد که بررسی آن ها  دارای  اهمیت است

performance score:برای امتیاز دهی به سرعت سایت شما دو بخش را در نظر گرفته است

1 pagespeed score:امتیازی است که گوگل برا اساس یکسری از پارامتر های مشخص شده به سرعت سایت شما میدهدهر 

چه درصد بالاتری نشان داده شود امتیاز سایت شما بیشتر است .

2 yslow score:امتیازی است که موتور ها ی جستجوی یاهو  بر اساس پارامتر های در نظر گرفته شده به سایت شما میدهند

page details:

1 fully loaded time:زمانی که صرف میشود تا سایت شما بطور کامل لود شود هر چه این زمان کمتر باشد سرعت سایت شما بیشتر است

2 tatal page size:حجم کل صفحه را نشان میدهد

3 reguests: تعداد درخواست هایی که از طرف سایت به سمت سرور  میرود هر چه تعداد درخواست کمتر باشد سرعت بارگذاری سایت شما بهتر و بیشتر میشود

نکته:شاید برایتان سوال پیش بیاید که خوب  برچه اساسی میزان کم یا زیاد بودن این مقادیر را بسنجیم ؟

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

 

 

 

بخش waterfall چه کاری را برای ما انجام میدهید ؟

waterfall:جزئیات دقیقی را از زمان شروع تا پایان بارگذاری سایت را نشان میدهد از طریق نمودار میتوانید مشاهده کنید که در چه قسمت و بخشی  از طرف سایت درخواست به سمت سرور ارسال شده است و زمان پاسخگویی به هرکدام چقدر طول میکشد ؟ همچنین با کلیک روی هر کدام از قسمت ها اطلاعات دقیقی در مورد آن قسمت داده میشود .

 

بخش timing در gtmetrix  برای چه کاری استفاده میشود؟

 

قسمت timingچه اطلاعاتی را در اختیار ما قرار میدهد

قسمت timingچه اطلاعاتی را در اختیار ما قرار میدهد؟

 

بصورت زمان بندی شده نشان میدهد که هر کدام از قسمت ها  در کدام قسمت از کار start میشوند .

و چقدر زمان میبرند. در بخش بعدی از توضیحات هرکدام از این قسمت هار ا به اختصار توضیح میدهیم .

کار با سربرگ video در gtmetrix:

اگر در قسمت  analysis option  که در همین مقاله توضیح دادیم  تیک گزینه create video را زده باشید در زمان connect شدن gtmetrix به سایت شما همزمان با آنالیز جزئیات سایت شما یک ویدیو هم از زمان بارگذاری سایت شما در اختیار شما قرار میگیرد . که با مراجعه به سربرگ آنالیز قادر به مشاهده ی  آن خوهید بود  و همچنین میتوانید این  ویدیو را با استفاده از گزینه ی download video  دانلود کنید .

 

time to first byte: زمانیکه اولین بایت را از سایت دریافت میکنید .

first paint :زمانیکه اولین نتیجه بارگذاری سایت روی مرورگر نشان داده میشود .

first contentfull paint: زمانی بارگذاری اولین نتیجه کامل میشود و به اتمام میرسد

DOM loaded: از پارامتر های جاوا اسکریپت است

first paint onload : زمانیکه اولین  نتیجه ی بارگذاری سایت ایجاد شده و اتصال بین سایت و connectin برقرار است و آنالیز سایت و report گرفتن ادامه دارد .

fully loaded: زمانیکه صرف بارگذاری کامل صفحه میشود .

سربرگ history در gtmetrix:

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

 

تنظیمات پیشرفته در GTMETRIX:

یکسری تنظیمات گسترده تر هم رد gtmetix وجود دارد که باعث آسانی و نتیجه گیری بهتر میشود که در بالا صفحه و در کنار آدرس بار قرار دارد

retest: برای تست مجدد سایت استفاده میشود

compare: برای مقایسه وضعیت آنالیز  چندین سایت با هم کاربرد دارد و میتوانید ادرس چندین سایت را وارد کنید و وضعیت آنالیز آن ها را در gtmetrix با هم مقایسه کنید اینکار به شما  در نتیجه گیری بهتر کمک میکند

 

page setting : تمامی  تنظیماتی که در قسمت analysis option در دسترس بود از این قسمت هم قابل  دسترس است .

monitor : برای استفاده از آن باید نسخه پولی  gtmetrix را تهیه کنید

set up alerts: اگر gtmtrix در هنگام connection به سایت شما دچار خطا شود این خطا برای شما ایمیل میشود .

 

 

ادامه مطلب

Gtmetrix و حل مشکلات آن

 GTmetrix چگونه سئوی سایت را بهبود میبخشد

Gtmetrix ابزاری برای تحلیل سرعت صفحه سایت میباشد که بسیار محبوب و همچنین رایگان است

که توسط افراد متخصص در GT.net یک شرکت میزبانی وب مستقر در ونکوور ساخته شده است.

 

آنچه این ابزار را بسیار محبوب کرده است این است که داده های درجه بندی شده

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

هدف از این مقاله شناسایی متداول ترین گزینه ها و مواردی است

که هنگام استفاده از GTmetrix ممکن است ظاهر شود پس در ادامه با ما همراه باشید

Gtmetrix  در واقع یک ابزار رایگان عالی از طرف گوگل برای انجام تست سرعت سایت است

همچنین تست سرعت برای دستگاه های تلفن همراه به تنهایی قابل بررسی است.

ما واقعاً امیدواریم که شما از سایت GTmetrix لذت ببرید ،

و از اینکه داده های این ابزار را بصورت رایگان برای تقویت عملکرد سایت تان در اختیارتان قرار میدهد ، قدردانی کنید.

نحوه خواندن گزارش عملکرد GTmetrix:

بیایید با داشبورد گزارش شروع کنیم –

این قسمت مربوط به نحوه عملکرد URL شما است:

PageSpeed ​​– این درجه نشان دهنده درجه ای است که صفحه شما بر اساس معیارهای Google دریافت می کند.

PageSpeed ​​– این درجه نشان دهنده درجه ای است که صفحه شما بر اساس معیارهای Google دریافت می کند.

YSlow – این درجه نشان دهنده درجه ای است که صفحه شما بر اساس نمره یاهو از آن کسب کرده است.

در مثال بالا ، نمره PageSpeed ​​ما 72٪ (درجه C) است، بنابراین نیازی نیست

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

 

نمره YSlow ما 81٪ (درجه B) است که ایده آل نیست

اما برای دستیابی به امتیاز 90٪ (A  باید درجه) فقط لازم است  موارد کمی را تغییر دهیم.

 

مجموعه بعدی از نتایجی که در Gtmetrix باید در نظر بگیریم عبارتند از:

مربوط به “جزئیات صفحه”

مربوط به "جزئیات صفحه"

   1.زمان کاملاً بارگذاری شده

نشان دهنده مدت زمان مورد نیاز برای تبدیل شدن صفحه شما در مرورگر آزمون است.

 

   2.اندازه کل صفحه

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

 

   3.درخواست ها

این تعداد درخواست های HTTP شخصی است که توسط سایت شما از طریق اسکریپت ها ، CSS و غیره ایجاد می شود.

 

توصیه های صفحه

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

و مراحلی که می توانید برای اصلاح آنها بردارید.

 

بهینه سازی تصاویر در Gtmetrix

تصاویر حداقل 60٪ از وزن کل صفحه را تشکیل می دهند ، بنابراین تصاویر بدون بهینه دلیل اصلی بارگیری صفحات به کندی است.

تصاویر حداقل 60٪ از وزن کل صفحه را تشکیل می دهند ، بنابراین تصاویر بدون بهینه دلیل اصلی بارگیری صفحات به کندی است.

همانطور که مشاهده می کنید برای این بخش F نمره گذاری کردیم

اما می توانیم با استفاده از افزونه ای مانند Smush یا حتی بهتر با استفاده از ShortPixel این مسئله را برطرف کنیم.

 

شاید تاکنون برایتان پیش آمده است که

تصاویری را که خیلی بزرگ یا خیلی کوچک هستند را در سایتتان بارگذاری می کنید،

اما مرورگر شما سعی در تغییر اندازه آنها میکند.

انجام این کار بدیهی است که باعث می شود که صفحه تان کند شود.

 

بنابراین ترفند ارائه تصاویر مقیاس یافته ای “درست” است.

 

تغییر مسیرها را به حداقل برسانید

تغییر مسیرها معمولاً هنگام تغییر URL یک صفحه اتفاق می افتند و

صفحه قدیمی را به صفحه جدید هدایت می کنید. اگر سایت شما دارای ده ها تغییر مسیر باشد،

می تواند سرعت سایت شما را به شدت تحت تأثیر قرار دهد.

 

راه حل ساده در اینجا جلوگیری از استفاده از تغییر مسیرها

در وهله اول با یادگیری بهترین روشها برای ساختار URL است.

 

اگر قبلاً دسته ای از تغییر مسیرهای زنجیره ای را داشته باشید،

می توانید از افزونه ای مانند تغییر مسیر برای بریدن چندین تغییر مسیر در یک واحد استفاده کنید.

 

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

ساختار اتصال داخلی سایت شما می شود و “آب پیوندی” در ردیف های زنجیره ای طولانی از بین می رود.

برای پیدا کردن کلمات کلیدی می توانید مقاله زیر را بخوانید

 

در CSS ،Gtmetrix و JS را به حداقل برسانید

در CSS ،Gtmetrix و JS را به حداقل برسانید

کوچک سازی اساساً به معنای از بین بردن تمام فضای استفاده نشده در کد به دلیل قالب بندی است.

حتی یک فضای خالی به اندازه یک بایت است ، بنابراین کم کردن پرونده های CSS ، JavaScript و HTML می توانند

اندازه پرونده را کاهش داده و باعث افزایش سرعت صفحه در این فرآیند شوند.

 

اکثر افزونه های ذخیره سازی رایگان حداقل برخی از قابلیت های کوچک سازی را ارائه می دهند،

اما WP Rocket بهترین گزینه های پرداخت شده در آنجا است.

 

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

Cloudflare، همچنین CSS و Javacript را در سطح CDN به حداقل می رساند.

Inline CSS And JS in Gtmetrix

Inline CSS And JS

بهترین روش در بهینه سازی سرعت سایت معمولاً ترکیب اسکریپت ها از چندین صفحه به

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

 

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

گاهی اوقات می توان آنها را منطقی تر کرد تا آنها را در صفحه قرار دهید.

 

بنابراین، اگر نمره ارائه شده ی شما واقعا بد است، بیشتر CSS درون خطی خود را به شیوه نامه CSS خود منتقل کنید.

اما اگر هنوز سبز است ، آن را نادیده بگیرید ، زیرا زمان بارگذاری صفحه زیاد نمی شود.

 

 تعویق تجزیه JavaScript در Gtmetrix

تعویق تجزیه JavaScript

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

دلیل این است که همه عناصر <<script>> باید قبل از سایر عناصر صفحه بارگیری شوند،

حتی اگر این فقط کد Google Analytics شما باشد.

این موضوع به “مسدود کردن رندر” معروف است.

و اغلب توسط پلاگین های ضعیف وردپرس ایجاد می شود.

می توانید این مشکل را با ویژگی “Aggregate JS-files” به صورت عالی (و رایگان) برطرف کنید.

 

Leaching Browser Caching

ذخیره سازی مرورگر جایی است که مرورگر محتوای یک سایت را به صورت محلی ذخیره می کند

ذخیره سازی مرورگر جایی است که مرورگر محتوای یک سایت را به صورت محلی ذخیره می کند

به طور معمول چیزهایی مانند تصاویر یا سایر داده های بزرگ.

 

با این کار مرورگر موجب ارسال درخواست HTTP برای آن ها به سرور می شود.

 

می توانید حافظه نهان مرورگر را با پیاده سازی یک افزونه حافظه پنهان رایگان مانند W3 Total Cache سازمان دهی کنید.

 

 

 

بعضی از میزبان ها مانند Siteground یا Kinsta راه حل ذخیره سازی خود را ارائه می دهند،

بنابراین ابتدا آن را با ارائه دهنده خود بررسی کنید زیرا راه حل های آنها معمولاً برای راه اندازی سرور خود متناسب است.

در Gtmetrix،فشرده سازی Gzip را فعال کنید

در Gtmetrix،فشرده سازی Gzip را فعال کنید

یک شبکه تحویل محتوا اساساً یک کپی از سایت شما را در سرورهای مختلف در نقاط مختلف دنیا ذخیره می کند.

انجام این کار تضمین می کند که شخصی که در فرانسه زندگی می کند،

هنگام مشاهده محتوای شما در سرور مستقر در ایالات متحده، هیچ تاخیر قابل ملاحظه ای را تجربه نکند.

 

 

سربرگ منقضی شده را اضافه کنید

Head Header” “یک قطعه کوچک از کد در سایت شما است که به سرور می گوید

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

اگر محتوایی دارید که خیلی مواقع تغییر نمی کنند ، این گزینه حتما بر رویشان فعال می شود

 

می توانید نحوه اجرای “سربرگ منقضی” را در اینجا بیاموزید.

 

توجه: انجام نادرست این عمل می تواند صفحه ی سایت شما را “خراب” کند بنابراین باید مراقب باشید.

 

از دامنه های بدون کوکی استفاده کنید

از دامنه های بدون کوکی استفاده کنید

کوکی (Cookie) یک فایل است. فایلی که روی کامپیوتر یا موبایل یا تبلت شما ذخیره می شود.

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

از مرورگر شما تقاضا کند که چنین فایلی را ایجاد کند.

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

به این ترتیب هرچه کوکی های بیشتری از صفحه شما به مرورگرها تحویل داده شود،

صفحه ی سایت شما کندتر می شود که در این بخش نمره Yslow برای شما منعکس می شود.

 

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

 

 

 

با این حال ، اگر برای سرویس هایی مانند تبلیغات فیس بوک،

Google Analytics یا سایر موارد از کوکی ها استفاده می کنید، به خاطر سرعت سایت ، آنها را کاهش ندهید. ارزشش را ندارد.

 

از خطای HTTP 404 (یافت نشد) جلوگیری کنید

از خطای HTTP 404 (یافت نشد) جلوگیری کنید

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

اما متاسفانه این اتفاق برای با تجربه ترین مدیران سایت ها هم میفتد.

 

برای ردیابی خطای 404 در سایت خود می توانید از افزونه چک کننده یا نسخه رایگان Screaming Frog crawler استفاده کنید.

 

جستجوی DNS را کاهش دهید

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

 

تعداد انگشت شماری از جستجوی DNS مشکلی ایجاد میکنند،

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

 

اگر این مورد در سایت شما باشد ، باید تعداد جستجوی DNS را که سایت شما ایجاد می کند ، کوتاه کنید.

 

آبشار

این نمودار نشان دهنده تک تک درخواست های سایت شما، از جمله پرونده های رسانه ای ، JavaScript ، CSS و غیره است.

این نمودار نشان دهنده تک تک درخواست های سایت شما، از جمله پرونده های رسانه ای ، JavaScript ، CSS و غیره است.

نکته جالب در مورد ویژگی “آبشار” این است که  چیزی که باعث کند شدن سایت شما می شود

و آنچه ممکن است باعث کندی سایت شما شود را حدس میزند

 

 

باندهای رنگی در Gtmetrixاین معنی را دارند:

Teal – جستجوی DNS

قهوه ای – مسدود کردن

سبز – اتصال

قرمز – ارسال

بنفش – منتظر

خاکستری – دریافت

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

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

اگر کمی به پایین حرکت کنیم می توانیم بخش های بزرگی از قهوه ای را مشاهده کنیم:

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

هر یک از این بخش های قهوه ای نشان می دهد که سایر عناصر صفحه تا زمانی که

این عناصر JS و CSS بارگیری نشوند ، قادر به بارگیری نیستند.

 

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

افزونه Autoptimize ، و به حداقل رساندن آنها با یک افزونه caching مانند WP Rocket است.

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

 

 

 

 

 

ادامه مطلب