جی تی متریکس (GTmetrix) و آموزش صفر تا صد آن

صفحه اصلی | مقالات

جی تی متریکس (Gtmetrix)، یکی از ابزارهایی است که برای تست و افزایش سرعت سایت مود استفاده قرار می گیرد و در میان خیل عظیم این ابزارها، یکی از محبوب ترین و کاربردی ترین ها در سراسر جهان است. در این مقاله قصد داریم، به چگونگی استفاده و درک بهتر داده ها در ابزار محبوب سرعت سنجی وب سایت، یعنی GTmetrix بپردازیم.

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

ابزار جی تی متریکس (Gtmetrix) چیست؟

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

شروع کار با جی تی متریکس

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

تجزیه و تحلیل با ابزار تست سرعت (Gtmetrix)

یک صفحه وب از بخش های مختلفی، مانند؛HTML ،JavaScript ، CSS و تصاویر تشکیل شده است. هر یک از این موارد درخواست هایی را برای ارائه آنچه در وب سایت خود مشاهده می کنید ایجاد می کند. به طور معمول هرچه درخواست های بیشتری داشته باشید، وب سایت شما کندتر خواهد شد. البته همیشه هم اینگونه نیست، اما بیشتر اوقات این قضیه صدق میکند. در ادامه قصد داریم بخش های مختلف جی تی متریکس را تجزیه و تحلیل کنیم و با جزئیات بیشتری آن را توضیح دهیم.

امتیازات و جزئیات عملکرد در جی تی متریکس

هنگامی که وب سایت وردپرسی خود را از طریق GTmetrix اجرا می کنید، یک گزارش عملکرد به شما نمایش داده می شود، که شامل صفحه PageSpeed، امتیاز YSlow، زمان کامل بارگذاری، اندازه صفحه و تعداد درخواست های شما در وب سایت شماست. توجه داشته باشید که اگر چندین بار وب سایت خود را از طریق ابزار تست سرعت GTmetrix اجرا کنید، ممکن است متوجه این موضوع شوید که مقادیر نمایش داده شده هر بار اندکی متفاوت است! یکی از دلایلی که این اتفاق می افتد به دلیل حافظه پنهان، حافظه پنهان DNS و حافظه نهان سرور است.

سوال دیگری که اغلب به وجود می آید این است که، چرا ابزار GTmetrix همیشه سرعت وب سایت ما را نسبت به ابزار Pingdom پایین تر نشان می دهد؟ با انجام هزاران تست سرعت، می توانیم به شما بگوییم که Pingdom تقریباً همیشه سرعت سایت را سریعتر از GTmetrix نشان می دهد. اما این حرف کاملا اشتباه است چرا که این دو ابزار فقط سرعت را به دو روش مختلف محاسبه می کنند، بنابراین شما نباید این دو را با هم مقایسه کنید.

PageSpeed

جی تی متریکس از قوانین Google PageSpeed Insight برای نمره دادن به وب سایت شما استفاده می کند. رتبه بندی ها از 0 تا 100 (F تا A) می باشد. بیش از 25 توصیه مهم در این باره وجود دارد. ما سعی خواهیم کرد رایج ترین و محبوب ترین مواردی را که صاحبان سایت های وردپرسی با آن دست و پنجه نرم می کنند، پوشش دهیم. به طور کلی، اگر موارد ذکر شده در این مقاله را در سایت خود بهبود ببخشید، شاهد کاهش زمان بارگذاری و افزایش سرعت سایت خود خواهید بود.

استفاده از تصاویر مقیاس پذیر

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

بررسی CSS و جاوا اسکریپت درون خطی

اگر سایت شما کوچک است، با حداقل درخواست، می تواند عملکرد شما را بهبود بخشد. شما باید گزینه “Inline all CSS” را بررسی کنید و اطمینان حاصل کنید که پرونده های CSS اضافی را حذف کرده اید. همین مورد برای JavaScript نیز نیز صدق می کند. وجود کدهای اضافی معمولا باعث افزایش اندازه کلی درخواست صفحه شما می شود. با این حال، اگر سایت شما کوچک است، حداقل درخواست، می تواند عملکرد شما را بهبود ببخشد.

بررسی حافظه نهان

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

کدهای CSS و JavaScript را بهینه کنید

افزونه رایگان Autoptimize برای بهینه سازی کدها گزینه ای عالی است. اطمینان حاصل کنید که “بهینه سازی کد JavaScript” و “بهینه سازی کد CSS” هر دو بررسی شده اند. سعی کنید کدهای اضافی و غیر ضروری را حذف کنید.

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

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

کدهای HTML را بهینه کنید

دقیقاً مانند CSS و JavaScript ، HTML را نیز می توان بهینه کرد تا کاراکترهای غیر ضروری را از بین ببرد و بایت داده ها را برای سرعت بخشیدن به زمان اجرا صرفه جویی کرد. افزونه رایگان Autoptimize نیز برای این کار عالی است. شما این بهینه سازی را به سادگی و با فشردن گزینه “Optimize HTML Code” در این افزونه انجام می دهید.

فشرده سازی GZIP را فعال کنید

GZIP یک فرمت فایل و یک نرم افزار کاربردی است که برای فشرده سازی فایل و رمزگشایی فایل های فشرده استفاده می شود. فشرده سازی GZIP در سمت سرور فعال می شود و امکان کاهش حجم پرونده های HTML و پرونده های JavaScript را برای شما فراهم می کند. این فرمت، روی تصاویر کار نخواهد کرد زیرا آنها قبلاً به روش دیگری فشرده شده اند. این کار احتمالاً یکی از ساده ترین بهینه سازی هایی است که می توانید در وردپرس به وجود بیاورید. برای فعال کردن فشرده سازی GZIP ، کافیست کد زیر را در پرونده .htaccess خود اضافه کنید.

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

Remove browser bugs (only needed for really old browsers) #

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4.0[678] no-gzip

BrowserMatch bMSIE !no-gzip !gzip-only-text/html

Header append Vary User-Agent

</IfModule>

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

به حداقل رساندن تغییر مسیرهای HTTP از یک URL به آدرس دیگر، RTT های اضافی را کاهش داده و زمان انتظار را برای کاربران پایین می آورد. توجه داشته باشید که تغییر مسیر بد، باعث افزایش بار سایت تا 58٪ می شود! تغییر مسیرهای بیجا و غیر ضروری، سایت شما را کند می کند. به همین دلیل ارزشش را دارد که برای به حداقل رساندن تعداد تغییر مسیر بازدید کنندگان، و ارتقاء تجربه کاربری مخاطبان سایت خود، اندکی وقت بگذارید. این قضیه روی بهبود عملکرد شما در جی تی متریکس شدیدا موثر است.

یک اعتبار سنج حافظه نهان تعیین کنید

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

ابعاد تصویر را مشخص کنید

همان گونه که نباید اجازه دهید CSS اندازه تصاویر را تغییر دهد، باید خودتان ابعاد تصاویر را نیز مشخص کنید. این بدان معنی است که یک تصویردارای طول و عرض انتخابی شما باشد.

غلط

درست

YSlow

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

تعداد درخواست های HTTP را کمتر کنید

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

استفاده از یک شبکه تحویل محتوا (CDN)

همیشه توصیه می شود از CDN استفاده کنید، به خصوص اگر بازدید کننده هایی از سراسر جهان دارید. CDN یک نسخه ذخیره شده از مطالب شما را در POP های نزدیک به بازدید کننده نگه می دارد، که به نوبه خود با کاهش تأخیر زمان بار گذاری، سرعت سایت را افزایش می بخشد. Cloudflare و KeyCDN هر دو ارائه دهنده CDN هستند که به شدت توصیه می شوند.

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

به طور کلی، هنگامی که شما در حال ارائه مطالبی مانند تصاویر، یا کدهای JavaScript و CSS هستید، دلیلی برای همراهی یک کوکی HTTP وجود ندارد، زیرا باعث ایجاد سربار اضافی می شود. هنگامی که سرور یک کوکی را برای یک دامنه خاص تنظیم می کند، تمام درخواست های بعدی HTTP برای آن دامنه باید آن کوکی را شامل شود. این اخطار معمولاً در سایتهایی که درخواست زیادی دارند مشاهده می شود. برخی از راه های رفع این مشکل شامل استفاده از ارائه دهنده CDN است که کوکی ها را به طور خودکاربرداشته و یا یک دامنه جداگانه یا زیر دامنه را برای سرویس کوکی ها تنظیم می کند.

Favicon را بهینه کنید

فاوآیکون، یا favicon، یک تصویر فایل کوچک آیکون است که با وب سایت شما مرتبط است. دلیل استفاده و کاربرد اصلی Favicon، برای زیبایی وب سایت و همچنین شناخته شدن وب سایت شما در کنار تب های دیگر میباشد که در مرورگر کاربر باز خواهد بود. شما همیشه باید فاو آیکون را بهینه کنید. کد زیر باید در قسمت Head وب سایت قرار گیرد:

نمونه کد تنظیم Favicon با فرمت ico

نمونه کد تنظیم Favicon با فرمت png

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

نمودار آبشار جی تی متریکس تمام درخواست های فردی را در صفحه وب شما نشان می دهد. سپس می توانید هر درخواست را تجزیه و تحلیل کنید تا ببینید چه چیزی باعث تأخیر و مشکلات عملکرد در سایت شما می شود. هر درخواست با یک رنگ نمایش داده شده است که در ادامه به بررسی معانی این رنگ ها می پردازیم:

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

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

رنگ نارنجی: معنی آن این است که این ویژگی در سایت شما رعایت شده و وجود دارد، اما ناقص است و باید تکمیل شود.

رنگ سبز کم رنگ: معنی آن این است که این ویژگی در سایت شما رعایت شده و امتیاز خوبی دریافت کرده است، اما کماکان جا برای بهتر شدن نیز دارد.

رنگ سبز پر رنگ: معنی آن این است که این ویژگی در سایت شما به صورت کامل رعایت شده و هیچ عیب و نقصی ندارد.

بررسی سابقه در جی تی متریکس

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