همانطور که از معنای لغوی پیداست IT'S HAPPENING در Rendering و Paint time به این معنی است که آیا آن چیزی که کاربر خواسته است در حال اتفاق افتادن است؟ IT'S HAPPENING شامل قسمت‌های مختلفی مانند DNS LOOKUP، TRACEROUTE، محاسبات عددی و ... است، قبل از آنکه چیزی برای کاربر نمایش داده شود.
اگر بخواهیم مثالی عینی از آن را بزنیم زمانی که شما درخواست یک صفحه را در browser دارید، علامت Loading نمایش داده شده در جهت خلاف عقربه‌های ساعت است و سپس در جهت عقربه‌های ساعت می‌شود. IT'S HAPPENING همان مدت زمان میان درخواست شما تا پایان زمانی است که علامت Loading در جهت خلاف عقربه‌های ساعت است و به محض تغییر جهت این مرحله پایان می‌یابد.
وقتی فاز IT'S HAPPENING به پایان می‌رسد، نتایج مختصری مانند بک‌گراند یک صفحه وب درخواستی یا لوگو برای کاربر نمایش داده می‌شود، این همان ITS USEFUL است. به این معنی که آن چیزی که برای کاربر نمایش داده می‌شود مفید است؟ کاربردی است؟ آیا برای کاربر معنادار است؟
این مرحله زمانی اتفاق می‌افتد که اطلاعات برای کاربر نمایش داده شده، اما صفحه هنوز کامل Load نشده است. مثلا زمانی که یک فرم در صفحه درخواستی شما وجود دارد و می‌خواهید آن را کامل کنید، قسمت‌های ورود اطلاعات نمایش داده می‌شوند، اما هنوز نمی‌توان در آنها تایپ کرد. این مورد می‌تواند علت‌های مختلفی داشته باشد، مثلا اینکه برای قابل استفاده بودن فرم نیاز به لود جاوا اسکریپت باشد. به طور کلی در این فاز این سوال مطرح است که آیا آنچه نمایش داده شده برای کاربر قابل استفاده است؟
DELIGHTFUL در لغت به معنای کامل بودن، لذت بخش بودن است. این مرحله زمانی اتفاق می‌افتد که صفحه کامل لود شده است و کاربر با آن ارتباط برقرار می‌کند. به این معنی که آیا صفحه‌ای که به عنوان نتیجه نهایی درخواست شما برای شما نمایش داده می‌شود کامل Load شده است؟ می‌توانید صفحه را بالا و پایین ببرید؟ تمام مطالب و عکس‌ها کامل نمایش داده می‌شود؟ DELIGHTFUL زمانی است که شما می‌توانید به طور کامل با صفحه ارتباط برقرار کنید.
در پایان این چهار مرحله Rendering به پایان می‌رسد. زمانی که این چهار مرحله به طور کامل اتفاق بیفتد، صفحه شما برای کاربر مفید است. پس از Rendering خوب، صفحه شما باید Performance مناسبی داشته باشد. جی تی متریکس (GTmetrix)، Lighthouse و PSI معیارهای زیادی برای بررسی چهار مرحله معنایی که در Rendering اتفاق میفتد را دارد. مثلا المان اولیه چه زمانی صورت گرفت؟ چه فاصله زمانی طول کشید تا کاربر با صفحه ارتباط برقرار کند؟ 6 معیار برای آنها وجود دارد که به روش LAB DATA ،FIELD DATA بررسی می‌شود.
معیارهای سنجش جی تی متریکس جدید (GTmetrix) چیست؟
معیار جابجایی متراکم چیدمان (Cumulative Layout Shift)
جابجایی متراکم چیدمان (CLS) یک معیار عملکردی است که برای اندازه گیری ثبات بصری ناشی از بارگذاری صفحه معرفی شد. ثبات بصری با تعداد تغییرات غیر منتظره چیدمان بدون تعامل با صفحه محاسبه می‌شود. هر بار که محتوا تغییر می‌کند، به عنوان یک تغییر در چیدمان حساب می‌شود. مجموع همۀ این تغییرات، نمره کل را تعیین می‌کنند.
چند بار مقاله‌ای خوانده‌اید و به دلیل تبلیغات درون آن صفحه، محتوا پایین آمده است؟ یا تا به حال سعی کرده‌اید بر روی یک دکمه درون سایت کلیک کنید ولی در نهایت یک تصویر بزرگ ناگهان محتوا را به سمت پایین می‌راند و شما نمی‌توانید روی دکمه کلیک کنید؟
همۀ این مثال‌ها جابجایی چیدمان هستند که ناشی از ناپایدار بودن برخی عناصر در صفحه و تغییر موقعیت آنها در صفحه ایجاد می‌شوند. عناصر به دلایل مختلف موقعیت خود را تغییر می‌دهند. به عنوان مثال، یک بنر تبلیغاتی در بالای صفحه برخی از محتواها را مجبور می‌کند پایین بروند. می‌توانید تصور کنید که این تجربه چقدر برای کاربران آزار دهنده است.
به همین دلیل Cumulative Layout Shift یکی از معیارهای جی تی متریکس است که تجربه کاربری صفحه را ارزیابی می‌کند. این مهم یک معیار اساسی در بهبود سئوی وبسایت است. در ویدیو
تعریف cls می توانید به طور کامل با این مفهوم آشنا شوید.
نمر خوب CLS چقدر است؟
همانطور که توضیح دادیم، CLS مجموع همۀ جابجایی‌های غیرمنتظره محتوا است که در صفحه رخ می‌دهد. نمره جابجایی متراکم چیدمان بر اساس موارد زیر طبقه می‌شود:
- اگر CLS برابر یا کمتر از 0.1 باشد، نمره «خوب» است.
- نمره CLS بین 0.1 تا 0.25 به این معناست که عملکرد «به بهبود نیاز دارد.»
- اگر CLS بیش از 0.25 باشد، نمره «ضعیف» است.
چگونه می‌توان CLS را بهبود بخشید؟
توجه داشته باشید که ممیزی‌های خاصی که در زیر ذکر شده‌اند احتمالاً بیشترین سهم را در CLS دارد. نمره CLS خود را با استفاده از شیوه‌های زیر بهبود بخشید:
1- تعیین ابعاد تصویر
همیشه عرض و ارتفاع را برای عناصر تصویر و ویدئو وبسایت خود مشخص کنید تا فاصله مناسب برای تصاویر و ویدئوها استفاده شود. روش دیگر، می‌تواند استفاده از باکس‌های قطع تصویر CSS (CSS Aspect Ratio Boxes) باشد.
2- کاهش جابجایی چیدمان ناشی از Ads، Embed و Iframes
برای کاهش تغییرات چیدمان ناشی از تبلیغات، جاسازی و iframes، موارد زیر را انجام دهید:
- قبل از بارگیری کتابخانه تبلیغات، اندازه جای تبلیغ (ترجیحاً بزرگترین) را ذخیره کنید.
- تبلیغات را به پایین یا خارج از نمای نمایش منتقل کنید.
- در صورت عدم وجود تبلیغ برای نمایش، از Placeholders استفاده کنید.
3- اجتناب از درج محتوای جدید در بالای محتوای موجود
سعی کنید از قرار دادن محتوای پویا (مانند بنرها، فرم‌ها و غیره) در بالای محتوای موجود خودداری کنید مگر اینکه در واکنش به تعامل کاربر باشد. این به جلوگیری از تغییر چیدمان غیر منتظره کمک می‌کند.
4- جلوگیری از فلش متن نامرئی (FOIT)
مشکل FOIT نیز می‌تواند بر CLS صفحه تأثیر بگذارد. با پیش بارگذاری Web-Fonts و Font-Display مطمئن شوید که متن شما در هنگام بارگذاری فونت قابل مشاهده است. با مشاهده
ویدیو foit و fout می توانید بیشتر با این مفهوم آشنا شوید.
5- اجتناب از انیمیشن‌های Non-Composited
در صورت امکان، فقط انیمیشن‌های ترکیبی را انجام دهید تا از رنگ آمیزی پیکسل‌ها در طول بارگذاری صفحه جلوگیری شود.
اولین رنگ محتوایی (FCP) یک معیار کاربر محور برای اندازه گیری سرعت بارگذاری صفحه است. FCP نحوه درک کاربران از عملکرد یک وبسایت را اندازه گیری می‌کند. معیار اولین رنگ محتوایی نقطه‌ای در جدول زمانی بارگذاری صفحه است که در آن هر نوع رندر در مرورگر شناسایی می شود.
از سوی دیگر، FCP نیاز به ارائه برخی از محتواها دارد. این محتوا می‌تواند شامل متن، تصاویر (شامل تصاویر پس زمینه یا لوگوها، یا عناصر غیر سفید
First Contentful Paint همچنین با
بزرگترین عنصر محتوای صفحه (LCP) تفاوت دارد. به بیانی ساده‌تر، می‌توانید FCP را به عنوان زمانی که کاربر برای مشاهده اولین محتوا در مرورگر خود نیاز دارد تصور کنید. بنابراین، یک FCP سریع به کاربر اطمینان می‌دهد که چیزی در حال رخ دادن است و سپس او را به سایت متصل می‌کند.
نمره خوب FCP چقدر است؟
FCP باید در 1.8 ثانیه یا کمتر رخ دهد. این عدد یک تجربه کاربری خوب را برای بازدیدکنندگان سایت فراهم می‌کند. اگر FCP سایت 3+ ثانیه طول بکشد، کند تلقی می‌شود. در صورت لود شدن 3+ ثانیه، بیش از 53 درصد از کاربران گوشی همراه سایت را ترک می‌کنند.
این معیار 15 درصد از کل نمره عملکرد را به خود اختصاص می‌دهد که نشان دهنده اهمیت نسبتاً بالای آن است. بهینه سازی صفحات وبسایت برای بهبود FCP معمولاً سود قابل توجهی را در زمان بارگذاری واقعی صفحه و درک کاربر از عملکرد سایت ارائه می‌دهد. پس این معیار مهم جی تی متریکس را جدی بگیرید.
چگونه می‌توان FCP را بهبود بخشید؟
FCP خود را با استفاده از شیوه‌های زیر بهبود بخشید:
1- کاهش زمان پاسخگویی سرور
کاهش زمان پاسخگویی سرور به ارائه سریع FCP در صفحه شما کمک می‌کند. برخی از کارهایی که می‌توانید برای این موضوع انجام دهید، عبارتند از:
- کاهش زمان پاسخگویی سرور اولیه
- استفاده از شبکه تحویل محتوا (CDN)
- ارائه دارایی‌های استاتیک با قوانین کَش کارآمد
- اجتناب از تغییر مسیر چند صفحه
- ایجاد ارتباط اولیه با منشأ مهم شخص ثالث (Third-Party)
2- حذف منابع رندر مسدود کننده
حذف رفتار مسدود کننده رندر در صفحه (
RBR)، بارگذاری منابع را در سریع‌ترین زمان ممکن تضمین می‌کند.
3- به حداقل رساندن تعداد درخواست و ظرفیت انتقال بار
سعی کنید تعداد درخواست و ظرفیت انتقال بار (Payload) را تا حد ممکن کوچک نگه دارید تا منابع سریع بارگیری شوند و مرورگر زودتر شروع به ارائه محتوا کند.
معیار بزرگترین عنصر محتوای صفحه (Largest Contentful Paint)
باز هم، بزرگترین عنصر محتوای صفحه (LCP) قسمتی از معیارهای سنجش جی تی متریکس است. باید بدانید که LCP چیزی است که گوگل به آن اهمیت می‌دهد و همچنین چیزی است که گوگل از آن به عنوان عامل رتبه بندی SEO در سال 2021 و پس از آن استفاده می‌کند.
به جای اندازه گیری زمان بارگذاری کل وبسایت، LCP مدت زمان بارگیری محتوای مهم را اندازه گیری می‌کند. به طور خاص، LCP زمان رندر بزرگترین تصویر یا بلوک متنی است که در بارگذاری اولیه صفحه قابل مشاهده است. مهم است که توجه داشته باشید که بزرگترین عنصر محتوای صفحه ممکن است برای انواع مختلف بازدیدکنندگان متفاوت باشد.
نمره خوب LCP چقدر است؟
برای کمک به درک اینکه LCP شما خوب است یا بد، جی تی متریکس طیف وسیعی از مقادیر را ارائه می‌دهد. در حالت ایده آل، نمره LCP خوب کمتر از 2.5 ثانیه است. نمره بین 2.5 ثانیه تا 4 ثانیه نیاز به بهبود دارد و نمره بیش از 4 ثانیه ضعیف قلمداد می‌شود.
وقتی گوگل LCP را به عنوان فاکتور رتبه بندی سئو معرفی می‌کند، سایت‌هایی که نمره ضعیفی دارند، رتبه بالایی کسب نمی‌کنند زیرا گوگل نمی‌خواهد کاربران از وبسایت مورد نظر تجربه بدی داشته باشند. LCP به عنوان معیار مهم، 25 درصد از نمره عملکرد را به خود اختصاص می‌دهد و یکی از مهمترین معیارهای بهینه سازی محسوب می‌شود.
چگونه می‌توان LCP را بهبود بخشید؟
معیار LCP را با استفاده از روش‌های زیر بهبود بخشید:
1- کاهش زمان پاسخگویی سرور
کاهش زمان پاسخگویی سرور به بارگیری سریع‌تر منابع و ارائه سریع زمان LCP در صفحه کمک می‌کند. برخی از کارهایی که می‌توانید برای این منظور انجام دهید، عبارتند از:
· کاهش زمان پاسخگویی سرور اولیه
· استفاده از شبکه تحویل محتوا (CDN)
· ارائه دارایی‌های استاتیک با قوانین کَش کارآمد
· ایجاد ارتباط اولیه با منشأ مهم شخص ثالث (Third-Party)
2- حذف رفتار مسدود کننده رندر
حذف رفتار مسدود کننده رندر در صفحه، بارگذاری منابع را در سریع‌ترین زمان ممکن تضمین می‌کند.
3- بهینه سازی تصاویر و ویدیوها
برای کاهش زمان بارگیری تصاویر و ویدئوها، کارهایی زیر را انجام دهید:
· اندازه مناسب تصاویر
· بهینه سازی تصاویر
· ترکیب تصاویر با استفاده از CSS sprites
· ارائه تصاویر در فرمت‌های نسل بعدی (JPEG 2000 و JPEG XR و WebP)
· استفاده از فرمت‌های ویدئویی برای محتوای متحرک
معیار شاخص سرعت (Speed Index)
شاخص سرعت (SI) یک معیار عملکرد Lighthouse است که نشان می‌دهد محتوای صفحات وبسایت چگونه سریع بارگذاری می‌شوند و برای کاربر قابل مشاهده هستند. شاخص سرعت، زمان بارگذاری وبسایت بدون آنکه کاربران صفحه را اسکرول کند، است. به بیانی ساده‌تر، شاخص سرعت به معنای سرعت متوسط ارائه یک صفحه از وبسایت و کامل شدن بارگذاری آن است. به این مهم تکمیل بصری گفته می‌شود.
این معیار بر نحوه درک کاربران از عملکرد وبسایت تأثیر می‌گذارد. بیایید این تکمیل بصری را در دو حالت زیر نشان دهیم:
صفحه A بهینه شده است، در حالی که صفحه B بهینه نشده است.
نمره شاخص سرعت پایین به این معناست که وبسایت شما، محتوای صفحه مورد نظر کاربر را بسیار سریع باز می‌کند.
نمره خوب شاخص سرعت چقدر است؟
نمره خوب شاخص سرعت باید زیر 3.4 ثانیه باشد. نمره بین 3.4 تا 4.5 نیاز به بهبود دارد و نمره بالای 4.5 بسیار ضعیف است. شاخص سرعت 15 درصد از نمره عملکرد را به خود اختصاص داده است که نشان دهنده اهمیت نسبتاً بالای آن است.
چگونه می‌توان شاخص سرعت را بهبود بخشید؟
به طور کلی، اکثر بهینه سازی‌های عملکردی که منجر به سریع‌ترین FCP و LCP می‌شود، احتمالاً باعث افزایش سرعت صفحات سایت نیز خواهند شد. برخی از بهینه سازی‌ها در زیر آورده شده‌اند:
- کاهش زمان اجرای جاوا اسکریپت
- به حداقل رساندن بار کاری (Main-Thread)
- حذف جاوا اسکریپت بلا استفاده
- کاهش تأثیر کد شخص ثالث (Third-Party Code)
- جایگزینی کتابخانه‌های بزرگ جاوا اسکریپت با جایگزین‌های کوچکتر
توجه: برخی از موارد بالا به هم مرتبط هستند. بهبود یکی به احتمال زیاد باعث بهبود دیگری می‌شود.
معیار مدت زمان تعامل پذیری (Time to Interactive)
زمان تعامل پذیری (TTI) یکی دیگر از معیارهای سنجش جی تی متریکس است. این مهم میزان زمان برای یک تعامل کامل از سوی کاربر را نشان می‌دهد.
نمره خوب TTI چقدر است؟
اینگونه است که Lighthouse در جی تی متریکس نمره TTI را به صورت زیر تفسیر م کند:
- از صفر تا 3.8 ثانیه خوب است.
- از 3.9 تا 7.3 ثانیه نیاز به بهبود دارد.
- بیش از 7.3 ثانیه ضعیف است.
معیار TTI در حدود 15 درصد از کل نمره عملکرد را به خود اختصاص می‌دهد که نشان دهنده اهمیت نسبتاً بالای آن است. بهینه سازی این معیار می‌تواند به بازدیدکنندگان شما کمک کند تا پیشرفت قابل توجهی در سرعت تعامل کامل و استفاده از صفحات وبسایت داشته باشند.
چگونه می‌توان TTI را بهبود بخشید؟
معیار TTI را با استفاده از راه‌های زیر بهبود بدهید:
1- بهینه سازی اجرای جاوا اسکریپت
اجرای جاوا اسکریپت را بهینه کنید تا زمان مسدود شدن Main-Thread کاهش یابد و سپس مطمئن شوید که صفحات وبسایت شما به ورودی‌های کاربر به سرعت پاسخ می‌دهد. برخی از کارهایی که می‌توانید انجام دهید، عبارتند از:
- کاهش زمان اجرای جاوا اسکریپت
- به حداقل رساندن بار کاری (Main-Thread)
- حذف جاوا اسکریپت بلا استفاده
- کاهش تأثیر کد شخص ثالث (Third-Party Code)
- جایگزینی کتابخانه‌های بزرگ جاوا اسکریپت با جایگزین‌های کوچکتر
2- ارائه حداقل درخواست‌ها
مطمئن شوید که تعداد درخواست‌ها را تا آنجا که ممکن است برای کاربردهای مورد نظر خود پایین نگه دارید. به طور مشابه، درخواست‌های Chaining Critical برای تسریع بارگذاری منابع کلیدی خود خودداری کنید.
3- استفاده از Resource Hints برای ایجاد ارتباطات اولیه
برای برقراری ارتباط اولیه با سرورهای شخص ثالث و ارسال زودتر منابع، از Ns-Prefetch Resource Hints کنید.
معیار کل زمان انسداد (Total Blocking Time)
مجموع زمان انسداد (TBT) مدت زمانی است که طی آن وظایف طولانی، Main Thread را مسدود می‌کند و بر قابلیت استفاده از صفحه تأثیر می‌گذارد. این معیار نشان می‌دهد که یک صفحه قبل از اینکه کاملاً تعاملی شود، از خود چقدر واکنش نشان نمی‌دهد!
به بیانی ساده‌تر، یک وظیفه طولانی کاری است که بیش از 50 میلی ثانیه اجرا شود. وظایف طولانی Main Thread را مسدود می‌کند زیرا در حین اجرای مرورگر نمی‌تواند آنها را قطع کند.
برای محاسبه TBT به دو کار نیاز است:
- زمان مسدود کردن هر وظیفه محاسبه شود.
- همۀ نتایج با هم جمع شوند.
به یاد داشته باشید، فقط زمان بالای 50 میلی ثانیه زمان انسداد در نظر گرفته می‌شود. برای مثال، یک وظیفه 260 میلی ثانیه است، یعنی 210 میلی‌ثانیه آن مسدود است. یک وظیفه می‌تواند تجزیه HTML، ساخت DOM، اجرای CSS و جاوا اسکریپت و غیره باشد.
نمره خوب TBT چقدر است؟
آستانه مجموع زمان انسداد براساس موارد زیر طبقه بندی می‌شود:
- بین صفر تا 300 میلی‌ثانیه خوب است و برچسب سبز دارد.
- بین 300 تا 600 میلی‌ثانیه متوسط است و برچسب نارنجی است.
- بیش از 600 میلی‌ثانیه بد است و برچسب قرمز دارد.
به عنوان معیار سنجش مهم، TBT در حدود 25 درصد از امتیاز عملکرد را به خود اختصاص می‌دهد که آن را به عنوان معیار برتر برای بهینه سازی صفحات وب تبدیل می‌کند.
چگونه می‌توان TBT را بهبود بخشید؟
مجموع زمان انسداد با عملکرد جاوا اسکریپت ارتباط زیادی دارد و هرگونه پیشرفت در اجرای جاوا اسکریپت، احتمالاً TBT را کاهش می‌دهد.
برخی از موارد بهینه سازی‌ها عبارتند از:
- کاهش زمان اجرای جاوا اسکریپت
- به حداقل رساندن بار کاری (Main-Thread)
- حذف جاوا اسکریپت بلا استفاده
- کاهش تأثیر کد شخص ثالث (Third-Party Code)
- جایگزینی کتابخانه‌های بزرگ جاوا اسکریپت با جایگزین‌های کوچکتر
