جی تی متریکس و انواع خطاهای آن 1

GT Metrics چیست؟

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

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

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

ابزار GT Metrics برای سایت چه کاربردهایی دارد؟

در قسمت های بالا با این ابزار تست سرعت به طور کامل آشنا شدیم، حال می خواهیم بدانیم این ابزار دقیقا چه چیزی را برای سایت ما فراهم می کند؟

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

قسمت‌های کاربردی GTmetrix

فاکتور LCP

این فاکتور ابتدا توسط گوگل و در لایت هاس مورد استفاده قرار گرفت و تنها مدت کوتاهی بعد جی تی متریکس نیز از آن برای بررسی سرعت و تجربه کاربری سایت استفاده کرد. این فاکتور یکی از مهم ترین فاکتورهای سئو در گزارش عملکرد است و تقریباً ۲۵ درصد آن را به خود اختصاص می دهد. این عامل زمان بارگذاری بزرگترین محتوای یک سایت را بررسی می کند. البته تعاریف متفاوت دیگری نیز برای استفاده از این فاکتور وجود دارد، به عنوان مثال GT Metrics از آن برای بررسی زمان بارگذاری محتوایی که در نیمه بالایی سایت است استفاده می کند.

فاکتور FCP

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

مرحله اول First Paint نام دارد. مرحله دوم، مرحله نمایش سایر مطالب ارسال شده توسط سرور است که به آن First Contentful Pain می گویند. مرحله نهایی، مرحله بارگذاری کامل صفحه است که به آن Fully Load می گویند.

فاکتور TBT

عامل مهم دیگر در اندازه گیری معیارهای GT، فاکتور TBT است. این فاکتور به معنای مدت زمان مسدود شدن است و برای سنجش میزان تعامل کاربر با سایت استفاده می شود. به زبان ساده، این فاکتور مدت زمانی است که کاربران برای بارگذاری یک صفحه نیاز دارند، سایت به مشکلات فایل های CSS و HTML و ساخت DOM می پردازد و در نهایت نتیجه نهایی را به کاربر نشان می دهد. اگر این فاکتور و مدت زمان آن زیاد باشد، به احتمال زیاد اکثر کاربران و بازدیدکنندگان سایت خود را از دست خواهید داد.

نحوه ورود به GTMetrix و استفاده از آن

اگر شما نیز علاقه مند به استفاده از این ابزار هستید، استفاده از آن بسیار آسان است. برای دسترسی به این ابزار کافیست به آدرس GTMetrix.com رفته و آدرس سایت خود را در قسمت مورد نظر وارد کنید. گزینه Test Now را انتخاب کنید تا سایت شما توسط این ابزار آنالیز شود. پنجره ای باز می شود که نتایج آنالیز را در دو قسمت Grade GTMetrix و Web Vital نشان می دهد.

چگونه امتیاز سایت خود را در ابزار سنجش GT افزایش دهیم؟

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

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

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

استفاده از شبکه توزیع محتوای CDN

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

تصاویر را با اسکریپت CSS ترکیب کنید

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

معایب استفاده از GT Metrix

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

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

یکی از خطاهای متداول در هنگام بررسی سرعت سایت با GTmetrix، “Minify JavaScript and CSS” نام دارد که در زبانه Yslow نمایش داده می‌شود. این خطا در Page Speed گوگل نیز قابل مشاهده است. این خطا در GTmetrix نشان می‌دهد که فایل‌های CSS و JS به خوبی بهینه‌سازی و فشرده نشده‌اند. برای رفع این مشکل، باید فایل‌های استایل و جاوا اسکریپتی را که توسط ستون Yslow در GTmetrix شناسایی شده و به عنوان فایل‌های غیربهینه در نظر گرفته شده‌اند، پیدا کنید و با استفاده از کدنویسی، ابزارهای آنلاین یا افزونه‌ها و پلاگین‌های سیستم سایت‌ساز خود، آنها را فشرده‌سازی نمایید.

انواع خطاهای جی‌تی متریکس

*آموزش رفع خطای Minify JavaScript and CSS در Yslow جی‌تی متریکس

رفع خطای Minify JavaScript در Yslow جی‌تی متریکس

اگر فایل‌هایی که در تب Yslow جی تی متریکس و در بخش Minify JavaScript and CSS نمایش داده بشن با فرمت JS. باشند باید به روش‌های زیر اقدام به برطرف کردن خطا بکنید.

۱- استفاده از سایت GTmetrix

اگر به صفحه تست سرعت سایت در GTmetrix برگردید و عبارت Minify javascript رو با استفاده از کلیدهای ترکیبی CTRL + F جستجو کنید

اگه دقت کنید در انتهای آدرس هر فایل CSS یک عبارت Optimized Version قرار داره که با کلیک کردن روی این عبارت میتونید نسخه بهینه شده و فشرده شده همین فایل JS رو دانلود کنید. تنها کاری که باید انجام بدین اینه که بعد از دانلود فایل وارد هاست خود شده و روی گزینه File Manager کلیک کنید. سپس بر اساس آدرس فایل، به مسیری که مربوط به این فایل هست در public_html مراجعه کنید و فایل دانلودی را جایگزین فایل JS قبلی بکنید. علاوه بر این میزان فشرده سازی هر فایل هم قرار گرفته که میتونه شما رو در بهینه کردن فایل JS ترغیب بکنه.

۲- استفاده از ابزار آنلاین فشرده سازی JS

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

minifier.org

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

بعد از قرار دادن کدها روی دکمه Minify Javascript که کلیک کنید کدهای شما به صورت فشرده شده تهیه شده و مثل نمونه زیر بهتون نمایش داده میشه که با جایگزینی در فایل JS میتونید فضاهای خالی و کدهای توضیحات و غیرکاربردی رو حذف کنید و هم اینکه از حجم فایل کم کنید.

۳- Minify javascript برای سایت‌های پویا

تو این حالت سایت شما با استفاده از CMS ها و سایت سازها طراحی شده که دیتابیس دارید و باید از افزونه‌های فشرده ساز استفاده کنید. برای این کار هم افزونه‌های مختلفی ساخته شده که هر کدوم قابلیت‌ها و امکانات خاصی رو به شما میده. اما پیشنهاد می‌کنم برای این کار از افزونه‌ای استفاده کنید که امکانات بیشتری در اختیارتون قرار بده که بتونید علاوه بر minify javascript وردپرس قادر باشید که فایل‌های دیگه مثل CSS و HTML رو هم فشرده کنید.

**آموزش رفع خطای Specify image dimensions در gtmetrix

یکی دیگه از خطاهای رایجی که موقع تست سرعت سایت با GTmetrix به وجود میاد و بیشتر در سایت‌هایی که از سیستم مدیریت محتوای اختصاصی استفاده می‌کنند دیده میشه با عنوان Specify image dimensions هست که مربوط به اندازه تصاویر استفاده شده در صفحات یک سایت به حساب میاد. این خطا زمانی به وجود میاد که اندازه تصاویر با استفاده از کدهای HTML که با استفاده از دو دستور width برای پهنا و height برای ارتفاع مشخص میشه وجود ندارند و صرفا آدرس تصویر برای نمایش دادن مشخص شده. این موضوع باعث میشه موقعی که سایت در حال لود هست به مشکل بخورید.

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

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

<img src="image.jpg" />

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

<img src="image.jpg" width="800" height="350" />

رفع ارور Specify image dimensions

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

چرا تعیین ابعاد تصاویر اهمیت دارد؟

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

روش‌های مختلف برای مشخص کردن ابعاد تصاویر

1. استفاده از ویژگی‌های width و height در تگ HTML
   ساده‌ترین روش همین است که در تگ <img> اندازه‌ها را به صورت مستقیم تعیین کنید:

   <img src="image.jpg" width="600" height="400" />

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

   <img src="image.jpg" class="custom-img" />

   .custom-img {
       width: 600px;
       height: 400px;
   }
   

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

3. تولید خودکار اندازه‌ها از سمت سرور
   در برخی سیستم‌های مدیریت محتوا یا فریم‌ورک‌ها، امکان تنظیم سرور برای ارسال ابعاد تصاویر همراه با HTML وجود دارد. به این شکل می‌توان از وارد کردن دستی اندازه‌ها صرف‌نظر کرد و همچنان ساختار بهینه داشت.

نکته مهم برای سایت‌های واکنش‌گرا (Responsive)

اگر سایت شما واکنش‌گرا است، باید مراقب باشید که ابعاد تصاویر را به گونه‌ای تنظیم کنید که در دستگاه‌های مختلف به‌درستی نمایش داده شوند. در این حالت، استفاده از ویژگی‌های width و height در کنار CSS‌هایی مثل max-width: 100% بسیار کاربردی است. به عنوان مثال:

<img src="image.jpg" width="800" height="400" style="max-width:100%; height:auto;" />

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