سایت GTmetrix برای افزایش سرعت سایت

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

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

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

در واقع، دلیل نوشتن این مطلب، این است که بسیاری از مشتریان Kinsta همواره از ما می پرسند چگونه باید از توصیه های موجود در گزارش های GTmetrix پیروی کنند. در مقایسه با سایر ابزارهای توسعه دهنده، GTmetrix به نسبت ساده است و کاربران مبتدی نیز می توانند به سرعت آن را یاد بگیرند. این ابزار با ترکیبی از Google PageSpeed Insights و YSlow، امتیازات و توصیه ها را ایجاد می کند.

گزینه های تحلیل در GTmetrix

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

موقعیت مکانی

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

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

مرورگر

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

گزینه های اضافی

گزینه های اضافی شامل امکان ایجاد یک ویدیو است. این ویدیو می تواند به شما کمک کند مشکلات را برطرف کنید، زیرا نحوه رندر شدن صفحه را نشان می دهد. ویژگی AdBlock Plus نیز جالب است. اگر در حال اجرای شبکه تبلیغاتی شخص ثالث مانند Google Adsense هستید، می توانید این گزینه را فعال کنید تا تأثیر کامل تبلیغات بر زمان بارگذاری را مشاهده کنید.

گزینه های اضافی دیگر عبارت اند از:

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

تحلیل با ابزار تست سرعت GTmetrix

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

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

خلاصه GTmetrix (امتیازات عملکرد و جزئیات)

هنگامی که وب سایت وردپرسی خود را از طریق GTmetrix اجرا می کنید، یک گزارش عملکرد تولید می کند که شامل “رتبه GTmetrix” و “Vitalهای وب” است.

رتبه GTmetrix از دو معیار زیر محاسبه می شود:

• عملکرد GTmetrix: امتیاز عملکرد از ابزار بازرسی سایت Lighthouse
• ساختار GTmetrix: یک معیار عملکرد اختصاصی که عملکرد کلی یک صفحه را اندازه گیری می کند.

در سال 2020، گوگل مجموعه استانداردی از معیارهای عملکرد وب و تجربه کاربری به نام Web Vitals معرفی کرد. Web Vitals شامل انواع مختلفی از معیارها است، اما مواردی که GTmetrix در نظر می گیرد عبارت اند از: بزرگترین محتوای قابل مشاهده (LCP)، کل زمان مسدود کردن (TBT) و تغییر چیدمان تجمعی (CLS).

• بزرگترین محتوای قابل مشاهده (LCP): مدت زمانی که طول می کشد تا بزرگترین بخش صفحه شما بارگذاری شود. برای برخی از سایت ها، LCP می تواند یک تصویر بزرگ باشد، در حالی که در سایت های دیگر LCP ممکن است به متن اصلی اشاره داشته باشد.
• کل زمان مسدود کردن (TBT): مدت زمانی که صفحه قبل از اینکه کاربر بتواند با آن تعامل داشته باشد، مسدود شده است. CSS و JS مسدودکننده رندر می توانند تأثیر زیادی بر TBT داشته باشند.
• تغییر چیدمان تجمعی (CLS): به جابجایی عناصر در هنگام بارگذاری صفحه اشاره دارد. برای مثال، چیدمان یک صفحه حاوی توییت های جاسازی شده ممکن است به طور چشمگیری در حین بارگذاری صفحه تغییر کند.

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

• رتبه GTmetrix: B
• عملکرد GTmetrix: 85٪
• ساختار GTmetrix: 83٪
• LCP: 1.0s
• TBT: 0ms
• CLS: 0

سپس یک آزمایش دیگر انجام دادیم و اکنون رتبه GTmetrix ما “A” است! این موضوع چیست؟ ممکن است شما نیز این موضوع را مشاهده کنید اگر وب سایت خود را چندین بار از طریق ابزار تست سرعت GTmetrix اجرا کنید. یکی از دلایل این اتفاق، کش شدن است، هم کش DNS و هم کش سرور. علت آن را در ادامه در تحلیل نمودار آبشاری شرح می دهیم.

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

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

عملکرد

سپس به برگه “عملکرد” GTmetrix می رویم که تعدادی معیار مفید برگرفته از داده های عملکرد Lighthouse را نشان می دهد. علاوه بر LCP، TBT و CLS که در صفحه خلاصه نشان داده شده اند، بخش “معیارهای عملکرد” همچنین شاخص سرعت (SI)، زمان تعامل (TTI) و اولین محتوای قابل مشاهده (FCP) را نمایش می دهد.

بخش “معیارهای عملکرد” دقیقاً به شما نشان نمی دهد که باید چه چیزی را رفع کنید، اما نمای خوبی از معیارهای کلیدی تجربه کاربری را ارائه می دهد که می توانید بهبود بخشید.

در ادامه صفحه، GTmetrix همچنین تعدادی از آمارهای سنتی “زمان بندی مرورگر” را نشان می دهد که شامل زمان بارگذاری، زمان اولین بایت، زمان بارگذاری کامل و غیره می شود. در گذشته، این معیارهای سنتی بسیار مهم بودند. با این حال، با استانداردسازی معیارها توسط گوگل با Web Vitals، توصیه می کنیم برای آن ها بهینه سازی کنید. در بیشتر موارد، بهینه سازی برای Web Vitals نیز به معیارهای خوب زمان بندی مرورگر منجر می شود.

ساختار

برگه “ساختار” GTmetrix جایی است که می توانید مشکلات خاصی که بر عملکرد سایت شما تأثیر می گذارند را مشاهده کنید. این صفحه بسیار مفید است زیرا اطلاعات عملی مانند “حذف منابع مسدودکننده رندر” و “کمینه کردن CSS” را ارائه می دهد تا به بهینه سازی سایت خود بپردازید.

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

تصاویر مقیاس بندی شده ارائه دهید

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

CSS کوچک را درون خطی کنید

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

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

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

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

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

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

منابع را از یک URL ثابت ارائه دهید

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

تجزیه جاوا اسکریپت را به تعویق بیندازید

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

CSS و جاوا اسکریپت را کمینه کنید

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

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

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

تصاویر را بهینه کنید

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

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

زمان پاسخ اولیه سرور را کاهش دهید

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

اگر در Kinsta میزبانی می شوید، نیازی به نگرانی در مورد کش صفحه ندارید، زیرا ما با پیکربندی Nginx خود این کار را برای شما انجام می دهیم. اگر میزبان وردپرس شما از کش صفحه پشتیبانی نمی کند، می توانید یک افزونه کش مانند WP Rocket یا W3 Total Cache نصب کنید. برای کاهش بیشتر زمان پاسخ سرور، توصیه می کنیم Cloudflare APO را با سایت وردپرسی خود ادغام کنید. این سرویس بهینه سازی نوآورانه از Cloudflare، صفحات HTML سایت شما را در سراسر جهان توزیع می کند، که می تواند زمان پاسخ سرور را در سطح جهانی کاهش دهد.

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

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

افزونه رایگان Autoptimize برای این کار نیز عالی است. به سادگی گزینه “بهینه سازی کد HTML” را فعال کنید.

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

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

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

htaccessCopy code<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 خود اضافه کنید.

nginxCopy codegzip 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;

مطلب مفصل ما را در مورد چگونگی فعال کردن فشرده سازی GZIP بررسی کنید.

حداقل کردن ریدایرکت ها

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

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

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

توجه: هدرهای کش HTTP به طور خودکار بر روی همه سرورهای Kinsta اضافه می شوند.

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

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

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

نادرست:

htmlCopy code<img src="https://domain.com/images/image1.png">

درست:

htmlCopy code<img src="https://domain.com/images/image1.png" width="200" height="100">

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

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

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

مشخص کردن یک هدر vary: accept-encoding

این یک هدر HTTP است و باید بر روی هر پاسخ سرور مبدأ موجود باشد، زیرا به مرورگر می گوید آیا کلاینت می تواند نسخه های فشرده محتوا را اداره کند یا نه. معمولاً هنگامی که فشرده سازی GZIP فعال باشد، این مورد نیز رفع می شود. اما حتماً مطلب مفصل ما را در مورد چگونگی رفع توصیه “مشخص کردن یک هدر vary: accept-encoding” بخوانید. و باز هم نمی توانید این مورد را در منابع شخص ثالث رفع کنید.

نمودار آبشاری GTmetrix

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

مسدود کردن (قهوه ای)

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

جستجوی DNS (آبی فیروزه ای)

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

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

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

htmlCopy code<!-- 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 استفاده کنند.

اتصال (سبز)

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

ارسال (قرمز)

زمان ارسال، صرفاً مدت زمانی است که مرورگر وب برای ارسال داده به سرور نیاز دارد.

انتظار (بنفش)

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

راه های آسان برای کاهش TTFB، اطمینان از اینکه میزبان شما کش مناسب دارد و استفاده از CDN است.

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

دریافت (خاکستری)

زمان دریافت، صرفاً مدت زمانی است که مرورگر وب برای دریافت داده از سرور نیاز دارد.

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

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

• اولین رنگ آمیزی (خط سبز): اولین نقطه ای که مرورگر هر نوع رندری بر روی صفحه انجام می دهد، مانند نمایش رنگ پس زمینه.
• بارگذاری DOM (خط آبی): نقطه ای که در آن DOM (مدل شیء سند) آماده است.
• رویداد onload (خط قرمز): هنگامی که پردازش صفحه کامل شده و همه منابع موجود در صفحه (تصاویر، CSS، و غیره) دانلود شده اند.
• بارگذاری کامل (خط بنفش): نقطه ای پس از وقوع رویداد onload که به مدت 2 ثانیه هیچ فعالیت شبکه ای رخ نداده است.

هدرهای پاسخ HTTP

همچنین می توانید بر روی یک درخواست فردی کلیک کرده و آنچه را که “هدرهای پاسخ HTTP” می نامند، مشاهده کنید. این اطلاعات ارزشمندی را ارائه می دهد. در تصویر زیر، بلافاصله می توانیم چیزهایی مانند فشرده سازی GZIP بر روی سرور وب فعال است، سرور از HHVM استفاده می کند، از کش ارائه می شود (در غیر این صورت HIT، MISS را نشان می دهد)، هدرهای کش کنترل، معماری سرور (این همیشه قابل مشاهده نیست)، هدرهای انقضا، نماینده کاربر مرورگر و غیره را مشاهده کنیم.

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

ویدیو

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

تاریخچه

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

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

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

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

معماری

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

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

و در اینجا فهرستی از افزونه های مورد استفاده در سایت وردپرس آمده است:

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

خلاصه

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