#FrontendPerformance

السـلام عليكـــــم دي الحلقة العاشرة من سلسلة #frontendperformance بالعربي. فالحلقة دي بنتكلم علي واحدة من أكتر الحاجات الي الناس بتشوفها complex في التعامل معاها وفهمها بتفاصيل وهي الـ performance panel في devtools. الحلقة دي بالنسبالي من أمتع الحلقات الي اتبسطت بيها سوا في التحضير او التسجيل, بنتكلم تقريبا علي كل حاجه في الـ performance panel بدأيا من الـ timeline وازاي نتعامل معاه, وبنتكلم علي الـ CPU, FPS, Network graphs بالتفصيل وبنشوف ازاي نقدر نربط الـ interactions activity خلال الـ life cycle بتاعه الـ page وازاي نربط بينها وبين الـ flame graph الي فيه الـ activities بتاعه الـ main thread. وده كله بنعمله تطبيق واحنا شغالين علي sample app فيه مشاكل performance وهنشوف ازاي نطلع ونحدد المشكلة وازاي نحل المشكلة ونشوف تأثير الـ optimizations الي عملناها علي الـ performance audit results. ده لينك الحلقة, أتمني إن شاء الله تكون مفيدة ❤️ #frontend_بالعربي #webperf #chrome #performance

السلام عليكــــــــــــم دي الحلقة الـ18 من سلسلة #frontendperformance بالعربي. فالحلقة دي هنتكلم علي جزء مختلف من الـ performance enhancements وهو اختيار الـ 3rd party packages بشكل صح يخلينا عارفين الـ cost الي هندفعها من اننا نضيف الـ new package دي في الـproject من ناحية الـ bundle size و الـ loading time سواء بنضيف package جديدة او حتي بنعمل analysis للـ packages الي عندنا في البروجيكت وازاي ممكن نحسنها هنستخدم tool اسمها bundlephobia هنعرف من خلالها الـ details بتاعه الـ package الي بينعملها analysis الفرق في الـ size بينها وبين الـ packages الي بتعمل نفس الحاجه زيها. الـ download time بتاع الـ package خاصا في الـ network latencies المختلفة وكمان هل الـ package tree shakable وهل في packages أحسن منها بتعمل نفس الحاجه ولا لا. ده لينك الحلقة, أتمني إن شاء الله تكون مفيدة ❤️ #frontend_بالعربي #webperf #chrome #performance #frontend #webperformance

السلام عليكــــــــــــم دي الحلقة الـ19 من سلسلة #frontendperformance بالعربي فالحلقة دي هنتكلم علي performance technique جديد وهو بالنسبالي واحد من أمتع الـ optimizations في التعامل معاه وفهم الـ implementation details بتاعته, فالحلقة دي هنتكلم علي الـ Virtual Scrolling او الـ List Virtualization هنتكلم المشاكل الاساسية من فكرة rendering large lists, سواء من ناحية الـ user experience او الـ loading performance. هنتكلم علي ايه هو الـ Virtual Scrolling او الـ Windowing وازاي هو بيحاول يحل مشكلة الـ lists الكبيرة هنعرف ازاي بيشتغل, ازاي بنحسب الـ window وازاي بنقدر نتعامل مع انواع مختلفة من الـ lists سواء كانت Fixed size lists او Variable size lists. وليه بنقول علي الـ technique ده virtualization وازاي بنقدر نطبقه وفي نفس الوقت نحافظ علي user experience مشابهة للـ rendering العادي وهنتكلم علي شوية notes مهم ناخد بالنا منها, وايه فايدة optimization زي الـ Overscan او الـ Buffering علي الـ experience والأختلافات بين الـ packages المشهورة الي بتساعدنا نعمل virtual scrolling وأخيرا هنتكلم عن عيوب ومميزات الـ virtual scrolling وامتي تستخدمها بحيث تبقي بتاخد منها الـ max value ده لينك الحلقة, أتمني إن شاء الله تكون مفيدة ❤️ #frontend_بالعربي #webperf #chrome #performance #frontend #webperformance #virtualscrolling #virtual_scrolling #list_virtualization #windowing

السلام عليكــــــــــــم دي الحلقة الـ14 من سلسلة #frontendperformance بالعربي. فالحلقة دي بنكمل كلامنا علي Resource hints وهنتكلم علي أكتر عن الـ Preload. هنعرف ايه هو وبيستخدم ازاي وattributes مهمة تاخد بالك وانت بتعمل الـ preload علشان استخدمها بشكل غلط ممكن يأدي ان الـ preload resource بيحصله fetching مرتين. واخيرا هنتكلم علي use cases ليه وازاي تستعمله سواء في Vanilla JS او في Single Page Application وازاي الـ module bundlers دلوقتي ممكن تخليك تعمل ده بسهولة. ده لينك الحلقة, أتمني إن شاء الله تكون مفيدة ❤️ #frontend_بالعربي #webperf #chrome #performance #frontend #webperformance

Frontend: Your app loads in 5s? Users bounce in 3. Every extra second = +32% bounce rate. 🎯 Targets: < 2.5s load < 3.4s TTI < 20% bounce 📊 Real wins: Ecom: 8s → 2.1s SaaS: 45% → 18% bounce 💬 Comment "AUDIT" for a free perf review. #FrontendPerformance #CoreWebVitals

السلام عليكــــــــــــم دي الحلقة الـ17 من سلسلة #frontendperformance بالعربي. فالحلقة دي هنتكلم علي واحدة من الأدوات المهمة والي هتساعدنا نفسهم ونشوف بشكل أحسن الـ bundles بتاعنا وازاي بتشتغل وهي الـ Bundle Analyzer هنتكلم هي عبارة عن ايه, وازاي بتساعدنا نجاوب علي اسئلة كتير زي الكود بتاعنا bundled ازاي, الـ business logic موجود في انهي bundle. هل عندنا dependencies متكررة في الـ bundle, هل الـ tree shaking شغال بشكل مظبوط واسئلة تانية كتير هناخد مثال علي واحده من أشهر ال bundle analyzers وهو webpack bundle analyzer وهنستخدمة في مثال عملي, هنشوف مع بعض app فيه مشاكل كتير ونشوف ازاي قدرنا نطلع المشاكل دي من الـ bundle analyzer ونحلها ونـ optimize أكتر من 50% من الـ bundle size ده لينك الحلقة, أتمني إن شاء الله تكون مفيدة ❤️ #frontend_بالعربي #webperf #chrome #performance #frontend #webperformance

السلام عليكــــــــــــم دي الحلقة الـ11 من سلسلة #frontendperformance بالعربي. بدأيا من الحلقة دي هنبدأ نشوف optimization techniques تساعدنا نحسن الـ performance والـ loading time للـ apps بتاعتنا. فالحلقة دي هنتكلم علي الـ bundle splitting, هنعرف ايه هو وليه محتاجينه, و هنعرف امتي محتاجين نعملها وازاي في أوقات ممكن يكون مضر أكتر ما هو مفيد للـ User experience. وأخيرا هنشوف مع بعض تفاصيل الـ bundle splitting علي واحد من أشهر الـmodule bundlers وهو Webpack ونشوف الـ splitting signals الي ممكن نتعامل بيها معاه ومميزات وعيوب كل واحد فيهم. ده لينك الحلقة, أتمني إن شاء الله تكون مفيدة ❤️ #frontend_بالعربي #webperf #chrome #webpack #bundlesplitting #performance

السـلام عليكـــــم... دي تاسع حلقة من #frontendperformance بالعربي. فالحلقة الي فاتت, عملنا مع بعض Integration لواحدة من الـ RUM tools وهي @newrelic وشوفنا الـ different metrics الي كنا بنتكلم عليها واتكلمنا ازاي نستخدم New Relic dashboard علشان نقدر نحدد بالظبط ايه المشكلة الي عندنا وازاي هي بتأثر علي الـ users للـ website بتاعنا باختلاف الـ devices, networks وهكذا. فالحلقة دي بنتكلم علي الجزء التاني وهي واحدة من أشهر الـ tools في الـ Synthetic Monitoring Tools وهي @RealWebPageTest. بنتكلم تقريبا علي كل التفاصيل الي فيها والـ different views الي بتقدمهالنا وازاي كل واحد منهم بيساعدنا نعمل analysis ونفهم أكتر مشاكل الـ performance في الـ websites بتاعتنا وازاي هي بتساعدنا نعمل simulation لـ Cases كتيرة ونتحكم في الـ environment الي بنعمل عليه الـ performance audit بتاعنا. ده لينك الحلقة, أتمني إن شاء الله تكون مفيدة ❤️ #frontend_بالعربي #webperf #javascript #FrontEnd

السلام عليكــــــــــــم دي الحلقة الـ15 من سلسلة #frontendperformance بالعربي. فالحلقة دي بنكمل كلامنا علي Resource hints وهنتكلم علي أخر واحد فيهم وهو الـ Prefetch والي بعتبره بالنسبالي أهمهم وأمتعهم في الشغل بيه وفيه تفاصيل كتيره في استخدامه. هنتكلم أكتر ايه هو وبيعمل ايه, والطرق المختلفة لاستخدامه وهنتكلم علي examples ليه في الـ Single Page Applications بتاعتنا وحاجات محتاج تبقي واخد بالك منها وانت بتتعامل معاه بحيث تطلع منه بأكبر استفادة. وهنتكلم بالتفصيل علي انواع الـ Prefetch heuristics والفرق بينهم والـ trade-offs في اختيار الـ heuristic او الـ strategy المناسبة ليك سواء من ناحية الـ accuracy, Network/CPU overhead او حتي الـ Setup والـ Implementation size لكل واحد فيهم. وأخيرا هنحاول نعمل مع بعض guide يساعدنا نختار الـ heuristic المناسبة للحالة بتاعتنا. ده لينك الحلقة, أتمني إن شاء الله تكون مفيدة ❤️ #frontend_بالعربي #webperf #chrome #performance #frontend #webperformance

السلام عليكــــــــــــم دي الحلقة الـ16 من سلسلة #frontendperformance بالعربي. فالحلقة دي هنتكلم علي technique جديد لتحسين الـ bundle size في الـ app بتاعك وهو الـ Tree Shaking هنعرف مع بعض ايه هو الـ Tree Shaking, وبيحاول يحسن ايه وعلاقتة بالـ ES Modules و CommonJS وعلاقتة بالـ bundlers وازاي نقدر نساعدها تعمل عملية الـ Tree Shaking بشكل صحيح وازاي نكتب Side Effect Free Code وده معناه ايه وازاي بنقدر نوصل المعلومات دي للـ bundler وأخيرا هنتكلم علي أمثلة لحالات بتعمل مشاكل وبتمنع ان الكود بتاعك يبقي Tree Shakable حتي والكود بتاعك Side-effect free ده لينك الحلقة, أتمني إن شاء الله تكون مفيدة ❤️ #frontend_بالعربي #webperf #chrome #performance #frontend #webperformance

السلام عليكــــــــــــم دي الحلقة الـ20 من سلسلة #frontendperformance بالعربي. فالحلقة دي هنتكلم علي performance technique جديد وهو الـ JavaScript Compression هنتكلم علي الـ Minification والـ Http Compression, هنتكلم علي أنواع الـ Compression سواء lossy او lossless واخيارنا لكل واحد فيهم هيبقي بناء علي ايه. وهنتكلم علي الـ Static vs Dynamic Compression والاختلاف فينهم وازاي نستخدمهم وازاي نقدر نختار Sweat Spot بين الـ Compression Lvl الي بيحققلنا نسبه عالية من الـ Compression وفي نفس الوقت ميأثرش علينا بشكل سلبي لو الـ speed بتاعته قليلة. وبعدين هنتكلم علي الـCompression Algorithms وازاي بيشتغلوا والفروقات بين Gzip و Brotli وهنعمل مقارنة بينهم وازاي نقدر نستخدم كل واحد فيهم ونعمله configure سواء من ناحية الـ Server او في الـ Build step وأخيرا هنتكلم علي الـ Trade off بين الـ Bundle Splitting, الـ Caching والـ Compression وهل فعلا ممكن يأثروا علي بعض بشكل سلبي. ده لينك الحلقة, أتمني إن شاء الله تكون مفيدة ❤️ #frontend_بالعربي #webperf #chrome #compression #decompression #gzip #brotli #performance #frontend #webperformance

السلام عليكــــــــــــم دي الحلقة الـ12 من سلسلة #frontendperformance بالعربي. في الحلقة دي هنتكلم علي technique قوي جدا وهو الـ Actions On Visibility, هنعرف ايه هو وازاي هو بسيط ولكن مفيد جدا وبنقدر نستخدمه في optimizations كتيره. هنشوف كمان مع بعض الـ Intersection Observer API وكل تفاصيلة و الـ mix بينه وبين الحاجات الي كل Framework بيدهالنا زي @vuejs و @reactjs واخيرا شوفنا ده مع بعض بمثال عملي كتطبيق علي الـ technique بتاع الـ Actions On Visibility في Vue applications. ده لينك الحلقة, أتمني إن شاء الله تكون مفيدة ❤️ #frontend_بالعربي #webperf #chrome #webpack #bundlesplitting #performance #react #vue

Implementing #VirtualScrolling at Billion-Row Scale — A walkthrough of tackling the numerous challenges involved in building a table component || #WebDevelopment #FrontendPerformance #JavaScript

Unwanted Research: Speed and Performance of Web Dev, SEO and Marketing Agencies Websites #webperf #perfmatters #frontendperformance

السـلام عليكـــــم... دي تامن حلقة من سلسلة #frontendperformance بالعربي فالحلقة الي فاتت اتكلمنا علي الـ Performance monitoring وشوفنا ليه بنحتاجة وايه انواعه, وعرفنا مع بعض ايه هو الـ RUM (Real User Monitoring) وايه الي بيفرقه عن الـ Synthetic Monitoring ومميزات وعيوب كل واحد فيهم والـ tools الي بتستخدم معاهم. فالحلقة دي, هنعمل مع بعض Integration لواحدة من الـ RUM tools وهي @newrelic هنشوفه ازاي تعملها Integration وهنشوف ازاي تشوف الـ different metrics الي كنا بنتكلم عليه وازاي تستخدم NewRelic dashboard علشان تقدر تحدد بالظبط ايه المشكلة الي عندك وازاي هي بتأثر علي الـ users للـ website بتاعك باختلاف الـ devices, networks وهكذا. ده لينك الحلقة, أتمني إن شاء الله تكون مفيدة ❤️ #frontend_بالعربي #webperf #frontend #javascript

Need for Speed 2: Improving #FrontEndPerformance #webperf #perfmatters

#FrontEndPerformance Checklist 2020 [PDF, Apple Pages, MS Word] via @smashingmag #webperf #perfmatters #webperformance

السلام عليكــــــــــــم دي الحلقة الـ13 من سلسلة #frontendperformance بالعربي. فالحلقة دي بنتكلم علي topic قوي جدا ولكن في نفس الوقت تطبيقه بسيط في الـ apps بتاعتنا, بنتكلم في الحلقة دي عن Resource hints. هنعرف ايه هي وبتستخدم في ايه وازاي نستخدمها, وهنتكلم بالتفصيل علي أول اتنين منهم وهما الـ dns-prefetch و الـ preconnect هنعرف ايه الفرق بينهم والـ use cases بتاعه كل واحد فيهم وهنكون بنكمل باقي الـ resource hints في حلقات جاية. وبنتكلم علي الحاجات الي تاخد بالك منها وانت بتتعامل معاهم و ازاي ساعات الـ overuse ليهم بيبقي مضر فنحاول نعمل التوازن الي يدينا enhancement كبير في الـ apps بتاعتنا وأخيرا بنتكلم علي أمثلة علي apps قبل وبعد تطبيق الـ resource hints دي. ده لينك الحلقة, أتمني إن شاء الله تكون مفيدة #frontend_بالعربي #webperf #chrome #performance #frontend #webperformance

🚀 Boost your website's performance with these frontend optimization tips! Minimize HTTP requests, use lazy loading, and optimize images. A fast site improves user experience and SEO! 🏎️💨 #FrontendPerformance #WebDevelopment #CodingTips #UXDesign

Always optimize your #JavaScript bundles with tools like Webpack or Parcel. Smaller files = faster load times! 🚀 #FrontendPerformance #WebDev