[0:00]سلام عليكم ازيكم يا جماعه، أنا عبدالله حمداني والخامس حلقة من حلقات Frontend Performance Power. هنكمل النهارده كلامنا على Core Web Vitals وهنتكلم على ثاني Core Web Vitals معانا وهو ال Cumulative Layout Shift. زي ما اتكلمنا قبل كده ال Cumulative Layout Shift أو ال CLS هو Metric المسؤولة على Indication لل stability بتاعت ال website بتاعنا. فهي Metric من اسمها بتساعدنا إن احنا نحاول نشوف قد إيه ال UI بتاعنا وال Web App بتاعنا Stable وبالتالي ال user experience أو اللي user بيقابله ما بيحصلش إن في Layout Shift أو ما بيحصلش إن في حاجات بتتحرك من مكانها بتؤدي إن ده بيحصل interruption أو بيسبب interruption لليوزر وهو بيتعامل مع ال website. طيب ال definition بتاع ال Layout Shift هو بيعبر على إن احنا كان عندنا element visible على ال viewport أو اليوزر already شايفه وحصل تغيير أدى إن ال starting position بتاع ال element ده اتغير. فعلى سبيل المثال ال top وال left position بتاع ال element ده كان موجود في مكان ونتيجة يعني تغيير أو نتيجة loading حصلت أدت إن ال position بتاع ال element دي اتغيرت. لو لاحظتوا أنا قلت إن ال Layout Shift هو حاجة بتحصل لل existing elements فبالتالي ال element الجديدة أو ال elements اللي ما تبقاش ظاهرة في ال screen ما بتأثرش على ال Layout Shift إلا لو هي طبعاً بتزق elements تانية أو بتحركها من مكانها أو بتؤدي إن في elements تانية ال position بتاعها اتغير. ولكن الحاجات اللي بت got counted أو بت got calculated as a Layout Shift هي دائما الحاجات اللي بتبقى ظاهرة لليوزر على ال screen في اليوزر شايف ال position بتاعها الأولاني ونتيجة التغيير ده شاف ال position بتاعها الجديد. نتيجة تغيير ال position ده هو ده ال Layout Shift. فلو جينا بصينا على ال two frames اللي عندنا دول هنلاقي إن ال frame الأولاني ال content كان موجود إن في element أو section معين اسمه A ونتيجة تغيير إضافة section جديد هو اللون الأحمر اللي على ال frame 2 أدى إن ال element اتغير. ال Layout Shift هنا هو مش الحاجة الحمرا على قد ما هو التغيير في ال position لل section اللي اسمه A فنلاقي إن التغيير بتاعه هو اتزق لتحت شوية فنتيجة التغيير ده هو ده المقصود بال Layout Shift أو المقصود بال instability بتاعة ال website بتاعنا. المشكلة الأساسية في ال Layout Shift زي ما كنا بنتكلم إن هو بيأثر على ال user experience في ال website بتاعك. فتخيل كده اليوزر في ال website بتاعك وناوي ياخد action نتيجة Layout Shift حصل زي ما شايفين دلوقتي طلع banner أدى إن حصل shifting لكل ال elements أو لكل ال buttons نزلت تحت فبدل ما اليوزر كان ناوي يدوس على cancel هو داس على place my order. فده خلى اليوزر عمل action هو ما كانش ناوي يعمله فبالتالي ده اداله indicator أو اداله user experience سيئة جدا وده ما كانش expected وده كله حصل نتيجة إن حصل insertion ل element جديد ال element ده أثر إن كل ال elements اللي تحته حصلها Layout Shift. في أسباب كتيرة بتحصل بتأثر على ال Layout Shifts بتاعتنا أو ال Cumulative Layout Shift score في ال website بتاعتنا ولكن الأسباب دي ممكن اختصرها تحت two main categories. ال category الأولاني هو إن ال resources بتاعتنا تكون بت load بشكل asynchronously فده معناه إن ال resource مش موجود بشكل immediate وانت بت render ال website بتاعك فبالتالي ده بيحصل ك second step أو step بعد كده فده بيؤدي إن ممكن يكون ال resource ده مش ظاهر على ال screen أو مش واخد dimensions فلما ال resource ده يبدأ load أو يبدأ got resolved يؤدي إن يحصل Layout Shift أو يأثر على ال elements التانية اللي موجودة. ال category التاني إن يكون عندنا DOM elements بتضاف بشكل dynamic في ال pages بتاعتنا أو في ال website بتاعتنا. ده ممكن يكون نتيجة user interaction أو ممكن يكون نتيجة إن بتظهر ب conditions معينة لما بتحصل ال conditions ديت ال UI ده بيبدأ got rendered. ال categories دي ممكن نقسمها لأسباب ولكل سبب منهم هنتكلم عنه بالتفصيل ولكن سريعاً كده احنا عندنا ثلاثة main reasons أو ثلاثة main contributors ل فكرة إن يحصل Layout Shift في ال website بتاعك. هيبدأ نتكلم عنهم بالتفصيل ولكن سريعاً كده هم إن يكون عندنا image أو video with unknown dimensions. ال dimensions بتاعتها مش معروفة هنشوف ده برضه أكتر. تاني حاجة إن يكون عندك fonts ب got rendered بحجم أكبر أو حجم أصغر من ال initial font size. الحاجة التالتة إن يكون عندك third parties أو iFrames أو حاجات ب got embedded في ال website بتاعك ما بتكونش برضه defined في ال UI أو defined في ال document بتاعتك فلما بيحصلها resolving بتؤدي إن ال website بتاعك بيشفت شوية حاجات بيأثر على شوية elements فهيبدأ يسبب Layout Shifts كتير. عشان نعرف ن optimize ال Layout Shift محتاجين نفهم هو ال Layout Shift نفسه ك score بيتحسب إزاي وإزاي التغيير كل content أو تغيير ال position بتاع كل content بيأثر على ال final number بتاع ال Cumulative Layout Shift. During ال life cycle بتاعت ال page بتاعتك ال browser بيبدأ يقسم ال actions أو ال shifts اللي حصلت في ال website during ال life cycle دي لشويه sessions. كل session بيكون فيها Layout Shift حصلت فيها بيبدأ ياخد ال Cumulative Layout Shift أو ال score بتاع ال Cumulative Layout Shift هي أكبر window حصل فيها accumulation أو تجميعة لل Layout Shift اللي حصلت within ال session window دي. طيب تعالوا نعرف هو إيه ال session window عامة؟ ال session window هو زي ما كنا بنتكلم هو time interval صغيرة كده حصل فيها Layout Shifts بحيث إن أو الشرط الأساسي اللي بيحصل إن ال Layout Shifts دي تحصل ورا بعض ب time difference ما يعديش ال ثانية. ف Layout Shift حصل ال Layout Shift التاني حصل وراه بوقت أقل من ثانية وكل الكلام ده during period أو time span ما تعديش خمس ثواني فده ببساطة تعريف ال window. فاللي بيحصل إن انت بيكون عندك كذا window أو during ال windows دي بيبدأ خلال كل window نجمع ال accumulation أو ال summation بتاعة كل ال shifts اللي حصلت during ال window دي وبعد كده during ال life cycle كلها نبدأ نختار أو نبدأ نقول إن ال Cumulative Layout Shift score هو ال window اللي ليها أكبر summation لكل ال Layout Shifts within ال window دي. طيب احنا قلنا إن ال Cumulative Layout Shift score هو ال window اللي كان فيها أكبر summation لل Layout Shift اللي حصل لل individual elements بحيث إن ال time بينهم ما يعديش ثانية. طب تعالوا نشوف هو ال Layout Shift الواحد لو أنت عندك element اتغير ال position بتاعه من مكان لمكان إزاي التغيير ده هل ده لما يتغير من ال مكان بتاعه لأي مكان في ال page هياخد نفس ال score ولا لأ وإيه ال factors اللي بتأثر في ده؟ لو جينا بصينا على ال equation ال simple بتاع ال Layout Shift score هنلاقي إن هو فيه two metrics. أول حاجة حاجة اسمها ال Impact Fraction وتاني حاجة حاجة اسمها ال Distance Fraction. أول factor معانا في ال equation بتاعت ال Layout Shift score هو ال Impact Fraction. ال Impact Fraction المقصود به أو زي من اسمه هو ال impact بتاع ال shift اللي حصل دوت على ال viewport فانت بيكون عندك ال screen أو ال visible area لليوزر ال element كان في position معين واتحرك من ال position اللي كان فيه ل position تاني within نفس ال viewport دي أو within ال viewport. عايزين نشوف ال impact أو ال impact fraction بيقيس إيه؟ بيقيس ال total impact أو ال combination بتاعت ال area اللي كان موجود فيها ال element الأولاني وال area اللي كان موجود فيها ال element التاني. في ال example ده هنلاقي إن احنا عندنا على الشمال كان في content ال content ده كان واخد 50% من ال viewport. على اليمين حصله Layout Shift أو حصله shift أياً كان السبب اللي حصل ولكن المهم نعرفه إن ال element ده حصله shift بنسبة 25% أدى إن ال element اتحرك بدل ما هو كان في أول ال viewport بقى shifted لتحت شوية بنسبة 25%. فال Impact Fraction المقصود به هو ال combination بتاعت الاتنين أو إيه ال area اللي أثرت؟
[7:05]فنلاقي إن هو ال area دي كأنها مجموع ال two areas أو مجموع ال two sections اللي كانوا موجودين على الشمال كان 50% وعلى اليمين هو نزل تحت شوية عن ال 50% الأولانية بنسبة 25%. فلو كأنك جمعت ال two frames مع بعض أو دمجتهم مع بعض وشفت ال summation بتاع ال element الأولاني وال element التاني هنلاقي إن هو مأثر في ال frame أو ال border الأحمر اللي احنا عاملينه ده وده تقريباً 75% من ال viewport أو ال visible area اللي كان اليوزر شايفها. فده معناه إن ال Impact Fraction في الحالة بتاعتنا نتيجة ال shift دوت هو 0.75. تاني factor معانا في حساب ال equation هو ال Distance Fraction. ال Distance Fraction المقصود به إن انت ببساطة إيه المسافة اللي ال element ده اتحركها أو أكبر مسافة اللي ال element ده اتحركها سواء في ال X-axis أو ال Y-axis مقسوم على أكبر dimension في ال viewport بتاعنا. تعالوا ناخد example. لو جينا تاني لل example اللي كنا بنتكلم عنه من شوية هنلاقي إن ال element هو كان واخد 50% من ال viewport حصله shift نتيجة أياً كان السبب اللي حصله ولكن هو في الآخر اتزق لتحت شوية بنسبة 0.25. فالمسافة اللي اتحركها ال element ده سواء في horizontal أو vertical direction هو 0.25 لإن احنا زي ما كنا شايفين هو اتحرك لتحت ما اتحركش يمين ولا شمال فبالتالي ممكن نقول إن ال horizontal space اللي اتحركها هي zero وبالتالي أكبر مسافة اتحركها ال element دوت هو 0.25.
[8:22]لو جينا بصينا على ال equation اللي كنا بنتكلم فيها أول حاجة ال Impact Fraction في ال example اللي احنا قلناه هو ال total أو ال combination بتاع ال two areas اللي ال element ده مأثر فيها فهو كان 0.75 وال section التاني بتاع ال Distance Fraction وهي أكبر مسافة ال element بتاعنا ده اتحركها في مقسوم على أكبر viewport أو أكبر dimension في ال viewport بتاعتنا هو 0.25. هو لما اتزق لتحت فنلاقي إن ال total score بتاع ال Layout Shift دوت هو ال 0.25 بتاع ال Distance Fraction مضروب في ال 0.75s بتاع ال Impact Fraction فده الرقم في الآخر اللي بيمثل ال shift اللي حصل ده.
[9:03]غير يعني كذا shift يحصلوا مع بعض بيحاول نجمع ال score بتاع ال shifts دي within window معينة ونختار أكبر window حصل فيها Layout Shift وده اللي بيمثل ال score بتاع ال Cumulative Layout Shift. ال Cumulative Layout Shift أو ال CLS زيه زي ال Core Web Vitals التانية جوجل بدأت تحط metric لكل range من ال ranges بتاعتها فبتقول إن ال good علشان ال Cumulative Layout Shift بتاعك في ال website يكون good لازم يكون أقل من 0.1. من 0.1 ل 0.25 يكون محتاج enhancement أكتر من 0.25 ك Cumulative Layout Shift within أكبر window ده معناه إن هو poor. برضه سريعاً تاني عشان نفتكر دي أهم الأسباب اللي بتأثر على ال Cumulative Layout Shift بتاعتنا ونبدأ نبص عليهم واحدة واحدة ونشوف إزاي بيأثروا على ال Cumulative Layout Shift score وإيه الحاجات اللي احنا ممكن نعملها تساعدنا إن احنا نحسن كل Metric من ال metrics دي. واحد من ضمن أشهر الأسباب اللي بتأثر على ال Cumulative Layout Shift أو بتسبب Layout Shift في ال website بتاعتنا هو إن ال videos أو ال images بتاعتك ما يكونش ليها dimensions. فاللي بيحصل إن أنت ما بتبقاش محدد dimension أو width أو height لل image أو ال video أو ال resource ده initially فبالتالي بيبقى واخد تقريباً zero width zero في zero فبالتالي أول ما ال resource ده يبدأ got rendered أو يبدأ يطلع على ال screen أو يبدأ يكون موجود أو downloaded يبدأ ياخد ال actual size أو ال actual dimensions بتاعته. فده اللي بيؤدي إن تلاقي مرة واحدة الصورة ظهرت وأدت إن كل الحاجات اللي تحت المكان بتاع الصورة دي حصله Layout Shift أو حصله تغيير في ال position بتاعه. فدايماً من الحاجات اللي suggested إن انت تكون بتستعمل أو بتكون بتحط initial width أو height لل image بتاعتك أو ال video أو ال resource علشان at least ال browser يبقى فاهم إن ال ratio أو ال dimensions بتاعت ال screen دي أو بتاعت ال resource ده ممكن تتغير في أي وقت.
[11:36]لو جينا بصينا على ال two examples اللي عندنا دولا اللي على الشمال ما كانش already محدد dimensions للصور بتاعته. فبالتالي أول ما بدأ ال content يبدأ يجي هتلاقي حصل Layout Shift أدى إن ال content اللي تحته أو ال text اللي تحته كله بدأ يحصل له shifting لتحت. على اليمين هتلاقي إن من الأول خالص كان في مكان كده فاضي تحت أو فوق نوعاً ما ال text وأول ما ال images بدأت ترجع حصل بس replacement للمكان الفاضي دي وبدأت تاخد مكانها الصور.
[12:12]فتلاقي نوعاً ما إن ال stability بتاعت ال website اللي على اليمين أحسن بكتير أوي من ال stability بتاعت ال website اللي على الشمال وبالتالي ده هتلاقيه كمان بي reflect على الأرقام بتاعت ال Core Web Vitals. فلو جينا بصينا على ال Cumulative Layout Shift اللي على الشمال هتلاقي إن هو 0.365. بعد كده أو بعد ما عملنا الموضوع إن احنا بس حطينا initial width و initial height لل image أو ال resource دوت أدى إن ال Cumulative Layout Shift نزل ل 0.1. واحدة من ضمن أسهل وأقوى ال tricks اللي ممكن تعملها في موضوع ال Cumulative Layout Shift إنك تتأكد إن ال content أو كل ال resources اللي عندك واخدة initial width و initial height.
[12:51]فبالتالي لما ال element ده got resolved يبدأ يظهر على ال screen فبالتالي بس بيحصل replacement للمكان الفاضي اللي هو كان allocated ليه بالفعل بال resource نفسه فبالتالي زي ما أنت شايف الفرق بين اليمين والشمال في على اليمين ال table أو يعني ال website بتاعنا stable جدا وعلى الشمال ال website تحس إن هو flaky أو unstable مجرد ما ال image جت كل ال content حصله shifting فبالتالي ده كمان أثر على ال Cumulative Layout Shift score. تاني سبب من الأسباب معانا إن انت يكون عندك ads أو embeds أو نوعاً ما content بيتأخر في فكرة إن هو يظهر على ال screen فدايماً ال ads من الحاجات القوية جدا اللي بتحسن نوعاً ما ال business وبترجع revenue لل website دوت ولكن من أكتر الحاجات برضه اللي بتأثر على ال user experience وممكن تسبب friction لليوزر وهو بيتعامل مع ال website بتاعه. عندنا solutions كتيرة في التعامل مع فكرة ال ads أو الحاجات اللي ب got embedded جوه ال website بتاعك تعالوا نبصوا عليهم واحدة واحدة. من أشهر الحاجات دي هو في فكرة زي ما كنا بنتكلم من شوية في ال images تعالى ن allocate مكان أو ن allocate space لل elements دي فنقول خلاص ال element ده أنا هقول إن هو ليه minimum height كذا أنا ب assume أو احنا زي ما كنا بنتكلم مشكلتنا إن أنا مش عارف بالظبط ال height بتاعه كام أو ال dimensions بتاعته كام فانا assume إن الراجل ده ليه minimum height كذا ف ال minimum height ده أنا ه allocate ليه.
[14:06]فبالتالي ده نوعاً ما بيقلل شوية من ال shift اللي حصل هو ما حصلش shift ل element تحت قوي أو أثر بال content تحت قوي هو زقهم ولكن ما زقهمش ب ratio كبيرة أو ب factor كبير. لو جينا بصينا على ال example للموضوع ده هنلاقي إن احنا في أول screen هنا ما كانش لسه عندنا ال ad already loaded أو ال content بتاعه لسه ما جاش. مجرد ما ال ad في ال screen التانية بدأ يظهر هنلاقي إن هو عمل shift لكل ال content اللي كان موجود على الشمال فبالتالي ده هيأثر على كل ال elements اللي كانت تحت أو اللي بقت تحت ال ad ده فبالتالي ال Cumulative Layout Shift للحته دي هيبقى نوعاً ما سيء جدا. لو جينا بصينا على ال screen التالتة اللي احنا اللي احنا عملناه simply إن احنا حطينا minimum height لل ad دوت أنا ما أعرفش هو ال ad أكبر أو أقل أو exactly لو قدرت أعرف نفس الرقم ولكن أنا حطيت placeholder أو حطيت minimum height هقول إن خلاص أنا ه assume إن ال ad ده بياخد minimum height كذا فبالتالي لما حصل إن ال ad يبدأ got downloaded أو يبدأ يظهر على ال screen ال shift اللي هيأثر عليه يا إما مش هيبقى shift خالص لو انا قدرت بالظبط أحط ال placeholder بنفس ال height بتاع ال ad لو أنا كنت عارف المعلومة ديت أو حصل shift قليل جدا فبالتالي برضه أنت still قللت ال Cumulative Layout Shift في الحتة دي. واحد من ضمن الحلول برضه اللي ممكن تتعامل بيها مع فكرة ال ads أو الحاجات اللي بت تتأخر في فكرة ال loading أو ال dynamically imported content يعني هو فكرة إن انت تخلي ال content ده نوعاً ما مش ظاهر لليوزر. فأنت دايماً أول ما ال page بت load بيكون في content ظاهر لليوزر ده ال initial page load. لو أنت قدرت تخلي ال content اللي بيقعد يبوش ويحرك ال elements تحته تحت ال viewport ده فبالتالي نوعاً ما حتى لو في Layout Shift هو مش هتبقى ظاهرة لليوزر فمش هتبقى frustrating وفي نفس الوقت لو هي مش بتأثر على ال content التاني هت end up إن أنت ده قللت شوية من ال impact بتاع ال shifts دي على ال Cumulative Layout Shift. تالت solution من ال solutions اللي معانا ودي من ال solutions ال smart جدا إن انت طب ثانية واحدة أنت لو عندك ال content ده بيظهر مرة واحدة أو content pushy وتقدر تخليه ما يبقاش جوه ال document flow يعني إيه مش جوه ال document flow يعني overlayed على ال content. لو جينا بصينا على ال example دوت هنلاقي إن احنا عندنا نوعاً ما ال website ب request access على ال cookies أو بيقول لليوزر accept ال cookies دي أو rejectها أو اعرف تفاصيل اكتر. هنلاقي إن هو هو كان ممكن نحطه ك banner أو ممكن نحطه ك حاجة كده بتظهر لليوزر فيدوس عليها ولكن بما إن الموضوع دوت علشان نحله هو استخدم هنا ال technique بتاع ال overlay فخلى ال content ده كأنه overlay فكأنه content stacked فوق ال content already موجود فده مش بيأثر على ال flow بتاع ال document فبالتالي هو مش بيؤدي إن في أي element حصله shifting فبالتالي ال Cumulative Layout Shift أو العدد ال shifts اللي حصلت نتيجة ال content ده قليلة جدا. نفس الكلام في ال example التاني والتالت كلها مبنية على فكرة إن انت عندك overlay بيطلع ال overlay ده مش محطوط في ال document flow الأصلي فبالتالي ده مش بيؤدي إن في أي element حصله shifting فبالتالي ال Cumulative Layout Shift أو العدد ال shifts اللي حصلت نتيجة ال content ده قليلة جدا. رابع solution معانا وهو فكرة إن أنت تخلي ال content بتاعك اللي بيؤدي أو اللي بيسبب Layout Shift بيبقى بيظهر based على trigger من اليوزر على سبيل المثال. أوقات كتيرة بيكون عندنا websites ال websites دي مثلاً فيها load more أو فيها حاجات محتاجة user interaction زي مثلاً أنت في تويتر ممكن تلاقي نفسك بت shift أو بتؤدي إن أنت حطيت ال content على ال new posts تحت ال posts اللي موجودة that's fine. الحاجة التانية اللي ممكن تعملها إن أنت تحاول تحط trigger لليوزر فتلاقي مثلاً بيطلع هنا overlay button على الشمال بيقول لليوزر بقول لك إيه هو في tweets جديدة فهو مجرد ما يدوس على ده اليوزر نفسه أو إحساس ال Layout Shift بالنسبة لليوزر هو بقى متوقع فاليوزر هو عارف إن هو يعمل interaction هتؤدي إن هو يحصل scroll up ويحصل إضافة ل content كتير. فعلى يعني بغض النظر إن حصل already content أو حصل Layout Shift إن في content هيضاف فوق فبالتالي هو أثر على ال content اللي تحته ولكن اليوزر ده بقى متوقع اللي هيحصل فبالتالي تأثيره أو اليوزر experience بتاعته في ال Layout Shifts دي بقت أحسن. بغض النظر عن الطريقة اللي أنت هتستعملها حاول بس تفهم مع كل use case من ال use cases دي إيه ال possible solution بحيث إن انت تحاول تختار ال solution المناسب أكتر لل use case بتاعتك واللي هتؤدي إن اليوزر نفسه أو ال expectations بتاعت اليوزر من ال website بتاعك ما يشوفش حاجات flaky أو ما يشوفش حاجات بتتقعد تتغير من مكانها وفي نفس الوقت ده بيأثر على ال Cumulative Layout Shift score إن هو يكون نوعاً ما قليل. السبب التالت هو واحد من ضمن الأسباب المشهورة جدا اللي بتؤدي إن في يكون Cumulative Layout Shift score كبير نوعاً ما إن أنت يكون عندك web fonts ال web fonts دي already قبل ما تبدأ ت load بيبقى already في web font تاني اللي هو ال default بتاع ال browser بيبقى loaded.
[18:42]فلو في difference كبير بين فكرة إن ال content أو ال font اللي loaded ده وبين ال font اللي أنت already لسه هت download أو مستخدمه في ال website هتلاقي إن في اختلاف ال size بتاع كل font منهم واختلاف شكل ال font ممكن يأثر إن ال content يبقى واخد مكان مجرد ما ال font الجديد أو ال font اللي أنت عايزه يبدأ يرجع يبدأ يحصل resolving لده أو يبدأ يحصل rendering ل ال font الجديد فيعمل shifting شوية لل content اللي موجود.
[19:08]فمهم جدا في الحالات دي إن انت تحاول تستخدم web font أو fallback font قريب شوية من ال font الأصلي أو ال font اللي أنت already عايزه أو هتبدأ تستخدمه في ال website بتاعك بحيث إن ال difference في ال size بتاع كل font replacement ده مع ال font القديم يكون قليل فاليوزر ما يحسش إن في Layout Shift أو ال total score بتاع ال Layout Shift يكون قليل. من الحاجات برضه المهمة اللي انت ممكن تعملها زي ما كنا بنتكلم على فكرة ال critical rendering path في الأول أنت تحاول ت load ال critical resources بما إن ال font ده بقى من ال critical resources اللي بيسبب repainting تاني وبيسبب Layout Shift تحاول ت load الراجل ده ك preloaded فبالتالي تحاول ت load it as soon as possible بحيث إن هو مع ال first paint أو مع ال first rendering لل website بتاعك يكون already ال font ده موجود فده يقلل شوية من ال possible Layout Shifts اللي كانت ممكن تحصل نتيجة ال replacing ال web font ال default اللي كان موجود وال web font اللي أنت already عايزه أو هتبدأ تستخدمه في ال website بتاعك. طبعاً في أسباب كتيرة غير التلات أسباب السريعة اللي احنا اتكلمنا عليهم ولكن بال analysis ده كان أكبر تلات أسباب بيأثروا على ال Cumulative Layout Shift في ال website. سريعاً كده احنا اتكلمنا على إيه النهارده؟ اتكلمنا على هو إيه ال Cumulative Layout Shift اتكلمنا على هو إزاي ال score بتاع ال Cumulative Layout Shift بيتحسب شفنا ال equation اللي بتتحسب بيها وشفنا ال session window وإزاي اختلاف ال Cumulative Layout Shift score في كل session window بيأثر على الرقم النهائي. شفنا أهم الأسباب اللي نوعاً ما بتأثر أو بتسبب إن ال Cumulative Layout Shift بتاعك يكون قليل وحاولنا شوية نقول من أمثلة أو من الحلول اللي تخليك تحسن الأسباب دي وتحاول ت optimize اكتر ال Cumulative Layout Shift. دي كان كل حاجة النهارده أشوفكم على خير المرة الجاية سلام عليكم.
