معظم مستندات HTML صغيرة نسبيًا، مما يوفر نقطة بداية لتحميل الموارد الأخرى الموجودة على الصفحة.
ولكن لماذا تقوم بعض مواقع الويب بتحميل عدة ميغابايت من تعليمات HTML البرمجية؟ لا يرجع الأمر عادةً إلى وجود الكثير من المحتوى على الصفحة، بل إلى وجود أنواع أخرى من الموارد مضمنة داخل المستند.
في هذه المقالة، سنلقي نظرة على أمثلة لمستندات HTML كبيرة الحجم حول الويب ونلقي نظرة خاطفة على التعليمات البرمجية لمعرفة السبب الذي يجعلها كبيرة جدًا.
HTML على الويب مليء بالمفاجآت. أثناء كتابة هذا المقال، قمت بإعادة بناء معظم أجزاء DebugBear”https://www.debugbear.com/html-size-analyzer”> محلل حجم HTML. إذا كان HTML الخاص بك يحتوي على نصوص برمجية تحتوي على JSON والتي تحتوي على HTML الذي يحتوي على CSS الذي يحتوي على صور – فهذا مدعوم الآن!
الصور المدمجة
يعد ترميز Base64 طريقة لتحويل الصور إلى نص، بحيث يمكن تضمينها في ملف نصي مثل HTML أو CSS. يتمتع تضمين الصور مباشرة في HTML بميزة كبيرة: لم يعد المتصفح بحاجة إلى تقديم طلب منفصل لعرض الصورة.
ومع ذلك، بالنسبة للملفات الكبيرة، فمن المحتمل أن يسبب ذلك مشكلات. على سبيل المثال، لم يعد من الممكن تخزين الصورة مؤقتًا بشكل مستقل، وسيتم تحديد أولوية الصورة بنفس طريقة محتوى المستند، في حين أنه عادةً ما يكون من المقبول تحميل الصور لاحقًا.
فيما يلي مثال لملفات PNG المضمنة في HTML باستخدام عناوين URL للبيانات.
هناك اختلافات مختلفة لهذا النمط:
- في بعض الأحيان تكون الصورة واحدة بحجم عدة ميغابايت تم تضمينها عن طريق الخطأ، وفي أحيان أخرى تكون هناك مئات من الرموز الصغيرة التي تتراكم بمرور الوقت
- لقد رأيت موقعًا يستخدم صورًا سريعة الاستجابة مع عناوين URL للبيانات. أحد أهداف الصور سريعة الاستجابة هو تحميل الصور بالحد الأدنى من الدقة اللازمة فقط، ولكن تضمين جميع الإصدارات في HTML له تأثير معاكس.
- الصور المضمنة بشكل غير مباشر:
- ملفات SVG المضمنة والتي تكون في حد ذاتها عبارة عن غلاف رفيع حول PNG أو JPEG
- صور الخلفية من أوراق أنماط CSS المضمنة
- الصور ضمن بيانات JSON (المزيد حول ذلك لاحقًا 😬)
فيما يلي مثال لعلامة نمط تحتوي على 201 قاعدة مع صور خلفية مضمنة.
مضمنة CSS
عادةً ما يكون حجم CSS المضمّن كبيرًا بسبب الصور. ومع ذلك، تساهم المحددات الطويلة من CSS المتداخلة أيضًا في حجم CSS وHTML.
في المثال أدناه، يحتوي HTML على 20 علامة نمط مضمّنة ذات محتوى مماثل (أشكال مختلفة مثل “header” و”header-mobile” و”header-desktop”). يبلغ طول معظم المحددات أكثر من 200 حرف، ونتيجة لذلك، يتكون 47% من محتوى ورقة الأنماط الإجمالي من محددات بدلاً من إعلانات الأنماط.
ومع ذلك، يتم ضغط HTML بشكل جيد بسبب التكرار داخل المحددات، ويتراوح الحجم من 20.5 ميغابايت إلى 2.3 ميغابايت فقط بعد ضغط GZIP.
الخطوط المضمنة
كما هو الحال مع الصور، يتم أيضًا ترميز الخطوط أحيانًا كـ Base64. بالنسبة لخط واحد أو اثنين من الخطوط الصغيرة، يمكن أن يعمل هذا بشكل جيد، حيث يمكن عرض النص بالخط المناسب على الفور.
ومع ذلك، عندما يتم تضمين العديد من الخطوط، فهذا يعني أنه يتعين على الزائرين الانتظار حتى انتهاء تنزيل هذه الخطوط قبل أن يتم عرض محتوى الصفحة.
حالة التطبيق من جانب العميل
تم إنشاء العديد من مواقع الويب الحديثة كتطبيقات JavaScript. قد يكون عرض المحتوى بطيئًا فقط بعد تحميل جميع بيانات JavaScript والبيانات المطلوبة، لذلك أثناء التحميل الأولي للصفحة، يتم عرض HTML أيضًا على الخادم.
بمجرد تحميل كود التطبيق من جانب العميل، يتم “ترطيب” HTML الثابت: يصبح محتوى الصفحة تفاعليًا باستخدام JavaScript، ويتحكم الكود من جانب العميل في تحديثات المحتوى المستقبلية.
عادةً ما يقوم الكود من جانب العميل بتقديم طلبات جلب إلى نقاط نهاية واجهة برمجة التطبيقات (API) على الواجهة الخلفية لتحميل البيانات المطلوبة. ولكن، نظرًا لأن العرض الأولي من جانب العميل يتطلب نفس البيانات التي تتطلبها عملية العرض من جانب الخادم، فإن الخوادم تقوم بتضمين حالة الترطيب في HTML النهائي. بعد ذلك، يمكن أن تتم عملية الترطيب من جانب العميل مباشرة بعد تحميل كافة جافا سكريبت، دون تقديم أي طلبات إضافية لواجهة برمجة التطبيقات.
كما يمكنك أن تتخيل، يمكن أن تكون حالة الترطيب هذه كبيرة! يمكنك التعرف عليه بناءً على علامات البرنامج النصي التي تشير إلى الكلمات الرئيسية الخاصة بإطار العمل مثل هذا:
- التالي.js:
self.__next_f.pushأو__NEXT_DATA__ - التالي:
__NUXT_DATA__ - استرجاع:
__PRELOADED_STATE__ - أبولو:
__APOLLO_STATE__ - الزاوي:
ng-stateأو ما شابه ذلك __INITIAL_STATE__أو__INITIAL_DATA__في العديد من الإعدادات المخصصة
في بيئة التطوير المحلية مع القليل من البيانات، قد لا يكون حجم حالة الماء ملحوظًا. ولكن مع إضافة المزيد من البيانات إلى قاعدة بيانات الإنتاج، تنمو حالة الماء أيضًا. على سبيل المثال، تشير قائمة الفنادق إلى 3561 صورة مختلفة (والتي، لحسن الحظ، ليست مضمنة في Base64 😅).
إذا قمت بتمرير صور Base64 إلى مكونات الواجهة الأمامية، فسوف ينتهي بها الأمر أيضًا في حالة الترطيب.
يحتوي موقع الويب هذا على 42 صورة مضمنة في بيانات JSON داخل مستند HTML. أكبر صورة يبلغ حجمها 2.5 ميغابايت.
هناك قدر مدهش من التعشيش. في المثال السابق لدينا صور بتنسيق JSON في برنامج نصي بتنسيق HTML.
لكن يمكننا أن نذهب إلى ما هو أعمق من ذلك! دعنا نتعمق في مثالنا التالي:
وبعد البحث في حالة الترطيب نجد 52 منتج مع أ judgmeWidget ملكية. قيمة هذه الخاصية هي في حد ذاتها جزء من HTML!
دعونا نضع إحدى هذه القيم في محلل حجم HTML. مرة أخرى، معظم HTML مضمن بالفعل في كود JSON، هذه المرة في شكل سمة data-json على div!
وما اسم أكبر خاصية في JSON؟ body_html 😂😂😂
الأسباب الأخرى لحجم HTML الكبير
بعض الأمثلة الأخرى التي رأيتها أثناء بحثي:
- سكريبت مضمن بحجم 4 ميجا بايت
- بيانات وصفية غير متوقعة من Figma
- قائمة ضخمة تحتوي على أكثر من 7000 عنصر و1300 صورة SVG مضمّنة
- صور مستجيبة مع 180 حجمًا مدعومًا
لا تزال هناك بعض مواقع الويب الكبيرة التي لا تزال لا تطبق ضغط GZIP أو Brotli على HTML الخاص بها. لذا، على الرغم من عدم وجود الكثير من التعليمات البرمجية، إلا أنك لا تزال تحصل على حجم نقل كبير.
رؤية 53 كيلو بايت NREUM يعد البرنامج النصي أيضًا محبطًا دائمًا: حيث تقوم العديد من مواقع الويب بتضمين البرنامج النصي لمراقبة المستخدم النهائي لـ New Relic مباشرة في المستند . إذا قمت بقياس تجربة المستخدم، فأنت تريد حقًا تجنب تأثير الأداء هذا!
كيف يؤثر حجم HTML على سرعة الصفحة؟
يجب تنزيل كود HTML وتحليله كجزء من عملية تحميل الصفحة. كلما استغرق ذلك وقتًا أطول، كلما زاد الوقت الذي يتعين على الزوار انتظار ظهور المحتوى فيه.
تقوم المتصفحات أيضًا بتعيين أولوية عالية لمحتوى HTML، على افتراض أن كل ذلك محتوى صفحة أساسي. يمكن أن يعني ذلك تنزيل حالة الترطيب غير الحرجة قبل تحميل أوراق الأنماط وملفات JavaScript التي تحظر العرض.
يمكنك رؤية مثال على ذلك في شلال الطلب هذا من DebugBear”https://www.debugbear.com/test/website-speed”> اختبار سرعة الموقع. بينما يعرف المتصفح عن الملفات الأخرى في وقت مبكر، بدلاً من ذلك يتم استهلاك النطاق الترددي بالكامل بواسطة المستند.
ويعني تضمين الصور أو الخطوط في HTML أيضًا أنه لا يمكن تخزين هذه الملفات مؤقتًا وإعادة استخدامها عبر الصفحات. وبدلاً من ذلك، يجب إعادة تنزيلها مع كل تحميل صفحة على موقع الويب.
هل الوقت المستغرق في تحليل HTML يثير القلق أيضًا؟ على جهاز MacBook الخاص بي، يستغرق الأمر حوالي 6 مللي ثانية لتحليل ميغابايت واحدة من تعليمات HTML البرمجية. وفي المقابل، فإن الهاتف المنخفض الجودة الذي أستخدمه للاختبار يستغرق حوالي 80 مللي ثانية لكل ميجابايت. لذلك بالنسبة للمستندات الكبيرة جدًا، تبدأ معالجة وحدة المعالجة المركزية في أن تصبح عاملاً يستحق التفكير فيه.
يمكن لمواقع الويب التي تحتوي على HTML كبير أن تظل سريعة
كما يمكنك أن تقول، قد يكون لدي القليل من الهوس بحجم HTML. ولكن هل هذه مشكلة حقيقية للعديد من الزوار الحقيقيين؟
لا أريد أن أجعل ملفات HTML الكبيرة تمثل مشكلة أكبر مما هي عليه بالفعل. ربما يتمتع معظم الزوار الذين يأتون إلى موقع الويب الخاص بك اليوم باتصالات وأجهزة سريعة إلى حد معقول. تميل مشكلات أداء الويب الأخرى إلى أن تكون أكثر إلحاحًا. (مثل تشغيل كود تطبيق JavaScript الذي يستخدم حالة الترطيب.)
لا تحتاج الصفحات أيضًا إلى تنزيل مستند HTML الكامل قبل أن تتمكن من بدء العرض. هنا يمكنك أن ترى أنه يتم تحميل المستند وأوراق الأنماط المهمة بالتوازي. ونتيجة لذلك، يتم عرض المحتوى الرئيسي قبل تحميل المستند بالكامل.
توضح بيانات الزائر الحقيقية من تقرير تجربة مستخدم Chrome (CrUX) من Google أن موقع الويب هذا يتم عرضه عادةً في أقل من ثانيتين. وهذا على جهاز محمول!
ومع ذلك، من المؤكد أن المستند الكبير يؤدي إلى إبطاء الصفحة. أحد المؤشرات على ذلك هو أن صورة أكبر رسم محتوى (LCP) لا تظهر على الفور بعد التحميل. بدلاً من ذلك، يُبلغ CrUX عن تأخير في العرض يبلغ 584 مللي ثانية.
يخبرنا هذا أن ورقة أنماط حظر العرض، التي تتنافس مع الموارد الأخرى على خادم موقع الويب الرئيسي، يتم تحميلها بشكل أبطأ من الصور من خادم مختلف.
من المفيد إلقاء نظرة سريعة على HTML لموقع الويب الخاص بك والتحقق مما يحتويه بالفعل. غالبًا ما تكون هناك إصلاحات سريعة عالية التأثير يمكنك إجراؤها.
عندما يتم تضمين الصور في كود HTML أو CSS، فغالبًا ما يكون المقصود منها تحسين الأداء. لكن الإعداد الجيد يمكن أن يجعل من السهل جدًا إضافة المزيد من الصور لاحقًا دون النظر إلى الملف الذي تم تضمينه. فكر في إضافة حواجز حماية إلى بنية CI الخاصة بك لالتقاط القفزات غير المقصودة في حجم الملف.