رد کردن پیوندها

سایت 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 برای افزایش سرعت سایت یکی از موارد انجام شده در سفارش افزایش سرعت سایت است که زیرمجموعه فعالیت های بهبود سفارش طراحی سایت می باشد. و به یاد داشته باشید، وقتی صحبت از مقایسه با پینگدام می‌شود، آن‌ها ابزارهای متفاوتی هستند؛ بنابراین بهتر است به یکی از آن‌ها پایبند باشید، زیرا آن‌ها به روش‌های متفاوتی محاسبه می‌کنند.