معیارهای gtmetrix

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

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

  • معیار اول: شاخص سرعت (Speed Index)
  • معیار دوم: نمایش اولین محتوی (First Contentful Paint)
  • معیار سوم: Largest Contentful Paint
  • معیار چهارم: Time to Interactive
  • معیار پنجم: Total Blocking Time
  • معیار ششم: Cumulative Layout Shift

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

معیار اول: شاخص سرعت (Speed Index)

شاخص سرعت یا همان Speed Index (SI) ، معیاری برای عملکرد مناسب یک سایت است که سرعت لود شدن و سرعت کامل شدن صفحه وب سایت را اندازه گیری میکند. این معیار به سایز پورت مرورگر شما نیز بستگی دارد و بر خلاف معیارهایی نظیرFirst Contentful Paint (FCP) یا Largest Contentful Paint (LCP) در timeline لود صفحه شما نمایش داده نمی شود.

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

شاخص سرعت چگونه اندازه گیری می شود؟

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

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

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

چنانچه مایل هستید بیشتر در این رابطه اطلاعات کسب کنید پیشنهاد میکنیم مقاله ” محاسبه شاخص سرعت ” را مطالعه کنید.

محاسبه شاخص سرعت

تأثیر شاخص سرعت بر روی امتیاز عملکرد شما (performance)

شاخص سرعت 15٪ از امتیاز عملکرد را به خود اختصاص می دهد که نشان دهنده اهمیت نسبتاً بالای آن است. به ازای عدد SI پایین تر می توان گفت که محتوی بیشتری در زمان کوتاه تری به کاربران سایت شما نمایش داده شده و باعث ایجاد تجربه کاربری خیلی خوبی برای بازدید کنندگان وب سایت شما خواهد داشت.

حد و حدود شاخص سرعت

GTmetrix شاخص سرعت محاسبه شده را در چند ثانیه نمایش می دهد. زمان کمتر نشان دهنده بارگیری سریعتر صفحه وب است. حدود SI به شرح زیر است:

  • SI=1311 میلی ثانیه و یا کمتر >->-> خیلی خوبه – کاری برای انجام دادن نیست !!!
  • SI بین 1311 الی 1711 میلی ثانیه >->-> خوبه – باید کمی بر روی بهبود وب سایت خودتون کار کنید.
  • SI بین 1711 الی 2300 میلی ثانیه >->-> بیش از حد توصیه شد و بد – باید حتما روی بهبود وب سایت خودتون کار کنید.
  • SI بیشتر از2300 میلی ثانیه >->-> خیلی بد – باید خیلی خیلی روی بهبود وب سایت خودتون کار کنید.

چگونه شاخص سرعت را بهبود ببخشیم؟

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

به طور کلی ، اکثر بهینه سازی های عملکردی (performance optimizations) که منجر به سریع تر شدن FCP (First Contentful Paint) و LCP (Largest Contentful Paint) می شوند، احتمالاً منجر به سرعت سریعتر لود صفحه نیز می شوند.

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

  1. Reducing JavaScript execution time
  2. Minimizing main-thread work
  3. Removing unused JavaScript
  4. Reducing the impact of third-party code
  5. Replacing large JavaScript libraries with smaller alternatives

منبع : Lighthouse: Speed Index

 

معیار دوم: نمایش اولین محتوی (First Contentful Paint)

نمایش اولین محتوی یا همان First Contentful Paint (FCP) معیاری عملکردی است و اندازه گیری می کند که چقدر سریع بازدیدکنندگان می توانند محتوی اصلی صفحه را ببینند. محتوایی همچون متن ، تصاویر ، ویدئو و …

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

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

First Contentful Paint چه چیزی را اندازه گیری می کند؟

به گفته گوگل:

بعد از اینکه کاربر به صفحه شما وارد شد، برای ارائه اولین قطعه محتوای DOMبه مرورگر زمانی صرف خواهد شد. تصاویر، آیکون ها وفایل های SVG موجود در صفحه به عنوان محتوای DOM در نظر گرفته می شوند. البته به شرط آنکه داخل iframe گنجانده نشده باشد.

FCP یک معیار مهم و کاربر محور برای اندازه گیری عملکردی است که قابل درک باشد. به این معنی که اولین محتوایی که به کاربر نمایش داده شده و وی می تواند از آن استفاده نماید. برای درک بیشتر این موضوع در مقابل FCP، زمان نمایش اولین تغییر (First Paint Timing) نقطه ای را نشان می دهد که هر چیزی روی صفحه نمایش داده می شود. به عنوان مثال، یک رنگ زمینه، یک حاشیه و غیره که این موارد کمتر مفید بوده و چندان مورد استفاده کاربر قرار نمی گیرد.

سنجش FCP

تأثیر FCP در امتیاز عملکرد شما

این معیار 15٪ از کل امتیاز عملکرد را به خود اختصاص می دهد ، که اهمیت نسبتاً بالای آن را نشان می دهد. بهینه سازی صفحه برای بهبود FCP معمولاً دستاوردهای قابل توجهی در زمان بارگذاری صفحه و درک کاربر از عملکرد سایت شما به همراه دارد.

حد و حدود FCP

حدود FCP به شرح زیر است:

  • FCP در حدود 934 میلی ثانیه و کمتر = حالت خوب و ایده آل است و نیاز به انجام کاری نیست.
  • FCP بین 934 و 1205 میلی ثانیه = خوب است اما کمی نیاز به بهینه سازی دارد
  • FCP بین 1205 تا 1600 میلی ثانیه = بیشتر از مقدار قابل قبول است و نیاز است که اصلاحات اندکی انجام شود.
  • FCP بیشتر از 1600 میلی ثانیه = اصلاح وضعیت خوبی نیست و باید تغییرات بیشتر انجام شود.

چطور FCP را بهبود ببخشیم؟

توجه داشته باشید که موارد ذکر شده در زیر بیشترین کمک را به بهینه سازی FCP شما می کنند. با این حال ، ممکن است FCP صفحه شما تحت تأثیر موارد دیگری باشد که در اینجا ذکر نشده است.

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

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

مورد دوم : حذف منابع مسدود شده

منابع مسدود شده (render-blocking resources) در واقع فایل هایی هستند که شما تصمیم می گیرید تا بعد از لود اولیه وارد پروسه لود شوند. در واقع می توان گفت شما فایل های غیر ضروری را دیرتر لود میکنید تا صفحه وب سایت شما به سرعت برای کاربر نمایش داده شده و به مرور تکمیل گردد.

به منظور مطالعه بیشتر در اینباره حتما مقاله زیر را مطالعه کنید

مورد سوم : به حداقل رساندن تعداد درخواست (request) و سایز آنها

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

همچنین برای حل این مشکل در وب سایت های وردپرسی می توانید از افزونه های بهینه ساز همچون راکت استفاده کنید.


منبع : Lighthouse: First Contentful Paint

معیار سوم: Largest Contentful Paint

Largest Contentful Paint یا همان LCP معیار عملکردی است که در سال 2020 توسط Lighthouse برای سنجش بهتر تجربه بارگیری قابل درک برای کاربران ارائه شده است.

درواقع ، LCP اندازه گیری می کند که چه مدت طول می کشد تا بزرگترین “عنصر محتوا” (به عنوان مثال ، تصویر قهرمان ، متن عنوان و غیره) در صفحه شما در صفحه نمایش بازدید کننده شما قابل مشاهده باشد.

LCP یکی از معیارهایی است که Google’s Web Vitals را تشکیل می دهد.

Largest Contentful Paint چه چیزی را اندازه گیری می کند؟

با توجه به گفته گوگل:
” LCP یک معیار کاربرپسند برای اندازه گیری بهتر سرعت بارگیری وب سایت است؛ زیرا هنگامی که محتوای اصلی صفحه بارگیری می شود ، نقطه ای را در جدول زمانی بارگیری صفحه نشان می دهد – یک LCP سریع ، حس اعتماد را در کاربران افزایش می دهد.”

LCP میزان مصرف محتوای قابل توجه در صفحه وب شما توسط بازدید کنندگان را اندازه گیری می کند. فرض کنید که بزرگترین عنصر محتوای صفحه خود را بارگذاری کنید، LCP اندازه گیری می کند که بزرگترین عنصر محتوای صفحه با چه سرعتی بارگیری می شود. هر “عنصر محتوا” از عنصر HTML است ، مانند:
• یک عنصر تصویر
• یک عنصر ویدیویی
• عنصری که تصویر پس زمینه از طریق تابع URL بارگیری می شود (به جای اعلام آن در CSS)
• عناصر سطح بلوک مانند < h1> ، <h2> ، <div> ، <ul> ، <table> و غیره

largest contentful paint example

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

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

تأثیر Largest Contentful Paint’s در امتیاز عملکرد

جی تی متریکس بیان می کند که LCP ، مقدار 25٪ از امتیاز بهینه سازی Web Vital را به خود اختصاص داده و یکی از مهمترین معیارهای بهینه سازی است. در حالی که معیارهای دیگر مانند First Contentful Paint (FCP) یا (Time-to-First-Byte (TTFB همچنان وابسته به سرعت متن صفحه هستند ، LCP نمایانگر انتظار بازدید کنندگان شما در دنیای واقعی به هنگام بررسی وب سایت شماست.

fast vs slow lcp

به طور مثال وب سایت سبز از نظر بصری از ثانیه ۰.۲ کامل می شود در حالیکه وب سایت قرمز این فرآیند را طولانی تر طی می کنند. این بدان معناست که، بهینه سازی LCP شما می تواند بیشترین پیشرفت را در عملکرد وب سایت شما از نظر امتیاز بهینه سازی و هم از نظر عملکرد بازدیدکنندگان ایجاد کند.

حدود Largest Contentful Paint

  • خوب ، کاری برای انجام دادن نیست = LCP برابر 1200 میلی ثانیه یا کمتر
  • بد نیست ، اما میشه بهترش کرد = LCP بین 1200 تا 1666 میلی ثانیه
  • جالب نیست و بیشتر از حد توصیه شده = LCP بین 1666 تا 2400 میلی ثانیه
  • اصلا وضعیت خوبی نیست و باید درست بشه = LCP بالاتر از 2400 میلی ثانیه

Largest Contentful Paint Element در تب Structure

آنچه را GTmetrix به عنوان بزرگترین عنصر محتوای صفحه شناسایی کرده است ، می توانید در تب Structure مشاهده کنید. در فهرست بررسی عبارت “Largest Contentful Paint Element” ذکر شده است.

چگونه Largest Contentful Paint را بهبود ببخشیم؟

توجه داشته باشید که بررسی های خاصی که در زیر ذکر شده بیشترین کمک را به LCP شما می کنند. با این حال ، ممکن است زمان بندی LCP صفحه شما تحت تأثیر بهینه سازی های دیگری باشد که در اینجا ذکر نشده است. در اینجا برای نمونه چند نمونه مثال می زنیم :
1. کاهش زمان پاسخ سرور: کاهش زمان پاسخ سرور به بارگیری سریعتر منابع و تحویل سریع LCP در صفحه کمک می کند. می توانید با کاهش زمان پاسخ اولیه سرور و یا استفاده از شبکه تحویل محتوا (CDN) می توانید این بهینه سازی را انجام دهید.

2. از بین بردن رفتار render-blocking: از بین بردن رفتار render-blocking در صفحه شما بارگذاری منابع را در سریعترین زمان ممکن تضمین می کند.

3. بهینه سازی عکس ها و ویدئو ها: تصاویر و فیلم ها را در صفحه خود بهینه کنید تا زمان بارگیری کاهش یابد. برخی از کارهایی که می توانید انجام دهید شامل موارد زیر است:

  • اندازه مناسب تصاویر
  • فرمت مناسب تصاویر
  • ترکیب تصاویر کوچک با استفاده از Sprites CSS
  • استفاده از قالب های ویدئویی برای محتوای متحرک

توجه: برخی از بررسی ها با هم دارای اشتراکاتی هستند که بهبود یک عنصر از اجزای سایت باعث بهبود سایر گزینه ها نیز خواهد شد.


منبع :  Largest Contentful Paint

معیار چهارم: Time to Interactive

Time to Interactive یا همان TTI اندازه گیری می کند که چه مدت طول می کشد تا یک صفحه کاملاً قابلیت تعامل با کاربران را پیدا کند. یعنی مدت زمان بین اولین Contentful Paint (FCP) و آخرین long-task در main-thread را اندازه گیری می کند و نقطه ای را نشان می دهد که مرورگر قادر به پاسخگویی مطمئن به کاربر است. به زبان ساده ، TTI سریع به شما اطمینان می دهد که صفحه قابل استفاده برای کاربران است.

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

کاهش TTI برای عملکرد وب شما بسیار مهم است ، به ویژه در دستگاه های تلفن همراه که این موضوع از اهمیت بالاتری برخوردار است.

اثر Time to Interactive بر روی امتیاز Performance

معیار TTI مقدار 15٪ از کل امتیاز عملکرد (Performance Score) را به خود اختصاص می دهد ، که اهمیت نسبتاً بالای آن را نشان می دهد. توجه داشته باشید که TTI معیاری است که با زمان مسدود کردن کل (TBT) در کنار هم هستند، و این دو معیار اطلاعات بیشتری در مورد پاسخگویی صفحه شما به کاربر ارائه می دهند.

حدود قابل قبول برای Time to Interactive

  • TTI برابر 2468 میلی ثانیه یا کمتر = خوب است و نیاز به بهبودی ندارد
  • TTI را بین 2468 تا 3280 میلی ثانیه = خوب ، اما نیاز بهبودی دارد
  • TTI بین 3280 تا 4500 میلی ثانیه = بیشتر از حد توصیه شده و کمی بهینه سازی لازم دارد
  • TTI بالاتر از 4500 میلی ثانیه = خیلی بیشتر از حد توصیه شده و حتما باید فکری به حال سایت خودتون کنید

چگونه زمان تعامل را بهبود ببخشیم؟

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

1. بهینه سازی اجرای جاوا اسکریپت: برای کاهش main-thread blocking time، اجرای JavaScript خود را بهینه کنید و اطمینان حاصل کنید که صفحه شما سریع به ورودی های کاربر پاسخ می دهد.

  • کاهش زمان اجرای جاوا اسکریپت
  • به حداقل رساندن کار main-thread
  • حذف جاوا اسکریپت استفاده نشده
  • جایگزینی کتابخانه های بزرگ JavaScript با گزینه های کوچکتر

2. ارائه درخواست های کوچک: اطمینان حاصل کنید که تعداد درخواست ها در کمترین حالت خودش باشد. به همین ترتیب ، از chaining critical requests برای تسریع در بارگذاری منابع اصلی ، خودداری کنید.

3. استفاده از Preconnect to required origins ، این مورد یک مورد تخصصی است.


منبع: Time to Interactive

معیار پنجم: Total Blocking Time

Total Blocking Time یا همان (TBT) ، یکی از معیارهای عملکردی lighthouse است که در سال 2020 معرفی شد. این معیار میزان پاسخگویی صفحه شما را نسبت به ورودی کاربر مشخص می کند. به عبارت ساده ترTBT کل زمان مسدود بودن صفحه وب شما را اندازه گیری می کند. منظور از مسدود بودن در این عبارت زمانی است که کاربر نمی تواند با صفحه شما تعامل داشته باشد.

این معیار جایگزینی برای معیار field-only First Input Delay (FID) است که در PageSpeed Insights مشاهده می شود.

Total Blocking Time چه چیزی را اندازه گیری می کند؟

بر اساس بیانات گوگل :

TBT زمان کل بین First Contentful Paint (FCP) و Time to Interactive را اندازه گیری می کند. یعنی دقیقا زمانی که main-thread به حالت مسدود قرار گرفته و از پاسخگویی نسبت به کاربران جلوگیری می کند.

main-thread، جایی است که مرورگر اکثر موارد مرتبط با بارگذاری صفحه را مانند رندر یا چاپ محتوا (rendering/painting) و مدیریت تعاملات کاربران ، پردازش می کند. اساساً ، مرورگر از main-thread ، برای تجزیه HTML ، ساخت DOM ، اجرای CSS و JavaScript ، پردازش رویدادهای کاربر و انجام سایر کارهای مهم استفاده می کند.

وقتی انجام هر یک از این کارها بیش از 50 میلی ثانیه زمان ببرد، main-thread “مسدود” در نظر گرفته می شود زیرا مرورگر نمی تواند یک کار در حال انجام را قطع کند. و اگر main-thread مسدود یا بلاک شده باشد ، صفحه شما نمی تواند به اطلاعات ورودی کاربر مانند ضربه زدن روی صفحه ، فشار صفحه کلید یا کلیک ماوس پاسخی دهد.

زمان بیش از 50 میلی ثانیه ، زمانindividual blocking آن درخواست در نظر گرفته می شود و مجموع تمام این زمانهای مسدود شده ، کل زمان مسدود کردن صفحه شما یا Total Blocking Time است.

main thread timeline tbt

به عنوان مثال ، در تصویر بالا ، 5 وظیفه یا مورد در main-thread وجود دارد که 3 مورد از آنها Long Tasks هستند ، زیرا مدت زمان لازم برای انجام هریک از آن ها بیش از 50 میلی ثانیه است. زمان مسدودی هر یک از این long taskها به شرح زیر است:

  • Task A – 220 ms
  • Task B – 70 ms
  • Task E – 145 ms

TBT در این سناریو برابر با 435 میلی ثانیه است. اما بهرحال اگر main-thread فقط یک مورد داشت که 500 میلی به طول می انجامید، TBT نیز برابر 500 میلی ثانیه میشد.

مقایسه Total Blocking Time و Time to Interactive

Time to Interactive (TTI) معیار دیگری است که به تعامل صفحه شما مربوط می شود. TBT و TTI مکمل یکدیگر هستند اما در عین حال جنبه های کاملاً متفاوتی از تجربه کاربری صفحه شما گزارش می دهند.

TTI مدت زمانی را بیان می کند که طول می کشد تا صفحه شما کاملاً تعاملی شود. TBT به طور خاص به شما می گوید که کدام یک از موارد جاوا اسکریپت طولانی ترین زمان را برای اجرا شدن صرف کرده است.

درصورتی که main-thread ، حداقل به مدت 5 ثانیه آزاد باشد، TTI صفحه را کاملا تعاملی فرض می کند.

سناریوهای زیر را در نظر بگیرید:

tbt example

الف) سه کار 60 میلی ثانیه ای در یک دوره 5 ثانیه ای انجام شده

ب) یک Long Task به مدت 5 ثانیه

هر دو سناریوی فوق TTI را به یک اندازه افزایش می دهند. سناریوی A در طول بارگذاری صفحه تا حد زیادی تعاملی است ، چرا که هیچ long task یا کار طولانی ای در آن اتفاق نیفتاده و وقت مرورگر را نمی گیرد.

اما این دو سناریو از نظر کاربر بسیار متفاوت هستند زیرا TBT در سناریوی اول فقط 30 میلی ثانیه و در سناریوی دوم 4950 میلی ثانیه است.

سناریوی A در طول بارگذاری صفحه تا حد زیادی تعاملی است ، چرا که هیچ long task یا کار طولانی ای در آن اتفاق نیفتاده و وقت مرورگر را نمی گیرد.در حالی که در سناریو B هنگامی که مرورگر مشغول انجام Long Task است ، به هیچ وجه به کاربر اجازه تعامل با صفحه را نمی دهد. همین ویژگی باعث میشود TBT ، هم بعنوان یک معیار مستقل و هم با بکارگیری آن همراه TTI، مفید باشد.

مقایسه Total Blocking Time و First Input Delay

همانطور که قبلاً اشاره کردیم، TBT جایگزینی برای First Input Delay (FID) است که یکی از معیارهای Vital Web است. این داده های واقعی کاربر از طریق گزارش های تجربه کاربری Chrome (CrUX) – پایگاه داده رفتاری مرورگر Chrome که از کاربران سرتاسر دنیا جمع آوری شده است، به دست می آید. اما GTmetrix از این معیار در سنجش ها استفاده نمی کند. GTmetrix، به جای First Input Delay ، Total Blocking Time را گزارش می دهد. بنابراین جی تی متریکس، TBT را به جای FID گزارش می کند چراکه همان بهینه سازی ها را به شما توصیه می کند.

tbt web vitals

تاثیر Total Blocking Time بر نمره عملکرد یا performance

TBT به عنوان یک معیار Web Vital ، 25٪ از امتیاز performance را به خود اختصاص داده و همین مسئله این معیار را به یک معیار مهم برای بهینه سازی تبدیل کرده است. به عبارت دیگر، بهینه سازیTBT می تواند موثرترین پیشرفت را در پاسخگویی وبسایت شما ایجاد کند.

حدود Total Blocking

  • TBT=150 میلی ثانیه یا کمتر ، عالی ، این حالت ایده آل است و TBT شما نیازی به بهینه سازی ندارد
  • TBT بین 150 تا 224 میلی ثانیه = این حالت خوب است اما بهینه سازیTBT را انجام دهید
  • TBT بین 224 تا 350 میلی ثانیه = کمی بیشتر از حد توصیه شده که نیاز به بهینه سازی دارد
  • TBT بالاتر از 350 میلی ثانیه = خیلی بیشتر از حد توصیه شده است و نیاز حتمی به بهینه سازی دارد

چگونه Total Blocking Time را بهبود ببخشیم؟

Total Blocking Time با عملکرد جاوا اسکریپت ارتباط زیادی دارد و هرگونه پیشرفت در اجرای جاوا اسکریپت ( بهینه سازی هایی که باعث بهبود TTI می شوند) TBT شما را کاهش می دهد.
برخی از این بهینه سازی ها عبارتند از:


منبع مقاله: Total Blocking Time

معیار ششم: Cumulative Layout Shift

Cumulative Layout Shift (CLS) معیار عملکردی است که در سال 2020 توسط Lighthouse معرفی شده است تا میزان ثبات بصری یا ظاهری صفحه را اندازه گیری کند. به عبارت ساده تر CLS ، تغییر مکان غیرمنتظره عناصر صفحه را هنگام بارگذاری اندازه گیری می کند. در واقع نمره CLS، مجموع همه امتیاز های layout shift در صفحه است.

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

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

کاهش صفحه CLS امری بسیار مهم است زیرا صفحاتی که عناصر آن درحین بارگیری جابجا می شوند میتوانند منجر به تجربه منفی کاربری شوند (به ویژه در دستگاه های تلفن همراه).

به عنوان مثال، برای همه ما اتفاق افتاده است که منتظر بارگیری صفحه ای شده ایم، دکمه ای را که قصد داشتیم از طریق آن، با صفحه تعامل برقرار کنیم، پیدا کرده ایم. اما درست زمانی که روی آن کلیک کرده ایم، عناصر جابجا شده و ما روی دکمه یا عنصر دیگری (غالباً یک تبلیغ) کلیک کرده ایم.

تفاوت Layout Shift غیر منتظره و مورد انتظار

توجه به تفاوت بین شیفت های مورد انتظار و غیر منتظره امری مهم است که در ادامه بصورت کامل بیان شده است:

یک Layout Shift، زمانی موردانتظار محسوب می شود که در پاسخ به ورودی کاربر اتفاق افتاده باشد. به عنوان مثال وقتی با کلیک بر روی نماد جستجو ، یک قسمت برای گرفتن واژه جستجو از کاربر، باز می شود، یک Layout Shift مورد انتظار اتفاق افتاده است.

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

به عنوان مثال ، هنگامی که یک تبلیغ به طور ناگهانی ظاهر می شود و یک تصویر یا عنصری دیگر را به پایین صفحه هل می دهد، Layout Shift غیرمنتظره اتفاق افتاده است.

GTmetrix با استثنا درنظر گرفتن Layout Shift هایی که در عرض 0.5 ثانیه از ورود کاربر رخ می دهد ، بین Layout Shift های موردانتظار و غیر منتظره تفاوت قائل می شود.

تأثیر Cumulative Layout Shift در امتیاز عملکردی شما

حتی اگر تأثیر مستقیم CLS در امتیاز عملکرد نسبتاً کم باشد (5٪)، نباید فراموش کنیم که این مورد یک کمک بزرگ به حاصل شدن یک تجربه کاربری مطلوب است تا بتوانید تجربه ای روان و بدون تأخیر را به بازدیدکنندگان خود ارائه دهید. در حالی که برخی دیگر از معیارهای نمره عملکرد صفحه مستقیماً با سرعت بارگیری صفحه ارتباط دارند ، CLS بر بررسی کیفیت تجربه کاربری صفحه شما متمرکز است.

حد آستانه Cumulative Layout Shift

توجه کنید که CLS یک امتیاز است و نه مقداری بر پایه زمان. و مقدار آن عددی بین 0 تا 1 است.

  • CLS برابر 0.1 یا کمتر = خوب ، نیازی به بهینه سازی وجود ندارد
  • CLS بین 0.1 تا 0.15 = خوب ، اما میتوانید آن را بهبود بخشید
  • CLS بین 0.15 تا 0.25 = بیشتر از حد توصیه شده اما بهتر است بهینه سازی انجام شود
  • CLS برابر 0.25 یا بالاتر = خیلی بیشتر از حد توصیه شده و نیاز به بهینه سازی دارد

چگونه Cumulative Layout Shift را بهبود ببخشیم؟

توجه داشته باشید که اقدامات خاص ذکر شده در زیر، بیشترین تأثیر را در میزان CLS شما دارند. اما ممکن است نمره CLS صفحه شما تحت تأثیر بهینه سازی های دیگری باشد که در اینجا ذکر نشده است.
1) تعیین ابعاد تصویر: همیشه ، عرض و ارتفاع را برای عناصر تصویر و فیلم وبسایت خود مشخص کنید تا از فاصله ای مناسب برای تصاویر و فیلم ها استفاده شود. همچنین میتوانید این کار را با مشخص کردن نسبت ابعاد باکس ها در CSS انجام دهید.

2) برای کاهش تغییرات چیدمان ناشی از تبلیغات ، embed و iframesها ، اقدامات زیر را را انجام دهید:

  • قبل از بارگذاری کتابخانه تبلیغات ، اندازه شیار تبلیغات (ترجیحاً بزرگترین) را رزرو کنید.
  • تبلیغات را به پایین صفحه یا خارج از ویوپورت انتقال دهید.
  • وقتی هیچ تبلیغی برای نمایش در دسترس نیست ، از نگه دارنده فضا یا placeholder استفاده کنید.

3) از درج مطالب جدید با محتوی پویا بالاتر از مطالب موجود خودداری کنید


منبع مقاله: Cumulative Layout Shift

تصویر شاخص حل مشکلات جی تی متریکس

بررسی اشکالات جی تی متریکس

حل مشکلات GTmetrix با بررسی مورد به مورد در این مقاله بیان شده است.

  • حل مشکل Reduce initial server response time
  • حل مشکل Avoid an excessive DOM size
  • حل مشکل Enable Keep-Alive
  • حل مشکل critical request chain
  • حل مشکل Avoid long main-thread tasks
  • حل مشکل Use a Content Delivery Network (CDN)
  • حل مشکل Avoid large layout shifts
  • حل مشکل Minimize main-thread work

حل مشکل کاهش زمان پاسخ اولیه سایت

مشکل کاهش زمان پاسخ اولیه سایت – Reduce initial server response time

زمان اول بایت ارسالی یا همانTime to First Byte (TTFB) ، در واقع به عنوان زمان پاسخ سرور شناخته می شود. در واقع این زمان، زمانی است که مرورگر درخواست خود را برای سرور ارسال کرده و اولین بایت ارسالی از طرف سرور را دریافت می کند.

کاهش TTFB برای تجربه کاربری صفحه بازدید کنندگان شما بسیار مهم است چرا که بر روی دریافت هر درخواست (request) ارسالی از طرف وب سایت شما اثر گذاشته و مستقیما بر مدت زمان بارگیری صفحه اثرگذار خواهد بود.

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

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

تاثیر زمان پاسخگویی (server response time) سرور بر عملکرد صفحه (page performance)

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

نمودار پاسخ سمت سرور برای سرعت سایت

TTFB به عوامل مختلفی بستگی دارد ، اما عمدتا عملکرد نشان داده شده در مرحله 2 مد نظر است.

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

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

توجه داشته باشید که تعاریف زیادی برای TTFB وجود دارد. جی تی متریکس (GTmetrix) ، TTFB را مجموع مدت زمان ارسال درخواست ، مدت اتصال و مدت زمان بازگشت می داند.

محاسبه زمان gtmetrix-ttfb

در شکل فوق زمان محاسبه شده برای TTFB نمایش داده شده است.

مقدار قابل قبول GTmetrix برای این پارامتر چقدر است؟

حد ایده آل در نظر گرفته شده برای این موضوع برابر 600 میلی ثانیه بوده و اگر زمان پاسخگویی اولیه سرور بیش از 600 میلی ثانیه ، باشد این مورد از دیده جی تی متریکس و گوگل عملکرد نامناسبی ارزیابی خواهد شد.

چگونه زمان پاسخ سرور را کاهش دهیم؟

حال زمان پاسخگویی به این سوال مهم رسیده است. برای این کار 3 راه حال وجود دارد.

راه حل اول: بهینه سازی کدهای داخلی وب سایت به ویژه درخواست های پایگاه داده (Database)

البته این مورد نیازمند دانش تخصصی زیادی بوده و ما اکیداً توصیه می کنیم که از متخصصین درخواست کمک کنید چراکه در صورت انجام اشتباه ممکن است ضربه سختی به وب سایت خود وارد کنید. برای این منظور می توانید کدهای داخلی دیتابیس را تا حد امکان ساده سازی کرده و آنها را دسته بندی کنید تا در بلوک های خاصی اجرا شوند. همچنین می توانید کد های غیر ضروری را پاک کنید.

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

راه حل دوم : اجرای حافظه پنهان سرور یا همان سیستم کش (server-side caching)

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

البته توجه داشته باشید که میزبان و هاستینگ شما ممکن است از قبل در حافظه کش سمت سرور این مورد را در نظر گرفته باشد. بنابراین برای روشن شدن موضوع حتماً با آنها تماس بگیرید.

راه حل سوم: به روزرسانی سخت افزار سمت سرورCPU یا RAM قوی تر

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

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


منبع: سایت جی تی متریکس

حل مشکل Avoid an excessive DOM size

قبل از هر چیزی لازم است تا تعریفی در رابطه با المان های DOM ارائه کنیم.

المان Dom چیست؟

DOM یا همان Document Object Model در واقع یک مدل و ساختار درختی از تمام عناصر HTML درون یک صفحه وب است. که در آن عناصر HTML (همان تگ‌های HTML) به عنوان اشیاء در نظر گرفته می‌شوند. DOM در واقع یک API یا همان رابط برنامه نویسی برای جاوا اسکریپت است که به برنامه نویس اجازه کارهای زیر را می دهد:

  • حذف ، اضافه یا تغییر تگ‌های (عناصر) HTML
  • حذف ، اضافه یا تغییر خصیصه‌های attribute) HTML)
  • حذف ، اضافه یا تغییر استایل‌های CSS
  • واکنش به رویداد‌های Event) HTML)
  • حذف ، اضافه یا تغییر رویداد‌های HTML

صفحه html دارای کد هایی است که هر کدام از این کد ها در یک بلوک قرار گرفته و این درخت که معروف به درخت DOM است را می سازد.

المان Dom

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

یک درخت DOM بزرگ چگونه بر عملکرد صفحه تأثیر می گذارد؟

هر زمان که یک صفحه بارگیری می شود ، مرورگر قبل از اینکه شروع به ساخت درخت Document Object Model (DOM) کند، HTML آن صفحه را دانلود و تجزیه می کند. این درخت DOM تمام عناصر HTML را، که شامل ساختار و محتوای صفحه وب میشود، دربرمیگرد.

حال یک درخت بزرگ DOM می تواند به روش های زیر بر عملکرد صفحه شما تأثیر منفی بگذارد:

مورد اول: افزایش غیرضروری تعداد بایت های منتقل شده

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

مورد دوم: کاهش بیش اندازه سرعت رندر صفحه

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

مورد سوم: تخریب قدرت Ram سیستم کاربران

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

GTmetrix چگونه این گزارش را آماده کرده است؟

GTmetrix مجموع عناصر DOM را برای یک صفحه ، حداکثر عمق DOM صفحه و حداکثر عناصر فرزند (Child elements) را گزارش می دهد. بسته به تعداد عناصر DOM، نمره گزارش GTMetrix صفحه شما تغییر می کند.

اگر اندازه DOM صفحه شما بیش از 818 عدد باشد ، این عامل بعنوان یک مشکل به شما گزارش داده می شود.

چگونه از اندازه بیش از حد DOM جلوگیری کنیم؟

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

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

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

به یاد داشته باشید که هرچه صفحه شما پیچیده تر باشد ، احتمالاً اندازه DOM صفحه شما بزرگتر است.

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


منبع: GTmetrix – Lighthouse: Avoid an excessive DOM size

حل مشکل Enable Keep-Alive

تذکر: این ملاک توسط خود جی تی متریکس ارائه شده است.

برای درخواست های HTTP/1.1 ، فعال کردن Keep-Alive تاخیر را کاهش داده و عملکرد صفحه شما را بهبود می بخشد.

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

فعال کردن Keep-Alive این امکان را فراهم می کند تا از یک اتصال TCP برای انتقال چندین فایل استفاده شده و در نتیجه بارگیری صفحه سریعتر انجام می شود.

فعال کردن Keep-Alive چه تاثیری بر عملکرد صفحه دارد؟

فعال کردن Keep-Alive تضمین می کند که از یک اتصال TCP برای انتقال چند فایل، از سرور به مرورگر استفاده شود و از آنجایی که با این اتصال دیگر مرورگر برای بازیابی تمام منابع صفحه شما نیازی به برقراری اتصال دیگری ندارد، به صفحه شما کمک می کند تا سریعتر بارگیری شود.

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

با درخواست های HTTP/1.1 ، مرورگر می تواند اتصالات TCP را پس از دریافت فایل خاصی از سرور، ببندد. اگر چندین اتصال برای بازیابی فایل های صفحه شما برقرار شود، تأخیر غیرضروری شبکه را افزایش داده ، در نتیجه بارگیری صفحه کند انجام می شود.

فعال کردن Keep-Alive به صراحت به مرورگر اعلام می کند که با دریافت فایل از سرور ، نباید اتصال را قطع کند. توجه داشته باشید که این اقدام فقط برای درخواست های HTTP/1.1 قابل اجرا است. وب سایت هایی که بر پایه درخواست های HTTP/1.1 عمل می کنند، می توانند چندین اتصال TCP با یک سرور برقرار کنند تا منابع صفحه را دریافت کنند. در حالی که بسیاری از وب سایت ها به HTTP/2 منتقل شده اند و یا برخی از سرورهای وب به طور خودکار پرونده ها را از طریق یک اتصال TCP منتقل می کنند. البته ممکن است این موارد برای برخی از کاربران صدق نکند.

GTmetrix چگونه این گزارش را آماده می کند؟

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

این در حالی است که Lighthouse بررسی می کند آیا صفحه وب شما از HTTP/2 استفاده می کند یا خیر و فعال بودن Keep-Alive را در سرور وب شما را بررسی نمی کند.

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

چگونه Keep-Alive را فعال کنیم؟

بسته به وب سرور مورد استفاده خود ، دستورالعمل های زیر را دنبال کنید:

1) سرورهای Apache :Apache به صورت پیش فرض اتصالات Keep-Alive را فعال می کند. با این حال ، می توانید با افزودن خط زیر به فایل ” httpd.conf ” آن را فعال کنید. اما توجه داشته باشید اگر وبسایت شما روی یک هاست اشتراکی قرار دارد، احتمالاً به httpd.conf دسترسی نخواهید داشت و بنابراین مجبورید تنظیمات پیشفرض ارائه دهنده فضای میزبانی خود کنار بیایید.

 KeepAlive On

هشدار مهم درباره htaccess: ممکن است منابع دیگر به شما پیشنهاد کنند تا با افزودن کد زیر به فایل htaccess ، اقدام به فعال کردن keep alive کنید. اما بر خلاف آنچه این وب سایت ها پیشنهاد می دهند ، افزودن کد فوق به فایل htaccess در واقع اتصالات Keep-Alive را فعال نخواهد کرد بلکه باعث می شود اطلاعات نادرستی درباره قابلیت های سرور به مرورگرها ارسال شوند.

 Header set Connection keep-alive

2) سرورهای Microsoft IIS : کد زیر را کپی و در خط فرمان جایگذاری کنید:

 appcmd set config /section:httpProtocol /allowKeepAlive:true

3) سرورهای NGINX :حالت Keep-Alive به صورت پیش فرض در سرورهای NGINX فعال است.


منبع : Lighthouse: Enable Keep-Alive

حل مشکل critical request chain

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

درخواست های ضروری زنجیره ای طولانی (به خصوص آنهایی که منابع زیادی دارند) می توانند زمان بارگذاری صفحه شما را که به render-blocking شناخته می شوند، افزایش دهند. با کاهش تعداد critical request chains می توانید سرعت لود صفحه خود را بالا ببرید.

render-blocking در واقع این موضوع را بیان می کند که ابتدا باید فایل خاصی لود شود تا فایل بعدی که در صف قرار دارد وارد پروسه بارگزاری شود.

critical request chain چه تاثیری روی سرعت لود صفحه دارند؟

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

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

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

حداکثر تاخیر critical path ، مجموع کل زمان صرف شده برای بارگیری همه منابع در طولانی ترین critical request chain است.

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

GTmetrix بر چه اساسی این گزارش را آماده می کند؟

یک critical request به عنوان یکی از درخواست های زیر تعریف می شود:

  • Render-blocking
  • Not preloaded (بارگیری نشده)
  • Declared with a medium, high, or very high priority (اعلام با الویت متوسط ، بالا ، یا خیلی زیاد)

بررسی این مبحث در صورتی آغاز می شود که حداقل یک critical request chain وجود داشته باشد.

برای شروع کردن بررسی ، GTmetrix طولانی ترین critical request chain را با جزئیات نمایش می دهد و به شما اجازه می دهد هر درخواست را مشاهده کنید.

همچنین حداکثر critical path latency نمایش داده می شود.

چگونه این بررسی را انجام دهیم؟

به طور کلی ، ارزیابی کنید که چه منابعی در صفحه شما بارگیری می شود و سعی کنید زمان را برای بارگیری صفحه خود را به حداقل برسانید. چند استراتژی وجود دارد که می توانید برای بهینه سازی طول critical request chain استفاده کنید، چند نمونه برای شما معرفی کرده ایم:

  1. بارگیری درخواست های کلیدی: برای سرعت بخشیدن به اجرای منابع مهم ، درخواست های کلیدی (مانند: اسکریپت ها ، صفحات وب ، صفحه های سبک و غیره) را از قبل بارگیری کنید ، این کار باعث صرفه جویی وقت در زمان بارگیری صفحه می شود.
  1. کاهش تعداد critical resources: برای کاهش تعداد critical resources مورد نیاز (یعنی منابع مورد نیاز برای نمایش محتوای با ارزش) بوسیله به تأخیر انداختن بارگیری non-critical resources یا در صورت امکان از حذف کامل آن ها استفاده کنید. این کار تضمین میکند که مرورگر زمان کمتری را برای بارگیری منابع غیرضروری صرف کند. به عنوان مثال: تصاویر کم ارزش ، کدهای جاوا اسکریپت ، استایل های CSS برای محتوای غیر مهم.
  1. استفاده از ویژگی font-display: از ویژگی font-display برای بهینه سازی بارگیری فونت وب سایت و تجربه صفحه بازدید کنندگان خود استفاده کنید.

توجه: این یک بهینه سازی در سطح پیشرفته است. پشتیبانی بوسیله متخصصین این کار اکیدا توصیه می شود.


منبع: GTmetrix-Lighthouse: Avoid chaining critical requests

حل مشکل Avoid long main-thread tasks

رویدادهایی مانند تجزیه HTML/CSS ، تجزیه/اجرای جاوا اسکریپت و سایر موارد “task” هایی هستند که بر روی رشته اصلی اجرا می شوند (به طور پیش فرض).

زمانیکه هر یک از این task ها در طول زمان بیش از 50 میلی ثانیه اجرا شود (به عنوان “task های طولانی ” نیز شناخته می شود) ، می تواند هم برای First Paint و هم زمانی که برای تعامل کامل صفحه شما لازم است تأخیر ایجاد کند.

حتما از main-thread tasks طولانی تا آنجایی که ممکن است، جلوگیری کنید، تا بازدیدکنندگان سایت شما یک تجربه کاربری خوب داشته باشند.

main-thread tasks طولانی چه تاثیری بر عملکرد صفحه دارند؟

هر بار که صفحه شما بارگیری می شود ، مرورگر از main-thread برای مدیریت بیشتر کارهای مربوط به ارائه محتوای صفحه استفاده می کند.

Avoid long main-thread tasks

فایل جاوا اسکریپت که مدت طولانی در حال اجرا است (A ، B ، E در بالا) ممکن است main-thread را برای مدت طولانی مسدود کند و از اجرای سایر فایل ها توسط مرورگر جلوگیری کند و در نتیجه در بارگزاری کلی صفحه شما تأثیر بگذارد. main-thread task های طولانی مانع از این می شوند که مرورگر با سایر فرآیندهای ضروری در بارگیری صفحه شما روبرو شود.

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

کاهش تعداد main-thread task طولانی با به حداقل رساندن کارmain-thread ، عملکرد کلی صفحه شما را بهبود می بخشد. این برای بازدیدکنندگان سایت شما به این معنی است ، ممکن است محتوا را سریعتر در صفحه شما ببینند و زودتر با آن ارتباط برقرار کنند.

GTmetrix چگونه این عملکرد را بررسی می کند؟

این بررسی با معیار زمان شما برای تعامل (TTI:Time to Interaction) ارتباط زیادی دارد. با کلیک بر روی این گزارش مشخص می شود که کدام یک از فعالیت های اجرا شده اصلی بیش از 50 میلی ثانیه بوده است.

چگونه از انجام main-thread task جلوگیری کنیم؟

این بررسی تمام وظایف طولانی را که در بخش اصلی انجام می شوند، لیست می کند.

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

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


منبع: Lighthouse: Avoid long main-thread tasks

حل مشکل Use a Content Delivery Network (CDN)

استفاده از “Content Delivery Network(CDN)” می تواند عملکرد سایت شما را در مناطق مختلف جهان بهبود بخشد. CDN اساساً شبکه ای از سرورها است که در سراسر جهان پخش شده است. هر CDN “گره” ایست که در منطقه دیگری قرار دارد و محتوای ثابت صفحه شما مانند تصاویر ، پرونده های CSS / JavaScript و غیره را ذخیره می کند.

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

استفاده از Content Delivery Network (CDN) چه تاثیری بر عملکرد صفحه دارد؟

Content Delivery Network با ذخیره کردن منابع ثابت صفحه شما در سرورهای مختلف جهان ، تأخیر در زمان لود شدن فایل های سایت شما را کاهش می دهد.

بسته به محلی که بازدید کنندگان شما در آن قرار دارند ، محتوای صفحه شما از نزدیکترین سرور / گره CDN ارائه می شود.

GTmetrix چگونه عملکرد آن را بررسی می کند؟

GTmetrix پاسخ درخواست های لود صفحه شما بررسی می کند و مواردی که از CDN شناخته شده ارائه نمی شوند را شناسایی می کند.

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

استفاده از Content Delivery Network (CDN) در اصل در لیست بررسی پیش فرض Lighthouse موجود نیست.

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

CDN ها به طور کلی عملکرد قابل توجهی را برای بازدیدکنندگان فراهم می کنند. مهم نیست که بازدید کنندگان شما از کجا هستند ، CDN می تواند با ارائه منابع ثابت از نزدیکترین گره سرور ، عملکرد ثابت را تضمین کند.

البته می توان گفت که تمامی وب سایت ها به CDN احتیاجی ندارند. و در نتیجه استفاده از Content Delivery Network (CDN) به عنوان یک عامل منفی برای وب سایت شما مانند گذشته به حساب نمی آید ؛ اگرچه هنوز هم تا حدی بر رتبه آن تاثیر می گذارد.

چگونه این بررسی را انجام دهیم ؟

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

حالات زیر در نظر بگیرید:

  • CDN های شناخته شده: اگر از CDNهای محبوب (به عنوان مثال Cloudflare ، Netflify ، Amazon CloudFront ) برای ارائه منابع صفحه خود انتخاب کنید ، ممکن است GTmetrix از قبل این CDN را تشخیص دهد. در این صورت ، با شروع استفاده از CDN ، بررسی این پارامتر باید درست شود.
  • CDN های شناخته نشده: اگر از CDNهایی استفاده می کنید که نادر هستند می توانید با جی تی متریکس تماس بگیرید تا برای شما بررسی کنند.
  • من به CDN نیازی ندارم: اگر احساس می کنید که نیازی به استفاده از CDN ندارید (به عنوان مثال مخاطبان محلی ، وب سایت کوچک و غیره) ، می توانید این بررسی را با افزودن دامنه خود به قسمت نام های میزبان CDN در قسمت Analysis Options در حساب خود دور بزنید!!!

می توانید دامنه / نام هاست ، خود را به قسمت Hostnames CDN در تنظیمات کاربر اضافه کنید.

پس از انجام این کار ، GTmetrix وب سایت شما را به دلیل عدم استفاده از CDN امتیازی از شما کسر نخواهد شد. با این حال ، توجه داشته باشید که امتیاز عملکرد شما تغییری نخواهد کرد.


منبع: Lighthouse: Use a Content Delivery Network (CDN)

حل مشکل Avoid large layout shifts

مشکل Large layout shifts می تواند تجربه بسیار بد و نا امیدکننده ای را برای بازدیدکنندگان شما ایجاد کرده و باعث شود صفحه شما از نظر بصری نامناسب به نظر برسد. چرا که عناصر صفحه به طور ناگهانی ظاهر شده ، حرکت می کنند و بر نحوه تعامل بازدید کنندگان شما با صفحه تأثیر می گذارند. اجتناب از Large layout shifts در ایجاد یک تجربه کاربری مناسب برای بازدیدکنندگان ضروری است.

Layout Shift چگونه بر عملکرد صفحه تأثیر می گذارد؟

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

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

و یا این فیلم را مشاهده کنید:

این “تغییر طرح” بر نحوه تعامل کاربران با وب سایت شما ، به ویژه در دستگاه های تلفن همراه تأثیر می گذارد. نمره پایین CLS نشان می دهد که صفحه شما از نظر بصری ناپایدار است. با اینکه CLS روی نمره عملکرد تأثیر زیادی ندارد (فقط 5٪)، درج آن در Web Vital نشان دهنده اهمیت آن به عنوان یک معیار مفید است که تجربه صفحه شما را منعکس می کند.

چگونه می توان از Large layout shifts جلوگیری کرد؟

شما می توانید با استفاده از روش های زیر ، از Large layout shifts جلوگیری کنید:

راهکار اول: تعیین ابعاد تصویر: همیشه ، عرض و ارتفاع را برای عناصر تصویر و فیلم سایت خود مشخص کنید تا از فاصله ای مناسب برای تصاویر و فیلم ها استفاده شود. همچنین میتوانید این کار را با مشخص کردن نسبت ابعاد باکس ها در CSS انجام دهید.

راهکار دوم: کاهش layout shift ناشی از تبلیغات ، embed ها و iframe ها:

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

راهکار سوم: جلوگیری از Flash of Invisible Text (FOIT) : مسئله Flash of Invisible Text (FOIT) می تواند CLS صفحه شما را تحت تأثیر قرار دهد. با preload کردن فونت ها و یا استفاده از ویژگی font-display، اطمینان حاصل کنید که متن شما هنگام بارگیری فونت وب نیز قابل مشاهده است.

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


منبع مقاله : GT metrix – Lighthouse: Avoid large layout shifts

حل مشکل Minimize main-thread work

main-thread محلی است که مرورگر قسمت اعظمی از دستورات مربوط به بارگذاری صفحه شما را پردازش می کند. مانند ارائه / چاپ محتوا یا مدیریت تعامل کاربر. در واقع main-thread فرایندهای بارگیری صفحه شما را کنترل می کند. سرعت بارگیری صفحه شما به میزان کارهایی که main-thread باید انجام دهد بستگی دارد. شما باید که اطمینان حاصل کنید main-thread برای مدت طولانی مشغول نباشد.

برخی از کارهای مرورگر که در main-thread اجرا می کند شامل موارد زیر است:

  • دست زدن به طرح بندی ها
  • تجزیه CSS و HTML
  • ساخت Document Object Model (DOM)
  • اجرای تمام JavaScript ها

main-thread را به عنوان پیشخدمت یک رستوران در نظر بگیرید. وظیفه پیشخدمت گرفتن سفارشات ، پرداخت هزینه ، تحویل غذا ، پر کردن نوشیدنی و غیره است. اگر پیشخدمت با کاری مانند طولانی شدن زمان پردازش سفارشات گرفتار می شود (مثلاً مشتری سفارش پیچیده ای دارد که هنوز نمی توانند انتخاب کند.) ، آنگاه پیشخدمت نمی تواند به کارهای دیگر خود رسیدگی کند.

با به حداقل رساندن کار main-thread ، مرورگر شما صفحه را برای انجام کار های ضروری آزاد می کند.

main-thread به چه مواردی بستگی دارد؟

بسته به طولانی بودن مدت main-thread در هنگام بارگیری صفحه ، GTmetrix این بررسی را آغاز می کند و زمان صرف شده را در دسته های مختلف طبقه بندی می کند ، از جمله:

  • ارزیابی اسکریپت
  • سبک و چیدمان
  • رندر گیری
  • تجزیه HTML و CSS
  • تجزیه و تدوین اسکریپت
  • مجموعه Garbage

در هنگام مشاهده گزارش جی تی متریکس با کلیک بر روی هر کدام از اشکالات مطرح شده در گزارش جی تی متریکس ، زمان صرف شده برای رویدادهای مختلف در main-thread مشخص می شود.

Minimize main-thread work

main-thread رویدادهایی مانند تجزیه HTML / CSS ، اجرای جاوا اسکریپت و غیره … را برای انجام مدیریت تعامل کاربر یا انجام کارهای دیگر مسدود می کند.

اجرای جاوا اسکریپت معمولاً قسمت عمده ای از main-thread را تشکیل می دهد. به همین دلیل سایت هایی که از جاوا اسکریپت های زیادی استفاده می کنند کمی با کند شدن اجرا همراه هستند. به طور کلی ، هرچه JavaScript صفحه شما بیشتر باشد ، فرایند تجزیه / جمع آوری طولانی تر است.

جاوا اسکریپت با اجراهای طولانی (A ، B ، E در بالا) ممکن است main-thread را برای مدت طولانی مسدود کند و از اجرای سایر کارهای لازم برای چاپ اولین صفحه شما جلوگیری کند. دوباره به مثال پبشخدمت برمی گردیم ، کاهش کارهایی که پیشخدمت باید انجام دهد ، به سرعت بخشیدن خدمات و بهبود تجربه کلی رستوران کمک می کند. 
Minimize main-thread work

چگونه main-thread را به حداقل برسانیم؟

به حداقل رساندن کار main-thread حتما باید توسط یک فرد متخصص انجام شود. برای برطرف کردن این مشکل باید فعالیت های زیر را انجام داد:

  • کاهش زمان صرف شده در ارزیابی اسکریپت ها
  • به حداقل رساندن محاسبه مجدد استایل ها و طراحی ها
  • کاهش زمان صرف شده در تجزیه CSS / HTML / JavaScript
  • جلوگیری از تأخیر در ارائه پیکسل های صفحه

برخی از استراتژی های مورد استفاده برای دستیابی به موارد فوق عبارتند از:

  1. بهینه سازی third-party JavaScript :کد third-party وب سایت خود را بررسی کنید و مواردی را که هیچ ارزشی برای وب سایت شما ندارند را حذف کنید. با به تعویق انداختن اسکریپت های غیر مهم اسکریپت های دیگر را بهینه کنید، ایجاد ارتباطات اولیه با دامنه های مهم third-party ، بارگذاری آهسته عکس ها (lazy-loading) محتوای جاسازی شده در third-party ، و بهینه سازی هاست.
  2. استفاده از web workers :برای دور نگ داشتن جاوا اسکریپت از main-thread و بهبود عملکرد صفحه خود ، از web workers استفاده کنید. (مطالعه برای کسب اطلاعات بیشتر)
  3. کاهش زمان اجرای جاوا اسکریپت:با تقسیم کد ، کوچک کردن و فشرده سازی کد جاوا اسکریپت ، حذف کد استفاده نشده و پیروی از الگوی PRPL ، از میزان حجم JavaScript خود کم کنید. (مطالعه برای کسب اطلاعات بیشتر)
  4. کاهش زمان تجزیه CSS :با کم کردن یا به تعویق انداختن CSS غیر ضروری یا حذف CSS بدون استفاده ، زمان تجزیه CSS را کاهش دهید.

منبع مقاله : Minimize main-thread work

جی تی متریکس

  • در آبدیت جدید جی تی متریکس 2020 چه تغییراتی ایجاد شده است؟
  • پارامترهای اصلی جی تی متریکس (GTmetrix) چه پارامترهایی است؟
  • جی تی متریکس (GTmetrix) نسخه جدید شامل چه بخش هایی است؟
  • میزان تاثیر هر بخش جی تی متریکس در نمره نهایی سئو چه مقدار است؟

جی تی متریکس چیست؟

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

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

اهمیت سرعت سایت در بهبود سئو

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

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

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

ویژگی های ابزار جی تی متریکس

حال به سراغ اصل داستان می رویم. قسمت های مختلف ابزار جی تی متریکس کدام است و هر کدام چه ویژگی هایی دارند؟

تقریبا از نوامبر 2020 بود که جی تی متریکس نسخه آپدیت GTmetrix جدید رو علنی کرد و همگان رو به ستایش واداشت. حال دیگر خبری از خطاهای PageSpeed و YSlow نیست و جی تی متریکس معیارهای جدیدی را مورد بررسی قرار می دهد که قدرت گرفته از Google Lighthouse هستند.

در این مقاله درباره آموزش کار با نسخه جدید GTmetrix و آنالیز گزارش های آن و همچنین حل خطاهای موجود صحبت خواهیم کرد. قبل از ادامه صحبت باید بدانیم که Lighthouse یکی از ابزارهای قدرتمند گوگل است که 5 ویژگی را برای وب سایت شما مورد سنجش و ارزیابی قرار می دهد.

  1. قابلیت دسترسی (Accessibility)
  2. کارایی (Performance)
  3. سئو (SEO)
  4. وب اپلیکیشن (Progressive Web Apps)
  5. برترین تمرین‌ها (best practices)

جی تی متریکس

با توجه به شکل نمایش داده شده می توان گفت که جی تی متریکس نسخه جدید دارای 2 پارامتر کلی در زمینه امتیاز دهی است.

  • قسمت GTmetrix Grade که دو نمره اصلی Performance  و Structure را بیان می کند.
  • قسمت Web Vitals که سه معیار Largest Contentful Paint ، Total Blocking Time  ، Cumulative Layout Shift را مورد سنجش قرار می دهد.

نمره اصلی عملکرد سایت یا همان GTmetrix Grade به صورت کیفی و با حروف A – F بیان خواهد که که A بهترین حالت و F بدترین حالت است. این نمره به اندازه ۷۰ درصد به امتیاز Performance و به مقدار 30 درصد به امتیاز Structure بستگی دارد. در واقع می توان گفت جی تی متریکس به سمتی رفته که هم تجربه کاربری را مورد سنجش قرار دهد و هم ساختار کد نویسی انجام شده در طراحی سایت را.

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

ابزار Performance بیان می کند که صفحه وب سایت شما از نگاه کاربر چطور اجرا می شود.

بررسی معیار Performance

همانطور که پیشتر نیز اعلام شد نمره Performance به نوعی مهم ترین نمره ایست که در جی تی متریکس اعلام خواهد شد. این نمره از ترکیب محاسبه معیارهای زیر مشخص خواهد شد.

نکته بسیار مهمی که در اینجا باید به آن اشاره کرد این است که سنجش این موارد دارای تفاوت هایی با Google PageSpeed Insights است که در زیر به آنها اشاره می کنیم:

  • اختلافات جغرافیایی: اینکه Google تست های خود را درکدام  سرورها بر اساس منطقه جغرافیایی انجام میدهد کاملا ناشناخته است. اما GTmetrix به شما این امکان را می دهد که تعیین کنید از کدام منطقه تست صفحه خود را تجزیه و تحلیل کنید.
  • تفاوت سخت افزار: سخت افزارهایی که گوگل از آنها استفاده می کند با سخت افزارهایی که جی تی متریکس از آنها استفاده می کند کاملا متفاوت است. مطمئنا این مورد باعث بروز اختلاف در نتایج خواهد شد.
  • تفاوت شبکه: تفاوت در اتصالات شبکه و واریانس ممکن است باعث ایجاد تغییر در اندازه گیری معیارهای شود.
  • معیارهای ناشناخته Google: گوگل ممکن است هنگام محاسبه نمره عملکرد ملاحظات و معیارهای دیگری داشته باشد که آنها را بیان نکرده باشد (به عنوان مثال ، Lantern برای CPU/throtling شبکه).

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

بررسی معیار Structure Score

نکته مهمی که باید در بررسی این قسمت در نظر گرفته شود این است که این مورد از طرف Google Lighthouse ارائه نشده و نمره نهایی بیان شده حاصل تحلیل خود جی تی متریکس از اطلاعات ارائه شده توسط گوگل است.

معیارهای سفارشی خود GTmetrix

  • فعال کردن حالت Keep-Alive : تنها برای حالتی که صفحات شما از شیوه HTTP/1.1 استفاده می کنند و فاقد دستورالعمل Keep-Alive ON هستند، بایستی که فعال شود. برای حالت HTTP/2 این فاکتور به صورت پیش فرض فعال است.
  • ترکیب تصاویر با استفاده از Sprites CSS: اگر در صفحه وب سایت خودتان چندین تصویر کوچک دارید، حتما آنها را یکی کرده و با استفاده از دستورات css قسمت انتخاب شده را نمایش دهید.
  • استفاده از شبکه تحویل محتوا (CDN): استفاده از CDN ها موجب می شود که لود وب سایت شما از نزدیکترین مرکز به کاربر انجام شود و مستقیما از سیستم هاستینگ شما این انتقال انجام نشود.
  • اجتناب از CSS @import: درواقع پیشنهاد می شود که تا حد امکان css های وب سایت خود را از یک منبع وارد کنید و فراخوانی های متعددی برای کدهای css نداشته باشید.

Web Vitals در نسخه آپدیت جدید GTmetrix

Web vitals در سرچ کنسول گوگل (Google search console) با نام Core Web Vitals شناخته می شود و یکی از معیارهای اساسی برای بررسی سرعت صفحات در نسخه موبایل و دستکتاپ است. این فاکتور ها بیشتر بر روی معیار Performance اثر می گذارند که به نوعی مهم ترین و اثرگذار ترین معیار بررسی شده در جی تی متریکس است.

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

  • معیار Largest Contentful Paint: چه مقدار طول می کشد تا یک عنصر بزرگ مانند تصویر در صفحه نمایش نمایش پیدا کند؟ (میزان قابل قبول = کمتر از 1.2 ثانیه)
  • معیار Total Blocking Time: میزان زمان نهایی که فایل های لازم وب سایت شما هنوز اجازه لود کرده پیدا نکرده اند. (میزان قابل قبول = کمتر از 150 میلی ثانیه)
  • معیار Cumulative Layout Shift: میزان زمان جابه جایی اجزا و چیدمان در فرآیند Loading که کاربر متوجه آن میشود، چه مقدار است؟ (میزان قابل قبول = کمتر از 0.1 ثانیه)

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

Summary ، Performance ، Structure ، Waterfall ، Video ، History

اطلاعات سربرگ Summary

در این سربرگ 3 گروه خاص از اطلاعات وجود دارد. گروه اول که در کادر Top Issues نمایش داده می شود و بیانگر مشکلاتی است که وب سایت شما با آنها دست و پنجه نرم می کند. ابن مشکلات بسته بر میزان تاثیر بر عملکرد سایت نمایش داده شده است. با کلیک بر روی هر کدام از این مشکلات می توانید توضیحات مربوطه را مشاهده کنید.

قسمت دوم که همان Page Details است ، در ابتدا زمان لود کامل وب سایت را نمایش می دهد که در اینجا برابر 2.6 ثانیه است.

قسمت بعدی Total Page Size است که میزان حجم صفحه به تفکیک اجزای استفاده شده بیان گردیده است. به طور مثال در این شکل font ها 241 کیلوبایت ، عکس ها 229 کیلوبایت ، کدهای جاوا 178 کیلوبایت از حجم اصلی صفحه برابر 858 کیلوبایت است را تشکیل داده اند.

در قسمت نهایی نیز تعداد رکوئست های نمایش داده شده است که در این تصویر برابر 34 عدد بوده و از این میزان 41.2 درصد مربوط به عکس ها ، 11.8 درصد مربوط به فایل های جاوا ، 11.8 درصد مربوط به فایل های css است.

گزارش جی تی متریکس

اطلاعات سربرگ Performance

این بخش بسیار مهم شامل دو قسمت Performance Metrics و همچنین Browser Timing است. ملاک ها و معیارهایی که در هر کدام از این دو بخش ذکر شده در ادامه مورد بحث قرار گرفته است.

اطلاعات قسمت Performance Metrics

  • معیار First Contentful Paint: زمان نمایش اولین محتوای قابل استفاده بر روی صفحه نمایش (میزان قابل قبول = کمتر از 0.9 ثانیه)
  • معیار Speed Index: با چه نرخ سرعتی مطالب نمایش داده شده بر روی نمایشگر شما نمایش پیدا می کند؟ (میزان قابل قبول = کمتر از 1.3 ثانیه)
  • معیار Largest Contentful Paint: چه مقدار طول می کشد تا یک عنصر بزرگ مانند تصویر در صفحه نمایش نمایش پیدا کند؟ (میزان قابل قبول = کمتر از 1.2 ثانیه)
  • معیار Time to Interactive: چه مقدار زمان می برد تا صفحه نمایش شما کاملا قابلیت برقراری تعامل با کاربر را پیدا کند؟ (میزان قابل قبول = کمتر از 2.5 ثانیه)
  • معیار Total Blocking Time: میزان زمان نهایی که فایل های لازم وب سایت شما هنوز اجازه لود کرده پیدا نکرده اند. (میزان قابل قبول = کمتر از 150 میلی ثانیه)
  • معیار Cumulative Layout Shift: میزان زمان جابه جایی اجزا و چیدمان در فرآیند Loading که کاربر متوجه آن میشود، چه مقدار است؟ (میزان قابل قبول = کمتر از 0.1 ثانیه)

گزارش آنالیز جی تی متریکس

قسمت Browser Timings :

  • معیار Redirect Duration : میزان زمان نهایی طی شده برای انجام فرآیند ریدایرکت تا رسیدن به صفحه نهایی
  • معیار Connection Duration : زمان صرف شده برای اتصال به سرور
  • معیار Backend Duration : زمانی که سرور برای تولید پاسخ اولیه نیاز دارد
  • معیار Time to First Byte (TTFB) : فاصله زمانی ارسال درخواست لود به سرور تا دریافت اولین بایت ارسالی از طرف سرور به مرورگر
  • معیار First Paint : نمایش اولین تغییر بر روی مرورگر (متن ، عکس ، رنگ ، رک گراند یا هر چیزی دیگری)
  • معیار DOM Interactive Time : زمانی که مرورگر بارگیری و تجزیه HTML را به پایان رسانده و DOM ساخته شده است
  • معیار DOM Content Loaded Time : زمان بارگیری محتوی مرتب شده در DOM ، در این زمان هیچ دستوری که مانع اجرای JavaScript شود وجود ندارد.
  • معیار Onload Time : زمانی که پردازش صفحه به پایان رسیده و بارگیری تمام منابع صفحه به پایان رسیده باشد
  • معیار Fully Loaded Time : زمان اتمام بارگیری فایل ها و انجام پردازش به جهت نمایش اطلاعات

اطلاعات سربرگ Structure

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

به منظور مشاهده توضیحات و راه حل های تمامی این موارد توصیه میکنیم حتما به مقاله زیر مراجعه کنید.

گزارش جی تی متریکس

اطلاعات سربرگ Waterfall

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

گزارش جی تی متریکس

اطلاعات سربرگ Video

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

اطلاعات سربرگ History

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

اجزای جی تی متریکس قدیم

اگر می خواهیم بدانیم که ابزار GT metrix از چه اجزایی تشکیل شده است می بایست آن را به طور دقیق مورد بررسی قرار دهیم. اجزای این ابزار عبارت اند از:

Page speed score

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

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

Yslow score

قسمت Yslow score در ابزار GT metrix در واقع سرعت بارگذرای مطالب سایت را بر اساس استاندارد ها و مولفه های یاهو بررسی می کند. بالا بودن میزان سرعت سایت در این قسمت نشان دهنده بالا بودن رتبه سایت از نظر سئو می باشد.

Page detail

یکی از قسمت های Page detail مربوط به زمان بارگذرای کامل سایت بر حسب ثانیه می باشد. این قست با نام page load time نشان داده شده است. قسمت بعدی که در Page detail مشاهده می شود قادر است حجم واقعی هر یک از صفحات سایت را آنالیز و تحلیل کند و مقدار آن را به نمایش بگذارد. این قسمت با نام total page site مشخص شده است.

نام قسمت دیگری که در Page detail قابل مشاهده می باشد، بخش request می باشد. این قسمت در واقع میزان درخواست های هاست برای بارگذرای قسمت های مختلف سایت را نشان می دهد. هرچه میزان ریکوئست های هاست و مرورگر تعداد کم تری باشد، فشار کمتری به هاست وارد می شود. نتیجه این اتفاق افزایش چشم گیر و قابل توجه میزان بارگذاری مطالب سایت می باشد.


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

یکی از ایرادات اساسی که GT metrix از اغلب سایت ها می گیرد، عدم توجه به بهینه سازی تصاویر مورد استفاده در مقالات سایت hsj. بهینه سازی کار بسیار ساده و کم هزینه ای است. شما می توانید با استفاده از ابزار ها و یا سایت های آنلاین مربوط به بهینه سازی تصاویر عمل بهینه سازی عکس های سایت را به سادگی و با صرف کم ترین زمان ممکن انجام دهید.

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


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

چگونه در Google Pagespeed Insight، امتیاز 100% بگیریم ؟

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

زمانی که صحبت از ساخت نرخ تبدیل وبسایت و بهینه سازی موتور جستجو می رسد، سرعت یک عامل حیاتی محسوب می شود. اگر وبسایت شما، سرعت خوبی نداشته باشد، کاربران قبل از آن که تبدیل یا conversion اتفاق بیفتد، از سایت خارج خواهند شد. اما افزایش سرعت سایت ، کار راحتی نیست. معمولا شناسایی عواملی که باعث کاهش سرعت سایتتان شده است، مشکل است; زیرا این عوامل هر چیزی میتوانند باشند، از اشکال کدی گرفته تا تصاویر یا عنصر بزرگ.به همین دلیل نیاز دارید که مشکل را تشخیص دهید و آن را سریعا برطرف کنید. در غیر این صورت، گوگل امتیازی منفی برای سایت شما در نظر خواهد گرفت. اگر سایت خود را در آنالیزور google pagespeed insight تست کنید و به امتیاز 100% برسید، یعنی سایت شما سریع است و گوگل این را یک امتیاز بزرگ میشمارد. هرچقدر سرعت سایت بالاتر باشد، نرخ پرش کاهش می یابد. بنابراین اگر سرعت سایت شما بالا باشد، شانس بیشتری برای افزایش رتبه در گوگل، نسبت به سایت های با سرعت پایین و نرخ پرش بالا خواهید داشت.

خوشبختانه گوگل این ابزار را بصورت رایگان در اختیارتان قرار می دهد تا بتوانید مشکل سایت خود شناسایی کنید اما متاسفانه راه حل های دقیقی برای رسیدن به امتیاز 100% ارائه نمی دهد.

در این مقاله به شما آموزش می دهیم که چگونه نمره 100 درصد را برای سرعت صفحه بگیرید و چرا باید به این مسئله مهم دقت کنید.

دلایل اهمیت افزایش سرعت سایت

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

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

اهمیت افزایش سرعت سایت

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

نرخ پرش و سرعت سایت

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

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

بعبارت دیگر اگر صفحه شما برای لود شدن، 10 ثانیه زمان ببرد، احتمال اینکه کاربر سایت شما را قبل از لود شدن ترک کند، بیش از 120 درصد افزایش پیدا می کند.
اگر در بالا به نمودار بک لینکو نگاهی بیاندازید، مشاهده می کنید که وبسایت هایی با امتیاز بالا در صفحه اول گوگل، همگی سرعت لود شدن زیر 3 ثانیه دارند اما طبق آخرین گزارش گوگل، بیشتر وبسایت ها در صنایع مختلف، کند هستند.

سرعت سایت در صنایع مختلف
زمان میانگین لود شدن اکثر سایت ها، هشت ثانیه است و در صنعت تکنولوژی، حتی به 11 ثانیه هم می رسد اما هنوز هم بهترین و بالاترین سرعت زیر سه ثانیه است. بنابراین، اکثر ما در زمینه سرعت سایت، امتیاز خوبی نمی گیریم. اگر می خواهید در صفحه اول گوگل باشید، سایت شما باید در کمتر از 3 ثانیه بارگیری شود.
مطالعه دیگری نشان می دهد که نرخ تبدیل  یک وبسایت تجاری به طور میانگین بین 1 الی 2 درصد است. بنابراین زمانی که سرعت وبسایت از دو ثانیه به یک ثانیه برسد، میزان درآمد برای هر بازدید از صفحه با افزایش 100 درصدی روبرو خواهد بود.رسیدن سرعت سایت شما به کمتر از دو ثانیه می تواند ترافیک و درآمد شما را دو برابر کند.

افزایش نرخ تیدیل و سرعت سایت

 چه چیزی باعث کاهش سرعت صفحات سایت می شود؟

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

اطلاعات گوگل بنچمارک نشان می دهد که بهترین حالت برای سایز صفحه و حجم آن برابر با کمتر از 500 کیلوبایت است:

وزن صفحات سایت

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

گوگل به این نتیجه رسیده است که حجم صفحه ای که فقط برابر با 1.49 مگابایت است (در مقایسه با سایز میانگین یک تصویر با کیفیت HD)، هفت ثانیه برای باز شدن صفحه زمان می گیرد.اما گوگل به سادگی حقیقتی سخت اما امیدوارکننده ای را به ما می گوید:

ما به اندازه کافی برای ارتقای وبسایت خود فضا داریم.

چگونه سایت موبایل و دسکتاپ را تشخیص دهیم؟

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

اطلاع از اینکه سایت شما ممکن است مشکلات زیر لایه ای نیز داشته باشد که در ظاهر و مرحله اول دیده نمی شود، گام اول است.  اکثر سایت ها به دلیل عکس های بزرگ و اشغال فضای زیاد، سرعت کمی دارند. اما این مشکل همه وبسایت ها فقط همین نیست.شما باید قبل از اینکه بتوانید تغییرات لازم را برای کسب امتیاز 100٪ در  PageSpeed ​​Insights ایجاد کنید ، بدانید عامل کند شدن سایتتان چیست.

برای شروع به pagespeed insight بروید و آدرس سایت خود را در قسمت url وارد کنید.(از vpn استفاده کنید).
روی “analyze” کلیک کنید تا گوگل یک تست سریع روی سایت شما انجام دهد.
گزارش پایانی به شما همه چیزی را که لازم است درباره سایت خود بدانید و از چشم شما دور بوده است، در اختیارتان قرار می دهد.

به مثال زیر توجه کنید.

گزارش pagespeed insight

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

ابتدا بهینه سازی هایی که برای این وبسایت انجام شده میبینم:

روش های افزایش سرعت سایت

اکنون توجه کنید که چند آیتم در این لیست با لیست “بهینه سازی های ممکن” من مقایسه شده اند:

این اطلاعات به ما می گوید که موارد “possible optimization” نسبت به مواردی که قبلاً بهینه سازی کرده ایم ، تأثیر کمتری دارند. اما بدیهی است، شما باید همه فاکتور ها را درنظر بگیرید تا به امتیاز 100 درصدی در ابزار Page Speed ​​Insights برسید. همچنین می توانید اولویت بندی داشته باشید.

در مرحله بعد می خواهیم سایت را روی موبایل را بطور جداگانه تست کنیم.

به thinkwithgoogle بروید و آدرس سایت خود را وارد کنید.

تست سرعت سایت در موبایل

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

گزارش سرعت سایت

زمان لود شدن صفحه در موبایل حدوداً 4. ثانیه است. به خاطر داشته باشید که زمان لود شده پیشنهاد شده 3 ثانیه یا کمتر می باشد. بنابراین سرعت این سایت هنوز به حد استاندارد نرسیده است و به همین دلیل ۱۰% از بازدیدکنندگان به سادگی و به دلیل سرعت ضعیف از دست رفته اند. در این قسمت می توانید تست موبایل این سایت را در مقایسه با استانداردها مشاهده کنید.

مقایسه سرعت سایت

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

افزایش سرعت سایت در موبایل

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

در بخش بعدی در مورد از بین بردن 5 تا از مشکلات رایج سرعت صفحه با شما صحبت می کنم که می تواند شما را به نمره 100 درصدی سرعت گوگل نزدیک کند.

چهار راهکار برای نمره عالی سرعت از گوگل

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

فشرده سازی تصاویر سایت

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

یکی از محبوب ترین افزونه ها برای، فشرده سازی و بهینه سازی تصویر، WP Smush است.

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

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

فشرده سازی تصاویر

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

افزایش سرعت سایت با افزونه smush

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

اما اگر اگر از وردپرس استفاده نمی کنید چه کاری باید انجام دهید؟  پلاگین هایی برای دیگر سایت ها نیز وجود دارد. به عنوان مثال ، اگر یک فروشگاه و سایت مستقر در Shopify استفاده میکنید ، می توانید از Crush.pics استفاده کنید:
Crush.pics می گوید شما می توانید با استفاده از ابزار آنها انتظار پرش بزرگی در نمرات PageSpeed ​​Insights داشته باشید:

افزونه کاهش سایز تصاویر

اگر با پلاگین ها آشنا نیستید یا دوست ندارید از آنها برای سایت خود استفاده کنید ، می توانید از ابزارهای رایگان مانند Compress JPEG ، Optimizilla و موارد دیگر استفاده کنید.هر دو ابزار سریع و رایگان هستند که به شما امکان می دهد تا حداکثر 20 تصویر را در یک بارگذاری فشرده سازی کنید.

به تصویری که برای نمونه فشرده سازی کردیم دقت کنید تا متوجه شوید این ابزارها چقدر میتوانند موثر باشند.

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

همانطور که مشاهده می کنید با استفاده از Optimizilla فقط در دو ثانیه حجم فایل 68٪ کاهش یافت و اندازه آن از 380KB به 120KB رسید در حالیکه تفاوت کیفیتی چندانی ندارد! شما می توانید از همه این ابزارها به صورت رایگان استفاده کنید و اگر نمی توانید از افزونه استفاده کنید ، حتماً آنها را پیاده سازی کنید.

استفاده از کش مرورگر (browser caching)

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

این امر باعث افزایش زیاد سرعت در هنگام ورود کاربر به سایت شما خواهد شد.

اما چگونه باید کش مرورگر را فعال کنید؟ خوشبختانه ، افزونه ای برای آن وجود دارد و برای انجام این کار نیازی به تخصص کد نویسی ندارید.برای سایت های وردپرسی می توانید از W3 Total Cache استفاده کنید. این افزونه بیش از یک میلیون نصب فعال دارد و محبوب ترین افزونه حافظه پنهان است.

افزونه افزایش سرعت سایت

این افزونه می تواند عملکرد سایت شما را تا 10 درصد بهبود ببخشد. مهم تر از همه اینکه این پلاگین به شما کمک می کند تا به نتایج بهتری در PageSped Insight دست پیدا کنید. این ابزار همچنین میتواند Html، CSS و جاوا اسکریپت را فشرده سازی کند که منجر به  صرفه جویی 80 درصدی در پهنای باند شما خواهد شد.

فشرده سازی HTML

کاهش دادن (minify) فضایی که کدینگ HTML شما استفاده می کند، یکی از فاکتورهای مهم برای افزایش سرعت سایت است . فشرده سازی html ، به معنای حذف یا اصلاح کدهای غیرضروری یا تکراری می باشد، البته فشرده سازی html تاثیری بر نحوه پردازش سایت شما توسط مرورگر نخواهد داشت.
خوشبختانه امکانات پلاگین های وردپرسی تا حدی زیاد است که دیگر نیازی به کدنویسی دوباره برای ترمیم آن ها ندارید. یکی از بهترین ابزارها برای این کار،افزونه HTML Minify می باشد.

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

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

با نصب و فعالسازی این افزونه می توانید با یک تیر چند نشان بزنید. همانطور که قبل تر اشاره کردیم PageSpeed ​​Insights google توصیه می کند HTML ، JavaScript و CSS را در سایت خود فشرده سازی کنید بنابراین بهتر است تنظیمات “Minify HTML” + “Inline JavaScript” را فعال کنید. نکته جالب در مورد این افزونه این است که نحوه عملکرد هر تنظیم را به شما می گوید.

اگر با نحوه کار این تنظیمات آشنا نیستید، این اقدامات را دنبال کنید.

تنظیمات minify html

فعالسازی AMP

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

Amp با ایجاد یک فرمت open source محتوای اضافه را حذف میکند و باعث می شود صفحات سایت شما سریع تر در تلفن همراه بارگیری شود. این ویژگی به کاربران اجازه می دهد که تجربه بهتری از وب سایت در موبایل داشته باشند و از ویژگی های غیر ضروری دوری کنند. اگر از مرورگر گوشی همراه خود استفاده می کنید، احتمالا تاکنون روی مقاله ای بر پایه AMP کلیک کرده اید. این مقاله ها به شکل زیرنمایش دارند:

فعالسازی AMP

آنها غالباً به بخش “Top Stories” نتایج جستجوی Google منتقل می شوند و بلافاصله بارگیری می شوند. قالب بندی زیادی ندارند ، این به آنها کمک می کند تا سریع بارگیری شوند و محتوایی را که کاربر تلفن همراه مایل به دیدن است، تحویل دهند. وقتی یک کاربر Google روی یکی از این مقالات AMP کلیک می کند ، محتوا را بصورت زیر مشاهده می کند:

amp stories

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

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

مزایای AMP

این ویژگی در افزایش سرعت سایت شما و کاهش احتمال ترک سایت بسیار مؤثر است.

کمپانی های زیادی از AMP استفاده می کنند. کمپانی WIRED نیز برای دستیابی به مشتریان خود ، پیاده سازی AMP را آغاز کرد. آنها دریافتند که تجربه کاربری سایت آنها درتلفن همراه، از وضع مناسبی برخوردار نیست و به دلیل مشکل سرعت و حفظ بازدیدکنندگان ، تبدیل ها به سادگی اتفاق نمی افتاد.

تصمیم گیری برای سرمایه گذاری در AMP تأثیر بسیار خوبی را برای WIRED ایجاد کرد.آنها میزان کلیک خود را از نتایج جستجوی ارگانیک 25٪ افزایش دادند.آنها همچنین افزایش 63 درصدی CTR را در تبلیغات AMP stories مشاهده کردند و توانستند AMP stories را به بیش از 100K مقاله در سایت خود اضافه کنند.

تاثیر amp در افزایش سرعت سایت

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

آنها روزانه بیش از 100K بازدید از صفحات AMP با سرعتی 3 برابر بیشتر از صفحات استاندارد دریافت کردند. conversion نیز 50 درصد افزایش یافت. بنابراین، به جرات می توان گفت AMP می تواند تبدیل ها و سرعت موبایل را به میزان قابل توجهی افزایش دهد. همچنین به شما فرصتی می دهد تا در PageSpeed ​​Insights Google امتیاز بیشتری کسب کنید. اگر می خواهید استفاده از AMP را در سایت خود شروع کنید، میتوانید از راه کدنویسی و افزونه های وردپرسی استفاده کنید.

تاثیر amp در افزایش سرعت سایت

یکی از محبوب ترین افزونه ها، AMP for WP است.این این افزونه بیش از 80،000 نصب فعال دارد و از پشتیبانی و به روزرسانی برخوردار است.AMP for WP دارای یک صفحه ساز AMP است که از قابلیت drag and drop پشتیبانی می کند.

افزونه amp for wp

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

تنظیمات amp
AMP روشی اثبات شده برای افزایش سرعت سایت شما در تلفن همراه است و می تواند به شما کمک کند سرعت خود را به کمتر از یک ثانیه کاهش دهید.

نتیجه گیری

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

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

رسیدن به امتیاز 100% در Google’s PageSpeed ​​Insights باید از اولویت های اصلی شما هنگام بهینه سازی سایت باشد.برای شروع ، ابتدا باید تشخیص دهید که چه چیزی در سرعت سایت شما اختلال ایجاد می کند. آیا دلیل آن، تصاویر ، عناصر صفحه ، متن بیش از حد ، کد نویسی بد یا همه موارد بالاست؟ از ابزار Google PageSpeed ​​Insights استفاده کنید تا مشخص کنید مراحل بعدی شما چیست.
معمولاً تصاویر بخش عمده کار شما خواهند بود. با فشرده سازی و بهینه سازی تصاویر با یک افزونه یا فشرده ساز آنلاین، شروع کنید.

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

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

بهترین راه های افزایش سرعت سایت خود پیدا کرده اید چیست؟

تجربیات خود را با با ما به اشتراک بگذارید.


منبع : neilpatel