تحميل CSS على الصفحة هو عملية حظر. إذا كان التحميل غير المتزامن لجافا سكريبت قد لا يكون مرئيًا للمستخدم ، فإن المظهر البطيء للأنماط يمكن أن يدفع ضيفًا صبرًا من الموقع. كيف يتم تحميل CSS بكفاءة وسلاسة قدر الإمكان للمستخدمين؟ تحاول نيكيتا دوبكو معرفة ذلكDarkMeFoDy من مجموعة واجهة بحث Yandex في مينسك.- تحية للجميع. سأخبرك عن الأنماط. يتحدث الجميع عن TypeScript و TypeScript اليوم. وسأتحدث عن البرنامج النصي على غرار Cascade.عن نفسي قريبا. أنا مطور بيلاروسي - بعد فيلم Dudya سأقول ذلك في كل مكان. ربما تكون قد سمعت صوتي في ملف بودكاست الخاص بمعايير الويب ، وإذا رأيت أخطاء مطبعية في موجز أخبار معايير الويب ، فمن المحتمل أن تكون أنا أيضًا.إخلاء المسؤولية الصغير. سيكون هناك العديد من الجنون في التقرير - تعامل مع كل ما أقوله بانتقاد كبير. فكر في سبب استخدامك لهذه التقنيات ، ولماذا لا تحتاجها. بعض الأشياء ستكون مجنونة حقًا. اذهب.لماذا؟
بادئ ذي بدء - لماذا نتحدث عن تحسين CSS على الإطلاق؟إذا بدأت البحث في محركات البحث لتنزيلات JS سريعة ، فهناك الكثير من النتائج. إذا كنت تبحث عن تحميل CSS سريع ، فلن يعرض الجزء العلوي CSS الذي تحتاجه.
إذا نظرت إلى Google ، فهناك 111 مليون نتيجة حول JS ، وحوالي CSS فقط 26 مليونًا.لذلك ربما هذا لا يهم؟ لماذا نتحدث عنه؟ إذا كنت تبحث عن تقارير أداء JS ، فستجد الكثير منها. هناك حول React ، حول جميع أنواع الأطر الأخرى ، حول Vanilla ، إلخ. ولكن حول CSS ، وجدت تقريرًا واحدًا فقط. يقرأ هاري روبرتس في 2018 تقريرًا رائعًا حول أداء CSS. اعتقدت أنني وجدت تقريرا ثانيابواسطة Roma Dvornova ، "Parsim CSS: نصائح وحيل الأداء". ولكن تبين أنه تقرير JS يوزع CSS. ليس بالضبط ما نحتاجه.اتضح أنهم لا يفكرون كثيرًا في CSS. إنه لعار.ولكن عندما أذهب إلى الويب ، عادة ما أرى HTML. وأرى أيضًا CSS الذي يصمم الصفحة. لكني لا أرى شبيبة. JS هو شيء ينقل CSS و HTML على الصفحة لجعل كل شيء يبدو جميلاً. هذا نص. وإذا لم يتم تحميل JS ، فهذا ليس سيئًا كما لو لم يتم تحميل CSS.تقع أخطاء JS بصمت في وحدة التحكم. ومن غير المرجح أن يدخل المستخدم العادي إلى DevTools ليبدو: "أوه ، لديك خطأ هناك في وحدة التحكم." ولكن إذا لم يتم تحميل CSS ، فقد لا ترى كل ما تحتاجه على الإطلاق.بالمناسبة ، هناك دراسات حول حقيقة أن الشيء الرئيسي هو ترك انطباع أول.38٪ من المستخدمين يمكنهم زيارة الموقع ، وإذا رأوا أنه مثير للاشمئزاز مباشرة ، فسيغادرون على الفور. و 88٪ سيتحملونه ويستخدمونه مرة واحدة ، وبعد ذلك لن يعودوا أبدًا ومن غير المحتمل أن يقدموا المشورة لموقعك.الآن بعد أن كنا جميعًا جالسين في المنزل ، ازدادت حركة الإنترنت بشكل خاص. ونحتاج إلى التفكير في كيفية تقديم أي موارد للمستخدمين بكفاءة.دعونا نحاول العد من وجهة نظر ياندكس. إذا استطعنا تحسين كل عملية تسليم لـ Yandex لمدة 100 مللي ثانية وتقديم 200 مليون صفحة في اليوم على سبيل المثال (لا أعرف الرقم الدقيق) ، فحينئذٍ سنوفر 0.1 ثانية * 200 مليون = 232 شخصًا في اليوم. فقط من خلال تحسين الناتج لمدة 100 مللي ثانية. و CSS تفعل ذلك أيضًا.دعونا نلعب بعض المحققين ونكتشف كيفية تحقيق أقصى استفادة من أنماط التحميل.قياس!
النصيحة الأولى هي قياس كل شيء دائمًا. لا فائدة من إجراء التحسينات نظريًا. يمكنك افتراض أن التحسين يعمل في حالتك ، لكن القياسات الحقيقية ستظهر أنه لا شيء من هذا القبيل. هذه هي القاعدة الأكثر أهمية لأي تحسين. تحدث أندريه بروكوبيوك من فريق SERP Velocity على HolyJS جيدًا عن كيفية القيام بذلك ، ولن أكرر نفسي.ما أدوات القياس الموجودة؟- إذا كنت تريد القياس على أجهزة حقيقية أكثر أو أقل ، وبطيئة ، وليست رائعة مثل أجهزتك ، فاستخدم WebPageTest . أنا عادة آخذ القياسات هناك.- لديك منارة إذا كنت تستخدم متصفحات تستند إلى Chromium. إنه ، مثل القياسات المحلية ، يظهر أشياء جيدة جدًا.- إذا كنت متأكدًا من أنه يمكنك القيام بكل شيء بنفسك ، فانتقل إلى DevTools إلى علامة التبويب "الأداء". يحتوي على الكثير من التفاصيل ، يمكنك بدء المقاييس الخاصة بك وتحليلها.
بطبيعة الحال ، في الأداء من الضروري وضع شروط حقيقية. أنت تجلس على جهاز الكمبيوتر المحمول الرائع الخاص بك مع إنترنت رائع في المكتب ، كل شيء رائع هنا ، لكنهم يأتون إليك ويقولون: "أنا بطيء". وتقول: "كل شيء يناسبني". لا تقم بمثل هذا.حاول دائمًا التحقق من كيفية استخدام المستخدم لموقعك في ظروف مترو الأنفاق أو في مكان آخر. للقيام بذلك ، تحتاج إلى إعداد إنترنت بطيء للغاية. من المستحسن أيضًا إبطاء وحدة المعالجة المركزية ، لأن شخصًا ما يمكن أن يأتي إليك من بعض هواتف Nokia 3110. كما يحتاج أيضًا إلى إظهار الموقع.الأهم: قياس المستخدمين الحقيقيين. هناك مثل هذا المقياس ، بشكل أكثر دقة ، مجموعة كاملة من المقاييس - RUM ، مراقبة المستخدم الحقيقي. هذا هو الوقت الذي لا تقيس فيه ما يحدث صناعيًا في شفرتك ، ولكن تقيس المستخدمين الحقيقيين في الإنتاج. على سبيل المثال ، من تحميل صفحة إلى إجراء. الإجراء ، على سبيل المثال ، شيء يعمل في المتصفح أو حتى نقرة على عنصر مهم.تذكر أنك لا تتطور للروبوتات. Sotka in Lighthouse - إنه رائع ، إنه جيد حقًا. لذا ، فأنت تستوفي على الأقل المتطلبات التي تحددها المنارة. ولكن هناك مستخدمين حقيقيين ، وإذا كان المستخدم غير قادر على رؤية الصفحة عند التعافي في المنارة ، فأنت تفعل شيئًا خاطئًا.
هناك مقاييس مهمة للتركيز عليها. هذا هو First Contentful Paint ، عندما يظهر المحتوى الأول على صفحتك والذي يمكنك من خلاله فعل شيء ما ، اقرأ. يتم إرسال هذا المقياس في متصفحات Chromium ، ويمكنك الحصول عليه.
في الآونة الأخيرة ، لا يزال بإمكانك إلقاء نظرة على أكبر طلاء محتوى. غالبًا ما يكون لديك صفحة وسائط ، ومن المهم ، على سبيل المثال ، إلقاء نظرة على صورة عليها. ثم تحتاج إلى هذا المقياس المعين.تحميل CSS
دعنا ننتقل أخيرًا إلى CSS ، كيف يتم تحميل CSS. منذ فترة طويلة معروفة الاستقبالات. هناك مسار عرض حرج ، مسار عرض حرج. يتعلق الأمر بما يفعله المتصفح من لحظة إرسال طلب المورد إلى لحظة عرض وحدات البكسل على شاشة المستخدم. حول هذا أيضا ، هناك مجموعة من المقالات والتقارير. ولكن دعونا نلقي نظرة سريعة على كيفية قيام هذا المتصفح بذلك.<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS — </title>
<link rel="stylesheet" href="/main.ac74gsac.css">
</head>
يبدأ تنزيل HTML ، يرى العلامات. ويحللهم تدريجياً ويفهم ماذا يفعل بهم. الأحمال. جاء عبر الرابط. يجب استخدامه. ولكن كيف؟ تحتاج أولاً إلى تنزيله. التنزيل بطيء. عند التحميل ، يبدأ تحليل الصفحة أكثر. <!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS — </title>
<link rel="stylesheet" href="/main.ac74gsac.css">
</head>
<body>
<h1>-!</h1>
</body>
</html>
إذا تعثر على ارتباط آخر ، يتم حظره مرة أخرى ولا يسمح بالتنفيذ. كتل JS ، كتل التحليل. وحتى تقوم بالتمهيد ، لا تفعل شيئًا. ولكن بعد ذلك يبدأ العمل أكثر.<link>
دعونا نتعمق أكثر - ماذا يحدث عندما تصل إلى الرابط؟
التسجيل حيث نذهب هو المعيار. هناك نمط CSS موجود في مكان ما. أصبح من المألوف الآن وضع جميع الإحصاءات على شبكة CDN.اين نذهب؟
أولاً ، يحتاج المتصفح إلى فهم إلى أين يذهب.
يرى عنوان URL ، ويحتاج إلى فهم عنوان URL هذا - ما هو موضوعه؟ لقد اعتدنا على حقيقة أن عنوان URL هو معرف موقع.
ولكننا فعليًا نحتاج إلى الحصول على عنوان IP لعنوان URL هذا والانتقال إلى الجهاز الفعلي الحقيقي على عنوان IP.
بالنسبة إلى شبكة CDN الخاصة بك ، ستتلقى سجلًا في DNS وستنتقل مباشرة إلى عنوان IP. كيف يمكن للمرء أن يتسارع في هذه الحالة؟
فكرة مجنونة هي تقليل المسافة من المستخدم إلى خادم DNS. خذ وزرع المستخدم. على سبيل المثال ، لعرض الرسالة: "اجلس أقرب" أو "اقترب أكثر".يمكنك تحديد عنوان IP على الفور في الرابط. لماذا نحتاج إلى البحث عن DNS ، وحل المجالات ، إذا كان بإمكانك إعطاء النتيجة على الفور عن طريق عنوان IP؟ هذه طريقة مجنونة ، ولكن في حالة خوادم DDoS DNS العالمية ، يمكنها حتى توفيرك.ويمكننا التخلص من الحصول على عنوان IP.
بالانتقال إلى index.html أو إلى ملف آخر ، فأنت تعرف بالفعل عنوان المجال الذي تنتقل إليه. هذه هي الحالة فقط ، بدلاً من تخزين الإحصائيات على نطاق منفصل أو نطاق فرعي ، يمكنك وضع الإحصائيات بالقرب من نطاقك ، أي هذا المجال نفسه. ثم DNS لا يحتاج إلى حل ، فهو بالفعل.
اكتشفنا إلى أين نذهب. ولكن يمكننا القيام بهذه الأشياء مسبقًا للمتصفح. على سبيل المثال ، إذا تم تحميل ورقة الأنماط الخاصة بك في وقت لاحق عبر شجرة DOM ، فيمكنك إخبار المتصفح باستخدام <link rel = "dns-prefetch"> أن "لم أذهب إلى هناك بعد ، ولكنك ستسخن الموارد ، وسأحتاج إليها بالتأكيد لاحقًا ".مع هذا الإدخال ، تخبر المتصفح أن ينزل ويحصل على DNS هذا. عندما يظهر الرابط في الرمز ، سيعرف المتصفح بالفعل عنوان IP لهذا المجال. يمكنك أن تفعل مثل هذه الأشياء الأولية. نفس الشيء ، على سبيل المثال ، قبل دخول الصفحة التالية ، حيث ستذهب بالتأكيد.حسنًا ، المتصفح يعرف إلى أين يذهب. يحتاج أن يفهم كيف يذهب.كيفية الذهاب
نحن نراقب البروتوكول. الآن ، بالطبع ، https هو مطلب مباشر. سيؤدي تضمين محركات البحث إلى وضع علامة على مواقعك ليست على https مع النماذج بأنها ليست آمنة تمامًا.لقد وجدت سلسلة مذهلة من القصص المصورة حول كيفية عمل اللوحة https. لكننا أشخاص في مجال تكنولوجيا المعلومات ، نحن نحب الرسوم التخطيطية المعقدة الرائعة ، والرسوم الهزلية المضحكة سهلة للغاية.
لقد قمت هنا بصياغة كيفية عمل https. أولاً تحصل على شهادة SSL من خادمك. ثم يجب عليك التحقق من الشهادة في مرجع مصدق. هذه خوادم خاصة تعرف ما هو صالح وما هو غير صالح ، ويمكنها مطالبة المتصفحات: "نعم ، كل شيء على ما يرام هنا ، استخدم هذه الشهادة".التالي هو توليد مفاتيح الاتصال بين الخادم والعميل ، والتشفير ، وفك التشفير باستخدام مفاتيح مختلفة. العملية مثيرة للاهتمام إذا نظرت إليها من حيث التشفير. لكننا نريد تسريع. كيف؟
يمكننا مرة أخرى نقل المستخدم أقرب إلى الخوادم. لدينا بالفعل نظام أسماء النطاقات ، الآن يمكننا وضعه بالقرب من المرجع المصدق. ووضعها بين هذه الخوادم سيكون مثاليا.يمكنك الانسحاب من https ، لماذا نحتاجها؟ نقضي الوقت في الحصول على شهادة ، تشفير ، فك تشفير. ليس صحيحا. هذه هي النصيحة الأكثر ضررا في التقرير ، لا تفعل ذلك. https هو حماية بيانات المستخدم ، وبدون https لن يعمل http / 2 ، و http / 2 هي طريقة أخرى لتسريع.هناك أيضًا تقنية OCSP Stapling. يمكنك التحقق من شهادة بدون مرجع مصدق. ربما يكون هذا أقرب إلى DevOps. تحتاج إلى تكوين الخادم الخاص بك بطريقة معينة حتى يتمكن من تخزين استجابة سلطة إصدار الشهادات وتخزينها للمستخدم: "صدقوني ، شهادتي حقيقية". وبالتالي ، يمكننا أن نوفر على الأقل الخطوة التي ننتقل بها إلى المرجع المصدق.ولكن هناك فارق بسيط - في Chrome هذا لا يعمل ، ولفترة طويلة. ولكن بالنسبة لمستخدمي المتصفحات الأخرى ، يمكنك تسريع هذه العملية.سبق أن قلت مرتين أنه من الضروري نقل المستخدم ، والفكرة ترتفع في الهواء - لتقريب الخادم من المستخدم. لم أكتشف شيئًا جديدًا لك. هذا هو CDN ، شبكة توزيع المحتوى الموزعة. الفكرة هي أنه يمكنك استخدام sidienki الجاهزة ، وإنشاء البنية التحتية الخاصة بك بشكل مستقل ووضع مجموعة من الخوادم حول العالم ، بقدر ما تسمح لك الأموال والفرص. ولكن عليك ترتيب الخادم بحيث ينتقل مستخدم من أستراليا إلى الخوادم الأسترالية. هنا تلعب سرعة الضوء عليك ، وكلما كانت المسافة أصغر ، كلما مرت الإلكترونات بشكل أسرع.دعونا نتعمق أكثر. ماذا يجري في الطلب؟ في الواقع ، https هو مجرد التفاف على http. ليس مجرد غلاف بارد. وإذا كان أعمق ، فإن http هو طلب من عائلة TCP / IP.
كيف يتم إرسال الحزم والبايت على الشبكة بحيث تتواصل جميع المتصفحات والعملاء والخوادم مع بعضها البعض؟ أول شيء يفعله العميل / الخادم عبر اتصال TCP / IP هو مصافحة.ولكن في عام 2020 ، توصي منظمة الصحة العالمية بتجنب المصافحة. هناك تقنية TCP Fast Open رائعة. يمكنك ، في وقت المصافحة ، تجنب السلسلة الكاملة "مرحبًا ، أنا عميل" - "مرحبًا ، أنا خادم" - "أصدقك" - "وأنا أصدقك. اذهب". يمكنك بالفعل إرسال بيانات مفيدة في هذه اللحظة. وإذا كانت المصافحة ناجحة ، فقد مر جزء من البيانات المفيدة. هذا هو TCP Fast Open.ماذا تلتقط؟
دعنا نكتشف ما يجب أن يلتقطه العميل من الخادم. الشيء الرئيسي ليس أن العميل يأخذ شيئًا من الخادم ، ولكن الخادم يعطي البيانات للعميل. ثم قد تعتقد: وكيل المستخدم. يمكنني الحصول على User-Agent من العميل ، ومعرفة المتصفح الذي قام المستخدم بتسجيل الدخول إليه. اكتشف ما إذا كان هذا المتصفح لا يخدعني..example {
display: -ms-grid;
display: grid;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
background: -o-linear-gradient(top, white, black);
background: linear-gradient(to bottom, white, black);
}
لنفترض أنه سجّل الدخول من Firefox. لدي ، كالمعتاد ، تجميع يتم فيه توصيل أداة الإصلاح الآلي بشكل متقلب ، وقد ولدت لي مجموعة من التعليمات البرمجية. نعم ، هذا نهج رائع أن كل شيء سيعمل في كل مكان. لكنني أعلم بالفعل أن المستخدم قام بتسجيل الدخول من Firefox.لماذا لا توقف كل الفائض؟ موافق ، هناك عدد أقل بكثير من الخطوط ، نرسل وحدات بايت أقل ، هذا رائع.لدينا نسخة خفيفة من SERP ، Granny. تحدث عنها فيتالي خاريسوففيثار، تقرير عن أيام معايير الويب. يستخدم هذا النهج بالضبط. يمكننا إنشاء العديد من الحزم ومنحها للعملاء المختلفين بطرق مختلفة. إن وزنهم أقل بكثير ، لأن Firefox يحصل على خاصته ، و WebKit خاص به ، وهو يعمل ، وقد تم التحقق منه.
بالإضافة إلى ذلك. نحن على الأرجح نعالج طلبات المستخدم ، ونحن نعلم أن الشخص مصرح له ويستخدم بعض المعلومات الشخصية له. من المنطقي أن نحصل على شيء من قاعدة البيانات. لكن ليس كل! هناك أشياء ثابتة لا تختلف لأي مستخدم ، فهي نفسها تمامًا.قرأ جيمس أكفوه تقريرًا رائعًا حول هذا الموضوع"التقديم من جانب الخادم. افعلها بنفسك". ماهي النقطة؟ أنت تعلم بالفعل أن لديك HTML ونوع CSS متماثل لجميع المستخدمين. قبل الانتقال إلى أي بيانات ، يمكنك إنشاء الإخراج من هذه البيانات الثابتة ، وإرسالها على الفور الأكثر فائدة في دفق من الخادم. وبعد ذلك - ابحث عن البيانات ، واستقبلها بسرعة ، وقم بتحويلها إلى قوالب وأعطها للعميل. وسوف يرى المستخدم شيئًا مفيدًا بالفعل.
ليس الأمر صعبًا. تحتاج إلى تكوين عدة رؤوس على الخادم ، وسيبدأ كل شيء في العمل. إذا كان المتصفح لا يعرف هذا العنوان ، فلن ينكسر شيء ، فهذا هو أجمل. دعونا نتعمق أكثر. TCP لقد تحدثنا بالفعل عن هذا: مصافحة ، يتم إرسال وحدات البايت.
اغسل يديك بعد مصافحة. ولكن من حيث TCP ، نبدأ في إعادة توجيه وحدات البايت ، ويتم تحسين الخوارزميات بما يكفي بحيث لا يقف خادم العميل في وضع الخمول.لذلك ، يتم إرسال مقطع بيانات معين أولاً. بشكل افتراضي ، (هذا يمكنك تغييره في الإعدادات) هو 1460 بايت. الخادم لا يرسل معلومات عن قطعة واحدة. يرسل النوافذ.النافذة الأولى 14600 بايت ، عشرة أجزاء. ثم ، إذا كان الاتصال جيدًا ، يبدأ في تكبير النوافذ. إذا كان الاتصال ضعيفًا ، فقد يقلل من النافذة. ما هو المهم أن نفهم؟ هناك النافذة الأولى المكونة من عشرة أجزاء ، والتي يجب أن تناسب الموقع بالكامل ، إذا أردت. ثم ستكون هناك سرعة قصوى لظهور المحتوى. قرأ فيتالي خاريسوف أيضًا تقريرًا عن هذا . ونعم ، من الممكن أن يتناسب الموقع مع كل ما تحتاجه في نافذة واحدة إذا قمت بإيقاف تشغيل ، على سبيل المثال ، JS.فارق بسيط مهم. عندما تملأ قطعة كاملة ، تكون قطعة واحدة. ولكن إذا قمت بإرسال بايت إضافي واحد فقط ، فسيظل الخادم يرسل شريحة إضافية كاملة.
يمكنك إجراء تحسين رائع ، وتقليل الناتج بمقدار كيلوبايت كامل ، لكنك لن ترى أي شيء على قياساتك - ربما بسبب ذلك. حاول إجراء التحسين بشكل طبيعي على عدة شرائح.غريب: أنا كاتب كتابة ، وأقول أشياء خادم معقدة كهذه. دعونا نقترب أكثر من CSS الحقيقي.شحن أقل
لذلك ، نرسل أقل إلى المستخدم ، وأجزاء أقل ، يأتي أسرع ، يكون المستخدم سعيدًا.
التصغير. تم إعداد كل شيء على مشاريعها. هناك مجموعة من الأدوات الرائعة ، والمكونات الإضافية لحزمة الويب ، وإعدادات gulp - بشكل عام ، ستكتشفها بنفسك. يمكنك تخصيصه يدويًا ، ولكن يبدو فقط عندما تكون متأكدًا من أنه يمكنك ضغط مبرد CSS الخاص بك من أي CSSO.تذكر تمكين الضغط. إذا لم يتم تشغيل gzip على الأقل في عام 2020 ، فأنت بالتأكيد تفعل شيئًا خاطئًا ، لأن هذه تقنية ضغط قديمة. بشكل عام ، في عام 2020 ، حان الوقت لاستخدام brotli. هذه طريقة جيدة لتقليل الناتج قليلاً في متصفحات Chromium. أو ، إذا كنت لا تريد دعم brotli ، فعلى الأقل يمكنك تجربة zopfli.هذه خوارزمية ضغط بطيئة إلى حد ما لـ gzip ، والتي تعطي ببساطة أفضل نتائج الضغط وتزيل الضغط بسرعة gzip العادية. لذلك ، يجب تكوين zopfli بحكمة واستخدامه فقط عندما لا تحتاج إلى إخراج البيانات بسرعة. يمكنك تكوين أرشيفات gzip ليتم تجميعها أثناء التجميع باستخدام خوارزمية zopfli ، وإرسالها بشكل ثابت بالفعل ، في الواقع ، لا تعمل بسرعة. هذا يمكن أن يساعدك. ولكن أيضا قياس النتائج.
تستخدم جميع هذه الخوارزميات نوعًا من القواميس: يتم إنشاء القاموس على أساس تكرار أجزاء التعليمات البرمجية. لكن في بعض الأحيان يقولون: من الضروري التضمين ، إذا تم التضمين ، فإننا نتخلص من الطلب. سيكون ربط جميع CSS في HTML سريعًا جدًا. الحيلة هي أن gzip يعمل بكفاءة أكثر عندما تقوم بتقسيم الأنماط و HTML ، لأن القواميس مختلفة وأكثر كفاءة.في حالتي ، أخذت للتو صفحة bootstrap ، وربطت bootstrap هناك وقارنت بين النسختين. Gzip على الموارد الفردية أقل 150 بايت. نعم ، المكاسب صغيرة جدا. هنا أيضًا ، تحتاج إلى قياس كل شيء. ولكن في حالتك ، يمكن لهذا ، على سبيل المثال ، تقليل عدد المقاطع بواحدة.كيفية تحسين الرمز؟ أنا لا أتحدث عن التصغير. خذ ما لا تستخدمه في المشروع. على الأرجح لديك كود لن يتم تنفيذه على العميل. لماذا؟
حتى تتمكن من أتمتة هذا ، يتم تضمين علامات تبويب خاصة في المتصفح ، على سبيل المثال ، في Chrome DevTools ، هذه هي التغطية ، التي تخبرك: "لم أستخدم CSS أو JS هذا ، يمكنك قطعه."ولكن قد يكون لديك تحوم ، تركيز ، نشط ، شيء مثبت باستخدام JS. تحتاج إلى محاكاة جميع الإجراءات الممكنة على الموقع ، وعندها فقط ستتأكد من إمكانية قطع CSS. يحتوي Chris Coyer على مقالة مراجعة جيدة حول الأدوات التلقائية التي تحاول القيام بكل شيء مع التمرير والتركيز. لكنه استنتج أنه كان من المستحيل أتمتة هذا. لا يعمل حتى الان.هناك تقرير جيد من أنتون خولكين من Booking.com ، حيث حاولوا أيضًا إزالة أكوام من الكود القديم. لكن كان لديهم خصوصية: رمز إرث جاء من مشاريع خارجية. كان من الضروري إزالته. تعرف على الحلول المثيرة للاهتمام التي توصلوا إليها.يمكنك بنفسك محاولة اللعب مع Puppeteer نفسه ، مثل Chrome. يمكنك إجراء الاختبارات التي تمر تلقائيًا بكل شيء ، في محاولة للقيام بالتمرير ، والتركيز. واستخدم نفس التغطية.زميلي فيتيا خومياكوفالمنتصر-هومياكوفقمت بإنشاء البرنامج النصي الخاص بي ، مثل العثور على التكرارات والأنماط على الصفحة. فقط خذ ونسخ ولصق. سوف يكتب لك في وحدة التحكم: "هذا المحدد ، على ما يبدو ، لا تحتاج". حتى النقطة التي تدخل فقط في DevTools. إنه رائع.
ميزة تعجبني حقًا في أدوات مطوري Firefox: فرصة لرؤية الأنماط التي يبدو أنها مستخدمة ، ولكن في الواقع لا يطبقها المتصفح.على سبيل المثال ، يمكنك تعيين شاشة العرض: مضمنة ، ويبدو أن هذا العرض: مضمنة لا معنى لتعيين الأحجام. أو محاذاة رأسية ، تعمل فقط للخلايا المضمنة أو خلية الجدول. حتى الآن ، رأيت فقط في فايرفوكس أنه يمكن أن يسلط الضوء على: "أنت لا تحتاج إلى هذا الخط."هنا أيضًا ، يجب أن تكون حذرًا: ربما تستخدم هذا النمط للصق الصف لاحقًا. ولكن في رأيي ، ميزة باردة.اسأل نفسك السؤال الآن: هل تحتاج إلى Bootstrap بالكامل في المشروع؟ ضع أي إطار CSS تستخدمه بدلاً من Bootstrap. على الأرجح ، تستخدم Bootstrap للشبكات وعناصر أكثر أو أقل شيوعًا ، ونصف Bootstrap لا تحتاج إليه.حاول استخدام التجميع بشكل صحيح. تسمح لك جميع أطر CSS الحديثة تقريبًا باستخدام شفرة المصدر للتجميع وتحديد ما تحتاجه فقط. هذا يمكن أن يقلل بشكل كبير من حجم حزمة CSS.لا تتخلى عن غير المستخدمة. بدلاً من البحث عن إرثي ، يمكنك استخدام الفهم على مستوى البناء بأن هذه الصفحة لن تستخدم CSS هذا.على سبيل المثال ، تسمح لك مجموعة BEM الكاملة بعمل التجميع بحيث يمكنك بالفعل ، مع إعطاء الصفحة بالفعل ، إنشاء شجرة من جميع مكونات كتل BEM التي ستكون موجودة في الصفحة. يسمح لك BEM بتحديد ما إذا كانت هذه الكتلة غير موجودة في الصفحة ، فلا حاجة لتحميل CSS هذا. اشحن فقط ما يلزم.حتى الرجال من Google يقولون : استخدم BEM ، يمكن أن يساعدك حقًا في التحسين.لا أعتقد أنني أقول ذلك بصوت عال ، ولكن في هذه الحالة يبدو أن CSS-in-JS نهجًا جيدًا. عند كتابة مكونات مستقلة مستقلة وتكوين التجميع بعناية أو تحديد الكتل المستخدمة وغير المستخدمة في وقت التشغيل ، يمكنك التخلص من مشكلة العثور على رمز قديم عن طريق ببساطة عدم إرسال هذا الرمز إلى العميل. يبدو سهلا ، ولكن الانضباط مطلوب. فكر في الأمر مسبقًا في بداية المشروع.
ما الخيار الآخر هناك؟ مجنون قليلا. في هذا الكود ، يبدو أن النمط غير مطلوب ، لأننا نستخدم div - الإعداد الافتراضي معروض بالفعل: block. ودعنا نحذف جميع الإعدادات الافتراضية؟ إذا كنت تعرف في مشروعك على وجه اليقين أن ترميز HTML لن يتغير مرة أخرى أبدًا - فانتقل إلى القيم الافتراضية التي يوفرها المتصفح بالفعل وقم بإزالتها.أنماط أقل - رائعة! ولكن هذه مرة أخرى فكرة مجنونة. لا يجب أن يعرف CSS عن HTML ، لأنه أسلوب. إنه مستقل تمامًا ، يجب عليك توصيله بمشروع آخر ، يجب أن يعمل هناك. ونعم ، من الصعب الحفاظ عليها. تغيير العلامة - كل شيء يكسر. فكرة مجنونة كما وعدت.استخدم المتغيرات. يحتوي CSS على متغيرات قديمة جدًا مثل CurrentColor.
غالبًا ما يكون هناك نمط: تريد ، على سبيل المثال ، إنشاء زر يكون نصه وحده متشابهين في اللون. وبالمرور ، نغيرهما معًا. لماذا؟
هناك متغير حالي للون يأخذ قيمة من اللون ، وتضعه ، على سبيل المثال ، على الحدود ، قم بتوكيل هذه الخاصية وتغيير سطر واحد فقط عن طريق التمرير ، عن طريق التركيز ، عن طريق النشاط ، أي شيء تريده. يبدو هذا مناسبًا ، وأصبح الرمز أقل من سطر واحد. يمكنك التحسين. بالمناسبة ، في هذا المثال ، لا يمكنك استخدام مهمة لون الحدود على الإطلاق ، لأنها افتراضيًا تأخذ بالفعل قيمة من خاصية اللون.من المحزن في بعض الأحيان مشاهدة كيفية استخدام base64. في CSS ، تم التوصية به بنشاط من قبل: استخدم base64 لحقن أيقونات صغيرة. إذا كان يتناسب مع جزء واحد عبر بروتوكول TCP ، فهذا مفيد لك.
لكن هاري روبرتس أيضًاأجرى دراسة أنيقة حول كيفية تأثير base64 على تحميل الصفحة. نعم ، هناك عدد أقل من الطلبات ، ولكن يتم تحليل هذه الأنماط في بعض الأحيان بشكل أبطأ.حسنًا ، التحليل عملية سريعة جدًا ، على الأرجح لن يلاحظ المستخدم ذلك. ولكن لدينا مقياس مهم - العرض الأول ، بحيث يرى المستخدم شيئًا على الصفحة. على الهواتف المحمولة ، يتم العرض الأول ، وفقًا لدراسة أجراها Harry Roberts ، بعد عشر مرات. فكر في ما إذا كنت بحاجة إلى base64؟ نعم ، هناك عدد أقل من الطلبات ، ولكن هل كان لها تأثير؟ويرجى عدم استخدام base64 لـ SVG. لأن SVG رائع لاستخدام ترميز URL. جوليا بوكفالوفا لديها أداة رائعة: تعال ، الصق SVG الخاص بك وسيعطي CSS في شكل جاهز للصق. قد تلاحظ أنه لا توجد قاعدة 64 ، ولكن بعض الأشياء التي تم تجنبها قد لا يتم إدراكها بشكل صحيح في CSS. إنه أكثر كفاءة.في المتوسط ، يعطي base64 زيادة بنسبة 30٪ على حجم ما تقوم بضغطه. لماذا؟استخدم التكنولوجيا الحديثة. قد نحتاج إلى دعم Internet Explorer - الحجج المعتادة عند الحديث عن الشبكات.
ولكن فكر في الأمر: إذا لم يكن لديك دعم IE ، وما زلت تنضج على الحروف أو الجداول ، يمكنك استخدام الشبكات لعمل تخطيط ثلاثي الأعمدة مع فجوة 20 بكسل - هذه هي المسافة بين الأعمدة. ثلاثة خطوط. حسنًا ، خمسة ، بالنظر إلى الإعلان نفسه.جرب هذا على تعويم. وأعني أننا نغير ثلاثة أسطر ، بما في ذلك اسم الفئات ، إذا لمست HTML. لم أجد طريقة للقيام بنفس الشيء بارد على تعويم. تخلص من قراراتك. لكن استخدم التكنولوجيا الحديثة. تسمح لك بالإشارة بشكل أكثر تعقيدًا إلى الترميز.
يمكنك تجربة Atomic CSS. ما هذا؟ تكتب هذه أسماء فئة مجنون قليلا. وبعد مرور بعض الوقت ، تبدأ في فهم أنك أنت من يحدد لون الخلفية أو اللون فقط. هذه هي "ميزات" CSS. ولكن لديك مجموعة CSS ثابتة تستخدمها بعد ذلك في HTML كمؤشر على النمط. و CSS أصبح فجأة أصغر. بالنسبة للمشاريع الكبيرة ، ستصبح أصغر حقًا ، نظرًا لأن هناك عددًا أقل من الأنماط الفريدة. لكنك تنمو HTML.
يمكنك البحث في اتجاه Tailwind CSS ، التي تكتسب شعبية الآن. إنه ليس Atomic CSS ، إنه يتعلق بفئات المرافق ، على غرار Bootstrap ، فقط أكثر فائدة. يمكنك استخدام مجموعة محددة. يبدو أنه كافٍ بالنسبة لك. مجموعة من الفئات تؤدي وظائفها. يمكنك أيضًا المحاولة ، ولكن لا تبالغ في ذلك.
فكرة مجنونة أخرى - لماذا نحتاج إلى أسماء فئة كاملة على العميل؟ نعم ، إنه مناسب للتطوير والتصحيح ، ولكن لنأخذ كل أسماء الفصول ونجعلها حرفًا واحدًا. سيكون أقل.هنا مقال حول كيفية القيام بذلك. يمكنك تكوين حزمة الويب أو مكون إضافي آخر عند البناء. لكنها لم تقلع منا. حاولنا.اتضح أن gzip رائع لدرجة أن كل شيء تم تحسينه بشكل جيد بالنسبة لنا ، و BEM و gzip ودودان بشكل مذهل. لأن بنيات النص تتكرر لوصف الكتل والعناصر في الكود.بشكل عام ، لم يعطينا هذا أي ربح تقريبًا. ولكن ، على سبيل المثال ، إذا لم يكن لديك BEM ومجموعة من الفصول المختلفة ، فيمكنك المحاولة.هام: التدبير. قياس جميع هذه القطع التجريبية. ربما تعمل الآن من أجلك ، ثم قمت بتغيير بنية المشروع قليلاً ، وبدأ في التجميع بطريقة مختلفة وتباطأ كل شيء.تنزيله!
حتى الآن ، لقد تحدثت فقط عن كيفية تنزيل ملف. قمنا بتنزيله. ماذا شاهد المستخدم كل هذا الوقت؟
رأى مثل هذه الشاشة المدهشة. أثناء التنزيل ، كانت الشاشة فارغة. نزلنا ، ويبدأ المتصفح ست خطوات أخرى. التحلي بالصبر قليلاً ، سأتحدث عنها أسرع قليلاً من التنزيل.
لنبدأ بالتحليل. يتم التحليل عندما يقوم المستعرض بتنزيل دفق من وحدات البايت ، ويبدأ في تقسيمه إلى كيانات يفهمها.
على سبيل المثال ، جاء عبر الاستيراد. يجب تنزيل هذا مرة أخرى. اقرأ الجزء الأول من التقرير مرة أخرى؟ الاستيراد عملية حظر. لكن المتصفحات ذكية. لديهم ماسح التحميل المسبق. قلت أن كل شيء مغلق هناك ، هذا غير صحيح. تعرف المستعرضات ، على سبيل المثال ، إذا كانت هناك ثلاث علامات ارتباط في صف تتبع النمط ، فعندما أقوم بتنزيل الأول ، يمكنك البدء في تنزيل الثاني والثالث. لا يمكن التحليل ، لأن هيكل التحليل بأكمله ينكسر. ولكن التنزيل مقدمًا - يمكن.
لذا الاستيراد شيء سيئ. إذا كانت الأنماط متناسقة في HTML ، فسيرى المتصفح أننا سنذهب أبعد من ذلك للحصول على ملف آخر.
وإذا قمت بإدراجه مباشرة في الاستيراد ، يجب أن يقوم أولاً بتنزيل style.css الخاص بك ، ثم انظر الاستيراد فيه. بدأ في تحليل CSS هذا ... نعم ، نحن نحظر كل شيء بطريقة جديدة ونذهب للملف! حتى تتمكن من عمل شلال بارد مع تبديد الذوق على الموقع.نسيان الاستيراد أو التهيئة بحيث لا يكون هناك استيراد بعد البناء. بالنسبة لبيئة التطوير ، حسنًا ، ولكن ليس للمستخدم.
بعد ذلك ، نمر بمراحل بناء الأشجار باستخدام Cascade.
كل هذا موصوف لفترة طويلة. تم بناء CSS Object Model - شجرة خاصة لكيفية تعيين المتصفح للعلامات والفئات إلى الأنماط. يربط كل شيء بـ DOM ويجعل هذه الاتصالات سريعة جدًا. عندما تغير شيئًا ، يكفي أن يغيره داخل الشجرة.
كلما كان المحدد أكبر ، كان من الصعب على المتصفح رسم شجرة. يحتاج إلى تحليل المحدد وتحويله إلى هياكل شجرة. وإذا أدخلت! مهم هناك ، فيجب أن يأخذ ذلك في الاعتبار.
يبدو أنه حان الوقت للحديث عن BEM مرة أخرى. لكن BEM ليس ضروريًا إذا كنت تعرف كيفية استخدام فئات الأداة المساعدة ، إذا كانت فئة واحدة مسؤولة عن وظيفة واحدة ولا تتداخل مع بعضها البعض. ثم بناء شجرة بسيط للغاية. لديك هيكل مسطح إلى حد ما ومن ثم يجب على المتصفح ربطه بشكل صحيح بـ DOM.
إذا قمت بذلك ، فإنهم يقولون أن هذه المحددات تبطئ تحليل CSS. لكن هذه هي الأساطير منذ فترة طويلة ، والفرق صغير جدًا للمتصفح بحيث لن تلاحظه في المشروع العادي إذا قمت بتحسين المحددات بعلامات النجمة. ولكن هل ترغب في تطوير وصيانة هذا الرمز؟
كنت أسمع النصائح: حاول وضع كل شيء في اختصار. الخلفية هي اختصار للعديد من الخصائص الأخرى. نضع كل شيء في خاصية واحدة ، ويصبح الأمثل.بالبايت ، نعم ، إنها تصبح أصغر. ولكن إذا كنت ترغب في تحسين تكوين CSS OM ، فسيظل المتصفح يجعل كل هذه الخصائص خارج الخلفية. تقوم المتصفحات لكل عنصر DOM بإنشاء جدول لجميع الخصائص التي يمكن أن تحتوي عليها. عندما تنظر إلى القيم المحسوبة لـ DevTools ، فهي ليست موجودة لأن المتصفح قام بحسابها وفقًا لمتطلباتك. يخزن هذا في الذاكرة ، لأنه من الأسهل بكثير إعادة كتابة خاصية واحدة وكل شيء يعمل.هذه أيضًا نصيحة غريبة جدًا ، ولكن إذا كنت ترغب في جعل CSS OM أسرع ، يمكنك على الفور تعيين جميع الخصائص واحدًا تلو الآخر. التي يمكن أن تعمل. لكن حجم الحزمة سيزداد بشكل كبير. تحتاج إلى قياس. أشك في أنه سيعطي ربحًا ، ولكن فجأة!عند إنشاء CSS OM ، يتم تأمين JS أيضًا عند هذه النقطة. إذا استغرق بناء OM CSS ثانيتين ، يفشل JS. على الرغم من أنني لا أستطيع أن أتخيل كيف تمكنت من الكتابة كثيرًا في CSS بحيث تم بناء الشجرة لمدة ثانيتين.
كذلك المستعرض لا تخطيط. هذا هو موقع جميع عناصر DOM ، واستخدام المواقف. إنه يفهم أين يجب أن يكون العنصر وبأي أبعاد. يبدو أنه في هذه المرحلة يجب أن يرى المستخدم بالفعل نوعًا من الصور. لكنه يرى كل شيء في إطار العرض ، يمكن أن ينظر من خلال نافذة محدودة. إذا كان هناك شيء غير صحيح من الأسفل ، فلن يراه ببساطة.
تسمى الفكرة Critical CSS ، وهي أيضًا قديمة جدًا. تقوم بإدراج بعض الأشياء المهمة للشاشة الأولى في بداية التنزيل. على سبيل المثال ، مضمنة في HTML الخاص بك ، تخلص من أي طلبات إضافية. يرى المستخدم هذه الشاشة أولاً ، ثم التنزيل كما تريد. على الأرجح ، سيبدأ التمرير عندما يكون لديك الوقت لتحميله.
يتم ذلك ببساطة. هناك أدوات تعمل على أتمتة كل هذا ، بما في ذلك المكونات الإضافية لحزمة الويب و React. مجرد البحث وتكوين بشكل صحيح.- github.com/addyosmani/critical- github.com/pocketjoso/penthouse- github.com/anthonygore/html-critical-webpack-plugin- github.com/GoogleChromeLabs/critters اتباع نهج
جيدمن Filament Group - كيفية التحميل بشكل غير متزامن دون حظر CSS. كل شيء بسيط للغاية.عندما تضع <link rel = preload> ، أخبر المتصفح: "سأحتاج إلى هذا النمط ، لكننا الآن لا نحظر أي شيء. يمكنك تنزيله الآن ، وتخزينه مؤقتًا ، وعندما أنتقل إليه ، ابدأ في إنشاء CSS OM ". وتحتاج فقط إلى تحميل ومعالجة ذلك "حسنًا ، نظرًا لأنني قمت بتنزيله ، فقم بذلك rel = stylesheet ، وتمكين التحليل".نهج بسيط إلى حد ما ، ولكن استخدمه بحكمة أيضًا. إذا كان لديك الكثير من التحميل المسبق ، يمكنك أن تفعل ما هو أسوأ.
يمكنك أيضًا اللعب باستخدام تعبيرات الوسائط. الصقها وأخبر المتصفح: "هذا النمط ليس مطلوبًا الآن ، ولكن عندما يعمل هذا التعبير الإعلامي ، ستكون هناك حاجة إليه." سيتم تنزيل المتصفح أيضًا بشكل استباقي ، ولكن بأولوية أقل وبدون حظر.
نهج مجنون آخر ، ولكن ليس مجنونًا جدًا - عندما يكون لديك دفع http / 2. يمكنك تضمين CSS مباشرة أمام الكتلة. بدون CSS ، لن تبدو كتلتك جيدة جدًا. فلماذا لا تقوم بتضمين CSS التي تحتاجها للكتلة التالية قبل هذه الكتلة؟ هذا أمر منطقي ، وسيسمح لك الدفع http / 2 بتحسينه.نهج بسيط. إذا قمت بتوسيعه ، استخدم التحميل البطيء. لماذا يجب على المستخدم تنزيل شيء لن يستخدمه؟ يمكنك تكوين مكونات React بحيث إذا لم تصل أبدًا إلى منطقة رؤية الصفحة ، فلماذا يجب عليها تنزيل الأنماط لنفسها؟استكشف واجهة Intersection Observer API وقد تتمكن من تسريع صفحتك بشكل كبير.
الخطوة الأخيرة هي الرسم والتطبيق على طبقات مركبة ولصقها وما إلى ذلك.
يقوم المتصفح بإنشاء طبقات مركبة في عدد كبير من الحالات. في رأيي ، فإن ربع كود مصدر Chromium فقط مناسب هنا . يمكنك أن ترى بنفسك عندما ينشئ طبقات مركبة في كود المتصفح.ذاكرة الفيديو محدودة ، خاصة على الهواتف المحمولة. إذا قمت بإحضار كل شيء إلى طبقات جديدة لتحسين الرسوم المتحركة باستخدام will-change: convert أو أي شيء آخر ، فقد تكون أسوأ.قم بإنشاء طبقات أقل - بالقدر الذي تحتاجه للتحسين الحالي.رائع ، لقد قمنا بتحليل كل شيء.وإذا عدت؟
وماذا لو عدت إلى الصفحة؟ هذه هي المرة الأولى التي ذهبت فيها.بالعودة إلى الصفحة ، يبدو أنني قادر على تنزيل كل شيء على الفور. لقد قمت بالفعل بتنزيل جميع الموارد ، فلماذا لا تستخدمها مرة ثانية؟
إذا لم يمنح الخادم رأس التحكم في ذاكرة التخزين المؤقت ، فسيحاول المتصفح تخزين ملفك مؤقتًا لإعادة استخدامه. يمكنك تهيئة خادمك افتراضيًا ، مثل: "قم بتخزين هذا الملف في ذاكرة التخزين المؤقت لمدة عام كامل". لن تتغير. ولكن إذا كان الأمر كذلك ، فأنت بحاجة إلى التعامل مع مشكلة إبطال ذاكرة التخزين المؤقت العالمية. لكن هذا هو موضوع تقرير منفصل.استخدم عمال الخدمة! 2020 ، حان الوقت لتطبيقات الويب التقدمية! كان لدى كيريل تشوجينين تقرير جيدحول كيفية استخدام عمال الخدمة في مناسبات مختلفة. في هذه الحالة ، اعترضت طلب CSS ، واحفظه ، وإذا اتبع المتصفح هذا النمط للمرة الثانية ، فتركه بعيدًا عن ذاكرة التخزين المؤقت.لكن المتصفح لا يعدك بأي شيء. يمكنك دائمًا مواجهة حقيقة نفاد ذاكرة المتصفح. سيحاول التخزين المؤقت ، ولكن لا توجد ذاكرة. التخزين المؤقت ليس مائة بالمائة. تعامل دائمًا مع مثل هذه المواقف.يمكنك محاولة استخدام التخزين المحلي. لكنه بطيء للغاية. أحيانًا ما يكون تنزيل ملف أسرع من الانتقال إلى Local Storage API.يمكنك تجربة قاعدة بيانات المتصفح المضمنة. ولكن قياسه. ربما تستغرق الرحلة إلى JS وقتًا أطول بسبب ضعف المعالج.يمكنك أيضًا إخبار المتصفح مسبقًا أنك ستقوم بتنزيل شيء ما.
<link rel> - تعرف على كيفية عمل هذه السمة. هناك اتصال مسبق ، الجلب المسبق ، العرض المسبق - أريد التحدث عنه بشكل منفصل. يقول: "أنا في هذه الصفحة الآن ، وبعد ذلك سأذهب إلى الصفحة التالية. قم بتنزيل كل شيء لهذه الصفحة في علامة تبويب الخلفية وارسم. " أشياء رائعة. لا يعمل في أي مكان.
إلى حد ما ، يتم دعمه في IE و Edge. في Chrome ، لا يفعل ذلك حقًا ، ولا يتم تقديمه. يعمل مثل الجلب المسبق: تنزيل هذه الملفات وذاكرة التخزين المؤقت. لسوء الحظ ، لا يعمل العارض الكامل في أي مكان.ولكن يمكنك تطوير هذه الفكرة. على سبيل المثال ، في تطبيق Yandex - بشكل طبيعي ، لا تستخدم CSS - يتم إجراء عرض مسبق. عندما تبحث عن شيء ما ، من المحتمل أن تحصل على نتائجك على الفور. نحن يمكن التنبؤ أين ستذهب، ومقدما بالطرق الخاصة بنا تذهب والحصول على جميع الموارد اللازمة.ماذا بعد؟ كان هناك الكثير من الروابط. أنصحك أيضًا بالنظر إلى مجموعة مذهلة من التحسين لكل شيء من فانيا أكولوفiamakulov. تعرف على كيفية تحسين كل من HTML و JS والتجمع.ولا تنسى الترتيب. تعمل نصيحتي الآن حقًا ، مما يشير إلى كيفية القيام بذلك بسرعة ، ولكن على الأرجح ، بعد خمس سنوات ، ستكون ضارة. سيكون هناك نوع من التكنولوجيا التي ستكون غير متوافقة معهم. تتبع ذلك وحاول الحفاظ على الشفرة المثالية ، بما في ذلك بعد فترة. شكرا للانتباه.