[0:00]السلام عليكم ازيكم يا جماعه انا عبد الله حمدان ودي رابع حلقه من حلقات فورت ان برمس بالعربي. في الحلقه دي هنكمل كلامنا عن الويف فايتلس وهنبدا باول كور فايتل معانا وهو الكونتنت في البنت. الكونتنت في البنت او ال سي بي زي ما اتكلمنا المره اللي فاتت هو المترك اللي بتعبر على اللودنج اكسبريس بتاعت الويب سايت بتاعك. فبالتالي كل ما ال سي بي كان احسن او كل ما ال سي بي كارقام بقى اسرع كل ما احساس ان اليوزر ان الويب سايت بتاعك بيود اسرع بقى اكثر بكثير. طيب عمالين نقول ال سي بي ولكن احنا لسه ما عرفناش هو ال سي بي ده طيب لو جينا عرفنا ال سي بي سريعا هنقول ان هو في البنت او الوقت اللي بناخده علشان ندر اكبر المنت فيبل لليوزر عندنا في الويب سايت بدايه من اليوزر بدا عمل نافجيشن لحد ما المنت ده بدا يظهر. طيب في البنت او اكبر المنت عندنا هو مش اي المنت خلاص هو جوجل بدات تختار جزء من المنت وقالت ان هي دي المنت اللي هتعتبرها سي بي علشان الموضوع نوعا ما بيبقاش كوبلكس في حساباته فقال ان هي اختارت شويه كاتجوريز كده اول واحد فيهم هو الا او الا تاج ثاني حاجه هو الا تاج اللي جوه الاس في جي بروتي او اس في جي ايج ثالث حاجه وهو الفيديو سواء بقى كان الفيديو ده مقصود بالبوستر بتاع البوستر ايج بتاع الفيديو او حتى اول فريم في الفيديو. رابع حاجه معانا وهو ان المنت نفسه عليه باك جراوند ايج والباك جراوند ايج دي مستخدمه مثلا في حاجه زي يو ار ال فانت في الباك جراوند ايج بتاع المنت حطيت يو ار ال وحاطط لينك ايج فبالتالي المنت ده برده من الحاجات اللي ممكن تعتبر ال سي بي. الحاجه الخامسه معانا وهي التكست نودز وهي ببساطه التكست العادي جدا او النودز اللي فيها كوننت تكست بيست. فلو بصينا على الخمسه كاتجوريز دول هم دول بس الكاتجوريز او هم دول الخمسه تايب اوف المنت اللي جوجل بتعتبرها ال سي بي المنت فبالتالي مهم جدا لو انت عندك اي المنت من المنت دي اباف فول او ظاهر على السكرين في الفيزبل في البورت لليوزر ان احنا نحاول نانس وميز كل المنت من المنت دي. طيب تعال ناخد ازبل كده سريعا عشان نفهم الفكره من ال سي بي وازاي بيتحسب هنلاقي زي ما كنا بنتكلم ال سي بي اختصارا هو اكبر المنت بيبدا يظهر على السكرين في الفي بورت او اباف فول في اليوزر بيبقى شايفه فلو جينا بصينا على السيكس بتاع اللودنج البيدج دي بتاعت سي ان ان هلاقي ان هي بتعدي على يمكن خمسه ستيجز او خمسه خمس مراحل من اللودين بتاع المنت دي. طب بدانا من على الشمال هنلاقي ان احنا اول حاجه هو ده الفيرست كونتنت في البنت كلمه فيجوال ستوريز دي الفيرست كونتنت في البنت بتاعتنا وبعد كده ستيب باي ستيب هنلاقي ان المربع الاخضر ده ده اللي بيعبر على اكبر المنت دلوقتي احنا شايفينه فهتلاقي ان من اول سكرين ثانيه او الثالثه او الرابعه التكست بيزد اللي هو كان فيه هو كواليفاي ده هو ده اللي كان معتبر او بنعتبره ان هو لارجست كونتنت في البنت طيب في السكرين الخامسه مجرد ما الايمج بدات ترجع هو ده اللي يعتبر بالنسبه لنا هو اكبر المنت من ناحيه السايز او من ناحيه الايريا في السكرين فنج اللايف سايكل بتاع رنج البيدج كل شويه جوجل بتبدا تشوف مين اكبر المنت عندنا من ناحيه السايز او من ناحيه السبيس وهو ده اللي يعتبر هو في البنت فسكرين الخامسه الايمج فيها هي في البنت. لو جينا بصينا على اابل تاني برده هنلاقي ان احنا عندنا خمسه سكرينز كل سكرين فيهم بتقول هو ايه في البنت لحد دلوقتي فاول سكرين كان فيه كوننت معين السكرين الثانيه نفس الكوننت السكرين الثالثه ظهر كوننت اكبر او حصل نوعا ما اوت شيفت او تغيير في الاوت خلى ان التايتل او الهيدر بتاع الراجل ده بتاع البيدج دي هي اللي بقت البنت بعدها بشويه ظهر هيجو ايج او ظهر باك جراوند ايج الباك جراوند ايج دي هي بقت البنت فده من مهم قوي نعرفه ان في البنت في حسابه حاجه بتتغير طول ما احنا بنود البيدج مش حاجه مره واحده لا في خلال الفتره اللي انت بتندر فيها البيدج كل مره بيظهر جديد لحد ما البيدج تبقى عندك يعتبر ده ده لو هو كان اكبر من القديم فهو بيبقى هو سي بي طيب زي كل هنلاقي ان جوجل بدات تحدد رينجز لكل كاتجوري من الكاتجوريز دي طيب هنلاقي ان جوجل بتقول عشان تبقى عندك جود يوزر اكسبريس المفروض الويب سايت بتاعك يكون ال سي بي نمبر او الوقت اللي بياخده عشان ندر اكبر جزء في البيدج بتاعتك اقل من سنتين ونص بست كمان ان ده يبقى من طيب من الكز فبالتالي انت لو عندك 100 انت عايز ان 75% من الك دول يبقى شايفين اقل من سنتين ونص. طيب زي ما كنا بنتكلم لو قدرنا ان احنا انكشر الرقم بتاع ال سي بي لكل كستر من الكز عندنا وحطينا الحاجات دي على جراف وبدانا نصهم من الارقام الاحسن الارقام الاسوا بافتراض ان احنا عندنا 100 بار او 100 يوزر دخل على الويب سايت بتاعنا او 100 نمبر لل سي بي وعملنا لهم سورت هنلاقي ان الس من جوجل ان يكون 75% من الكرز بتوعك لسه بيقعوا تحت 2 ونص سكند علشان تبقى تقول ان بتاع الويب سايت بتاعك سريع او البشن بتاع اليوزرز لفكره الكون بسرعه يكون نوعا ما سريع. طيب من المشاكل في ال سي بي ان ال سي بي بياثر في فاكتور كتيره جدا على الفاينل نمبر اللي بيطلع فبالتالي مفيش كويك فاكس او في سنجل فاكس هيؤدي ان الارقام بتاعتك تتحول من ان هي تبقى سيئه الارقام تبقى احسن
[5:14]فبالتالي انت محتاج تبص على اللودنج بروسس كلها بدايه من اليوزر بدا يفيجيت لحد ما في البنت بدا يظهر عندك علشان تقدر تفهم كل ستيج من الستي دي عامله ازاي وازاي ممكن تحسها. ال سي بي برده كبر بياثر فيه فاكتورز ثانيه فبالتالي انت محتاج تبص على الفايلز الثانيه او الستبس اللي حصلت قبل في البنت علشان تبقى قادر تفهم وادر تربط كل مترك من المتركس دي ازاي بياثر على ال سي بي وازاي اوبيز كل مترك من المتركس دي بيؤدي ان الرقم بتاعك ال سي بي كل شويه بيبقى احسن. عشان نفهم ازاي ال سي بي محتاجين نبدا نقسم ال سي بي لكذا مرحله بحيث ان احنا نشوف كل مرحله او كل ستيج من الستي دي ايه الحاجات اللي احنا ممكن نحسنها فيها بحيث ان الاوفر بروس بتاع ال سي بي او الستبس اللي بيعدي عليها من اول الفيكيشن لحد الاخر تكون اوبتمايز. عشان نعمل ده تعالوا نتخيل ان احنا عندنا الاامبل اللي كنا بنتكلم عنه من شويه ان احنا عندنا في البنت اللي كان في البيدج هو كان صوره. لو جينا بصينا على الوتر فول او الفليم جراف بتاع الكوست بتاعنا او بتاعه البيدج بتاعتنا بدايه من ال او من احنا بدا نلود بتاعنا لحد ما ال سي بي بتاعنا بدا يظهر هنلاقي ان هو عدى على كذا ستيج اول منهم ان هو بدا يد بتاع بعد كده ادركنا ان في عندنا دي بعدها بدانا نكوست ال سي بي في حالتنا دي كانت صوره فبدانا نكوست ان في صوره بعد ما الصوره كوست وبدات ترجع كان في شويه سكريبت شويه جافا سكريبت كود بدا رندر لحد ما في الاخر طلعنا ال سي بي عند اخر بوينت بتاعتنا. بغض النظر عن كل السورس اللي بت عندنا هتلاقي ان في تو رسورس مهمين قوي ان نكون نبص عليهم ونحاول نشوف بيبداوا امتى وبينتهوا امتى علشان هم دول اللي هنقدر من خلالهم ال سي بي. التورس دول هم اول حاجه الفايل ثاني حاجه وهو ال سي بي سورس ال سي بي سورس زي ما كنا بنتكلم في حالتنا دي ان هو دي صوره فبالتالي ده رسورس البراوزر محتاج ست ثاني فبالتالي هو ست تايم رنج تايم خده لغايه ما يبدا ده يكون موجود عندنا. لو جينا قسمنا ال سي بي بتاع الا بتاعتنا هنقدر نقسمه لاربعه ستيج بسط جدا الستيج الاولى وهي التايم تو فرست بايت وهو ده الوقت اللي خدناه من اول ما اليوزر بدا يعمل نافجيشن لحد ما بدا يرجع لنا اول بايت من البايت بتاعه الكوننت او بتاعه الفايل. الستيج الثانيه اللي بتبدا من اول الخط الازرق الغامق لحد بدايه الرسورس بتاعنا هو ده الفتره اللي البراوزر بتاعنا قعد يحاول سكان فيها يدور فيها على الرسورس ده لحد ما بدا يلقاه في نهايه الستيج الثانيه وبدا ساعتها يكوست ال سي بي ف الخطه دي بنقول عليها الرسورس لود دي وده الوقت او الدي تايم اللي خدناه عشان نبدا ندسكفر نوعا ما الرسورس ده موجود فين ونبدا نحاول نده. الستيج الثالثه هو الوقت اللي خد الرسورس ده عشان يلود فبالتالي هو الوقت من اول ما بدانا ندسكفر او البراوزر قدر يعرف ان الرسورس ده محتاجينه فبدا ست لحد ما الرسورس ده فولي رجع للب براوزر وبدانا نستخدمه في عمليه الرنج. الستيج الرابعه معانا وهو المنت رندر ديلي وهو ده الوقت اللي خدناه من اول ما الرسورس بقى افيلبل عندنا في البراوزر لحد ما الريسورس ده بدا يطلع او بدا يتعرض في السكرين. هنبدا نبص على ستيج ستيج من الستي دي ونحاول نشوف احنا ازاي ممكن اوبتمايز او ايه الحاجات اللي احنا ممكن نكون بنعملها بتخلي الوقت بتاع كل ستيج من الستي دي بيكون اسوا. اول واحده هو التايم تو فرست برايت فبالتالي غرض الستيج دي او غرض المرحله دي احنا حاول نقلل الوقت اللي بناخده لحد ما بتاعنا يبدا يرجع. لو فاكرين الحلقه اللي فاتت احنا اتكلمنا عن اسباب كثيره اللي بتخلي التايم تو فرست برايت بيكون اسوا من اهمها الكونفجريشنز بتاعه السيرفر او الريد دايركشنز اللي ممكن تحصل من بدايه ان اليوزر بدا ينيفيت للويب سايت بتاعك لحد ما بدا يوصل او بدا فعلا السيرفر يرجع لك بتاع البيدج بتاعتك. مش هنتكلم كتير على التايم تو فرست برايت ولكن المهم نعرفه هنا ان التايم تو فرست برايت مشكلته ان هو بياثر على كل ستبس والستي اللي بعده فبالتالي لو انت عندك تايم تو فرست بايت كبير هيكون صعب عليك ان انت تحقق 2.5 سكند في البنت فهم قوي نحاول اوبيز الستيج دي بحيث ان هي الاشن بتاعها او تراكمها على ال سي بي نوعا ما يكون منول. طيب ثاني ستيج معانا وهو الرسورس لود ديلاي وده نوعا ما الوقت اللي احنا خدناه عشان نبدا ندكفر ده. هنلاقي ان احنا الهدف من الستيج دي ان احنا نحاول نلود ال سي بي ونخلي ال سي بي يبدا لودنج از اس بوسبل فالايال تايم خالص ان هو يبدا لود مجرد ما بتاعنا يبدا يرجع فبالتالي انت محتاج تخلي ال سكانرز او البري لود سكانر اللي عندك يبدا يسكان الايمج او يبقى سهل عليه يعرف ان الرسورس ده هو محتاج يجيبه ومحتاج يجيبه دلوقتي. لو بصينا على الجراف اللي فات هلاقي ان ال سي بي نوعا ما تاخر شويه على اول كوست او اول رسورس تنفذ في البيدج فبعد ما بتاعنا رجع كان في رسورس ثانيه ظهر زي ما ظهر عندنا هو الفيرست رسورس
[10:02]ست وال سي بي اتاخر عنه شويه فبالتالي الوقت بين ال سي بي الرسورس ان هو ست والوقت اللي الفيرست الرسورس بدا ست هو ده ان احنا نحسن فيها الرسورس لود ديلي. طيب لو جينا بصينا على الاسباب اللي نوعا ما بتاخر الرسورس لود تايم هلاقي ان هما سببين اساسيين. الاولاني هو امتى احنا بنبدا ندسكفر او البراوزر بيبدا يدسكفر ان هو محتاج يلود الرسورس ده فبالتالي مهم جدا ان البراوزر يبدا يعرف اس اس ان الريكوست ده مهم فبالتالي ابدا لوده في اسرع وقت ممكن. الحاجه الثانيه هو البري بتاع الرسورس يعني ممكن عادي البراوزر يقدر يدكفر الرسورس ده فيعرف ان هو مهم بالنسبه لك ولكن البراوزر بيعدي على كل رسورس من الحاجات اللي المفروض ست ويبدا يديها نوعا ما بري فيقول الراجل ده كريتيكال قوي في الرنج بتاعي او لا مش كريتيكال فبالتالي انا هديله بري اقل فبالتالي مهم قوي او من المشاكل اللي كانت بتحصل ان ممكن البراوزر يدكفر الرسورس بتاعك بدري ولكن البري اللي بت اسين للرسورس ده بتكون قليله فبالتالي ترتيب او اولويه البراوزر ان هو يد الرسورس دوت بتكون متاخره. فنوعا ما الحلول جايه من المشاكل احنا عندنا المهم بالنسبه لنا ان احنا نخلي الرسورس بتاعنا ديسكفر نوعا ما في الاتش تي ام ال بدل ما كانت الحاجه اللي ان الرسورس ده مهم بالنسبه لك او محتاج يرجع كان الجافا سكريبت فايل لا احنا هنحاول نعمل حاجه نخلي نوعا ما الايمج او الرسورس بتاعك موجود في الاتش ام ال فمجرد ما البراوزر يبدا يرجع له الاتش ام ال او الال اتش ام ال يبدا بالبري لود سكانر يسكان ان في ريسورس مهم والرسورس ده ليه نوعا ما بري عاليه فاحنا ممكن انكريز الرسورس بري نقول له بقول لك ايه البري بتاع الرسورس ده هاي فبالتالي مهم جدا ست اكتشفه بدري وست بدري.
[11:46]الحاجه الثالثه معانا هو ان ساعات برده في البنت او في البنت دوت بيكون او بيكون في اورجن مختلف فتخيل مثلا ان الويب سايت بتاعك او الاورجن بتاعك اسمه اكس دوت كوم ولكن الايمج بتاعتك معمول لها هوست في واي دوت كوم فبالتالي فكره ان هي هوست في دومين مختلف هيخلي البراوزر يعمل كل ستبس اللي اتكلمنا عليها في فكره وفكره كونكتنج مع الدومين دوت او مع الهوست ده علشان يبدا يعرف او يد الرسورس ده.
[12:31]ثالث ستيج معانا وده اللي احنا عايزين اوبتمايز هو فكره الرسورس لود تايم فبالتالي هو الوقت اللي احنا بنبدا ناخده من اول ما الرسورس بدا ست لحد ما الرسورس بتاعنا ده بدا يرجع فبالتالي هو الوقت اللي نوعا ما بناخده عشان نلود الرسورس ده طيب بما ان اغلب ال سي بي المنت لو ما كانش تكست بتكون ايجز هتلاقي ان اغلب الحلول بتفكس على فكره احنا ازاي نوبتمايز السايز بتاع الرسورس ده فعلى سبيل المثال لو كانت ايج انت محتاج تستخدم يعني سايز مناسب ممكن تكون عندك الايمج بتتعرض في مثلا يعني 30 في 30 ولكن الايمج بتاعتك اصلا 1000 في 1300 فبالتالي انت بتست بتكوست ايج بسايز كبير جدا وانش الفاينال شن او الحاجه اللي هتتعرض لليوزر على السكرين صغيره جدا فبالتالي انت محتاج تختار اوبتيمال ايج سايز للامج بتاعتك. الحاجه الثانيه برده انت ممكن تكون مستخدم ايج فورماتس قديمه شويه او مش اوبتمايز فعلى سبيل المثال دلوقتي البراوزر بقى بيسبورت حاجه اسمها بي ده بقى مودرن ايج فورمات بيساعدك او نوعا ما السايز بتاعه او الكبرشن ليفل اللي بيحصل عليه بيكون سريع فبالتالي دوت او ست ده اوفر بيكون نوعا ما اسرع. الحاجه الثالثه هو ان انت بتاعتك السايز اللي على يكون قليل فبالتالي الوقت اللي بتاخده عشان داونلود او تلود بتاعتك ده يكون اقل بشويه. الحاجه الثانيه هو المسافه اللي رسورس نوعا ما بيقطعها من اول البراوزر لغايه السيرفر بمعنى ايه بمعنى ان ممكن يكون السيرفرز بتاعتك دايما بعيده عن اغلب الكلاينتس فبالتالي الراوند تريب او الوقت اللي بياخده علشان اروح للسيرفر ده وابدا ادونلود الحاجات الراوند تريب ده بيكون وقت واكبر دائما ان احنا نحاول نستخدم سي دي ان بحيث ان هي تبقى متوزعه قريب من الك بتاعتك او بتاعتك فبالتالي تايم نوعا ما يكون قليل. طيب الستيج الرابعه ان خلاص المنت عندك دلوقتي فبالتالي الوقت اللي احنا بنتكلم عليه او الستيج اللي بنتكلم عليها هو الوقت اللي بناخده من اول ما المنت يبقى عندنا او الرسورس نفسه يبقى عندنا لحد ما الرسورس ده يبدا يتعرض على السكرين. في اسباب كثيره للديلي ده ابسطهم ان انت بتستنى جافا سكريبت كود علشان كنترول نوعا ما الحاجات اللي بتطلع او كنترول ده تخيل مثلا احنا عندنا جافا سكريبت كود موجود علشان يهندل اي بي تستنج حاجه زي اكسبرمنت كده انا على سبيل المثال جزء من الكاسترز بتوعي هيشوفوا الصوره الفلانيه جزء من الكاسترز بتوعي هيشوفوا صوره ثانيه خالص. فبالتالي ممكن يكون في جافا سكريبت كود او ممكن يكون في المنت هيدن بيهند جافا سكريبت كود فبالتالي حتى لو الرسورس موجود والجافا سكريبت بتاعك ده مش موجود انا محتاج استنى لما جافا سكريبت يبقى فولي رندر اتكيت علشان احدد هو الايمج دي هتطلع ولا لا فبالتالي دايما بنحاول نعمله انت تحاول تخلي شونج الحاجات دي او الوقت اللي بناخده او كل الرسورس او كل الكود اللي محتاجه يكوت علشان يحدد ال سي بي ده هيطلع ولا لا يكون افل ان البراوزر ده بقى موجود عندك. طيب ترانليت المشاكل ديت بيترجم فيه زي ما كنا بنتكلم احنا عندنا حاجه اسمها رندر بلوك المنت ده المنت اللي بلوك الرنج او شو ده فانت عندك حلين اول حاجه يا اما تريس دي قلل حجمها او شيب بس الحاجات اللي اليوزر محتاجها او الحاجه الثانيه اللي كنا اتكلمنا عليها في في الحلقه الثانيه انت الين دي سواء كان جافا سكريبت كود او سي اس اس كود بحيث ان هو يبقى موجود في البراوزر مجرد ما ده يكون رجع السبب الثالث ومن الاسباب المشهوره جدا اللي اتكلمنا عنها هو ان ممكن يكون حتى لما المنت كان موجود معنديش المنت سواء كان ستايلز او جافا سكريبت ممكن يكون البراوزر مشغول بحاجات ثانيه بيعملها فبالتالي يكون عنده لونج تاسكس حجمها اكتر من 50 فبالتالي الوقت دوت علشان يبدا يبقى فاضي ويبدا ياخد حاجه ثانيه من الكيو فيبدا يعرض الصوره بتاعتك يكون كبير فبالتالي هو بلوك باي تاسك ثانيه اوردي شغاله عليها فبالتالي هو مش قادر يروح يندر الرسورس بتاعك ده. طيب ملخص سريعا اللي اتكلمنا عنه النهارده اتكلمنا على ال سي بي كا اتكلمنا على ان هو بيتاثر بفاكتور كتيره وحاولنا نقسم الفاكت دي ليز مختلفه او سكشنز مختلفه بحيث ان اوب كل سكشن يكون اسهل علينا ويكون نوعا ما مرتبط بفاكتور معينه والفاكتور دي احنا قد نفكر فيها وقد. بس كده ده كان كل حاجه النهارده اشوفكم على خير مره جايه سلام عليكم.
