تحسين أداء موقع الويب ومسار العرض الحرج

هل يتوافق أداء عرض صفحة الويب الخاصة بك مع معايير اليوم؟ التقديم هو عملية ترجمة استجابة الخادم إلى الصورة التي "يرسمها" المتصفح عندما يزور المستخدم أحد مواقع الويب. يمكن أن يُترجم أداء العرض السيئ إلى معدل ارتداد مرتفع نسبيًا.

هناك استجابات مختلفة للخادم تحدد ما إذا كانت الصفحة ستعرض أم لا. في هذه المقالة ، سنركز على العرض الأولي لصفحة الويب ، والذي يبدأ بتحليل HTML (بشرط أن يكون المتصفح قد تلقى HTML بنجاح كاستجابة للخادم). سنستكشف الأشياء التي يمكن أن تؤدي إلى أوقات عرض عالية ، وكيفية إصلاحها.

مسار العرض الحرج

مسار العرض الحرج (CRP) هو العملية التي يمر بها متصفحك لتحويل الشفرة إلى وحدات بكسل قابلة للعرض على شاشتك. لها عدة مراحل ، يمكن إجراء بعضها بشكل متوازٍ لتوفير الوقت ، ولكن يجب القيام ببعض الأجزاء بالتبعية. هنا يتم تصورها:

بادئ ذي بدء ، بمجرد حصول المتصفح على الاستجابة ، يبدأ في تحليلها. عندما يواجه تبعية ، فإنه يحاول تنزيله.

إذا كان ملف ورقة أنماط ، فسيتعين على المتصفح تحليله بالكامل قبل عرض الصفحة ، ولهذا يُقال إن CSS تمنع العرض.

إذا كان برنامجًا نصيًا ، فيجب على المستعرض: إيقاف التحليل وتنزيل البرنامج النصي وتشغيله. بعد ذلك فقط يمكنه متابعة التحليل ، لأن برامج JavaScript يمكنها تغيير محتويات صفحة الويب (HTML على وجه الخصوص). وهذا هو سبب تسمية JS بحظر المحلل اللغوي .

بمجرد الانتهاء من جميع عمليات التحليل ، يكون لدى المتصفح نموذج كائن المستند (DOM) ونموذج كائن أوراق الأنماط المتتالية (CSSOM). الجمع بينهما يعطي شجرة التقديم. لا تدخل الأجزاء غير المعروضة من الصفحة في Render Tree ، لأنها تحتوي فقط على البيانات اللازمة لرسم الصفحة.

الخطوة قبل الأخيرة هي ترجمة شجرة العرض إلى تخطيط. هذه المرحلة تسمى أيضًا إعادة التدفق. هذا هو المكان الذي يتم فيه حساب كل موضع في كل عقدة Render Tree ، بالإضافة إلى حجمها.

أخيرًا ، الخطوة الأخيرة هي الرسام. يتضمن تلوين وحدات البكسل حرفيًا وفقًا للبيانات التي احتسبها المتصفح خلال المراحل السابقة.

الاستنتاجات المتعلقة بالتحسين

كما يمكنك التخمين ، تتضمن عملية تحسين أداء موقع الويب تغييرات على موقع الويب تقلل من:

• كمية البيانات التي يجب نقلها
• عدد الموارد التي يجب على المتصفح تنزيلها (خاصة الموارد المحظورة)
• طول CRP

علاوة على ذلك ، سوف نتعمق في تفاصيل كيفية القيام بذلك ، ولكن أولاً ، هناك قاعدة مهمة يجب مراعاتها.

كيفية قياس الأداء

قاعدة مهمة للتحسين هي: القياس أولاً ، التحسين حسب الحاجة . تحتوي معظم أدوات المطورين في المتصفحات على علامة تبويب تسمى الأداء ، وهذا هو المكان الذي تحدث فيه القياسات. عند التحسين للحصول على أسرع عرض ابتدائي (أول) ، فإن أهم شيء يجب النظر إليه هو وقت الأحداث التالية:

• أول طلاء
• أول رسم مضمون
• أول طلاء ذو ​​مغزى

هنا ، يعني "الرسام" عرضًا ناجحًا للصفحة ، المرحلة الأخيرة في مسار العرض الحرج. قد تحدث بعض عمليات العرض واحدة تلو الأخرى لأن المتصفحات تحاول عرض شيء ما في أسرع وقت ممكن وتحديثه لاحقًا.

بالإضافة إلى وقت العرض ، هناك أشياء أخرى يجب مراعاتها - والأهم من ذلك ، عدد موارد الحظر المستخدمة والمدة التي يستغرقها تنزيلها. توجد هذه المعلومات في علامة تبويب الأداء بعد إجراء القياسات.

استراتيجيات تحسين الأداء

بالنظر إلى ما تعلمناه أعلاه ، هناك ثلاث استراتيجيات رئيسية لتحسين أداء موقع الويب:

1. تقليل كمية البيانات التي سيتم نقلها عبر السلك ،
2. تقليل العدد الإجمالي للموارد التي سيتم تحويلها عبر السلك ، و
3. تقصير مسار العرض الحرج

1. تقليل كمية البيانات التي سيتم نقلها

بادئ ذي بدء ، قم بإزالة جميع الأجزاء غير المستخدمة ، مثل الوظائف التي يتعذر الوصول إليها في JavaScript ، والأنماط ذات المحددات التي لا تطابق أي عنصر أبدًا ، وعلامات HTML المخفية إلى الأبد باستخدام CSS. ثانيًا ، قم بإزالة جميع التكرارات.

بعد ذلك ، أوصي بوضع عملية تصغير تلقائية في مكانها الصحيح. على سبيل المثال ، يجب أن يزيل كل التعليقات من ما تقدمه نهايتك الخلفية (لكن ليس كود المصدر) وكل حرف لا يحمل أي معلومات إضافية (مثل أحرف المسافات البيضاء في JS).

بعد القيام بذلك ، يمكن أن يكون ما تبقى لنا كنص. هذا يعني أنه يمكننا تطبيق خوارزمية ضغط بأمان مثل GZIP (والتي تفهمها معظم المتصفحات).

أخيرًا ، هناك تخزين مؤقت. لن يساعد ذلك في المرة الأولى التي يعرض فيها المتصفح الصفحة ، ولكنه سيوفر الكثير في الزيارات اللاحقة. من الأهمية بمكان مراعاة شيئين ، على الرغم من:

• إذا كنت تستخدم CDN ، فتأكد من دعم التخزين المؤقت وتعيينه بشكل صحيح هناك.
• بدلاً من انتظار موعد انتهاء صلاحية الموارد ، قد ترغب في الحصول على طريقة لتحديثها مسبقًا من جانبك. قم بتضمين "بصمات" الملفات في عناوين URL الخاصة بها لتتمكن من إبطال ذاكرة التخزين المؤقت المحلية.

بالطبع ، يجب تحديد سياسات التخزين المؤقت لكل مورد. قد نادرًا ما يتغير البعض أو لا يتغير أبدًا. البعض الآخر يتغير بشكل أسرع. يحتوي بعضها على معلومات حساسة ، والبعض الآخر يمكن اعتباره عامًا. استخدم التوجيه "الخاص" لمنع شبكات CDN من التخزين المؤقت للبيانات الخاصة.

يمكن أيضًا تحسين صور الويب ، على الرغم من أن طلبات الصور لا تمنع التحليل أو العرض.

2. تقليل العدد الإجمالي للموارد الحرجة

تشير كلمة "هام" فقط إلى الموارد اللازمة لعرض صفحة الويب بشكل صحيح. لذلك ، يمكننا تخطي جميع الأنماط غير المتضمنة في العملية مباشرة. وجميع البرامج النصية أيضًا.

أوراق الأنماط

لإخبار المتصفح بأن ملفات CSS معينة غير مطلوبة ، يجب علينا تعيين سمات media على جميع الروابط التي تشير إلى أوراق الأنماط. باستخدام هذا الأسلوب ، سيتعامل المتصفح مع الموارد التي تطابق media الحالية (نوع الجهاز ، حجم الشاشة) فقط حسب الضرورة ، مع تقليل أولوية جميع أوراق الأنماط الأخرى (ستتم معالجتها على أي حال ، ولكن ليس كجزء من العرض الحرج طريق). على سبيل المثال ، إذا أضفت السمة media="print" إلى علامة style التي تشير إلى أنماط طباعة الصفحة ، فلن تتداخل هذه الأنماط مع مسار العرض الحرج عندما لا تتم print الوسائط (على سبيل المثال ، عند عرض الصفحة في المستعرض).

لزيادة تحسين العملية ، يمكنك أيضًا عمل بعض الأنماط المضمنة. هذا يوفر لنا رحلة واحدة على الأقل ذهابًا وإيابًا إلى الخادم والتي كانت ستطلب لولا ذلك للحصول على ورقة الأنماط.

نصوص

كما هو مذكور أعلاه ، فإن البرامج النصية تمنع المحلل اللغوي لأنها يمكن أن تغير DOM و CSSOM. لذلك ، يجب ألا تكون النصوص التي لا تغيرها عبارة عن تحليل كتلة ، مما يوفر لنا الوقت.

من أجل تنفيذ ذلك ، يجب تمييز جميع علامات البرنامج النصي بسمات - إما غير async أو defer .

النصوص البرمجية التي تم تمييزها بـ "غير async " لا تمنع إنشاء DOM أو CSSOM ، حيث يمكن تنفيذها قبل إنشاء CSSOM. ضع في اعتبارك ، مع ذلك ، أن البرامج النصية المضمنة ستحظر CSSOM على أي حال ما لم تضعها فوق CSS.

على النقيض من ذلك ، سيتم تقييم البرامج النصية التي تم تمييزها بـ " defer " في نهاية تحميل الصفحة. لذلك ، لا ينبغي أن تؤثر على المستند (وإلا فسيؤدي ذلك إلى إعادة تصيير).

بمعنى آخر ، مع defer ، لا يتم تنفيذ البرنامج النصي إلا بعد إطلاق حدث تحميل الصفحة ، بينما يتيح عدم async تشغيل البرنامج النصي في الخلفية أثناء تحليل المستند.

3. تقصير طول مسار العرض الحرج

أخيرًا ، يجب تقصير طول CRP إلى الحد الأدنى الممكن. جزئيًا ، الأساليب الموضحة أعلاه ستفعل ذلك.

ستعمل استعلامات الوسائط كسمات لعلامات النمط على تقليل العدد الإجمالي للموارد التي يجب تنزيلها. سمات علامة البرنامج النصي defer وغير async ستمنع البرامج النصية المقابلة من حظر التحليل.

سيؤدي تصغير الموارد وضغطها وأرشفتها باستخدام GZIP إلى تقليل حجم البيانات المنقولة (وبالتالي تقليل وقت نقل البيانات أيضًا).

يمكن أن يؤدي تضمين بعض الأنماط والبرامج النصية إلى تقليل عدد جولات الذهاب والإياب بين المتصفح والخادم.

ما لم نناقشه حتى الآن هو خيار إعادة ترتيب الكود بين الملفات. وفقًا لأحدث فكرة عن أفضل أداء ، فإن أول شيء يجب أن يفعله موقع الويب بأسرع ما يمكن هو عرض محتوى ATF. ATF تعني الجزء المرئي من الصفحة. هذه هي المنطقة التي يمكن رؤيتها على الفور ، دون الحاجة إلى التمرير. لذلك ، من الأفضل إعادة ترتيب كل ما يتعلق بتقديمه بطريقة يتم فيها تحميل الأنماط والبرامج النصية المطلوبة أولاً ، مع إيقاف كل شيء آخر - لا التحليل ولا العرض. وتذكر دائمًا أن تقوم بالقياس قبل إجراء التغيير وبعده.

الخلاصة: التحسين يشمل الحزمة بأكملها

باختصار ، يتضمن تحسين أداء موقع الويب جميع جوانب استجابة موقعك ، مثل التخزين المؤقت ، وإعداد CDN ، وإعادة البناء ، وتحسين الموارد وغيرها ، ومع ذلك يمكن القيام بكل هذا تدريجيًا. بصفتك مطور ويب ، يجب عليك استخدام هذه المقالة كمرجع ، وتذكر دائمًا قياس الأداء قبل تجاربك وبعدها.

يبذل مطورو المستعرضات قصارى جهدهم لتحسين أداء موقع الويب لكل صفحة تزورها ، وهذا هو السبب في أن المتصفحات عادةً ما تنفذ ما يسمى بـ "التحميل المسبق". يقوم هذا الجزء من البرامج بمسح قبل مورد طلبته بتنسيق HTML من أجل تقديم طلبات متعددة في وقت واحد وتشغيلها بالتوازي. هذا هو السبب في أنه من الأفضل إبقاء علامات الأنماط قريبة من بعضها البعض في HTML (خطيًا) ، بالإضافة إلى علامات البرنامج النصي.

علاوة على ذلك ، حاول تجميع التحديثات على HTML لتجنب أحداث التخطيط المتعددة ، والتي لا يتم تشغيلها فقط من خلال تغيير في DOM أو CSSOM ولكن أيضًا عن طريق تغيير اتجاه الجهاز وتغيير حجم النافذة.

مصادر مفيدة وقراءات إضافية:

• PageSpeed ​​Insights
• قائمة مراجعة التخزين المؤقت
• طريقة لاختبار ما إذا كان GZIP ممكّنًا لموقعك على الويب
• شبكة متصفح عالية الأداء: كتاب من تأليف إيليا جريجوريك