| کانال توسعهدهندگان وب |
الذهاب إلى القناة على Telegram
⭕️ کانال توسعهدهندگان وب دولوپیکس 💠 دولوپیکس | جامعه توسعهدهندگان ایرانی 💎 @Developix 🚀 Developix.ir 📌 پشتیبانی و تبلیغات: @DevelopixSupport
إظهار المزيد
الشبكة:2 676
المشتركون
لا توجد بيانات24 ساعات
-67 أيام
-3030 أيام
جاري تحميل البيانات...
القنوات المماثلة
سحابة العلامات
لا توجد بيانات
هل تواجه مشاكل؟ يرجى تحديث الصفحة أو الاتصال بمدير الدعم الخاص بنا.
الإشارات الواردة والصادرة
---
---
---
---
---
---
جذب المشتركين
مايو '25
مايو '25
+94
في 0 قنوات
أبريل '25
+141
في 0 قنوات
Get PRO
مارس '25
+135
في 0 قنوات
Get PRO
فبراير '25
+104
في 0 قنوات
Get PRO
يناير '25
+158
في 0 قنوات
Get PRO
ديسمبر '24
+177
في 0 قنوات
Get PRO
نوفمبر '24
+162
في 0 قنوات
Get PRO
أكتوبر '24
+117
في 1 قنوات
Get PRO
سبتمبر '24
+121
في 0 قنوات
Get PRO
أغسطس '24
+193
في 0 قنوات
Get PRO
يوليو '24
+186
في 1 قنوات
Get PRO
يونيو '24
+159
في 1 قنوات
Get PRO
مايو '24
+45
في 0 قنوات
Get PRO
أبريل '24
+115
في 2 قنوات
Get PRO
مارس '24
+169
في 1 قنوات
Get PRO
فبراير '24
+221
في 0 قنوات
Get PRO
يناير '24
+182
في 0 قنوات
Get PRO
ديسمبر '23
+236
في 0 قنوات
Get PRO
نوفمبر '23
+228
في 0 قنوات
Get PRO
أكتوبر '23
+289
في 0 قنوات
Get PRO
سبتمبر '23
+1 028
في 0 قنوات
| التاريخ | نمو المشتركين | الإشارات | القنوات | |
| 25 مايو | +2 | |||
| 24 مايو | +6 | |||
| 23 مايو | +5 | |||
| 22 مايو | +1 | |||
| 21 مايو | +1 | |||
| 20 مايو | +2 | |||
| 19 مايو | +7 | |||
| 18 مايو | +5 | |||
| 17 مايو | +4 | |||
| 16 مايو | +1 | |||
| 15 مايو | +4 | |||
| 14 مايو | +4 | |||
| 13 مايو | +1 | |||
| 12 مايو | +8 | |||
| 11 مايو | +2 | |||
| 10 مايو | +2 | |||
| 09 مايو | +8 | |||
| 08 مايو | +4 | |||
| 07 مايو | +5 | |||
| 06 مايو | +2 | |||
| 05 مايو | +3 | |||
| 04 مايو | +6 | |||
| 03 مايو | +5 | |||
| 02 مايو | +3 | |||
| 01 مايو | +3 |
منشورات القناة
🥳مسابقۀ ۱۰۰ میلیونی ساخت بات در اپلیکیشن بله!🦾
💰 مسابقهای برای ساخت بازو (بات) و مینیاپ در اپلیکیشن بله
🎯 از استعدادت پول در بیار!
❓چطوری؟
بله با مسابقهٔ «زور بازوت رو نشون بده!» یک فرصت عالی برای مهندسین نرمافزار، وب دولوپرها، صاحبان سایتها و اپلیکیشنها و تیمهای محصول فراهم کرده که پاسخگوی این دغدغههاست.
🎁 یه مسابقه با ۱۰۰ میلیون تومن جایزهٔ نقدی و ۱ میلیارد تومن اعتبار تبلیغات منتظرته! ♨️
📎 همین الان در مسابقه ثبتنام کن! ➡️
💬 کانال اخبار بازو دراپلیکیشن بله
کانال اطلاعرسانی بله | @BaleMessenger
| 2 |  Tailwindcss v4
✅ نسخه جدید تلویند منتشر شده.
امکانات جدیدی که در این نسخه اضافه شده :
1. تغییر موتور به یک موتور جدید و با پرفرمنس بالا
2. راحتتر شدن روند نصب
3. اضافه شدن پلاگین vite
4. به صورت اتوماتیک فایلها رو شناسایی میکنه و نیازی به کانفیگ نداره
5. تغییر فایل کانفیگ به css
6. برای تم از css variables استفاده شده
7. تغییر رنگها از rgb به oklch و مدرنتر شدن رنگها
8. 3D transforms
9. بهبود در گرادینتها
10. پشتیبانی از فیچر @starting-style
11. اضافه شدن not-* variant
12. و فیچر های دیگر
برای مطالعه کامل میتونید به وبلاگ tailwindcss سر بزنید.
لینک وبلاگ :
https://tailwindcss.com/blog/tailwindcss-v4
برای بروزرسانی تلویند توی پروژه هاتون :
https://tailwindcss.com/docs/upgrade-guide
🔖 #Web, #وب, #Frontend, #Backend
👤 Matin Soleymani
💎 Channel: @DevelopixWeb | 1 008 |
| 3 |  ⭕️ دوره آموزش برنامهنویسی مینی اپ تلگرام
💠 در این دوره به آموزش برنامهنویسی مینی اپ تلگرام میپردازیم، از مباحث پایه و عمومی شروع میکنیم و مفاهیم رو یاد میگیریم. | 635 |
| 4 |  💎 وبسایت UIVerse منبعی غنی از کامپوننتهای پر استفاده و زیبا برای طراحی UI هست که میتونید بهراحتی کدهای مربوط به کامپوننتهای مورد علاقهتون دریافت کنید. لازم بهذکر هست که تمامی کامپوننتها Open-Source هستند و بدون مشکل میتونید استفاده کنید.
🌐 UIVerse.io
💎 Channel: @DevelopixJavascript | 707 |
| 5 |  سلام
پرسشنامه پیش رو با هدف درک بهتر رفتار و نیازهای کسبوکارهای اینترنتی ایرانی در استفاده از ابزارهای پرداخت توسط یک تیم پژوهشی مستقل طراحی شده است. نتایج این پژوهش به ما کمک میکند تا ابزارهایی کارآمدتر و منطبق با نیازهای واقعی شما ارائه دهیم. تکمیل این پرسشنامه کاملاً بینام است و هیچ اطلاعات شخصی از شما ذخیره نخواهد شد. پاسخهای شما نقش کلیدی در بهبود خدمات ابزارهای پرداختی اینترنتی در کشور دارد، بنابراین از شما خواهشمندیم با دقت و صداقت به سوالات پاسخ دهید. زمان لازم برای تکمیل: حدود 5 دقیقه لطفاً برای شروع پرسشنامه، روی لینک زیر کلیک کنید و ما را در این مسیر همراهی کنید.
.
https://survey.porsline.ir/s/lEtAnSw8
.
سپاس فراوان از همکاری صمیمانه شما | 966 |
| 6 |  ✨ با استفاده از کتابخونه Cursify میتونید افکتهای انیمیشنی زیبایی به Cursor موس در محیط وب بدید. این کتابخونه با React و Typescript و Tailwind و Framer Motion ساخته شده و بهراحتی در پروژهها بهصورت کامپوننت قابل استفاده است.
🌐 Website
💎 Channel: @DevelopixJavascript | 694 |
| 7 |  آموزش تخصصی جاوا برای ورود به دنیای اینشورتک!
پویش «کشتیبان کجاست؟» فرصتی برای آموزش تخصصی و پیشرفته در حوزه برنامهنویسی جاوا، فراهم کرده است. در این مسیر آموزشی با تمرکز بر فریمورک Spring و یادگیری توسعه اپلیکیشنهای وب RESTful، خودتان را برای مسیر شغلی جذاب و پردرآمد برنامهنویسی جاوا آماده کنید.
با توجه به تخصصی بودن این آموزش و نیاز به متوازن سازی سطح دانش فراگیران، لازم است ابتدا با اساتید دوره مصاحبه کوتاهی داشته باشید.
💥برای حضور در این بوتکمپ، میتوانید از کد تخفیف ۳۰ درصدی ویژه دوره بهرهمند شوید!
📌 کد تخفیف: keshtiban
🔗 لینک ثبتنام:
https://B2n.ir/w30437
____
فناپکمپس؛ رشد در بازار کار دیجیتال
@Fanapcampus | 667 |
| 8 |  ⚜️ چطوری سایتی که داریم توسعه میدیم رو روی موبایل ببینیم ؟
خلاصه :
توی این ویدیو یاد میگیریم چطوری سایتی که داریم توسعه میدیم رو روی موبایل خودمون بدون دیپلوی کردن روی سرور و بدون هیچ هزینه ای تست کنیم :)
🎞 لینک ویدیو:
https://youtu.be/uGXRDu0H5iU
🔖 #Web, #وب, #Frontend, #Backend
👤 Matin Soleymani
💎 Channel: @DevelopixWeb | 1 018 |
| 9 |  ⚜️ چطوری یاد بگیریم؟ - Tailwindcss
✳️توی این ویدیو میپردازیم به این که چجوری میتونیم تلویند یاد بگیریم
درواقع به جای اینکه یک دوره کامل tailwindcss ببینید و وقت خودتون رو صرف دوره بکنید با یه ویدیو تقریبا یک ساعته کل کانسپت رو درک کنید و شروع کنید خودتون با استفاده از document خود tailwind جلو برید و یاد بگیرید.
هدف من اینه که شما بتونید با استفاده از یه ویدیو کانسپت رو بفهمید و ادامه رو خودتون برید و یاد بگیرید دلیل این کار هم اینه که یاد بگیرید داکیومنت بخونید و وقتتون رو صرف موارد مهم تری بکنید
🎞 لینک ویدیو:
https://youtu.be/hO1InhW1y50
🔖 #Web, #وب, #Frontend, #Backend #Tailwindcss
👤 Matin Soleymani
💎 Channel: @DevelopixWeb | 1 113 |
| 10 | 💢 ویژگی PopOver
ویژگی popover در HTML ویژگی جدیدی برای ایجاد و مدیریت popup ها است که به شما امکان میدهند تا به سادگی و سریعترین راه popup های تعاملی ایجاد کنید. این ویژگی به تازگی معرفی شده است و هنوز در تمامی مرورگرها به طور کامل پشتیبانی نمیشوند، اما در ادامه به توضیح کامل این ویژگیها و نحوه استفاده از آنها میپردازیم.
🔺 ویژگی popover
ویژگی popover به یک عنصر HTML اعمال میشود تا آن را به عنوان محتوای پاپآپ مشخص کند. این ویژگی به طور مستقیم توسط مرورگرها مدیریت میشود و نیازی به استفاده از JavaScript برای نمایش یا مخفی کردن پاپآپ نیست.
🔺 ویژگی popovertarget
ویژگی popovertarget به عنصری که باید پاپآپ را باز کند (مانند دکمه یا لینک) اعمال میشود. این ویژگی مشخص میکند که با کلیک یا هاور کردن بر روی این عنصر، کدام پاپآپ باید نمایش داده شود. مقدار این ویژگی باید شناسه (ID) عنصری باشد که ویژگی popover را دارد.
🔺 ویژگی popover-open
این یک شبهکلاس CSS است که میتواند برای استایلدهی به عناصری که پاپآپ آنها باز شده است، استفاده شود. با این ویژگی میتوان به راحتی ظاهر و رفتار عناصر را زمانی که پاپآپ باز است، تغییر داد.
🔺 مثال:
در این مثال، یک دکمه وجود دارد که وقتی روی آن کلیک میکنید، پاپآپی که حاوی یک ایموجی دست است، نمایش داده میشود.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popover Example</title>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
span {
display: none;
animation: wave 0.25s 0.25s 2;
font-size: 8rem;
margin-left: 10px;
}
button:popover-open + span {
display: inline;
}
@keyframes wave {
50% {
rotate: -25deg;
}
100% {
rotate: 25deg;
}
}
</style>
</head>
<body>
<button popovertarget="hello">Say Hello</button>
<span popover id="hello">👋</span>
</body>
</html>
🔺 توضیحات:
1. HTML:
- button
با ویژگی popovertarget=hello که نشاندهنده این است که این دکمه با کلیک یا هاور کردن باید پاپآپ با شناسه hello را نمایش دهد.
- span
با ویژگی popover و شناسه hello که حاوی محتوای پاپآپ است.
2. CSS:
- span
که در ابتدا مخفی است (display: none) و دارای انیمیشن دست تکان دادن.
- انتخابگر button:popover-open + span که نمایش عنصر span را زمانی که دکمه کلیک شده است، مدیریت میکند (display: inline).
- زمانی که کاربر روی دکمه کلیک میکند، پاپآپ (عنصر span) نمایش داده میشود.
- ویژگی :popover-open به دکمه اعمال میشود و CSS مرتبط با آن اجرا میشود.
🔺کاربردها:
ویژگیهای popover و popovertarget میتوانند برای ایجاد انواع مختلف پاپآپها استفاده شوند، مانند:
- نمایش توضیحات یا اطلاعات اضافی.
- ایجاد منوهای کاربری.
- نمایش پیامهای تایید یا هشدار.
- ارائه راهنماییها یا نکات آموزشی.
این ویژگیها با کاهش نیاز به استفاده از JavaScript برای مدیریت پاپآپها، کدنویسی را سادهتر میکنند و به شما اجازه میدهند تا با استفاده از CSS، کنترل کاملی بر ظاهر و رفتار پاپآپها داشته باشید.
🔖 #Web, #وب, #Frontend
👤 Maryam
💎 Channel: @DevelopixWeb | 693 |
| 11 |  💢 معرفی ابزار Gulp
ابزار Gulp یک ابزار متنباز و رایگان است که به زبان جاوا اسکریپت نوشته شده و بر پایه Node Stream است. این ابزار به برنامهنویسان اجازه میدهد تا یک سری وظایف (Task) در پروژههای خود تعریف کنند که کارهای تکراری را به صورت خودکار انجام دهد. این کار باعث میشود که کار برنامهنویس سبکتر شده و روند اجرای پروژه سریعتر پیش برود.
ابزار Gulp به عنوان یک Task Manager برای محیط NodeJS و پکیج منیجر NPM عمل میکند. بنابراین برای استفاده از Gulp باید پکیج منیجر NPM را نصب کنید. NPM به شما امکان میدهد تا پکیجهای مختلفی را که برای پروژه نیاز دارید، مدیریت و نصب کنید.
⚙️ نصب و راهاندازی Gulp
برای شروع استفاده از Gulp، ابتدا باید Node.js و NPM را نصب کنید. سپس میتوانید Gulp را به عنوان یک وابستگی در پروژه خود نصب کنید:
npm install --save-dev gulp
🔴تعریف وظایف با Gulp
پس از نصب Gulp، میتوانید وظایف مختلفی را تعریف کنید. به عنوان مثال، فرض کنید میخواهید فایلهای Sass خود را به CSS تبدیل کنید و سپس آنها را فشردهسازی کنید. ابتدا باید پلاگینهای مورد نیاز را نصب کنید:
npm install --save-dev gulp-sass gulp-clean-css
سپس یک فایل به نام gulpfile.js در ریشه پروژه خود ایجاد کنید و وظایف خود را در آن تعریف کنید:
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');
gulp.task('sass', function () {
return gulp.src('src/scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('dist/css'));
});
gulp.task('minify-css', () => {
return gulp.src('dist/css/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist/css'));
});
gulp.task('default', gulp.series('sass', 'minify-css'));
🔴وظایف قابل انجام با Gulp
از جمله کارهایی که با Gulp میتوانید به صورت خودکار انجام دهید، میتوان به موارد زیر اشاره کرد:
- فشردهسازی کدها: کاهش حجم فایلهای جاوا اسکریپت و CSS برای افزایش سرعت بارگذاری وبسایت.
- بهینهسازی: اعمال تغییراتی روی فایلها برای بهبود عملکرد آنها.
- اجرای Unit Testing: اجرای تستهای واحد برای اطمینان از عملکرد صحیح کدها.
- تبدیل فایلهای Sass به CSS: ترجمه فایلهای پیشپردازندههای CSS مانند Sass به فایلهای CSS قابل استفاده در مرورگر.
- ساخت تمپلیت HTML: ایجاد و مدیریت فایلهای HTML به صورت خودکار.
- فشرده کردن تصاویر: کاهش حجم تصاویر بدون کاهش کیفیت آنها.
- ساخت محیط لوکال هاست: ایجاد یک سرور محلی برای تست و توسعه پروژهها.
🔘مثال کاربردی
فرض کنید شما یک پروژه وب دارید که شامل فایلهای Sass، تصاویر و فایلهای جاوا اسکریپت است. با استفاده از Gulp، میتوانید تمام این وظایف را به صورت خودکار انجام دهید. به عنوان مثال، فایلهای Sass را به CSS تبدیل کرده، فایلهای CSS را فشرده کنید و تصاویر را بهینهسازی کنید. تمام این کارها تنها با اجرای یک دستور Gulp انجام میشود:
gulp
این روش نه تنها زمان شما را صرفهجویی میکند، بلکه باعث میشود که پروژه شما همیشه بهینه و آماده برای انتشار باشد. Gulp با استفاده از پلاگینهای متعدد، قابلیتهای خود را افزایش میدهد و به شما اجازه میدهد تا وظایف پیچیدهتری را به راحتی مدیریت کنید. این ابزار با استفاده از سینتکس ساده و قابل فهم، به توسعهدهندگان کمک میکند تا به سرعت و با کمترین پیچیدگی، وظایف مختلف را در پروژههای خود پیادهسازی کنند.
👤 Maryam
💎 Channel: @DevelopixWeb | 2 016 |
| 12 | 🟫 اگر توی پروژههای فرانتاندیتون از Tailwind استفاده میکنید و نمیخواهید که طول کلاسهای المنتهاتون رو با کیلومتر شمار اندازه بگیرید، این افزونهها میتونند کمک کننده باشند.
🔻 marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold
🟪 plugins.jetbrains.com/plugin/23937-tailwind-fold
🔖 #Web, #وب, #Frontend, #Backend, #Tailwind
👤 Mahdiyar
💎 Channel: @DevelopixWeb | 931 |
| 13 | ما توی سایت هایی که میسازیم برای کاربران عکس پروفایل در نظر میگیریم
ولی خب ممکنه کاربری عکس پروفایلی اپلود نکنه به جای استفاده از عکس دیفالت میتونیم مثل تلگرام از اول اسم و.. اون شخص یک عکس براش بسازیم و در پروفایل کاربران قرار بدیم ، این سایت در این کار به ما کمک میکنه و بسیار ساده این کار رو انجام میده.
https://ui-avatars.com/
🔖 #Web, #وب, #Frontend, #Backend
👤 Matin Soleymani
💎 Channel: @DevelopixWeb | 1 056 |
| 14 |  پلتفرم Rive انیمیشنهایی دراختیارتون قرار میده که توی تمام پلتفرمها قابلیت استفادهش رو دارید و خاصیتش هم این هست که قابلیت کنترل کردن انیمیشنها بهتون داده میشه.
برای همین میشه برای ساخت صفحات پویاتر، بازی یا هرچیزی ازش استفاده کرد.
اپ Duolingo هم بهنظر میاد از همین پلفترم برای کنترل شخصیتها و المانهای داخل برنامهاش استفاده میکنه.
🔗 Rive.app
بعضی از موردهای استفادهاش رو هم میتونید توی این لینک ببینید.
🔖 #UI #Animation #Crossplatform
👤 Mahdiyar
💎 Channel: @DevelopixWeb | 1 685 |
| 15 |  ⚠️از بالا رفتن قیمت دلار لذت ببر.⚠️
🛑 عجیب و غریب هم نیست. فقط به جای کارفرمای ایرانی با کارفرمای خارجی کار کن. چجوریشم بیا از کسی که تجربه داره و الان برای صدها نفر کارآفرینی کرده بپرس.
📆یکشنبه ۱۴۰۳/۰۲/۲۳ ⏰ساعت ۱۹:۰۰ وبینار رایگان چالش های کار با کارفرمای خارجی
🚨🎁راستی به مناسبت تولد تکانش کلی خبرها و هدایای هیجان انگیز هم دارن که فقط سالی یه بار اتفاق میوفته.🎁🎂
لینک ثبت نام وبینار:
https://links.etekanesh.com/dgpXlSf3Cd
👨💻مدرس: علیرضا قیمتی
پشتیبانی: @Tekanesh_support
کانال تلگرام: https://t.me/TekaneshAcademy | 289 |
| 16 |  🌐 فریمورک Ant Design یک UI Framework با ظاهری شیک و مدرن و انعطافپذیری بالا برای استفاده در محیط های توسعه وب است. این فریمورک میتواند جایگزین مناسبی برای کسانی که از Bootstrap یا سایر UI Framework ها استفاده میکنند، باشد. با این تفاوت که دارای ساختاری بسیار منعطف و ماژولار و ظاهری به مراتب تمیزتر و مدرنتر است.
❔ این فریمورک بهصورت پیشفرض با React سازگار است و میتوانید بهصورت کامپوننتهای ریاکت در پروژههای خود استفاده نمایید، علاوهبر React نسخه های دیگری از این فریمورک برای Vue و Angular نیز وجود دارند که میتوانید استفاده نمایید.
💎 Channel: @DevelopixWeb | 863 |
| 17 |  🚀 منتور جت - پلتفرم منتورینگ آنلاین
📈منتی: منتورت رو پیدا کن و آینده شغلیت رو مطمئن تر کن!
🏆منتور: به عنوان یک رهبر اعتماد به نفس ایجاد کنید، شبکه خود را رشد دهید و محبوبیت به دست آورید.
کاملا رایگان - برای همه، منتور و منتی ها.
🔗 https://mentorjet.org | 1 079 |
| 18 | صد درصد پیش اومده توی سایتتون از قیمت استفاده کردید و دوست داشتید که سه تا سه تا با یک , یا چیزی مثل این جدا کنید و خب روش های مختلفی هست برای این کار ولی من امروز ساده ترین روشش رو میخوام بهتون بگم :)
✳️ ساده ترین روش برای انجام این کار یک خط کد جی اس هست به این صورت :
let price = 500000;
console.log(price.toLocaleString());
و بله به این سادگی میبینید که این قیمت سه رقم سه رقم جدا میشه و خوانایی بالایی بهش میده :)
👤 Matin Soleymani
💎 Channel: @DevelopixWeb | 2 383 |
| 19 | Bun 1.1 :)
و بلاخره ورژن 1.1 بان از ریلیز شد و الان میتونید در ویندوز هم از بان استفاده کنید :)
⭕️ اگر نمیدونید بان چیه:
❇️ بان یک پکیج منیجر ، تست رانر ، باندلر و ران تایم هست ( درواقع انگار node js و npm و ابزار های دیگه در یک جا )
و اپشنی که ارائه میده سرعت و بهینه بودن بیشتره این ابزاره :)
در ورژن 1 روی لینوکس و مک قابل اجرا بود و که در ورژن 1.1 در ویندوز هم قابل استفاده هست
✅ برای نصب بان روی ویندوز :
کافیه دستور زیر رو توی cmd بزنید و نصب میشه خودش :)
powershell -c "irm bun.sh/install.ps1 | iex"
و برای نصب در لینوکس و مک :
curl -fsSL https://bun.sh/install | bash
پس درواقع بان یک ابزار جامع هست که سرعت بسیار بیشتری داره :) کلی اپشن دیگه داره که ما اینجا بهش نمیپردازیم و شما رو ارجاع میدم به داکیومنت خود بان که ازش استفاده کنید مطالعه کنید و یاد بگیرید
https://bun.sh/
امار رو ببینید متوجه میشید که باید نصب کنید و تستش کنید مخصوصا اگر node کار کرده باشید
👤 Matin Soleymani
💎 Channel: @DevelopixJavascript | 758 |
| 20 | 1. LCP : Largest Contentful Paint
⚜️ مقدار زمانی که بزرگترین کانتنت صفحه لود میشه ( درواقع این کانتنت بزرگ میتونه یک عکس یک فیلم هر چیزی باشه که بر اساس ثانیه هست )
🟢 بهینه ترین کمتر از 2.5 ثانیه هست
🟠 متوسط کمتر از 4 ثانیه
🔴 بیشتر از 4 ثانیه هم که بدترین حالته
2. CLS : Cumulative Layout Shift
⚜️مقدار پرش صفحه ( یعنی برای مثال موقع لود شدن سایت یک دکمه لود شده ولی هنوز لود صفحه تکمیل نشده کاربر که میاد روی این دکمه کلیک کنه یهو یک محتوایی بالای دکمه یا پایین دکمه ظاهر میشه و باعث پرش دکمه به بالا یا پایین میشه )
🟢 بهینه ترین کمتر از 0.1 هست
🟠 متوسط کمتر از 0.25 ثانیه
🔴 بیشتر از 0.25 ثانیه هم که بدترین حالته
3. INP : Intraction to Next Point
⚜️ این مورد بسیار جدید افزوده شده و گوگل ازش استفاده میکنه و جایگزین FID شده که بررسی میکنه چقدر طراحی سایت شما روان کار شده کاربر روی دکمه میزنه اون اکشن پشت دکمه کار میکنه یا نمیکنه اگر یک faq هست ایا به درستی اکوردین کار میکند یا خیر ( که این مورد در طول زمانی که کاربر در سایت شما هست بررسی و پس از خارج شدن از صفحه محاسبه میشود )
🟢 بهینه ترین کمتر از 200 میلی ثانیه هست
🟠 متوسط کمتر از 500 میلی ثانیه
🔴 بیشتر از 500 میلی ثانیه هم که بدترین حالته
👤 Matin Soleymani
💎 Channel: @DevelopixWeb | 802 |
