شیرجه بزرگ به سمت ابزار تست سرعت جی تی متریکس (GTmetrix)

شیرجه بزرگ به سمت ابزار تست سرعت جی تی متریکس (GTmetrix)


زمان سرمایه گذاری روی خود : 26 دقیقه
5/5 - (2 امتیاز)

 

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

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

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

معرفی جی تی متریکس GTmetrix

GTmetrix توسط شرکتی در خارج از کانادا به نام GT.net برای مشتریان یک وبسایت فروش هاستینگ طراحی شده است تا بتوانند عملکرد سایت‌های خود را مشاهده کنند. بدون شک این ابزار به همراه pingdom مشهورترین ابزارهایی هستند که تا به امروز برای تحلیل سرعت سایت ایجاد شده‌اند. با این حال بسیاری از افراد در درک ارورهای این ابزار و برطرف کردن آن‌ها دچار سردرگمی می‌شوند. اگر شما نیز جزو این دسته از کاربران هستید، در این مطلب بیشتر درباره این موضوع صحبت خواهیم کرد. فراموش نکنید که استفاده از این ابزار بسیار ساده است و حتی افراد آماتور نیز می‌توانند از آن بهره ببرند. جالب است بدانید این ابزار از ترکیب Google PageSpeed Insights و YSlow برای نمره دهی و ارائه پیشنهادات بهبود استفاده می‌کند.

معرفی جی تی متریکس
معرفی جی تی متریکس

گزینه‌های آنالیز GTmetrix

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

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

در حال حاضر می‌توانید مکان‌های زیر را در برنامه انتخاب کنید:

  • دالاس، آمریکا
  • هنگ کنگ، چین
  • لندن، انگلیس
  • میامی، هند
  • سیدنی، استرالیا
  • سائوپائولو، برزیل
  • ونکوور، کانادا

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

ابزار تست سرعت
ابزار تست سرعت

گزینه‌های دیگر این پلتفرم شامل ساخت یک ویدیو می‌باشد. این ویدیو می‌تواند شما را در رفع مشکلات احتمالی کمک کند، چرا که می‌توانید نحوه بارگذاری صفحات را مشاهده کنید. گزینه AdBlock Plus یک ویژگی بسیار مفید است. اگر شما از یک شبکه تبلیغاتی مانند Google Adsense استفاده می‌کنید، با فعال نمودن این گزینه می‌توانید تاثیر آن بر روی بارگذاری سایت خود را نیز مشاهده کنید.

create video & AdBlock Plus
create video & AdBlock Plus

گزینه‌های دیگر شامل موارد زیر می‌شود:

  • توقف بارگذاری آزمایشی (که بعداً به آن خواهیم پرداخت)
  • امکان ارسال کوکی در طول درخواست
  • استفاده از احراز هویت HTTP
  • امکان قرار دادن آدرس‌ها در لیست سفید و لیست سیاه
  • وضوح صفحه نمایش
  • نسبت پیکسل دستگاه
  • مسدود کردن نماینده کاربر
  • و سایر موارد

 

آنالیز با ابزار تست سرعت جی تی متریکس

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

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

مقاله 13 کار ضروری برای حفظ عملکرد سایت وردپرسی نیز می تواند به شما کمک کند

زمانی که وبسایت وردپرسی خود را در این ابزار تست سرعت وارد کنید و تست را شروع کنید، یک گزارش از عملکرد شما که شامل GTmetrix Grade و Web Vitals است، صادر می‌شود.

نمره کلی جی تی متریکس نیز از طریق 2 پارامتر مهم Performance  و Structure تعیین خواهد شد:

GTmetrix Performance: که از طریق سایت Lighthouse محاسبه می‌گردد.

GTmetrix Structure: که به بررسی عملکرد کلی صفحه مربوط می‌شود.

در سال 2020، گوگل یک تنظیمات استاندارد برای تعیین عملکرد مناسب و تجربه کاربری خوب با نام Web Vitals معرفی نمود. این معیار شامل فاکتورهای مختلفی می‌شود که این ابزار تنها برخی از مهمترین آن‌ها را مدنظر قرار می‌دهد:

Largest Contentful Paint (LCP): این فاکتور شامل میزان زمانی است که طول می‌کشد تا بزرگترین المان سایت شما لود شود. برای برخی از وبسایت‌ها، این المان بزرگ می‌تواند یک تصویر باکیفیت باشد، اما برای سایتی دیگر ممکن است محتوای متنی به عنوان المان بزرگ در نظر گرفته شود.

Total Blocking Time (TBT): این معیار نیز مدت زمانی را حساب می‌کند که عملکرد سایت شما پیش از تعامل کاربر مسدود می‌شود. مسدود کردن CSS و JavaScript تاثیر زیادی روی بهینه سازی این معیار دارد.

Cumulative Layout Shift (CLS): میزان جابجایی المان‌ها در طول لود صفحات نیز به کمک این معیار اندازه گیری می‌شود. مثلا طرح بندی یک صفحه ممکن است در هنگام لود شدن تغییر کند که این موضوع تاثیر بدی به تجربه کاربری می‌گذارد.

برای این مقاله ما از دامنه kinstalife.com که در بر روی Kinsta واقع شده است، استفاده می‌کنیم. در آزمایش تست اول، جی تی متریکس آمار زیر را نشان می‌دهد:

GTmetrix GradeB
GTmetrix Performance85%
GTmetrix Structure83%
LCP1.0 s
TBT0 ms
CLS0
آنالیز با ابزار تست سرعت kinstalife.com
آنالیز با ابزار تست سرعت kinstalife.com

ما دوباره همین آزمایش را تکرار کردیم و این بار نمره ما A شد. به نظر شما جریان چیست؟ اگر شما نیز چندین بار وبسایت خود را در این ابزار تست سرعت سایت وارد کنید، قطعا متوجه این موضوع خواهید شد. یکی از دلایل این اتفاق، ذخیره سازی سرور و DNS است. با این حال دلایل دیگری نیز برای این موضوع وجود دارد. یکی دیگر از دلایل را می‌توانید در بخش GTmetrix Waterfall Chart در همین مقاله متوجه شوید.

آنالیز دوباره kinstalife.com
آنالیز دوباره kinstalife.com

GTmetrix summary همچنین از بخش speed visualization نیز بهره می‌برد که به کمک یک جدول زمانی، رویدادهایی که در طول بارگذاری صفحه رخ می‌دهد را نمایش می‌دهد. در اسکرین شات زیر، می‌توانید TTFB ، FCP ، LCP ، مدت زمان بارگذاری، زمان تعاملی و زمان بارگذاری کامل وبسایت kinstalife.com را مشاهده کنید.

speed visualization
speed visualization

در انتهای بخش summary page، بخش‌های top issues و page details وجود دارند. top issues تمامی مشکلاتی که نیاز به تعمیر دارند را به شما نمایش می‌دهد، در حالی که page details سایز و درصد استفاده از هر کدام از فایل‌های CSS، JavaScript، HTML و حتی تصاویر و فیلم‌ها را ارائه می‌دهد.

بخش‌های top issues و page details
بخش‌های top issues و page details
  • بخش Performance

تب بعدی این ابزار تست سرعت سایت Performance است که اطلاعات مفیدی را از داده‌های عملکردی Lighthouse ارائه می‌دهد. علاوه بر LCP، TBT و CLS که در بخش summary page قابل مشاهده است، معیار Performance Metrics شامل مواردی همچون Speed Index (SI)، Time to Interactive (TTI) و First Contentful Paint (FCP) می‌باشد.

Performance Metrics
Performance Metrics

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

در پایین صفحه، جی تی متریکس چند آمار متداول دیگر را نیز نمایش می‌دهد. این موارد شامل Onload Time، Time to First Byte، Fully Loaded Time و موارد دیگری می‌شود. در گذشته این معیارها بسیار مهم بودند. با این حال گوگل با ارائه معیارهای استاندارد که در بخش Web Vitals موجود است، راه را هموار کرده است، بنابراین پیشنهاد می‌کنم به جای تمرکز روی معیارهای گفته شده، روی بهینه سازی این بخش وقت بگذارید. بهینه سازی Web Vitals تاثیر زیادی روی این معیارها نیز خواهد داشت.

بخش Structure
بخش Structure
  • بخش Structure

تب Structure در GTmetrix نیز می‌تواند نگرانی‌هایی که درباره برخی از عملکردهای سایت وجود دارد را به نمایش بگذارد. این بخش نیز بسیار مفید است، چرا که هشدارهای مهمی مانند eliminate render-blocking resources یا minify CSS را برای بهینه سازی وبسایت اعلام می‌کند.

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

Structure
Structure
  • serve scaled images

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

serve scaled images
serve scaled images
  • Inline Small CSS

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

Inline Small CSS
Inline Small CSS

برای اینلاین CSS خود می‌توانید از یک افزونه رایگان مانند Autoptimize استفاده کنید. به سادگی گزینه “Inline all CSS?” را علامت بزنید و سپس مطمئن شوید که فایل های CSS اضافی را که اینلاین نمی‌شود، حذف کرده‌اید.

Autoptimize
Autoptimize
  • Inline Small JavaScript

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

Inline Small JavaScript
Inline Small JavaScript
  • Leverage Browser Caching

Leverage browser caching توصیه بسیار رایجی است که عموم مردم با آن درگیر می‌شوند. این مشکل به دلیل نداشتن هدرهای HTTP صحیح در وبسایت‌تان ایجاد می‌شود. شما تنها می‌توانید این مشکل را با کنترل برخی منابع رفع کنید. مثلا اگر این مشکل را در منابع خارج از دسترس مثل شبکه‌های تبلیغاتی مشاهده کردید، نمی‌توانید آن را حل کنید.

Leverage browser caching
Leverage browser caching
  • Serve Resources From a Consistent URL

اگرServe Resources  را از یک نشانی اینترنتی مشاهده می‌کنید، به احتمال زیاد دلیل این امر وجود المان‌های یکسان با آدرس‌های متفاوت باشد. در بسیاری از موارد این مشکل زمانی اتفاق می‌افتد که رشته‌های کوئری ایجاد می‌شوند. نحوه حذف این رشته‌ها را می‌توانید بررسی کنید. اگر حذف شدند، نیازی به بارگذاری دوباره آن‌ها وجود ندارد.

Serve Resources From a Consistent URL
Serve Resources From a Consistent URL
  • Defer Parsing of JavaScript

JavaScript و CSS به صورت پیش فرض render-blocking  هستند. این بدان معناست که آنها می‌توانند از نمایش صفحات وب تا زمان بارگیری و پردازش آنها توسط مرورگر جلوگیری کنند. ویژگی defer به مرورگر اعلام می‌کند که تا زمانی که تجزیه HTML کامل نشده است، بارگیری منابع را متوقف کند. چند راه آسان برای رفع این مشکل استفاده از افزونه های رایگان Autoptimize یا Async JavaScript است.

Defer Parsing of JavaScript
Defer Parsing of JavaScript
  • Minify CSS and JavaScript

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

Minify CSS and JavaScript
Minify CSS and JavaScript

باز هم افزونه رایگان Autoptimize یک راهکار عالی محسوب می‌شود. تنها مطمئن شوید که بهینه سازی کد جاوا اسکریپت و بهینه سازی کد CSS  هر دو فعال باشند. اگر سایت بزرگی دارید، ممکن است بخواهید با تنظیمات پیشرفته کار کنید، زیرا برخی از آنها می‌توانند به عملکرد سایت شما آسیب برساند. معمولا توصیه نمی‌شود که CSS و JavaScript را در سایت‌های بزرگ ترکیب کنید. اینجاست که قدرت HTTP/2  آشکار می‌شود.

CSS JavaScript - HTTP/2
CSS JavaScript – HTTP/2
  • Optimize Images

طبق آرشیو HTTP، تصاویر حدود 66 درصد از حجم کل صفحات وب را تشکیل می‌دهند. بنابراین هر زمان پای بهینه سازی سایت وردپرسی در میان باشد، تصاویر حرف اول را می‌زنند. تصاویر حتی از اسکریپت‌ها و فونت‌ها نیز مهم‌تر هستند.

Optimize Images
Optimize Images

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

  • Reduce Initial Server Response Time

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

Reduce Initial Server Response Time
Reduce Initial Server Response Time

اگر از هاست Kinsta استفاده می‌کنید، دیگر نگران ذخیره سازی صفحات نباشید، چرا که ما با پیکربندی Nginx آن را بهینه سازی خواهیم کرد. اگر هاست وردپرسی شما از قابلیت ذخیره سازی پشتیبانی نمی‌کند، می‌توانید از افزونه‌هایی مانند WP Rocket یا Total Cache 3W برای بهبود سرعت سایت در جی تی متریکس استفاده کنید. همچنین توصیه می‌کنیم برای کاهش زمان پاسخگویی سرور از Cloudflare APO کمک بگیرید. این سرویس بهینه سازی خلاقانه از Cloudflare صفحات HTML سایت شما را در سراسر جهان پخش می‌کند، که می‌تواند زمان پاسخگویی سرور را در سطح جهانی کاهش دهد.

  • Minify HTML

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

Minify HTML
Minify HTML

البته افزونه رایگان Autoptimize نیز برای بهینه کردن این معیار ابزار تست سرعت کاربردی است. کافی است پس از نصب گزینه Optimize HTML Code را فعال کنید.

Optimize HTML Code
Optimize HTML Code
  • Enable GZIP Compression

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

Enable GZIP Compression
Enable GZIP Compression

نکته: فشرده سازی GZIP به طور خودکار در همه سرورهای Kinsta فعال است.

برای فعال کردن فشرده سازی GZIP در Apache نیز، کافی است کد زیر را به فایل .htaccess خود اضافه کنید:

<IfModule mod_deflate.c>

# 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>

 

چنانچه از NGINX استفاده می‌کنید، باید موارد زیر را برای تاثیرات مثبت روی جی تی متریکس به فایل nginx.conf خود اضافه کنید:

gzip on;gzip_disable “MSIE [1-6].(?!.*SV1)”;gzip_vary on;

gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

  • Minimize Redirects

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

Minimize Redirects
Minimize Redirects
  • Specify a Cache Validator

توصیه specify a cache validator زمانی مشاهده می‌شود که هدرهای ذخیره سازی HTTP گم شوند. این موارد باید در هر پاسخ سرور مبدا گنجانده شوند، زیرا هم تایید شدن و هم تنظیم طول کش را بر عهده دارند. اگر این هدرها پیدا نشوند، هر بار درخواست جدیدی در منبع سرور تولید خواهد شد که این امر حجم سرور شما را افزایش خواهد داد. با استفاده از هدرهای ذخیره سازی، درخواست‌های بعدی نیازی به بارگیری از سرور نداشته و علاوه بر صرفه جویی در پهنای باند، در بهبود کاربری نیز تاثیر مثبتی ایجاد خواهد شد. البته به یاد داشته باشید شما نمی‌توانید این مورد را روی منابعی که تسلطی روی آن ندارید، بهبود ببخشید.

Specify a Cache Validator
Specify a Cache Validator

نکته: هدرهای ذخیره سازی HTTP به طور خودکار بر روی همه سرورهای Kinsta فعال هستند.

تعداد زیادی کد برای هدر ذخیره سازی HTTP وجود دارد که می‌توانید برای بهبود این توصیه و همچنین جی تی متریکس از آن استفاده کنید.

  • Specify Image Dimensions

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

غلط

<img src=”https://domain.com/images/image1.png”>

صحیح

<img src=”https://domain.com/images/image1.png” width=”200″ height=”100

Specify Image Dimensions
Specify Image Dimensions
  • Remove Query Strings From Static Resources

فایل‌های CSS و JavaScript شما معمولا نسخه فایل را در انتهای آدرس‌های اینترنتی خود دارند. مانند 4.6domain.com/style.css?ver= . برخی از سرورها و سرورهای پروکسی قادر نیستند رشته های کوئری را ذخیره کنند، حتی اگر یک cache-control:public header موجود باشد. بنابراین با حذف آنها، گاهی اوقات می‌توانید ذخیره سازی خود را بهبود ببخشید. این کار را می توان به راحتی با کد یا افزونه های رایگان وردپرس انجام داد.

البته نمی‌توانید این مشکل را روی منابع شخص ثالث که تسلطی روی آن ندارید، برطرف کنید.

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

Remove Query Strings From Static Resources
Remove Query Strings From Static Resources
  • Specify a Vary: Accept-Encoding Header

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

Specify a Vary: Accept-Encoding Header
Specify a Vary: Accept-Encoding Header
  • بخش GTmetrix Waterfall Chart

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

بخش GTmetrix Waterfall Chart
بخش GTmetrix Waterfall Chart
  • قهوه‌ای = Blocking

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

قهوه‌ای = Blocking
قهوه‌ای = Blocking
  • سبز دودی = DNS Lookup

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

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

تست دوم - سبز دودی = DNS Lookup
تست دوم – سبز دودی = DNS Lookup

اگر از CDN استفاده می‌کنید، همین موضوع در مورد عناصر شما یعنی (JavaScript، CSS ، تصاویر) نیز صادق است. حافظه نهان CDN بسیار شبیه به DNS عمل می‌کند و زمانی که ذخیره می‌شود، در سری‌های بعدی بسیار سریع‌تر لود می‌شود. نکته دیگر در سرعت بخشیدن به DNS استفاده از پیش واکشی DNS است. این به مرورگر اجازه می‌دهد تا جستجوی DNS را در صفحه‌ای در پس زمینه انجام دهد. می توانید این کار را با افزودن چند خط کد به هدر سایت وردپرس خود انجام دهید. چند نمونه از این کدها را در زیر مشاهده کنید:

<!– Prefetch DNS for external assets –>

<link rel=”dns-prefetch” href=”//fonts.googleapis.com”>

<link rel=”dns-prefetch” href=”//www.google-analytics.com”>

<link rel=”dns-prefetch” href=”//cdn.domain.com”>

 

اگر از نسخه وردپرس 4.6 یا جدیدتر استفاده می‌کنید، ممکن است بخواهید از طریق دیگری به این کار دسترسی داشته باشید.‌ توسعه دهندگان می‌توانند از فیلتر wp_resource_hints برای مجهز کردن دامنه‌ها و URL های سفارشی به dns-prefetch ، preconnect ، prefetch یا prerender استفاده کنند.

  • سبز = Connecting

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

سبز = Connecting
سبز = Connecting
  • قرمز = Sending

زمان ارسال در Waterfall Chart جی تی متریکس به طور ساده زمانی است که طول می‌کشد تا مرورگر داده‌ها را به سرور ارسال کند.

قرمز = Sending
قرمز = Sending
  • بنفش = Waiting

زمان انتظار در GTmetrix در واقع اشاره به زمان نمایش اولین بایت است که در برخی از ابزارها TTFB نیز نامیده می‌شود. TTFB معیاری است که به عنوان نمادی از پاسخگویی یک سرور وب یا سایر منابع شبکه مورد استفاده قرار می‌گیرد. به طور کلی، TTFB زیر 100 میلی ثانیه قابل قبول و خوب است. اما اگر به محدوده 300-400 میلی ثانیه نزدیک شود ممکن است نمایانگر این باشد که چیزی در سرور شما اشتباه پیکربندی شده است یا زمان آپدیت به یک نسخه وب بهتر فرا رسیده باشد. در آزمایش ما مقدار این پارامتر در GTmetrix زیر صد ثانیه است که مقدار مناسبی می‌باشد.

بنفش = Waiting
بنفش = Waiting

برخی از راه‌های ساده برای کاهش TTFB این است که اطمینان حاصل کنید میزبان شما دارای حافظه پنهان مناسب بوده و از CDN استفاده کرده است.

  • خاکستری = Receiving

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

خاکستری = Receiving
خاکستری = Receiving

زمان‌بندی رویدادها

هر زمان که شما صفحه‌ای را درخواست می‌کنید، آن یک زمان رویداد دارد، که شامل رندر و لود می‌شود:

  • First Paint (خط سبز): اولین نقطه‌ای که مرورگر عمل رندر را انجام می‌دهد، مانند نمایش رنگ پس زمینه صفحه
  • DOM Loaded (خط آبی): نقطه‌ای که در آن DOM یا مدل نهایی صفحه آماده است.
  • Onload (خط قرمز): زمانی که پردازش صفحه به پایان رسیده و بارگیری تمام منابع روی صفحه (تصاویر، CSS و غیره) تمام شده است.

Fully Loaded (خط بنفش): این نقطه بعد از رویداد Onload روشن می‌شود و هیچ فعالیت شبکه‌ای به مدت 2 ثانیه وجود ندارد.

زمان‌بندی رویدادها
زمان‌بندی رویدادها

هدرهای پاسخ HTTP

از سویی می‌توانید بر روی یک درخواست فردی کلیک کنید تا با HTTP response headers  مواجه شوید. این بخش اطلاعات مفیدی را ارائه می‌دهد. در اسکرین زیر می‌توانیم gzip در وب سرور، اجرای HHVM، سرورهایی با حافظه پنهان یا HIT و همچنین هدرهای کنترل حافظه پنهان، ساختار سرور، خرابی هدرها و سایر موارد را مشاهده کنیم.

هدرهای پاسخ HTTP
هدرهای پاسخ HTTP

نکته دیگری که باید بدانید این است که ابزار GTmetrix برخلاف Pingdom از HTTP/2 پشتیبانی می‌کند، زیرا در حال حاضر از 58+ Chrome  برای اجرای آزمایشات خود بهره می‌برد. Chrome پشتیبانی از HTTP/2  را در نسخه 49 اضافه کرده بود. پس در انتخاب ابزار تست سرعت بهتر است دقت لازم را انجام دهید.

  • بخش Video

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

بخش Video
بخش Video
  • بخش History

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

بخش History
بخش History
خش History
خش History

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

پیکربندی دامنه مورد مطالعه

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

  • معماری
  • دامنه مورد مطالعه (perfmatters.io) با Kinsta  و در پلتفرم Google Cloud  در ایالت متحده میزبانی می‌شود. Kinsta از HTTP/2، NGINX ، MariaDB استفاده می‌کند که همه آنها به زمان بارگذاری سریع‌ کمک می‌کنند.
  • این وبسایت از PHP7.3 بهره می‌برد که در حال حاضر در از HHVM سریع تر می‌باشد. البته تغییر به نسخه‌های PHP به سادگی آب خوردن است.
  • این سایت از هیچ افزونه ذخیره سازی استفاده نمی‌کند. Kinsta همه چیز را در سطح سرور ذخیره می‌کند که این امر علاوه بر ساده سازی کارها به اجرای سریع آن‌ها نیز کمک می‌کند.

 

  • افزونه‌های وردپرس

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

  • افزونه CDN Enabler رایگان برای استقرار KeyCDN استفاده می‌شود.
  • افزونه CAOS رایگان برای همگام سازی محلی Google Analytics استفاده می‌شود.
  • افزونه premium perfmatters برای خلاص شدن از شر درخواست‌های غیر ضروری HTTP و غیرفعال کردن مواردی مانند Emojis و Embeds استفاده می‌شود.
  • افزونه ایده آل Gonzalez برای غیرفعال کردن بارگیری اسکریپت‌ها استفاده می‌شود.
  • افزونه premium Imagify برای فشرده سازی تصاویر استفاده می‌شود.

 

جمع بندی در مورد جی تی متریکس GTmetrix

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

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

 

منبع:

 

https://kinsta.com/blog/gtmetrix-speed-test/

بدون دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *