یه معیار مهم برای سنجش سایت ها Cumulative Layout Shift یا همون CLS هستش. حتما تا به حال خیلی اتفاق افتاده که یک وبسایت رو باز کردید و بعد چند ثانیه یهو یه عکس یا تبلیغات لود شده و کل layout "شیفت" شده به سمت پایین یا بالا. این قطعا تاثیر منفی روی تجربه کاربری داره ❌
یه سری ابزار ها هستن که میان کل مقادیری که صفحه به خاطرشون شیفت میشه رو جمع میکنن و یه عدد به شما میدن. هرچقدر این عدد کوچک تر باشه بهتره و این یعنی وبسایت شما stable تره.
در مقاله ای که پایین تر لینک داده شده میتونید یه سری دلایل که CLS سایت میره بالا رو همراه با راه حل ها مطالعه کنید 😊
#performance #UX
https://twitter.com/addyosmani/status/1258647386051604480?s=20
لینک مقاله در web.dev 📝
@frontendtwitter
یه سری ابزار ها هستن که میان کل مقادیری که صفحه به خاطرشون شیفت میشه رو جمع میکنن و یه عدد به شما میدن. هرچقدر این عدد کوچک تر باشه بهتره و این یعنی وبسایت شما stable تره.
در مقاله ای که پایین تر لینک داده شده میتونید یه سری دلایل که CLS سایت میره بالا رو همراه با راه حل ها مطالعه کنید 😊
#performance #UX
https://twitter.com/addyosmani/status/1258647386051604480?s=20
لینک مقاله در web.dev 📝
@frontendtwitter
Twitter
Addy Osmani
"I was about to click that! Why did it move?" 😭 Learn new tips & tricks to fix unexpected shifts in page layout: https://t.co/sS3KbberuD Shifts are commonly caused by... 🖼️ Images without dimensions 🎟️ Ads with dynamic dimensions 🔤 Web Font swaps
🚀تکنیک code-splitting مرحله ای در فیسبوک جدید:
1️⃣ مرحله اول: لود جاواسکریپتی که فقط برای layout پایه نیاز هستش (مثلا برای نشون دادن لودینگ اسکلتی)
2️⃣ مرحله دوم: لود جاواسکریپتی که برای رندر "کامل" هرچی که یوزر در صفحه میبینه و interactable شدن کامل صفحه (مثلا یوزر روی دکمه ای کلیک کنه، بلافاصله فیدبک میگیره)
3️⃣ مرحله سوم: لود جاواسکریپتی که ارتباط مستقیم به چیزی که عملا یوزر میبینه نداره (مثل لاگ ها و انالیتیک ها)
طبیعتا با این استراتژی در code-splitting، صفحات لود اولیه خیلی زودتری دارند(چون در مرحله اول فقط یه قسمت کوچیکی از کد جاواسکریپت لود میشه نه همه کد) و پرفورمنس میره بالاتر
پ.ن: تو اپ های بزرگ (یا حتی متوسط) فقط route based code-splitting کافی نیست و جداگانه صفحات باید optimize بشن
#performance #JavaScript
https://twitter.com/addyosmani/status/1259400281806307328?s=20
@frontendtwitter
1️⃣ مرحله اول: لود جاواسکریپتی که فقط برای layout پایه نیاز هستش (مثلا برای نشون دادن لودینگ اسکلتی)
2️⃣ مرحله دوم: لود جاواسکریپتی که برای رندر "کامل" هرچی که یوزر در صفحه میبینه و interactable شدن کامل صفحه (مثلا یوزر روی دکمه ای کلیک کنه، بلافاصله فیدبک میگیره)
3️⃣ مرحله سوم: لود جاواسکریپتی که ارتباط مستقیم به چیزی که عملا یوزر میبینه نداره (مثل لاگ ها و انالیتیک ها)
طبیعتا با این استراتژی در code-splitting، صفحات لود اولیه خیلی زودتری دارند(چون در مرحله اول فقط یه قسمت کوچیکی از کد جاواسکریپت لود میشه نه همه کد) و پرفورمنس میره بالاتر
پ.ن: تو اپ های بزرگ (یا حتی متوسط) فقط route based code-splitting کافی نیست و جداگانه صفحات باید optimize بشن
#performance #JavaScript
https://twitter.com/addyosmani/status/1259400281806307328?s=20
@frontendtwitter
Twitter
Addy Osmani
*Great* write-up on the Facebook redesign: https://t.co/yLayMNEEae by @catchingash && @rhagigi. Covers their approach to... 📦 Code-splitting & Incremental JS delivery 💰 JavaScript budgets to control size over time 🖇Parallelizing code and data download & more.
⚡️ یه مقاله به شدت پربار در مورد آنالیز کامل پرفورمنس اپ معروف Notion که در اصل با React زده شده
پ.ن: حتما حتما پیشنهاد میکنم همه Reactی ها بخونن 🚀
#React #performance
https://twitter.com/addyosmani/status/1274600187231473664?s=20
@frontendtwitter
پ.ن: حتما حتما پیشنهاد میکنم همه Reactی ها بخونن 🚀
#React #performance
https://twitter.com/addyosmani/status/1274600187231473664?s=20
@frontendtwitter
PerfPerfPerf
Case study: Analyzing Notion app performance
How to make a React app load ~30% faster – by tuning some configs and delaying some scripts
🚀 تو DevTools کروم میتونید از منویی که تو تصویر نمایش داده شده، هر ریکوئستی که سایتتون میزنه رو بلاک کنید. کاربرد این بلاک کردن برای سنجش تفاوت پرفورمنس هستش. مثلا میتونید با بلاک کردن ریکوئست یک عکس سنگین، متوجه بشید که چند میلی ثانیه سایتتون سریعتر لود میشه!
#tools #performance #DevTools
https://twitter.com/addyosmani/status/1275352900244369408?s=20
@frontendtwitter
#tools #performance #DevTools
https://twitter.com/addyosmani/status/1275352900244369408?s=20
@frontendtwitter
Twitter
Addy Osmani
Tip: @ChromeDevTools supports Network request blocking. Block URLs & domains to measure their impact on your site. DevTools > top-right menu > More > Request blocking
🚀 عکسایی که با جاواسکریپت(مثلا به شکل کامپوننت های React) لود میشن، کمی دیرتر تشخیص داده میشن واسه همین زمان لودشون میره بالا. میتونید با لینک preload، عکس‌ها رو preload کنید تا عملا سریعتر لود بشن
#HTML #performance
https://twitter.com/addyosmani/status/1283295232633659392?s=20
@frontendtwitter
#HTML #performance
https://twitter.com/addyosmani/status/1283295232633659392?s=20
@frontendtwitter
Twitter
Addy Osmani
Tip: Preload critical images the browser discovers late to improve performance https://t.co/QsIa1CBHCZ ~ Useful if images are loaded via JavaScript, React components etc.