تحسين عملية ترميز وحجم نقل مواد العرض النصية

Ilya Grigorik

Jeremy Wagner

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

ضغط البيانات 101

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

لتقديم أفضل أداء، يجب استخدام كلّ مما يلي: التقنيات:

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

يُطلق على عملية خفض حجم البيانات اسم ضغط البيانات. كثير من الناس لديهم الخوارزميات والتقنيات والتحسينات التي ساهمت بها في تحسين الضغط والنسب وسرعة الضغط والذاكرة التي يتطلبها الضغط المتنوّع الخوارزميات.

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

لتوضيح المبادئ الأساسية لهذه التقنيات، ضع في اعتبارك عملية تحسين تنسيق رسالة نصية بسيطة تم اختراعه لهذا المثال فقط:

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA

1. قد تحتوي الرسائل على تعليقات توضيحية عشوائية، ويُشار إليها أحيانًا باسم التعليقات: التي يُشار إليها بعلامة "#" . لا تؤثر التعليقات التوضيحية في معنى الرسالة أو سلوكياتها.
2. قد تحتوي الرسائل على رؤوس، وهي أزواج مفاتيح/قيم (مفصولة حسب ":" في المثال السابق) التي تظهر في بداية الرسالة.
3. تحمل الرسائل حمولات نصية.

ما يمكن فعله لتقليل حجم الرسالة السابقة، والذي يبدأ من 200 حرف؟

1. التعليق مثير للاهتمام، لكنه لا يؤثر في معنى الرسالة. أزلها عند نقل الرسالة.
2. ثمة تقنيات جيدة لترميز العناوين بطريقة فعّالة. بالنسبة على سبيل المثال، إذا كنت تعرف أن جميع الرسائل لها "تنسيق" و "التاريخ" هل يمكنك ثم نحولها إلى معرّفات أعداد صحيحة قصيرة وأرسلها فقط. ومع ذلك، قد لا يكون صحيحًا، لذلك من الأفضل تركه كما هو في الوقت الحالي.
3. الحمولة هو نص فقط. لا نعرف محتواها على الرغم من ذلك هي (على ما يبدو، إنها تستخدم "secret-cipher")، ومجرد النظر إلى النص أن هناك الكثير من التكرار فيها. ربما بدلاً من إرسال الأحرف المتكررة، يمكنك فقط حساب عدد الأحرف المتكررة وترميزها بكفاءة أكبر. على سبيل المثال، "AAA" يصبح "3A"، والذي سلسلة من ثلاثة أحرف A.

يؤدي الجمع بين هذه الأساليب إلى النتيجة التالية:

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

تتكون الرسالة الجديدة من 56 حرفًا، مما يعني أنك قمت بضغط الأصلية بنسبة 72%. وهذا انخفاض كبير!

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

التصغير: المعالجة المسبقة والتحسينات الخاصة بالسياق

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

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

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

<html>
  <head>
    <style>
      /* awesome-container is only used on the landing page */
      .awesome-container {
        font-size: 120%;
      }

      .awesome-container {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <!-- awesome container content: START -->
    <div>
      This is my awesome container, and it is <em>so</em> awesome.
    </div>
    <!-- awesome container content: END -->
    <script>
      awesomeAnalytics(); // Beacon conversion metrics
    </script>
  </body>
</html>

بالنظر إلى مقتطف HTML السابق وأنواع المحتوى الثلاثة المختلفة التي تحتوي على:

1. ترميز HTML:
2. CSS لتخصيص العرض التقديمي لصفحة.
3. JavaScript لتعزيز التفاعلات وإمكانيات الصفحة المتقدّمة الأخرى

لكل نوع من أنواع المحتوى هذه قواعد مختلفة لما يُعدّ صالحًا والمحتوى، والقواعد المختلفة لتحديد التعليقات، وما إلى ذلك. السؤال يبقى السؤال "كيف يمكن تقليل حجم هذه الصفحة؟"

• تعد تعليقات التعليمات البرمجية أفضل صديق للمطوّر، ولكن لا يحتاج المتصفّح إلى إزالة CSS (/* ... */) وHTML (<!-- ... -->) وJavaScript (// ...) تقلّل التعليقات من إجمالي حجم نقل الصفحة وموارد فرعية.
• "الذكاء" قد يلاحظ ضاغط CSS أننا نستخدم طريقة غير فعالة ويحدّد القواعد للقاعدة .awesome-container، وتصغير التعريفَين في نمط بدون التأثير في أي أنماط أخرى، مما يوفر المزيد من وحدات البايت. أكثر من من قواعد CSS، إلا أن إزالة هذا النوع من التكرار قد ينتج عنها زيادة، إلا أنه شيء يمكن تطبيقه بشكل مكثف، حيث غالبًا ما تكون المحددات بالضرورة في سياقات مختلفة، مثل الاستعلامات عن الوسائط.
• المسافات وعلامات التبويب هي وسائل راحة للمطوّرين في HTML وCSS وJavaScript. يمكن لأداة ضاغط إضافي إزالة جميع علامات التبويب والمسافات. بخلاف التطبيقات الأخرى تقنيات إزالة التكرار، يمكن تطبيق هذا النوع من التحسين بشكل مكثف، طالما أن مثل هذه المسافات أو علامات التبويب ليست ضرورية لمحركات البحث عرض تقديمي - على سبيل المثال، قد ترغب في الاحتفاظ بالمساحات داخل عمليات نص في مستند HTML، لأنها تضمن سهولة قراءة المحتوى الذي يستطيع المستخدمون سيراها بالفعل.

<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>

وبعد تطبيق الخطوات السابقة، تنتقل الصفحة من 516 إلى 204 حرفًا، وهو يمثل توفيرًا بنسبة 60% تقريبًا. بالطبع، ليست سهلة القراءة، ولكنها لا يلزم أن تكون قابلة للاستخدام. تساعد ممارسات التنمية الحديثة أيضًا تتيح لك الاحتفاظ بإصدارات رمز المصدر ذات التنسيق الجيد والقابلة للقراءة يكون منفصلاً عن الرمز المحسَّن الذي تشحنه إلى قناة الإصدار العلني. مع خرائط المصدر: والتي تقدّم تمثيلاً سهل القراءة للخرائط التي تم تحويلها يسمح لك رمز الإنتاج باستكشاف الأخطاء وإصلاحها بسهولة أكبر في مرحلة الإنتاج، ويمكنك امتلاك تجربة مطوِّر جيدة مع تحسين الأداء في الوقت نفسه في تجربة المستخدم.

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

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

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

ضغط النص باستخدام خوارزميات الضغط

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

• gzip وBotli هما خوارزميات شائعة الاستخدام لضغط المحتوى وتعمل بشكل أفضل على مواد العرض النصية: CSS وJavaScript وHTML.
• تدعم جميع المتصفحات الحديثة ضغط gzip وBrotli، وتعرض إعلانات لكل منهما في عنوان طلب HTTP Accept-Encoding.
• يجب إعداد خادمك لتفعيل الضغط. برامج خادم الويب في كثير من الأحيان، يمكن للوحدات من ضغط الموارد المستندة إلى النص بشكل تلقائي.
• يمكن ضبط كل من gzip وBotli لتحسين نسب الضغط من خلال ضبط مستوى الضغط. بالنسبة لـ gzip، تتراوح إعدادات الضغط من من 1 إلى 9، حيث يكون 9 هو الأفضل. بالنسبة إلى Brotli، يتراوح هذا النطاق بين 0 و11، و11 لكوني الأفضل. ومع ذلك، تتطلب إعدادات الضغط الأعلى المزيد من الوقت. بالنسبة موارد مضغوطة ديناميكيًا، أي في وقت طلب - تميل الإعدادات في منتصف النطاق إلى تقديم أفضل مقايضة بين نسبة الضغط والسرعة. مع ذلك، يكون الضغط الثابت عبارة عن من الممكن، وهو عندما يتم ضغط الاستجابة مسبقًا، ويمكن أن وبالتالي يمكنك استخدام إعدادات الضغط الأكثر صرامة المتاحة لكل خوارزمية الضغط.
• عادةً ما توفر شبكات توصيل المحتوى (CDN) ضغطًا تلقائيًا والموارد المؤهِّلة. يمكن لشبكات توصيل المحتوى (CDN) أيضًا إدارة الضغط الديناميكي والثابت وهو ما يوفر لك جانبًا أقل من الضغط يدعو إلى القلق.

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

من الناحية العملية، يقدم كل من gzip وBortli أفضل أداء في المحتوى المستند إلى النص، وغالبًا ما يحقق تتراوح معدلات الضغط بين 70 و90% للملفات الأكبر حجمًا. ومع ذلك، فإن تشغيل هذه أصول الخوارزميات التي تم ضغطها بالفعل باستخدام خوارزميات بديلة - مثل لأنّ معظم تنسيقات الصور التي تستخدم أساليب الضغط مع فقدان البيانات أو فقدان البيانات تحسن قليل أو عدم وجود أي تحسن.

تعلن جميع المتصفحات الحديثة عن دعم لبرنامجي gzip وBotli في عنوان طلب HTTP Accept-Encoding إلا أن المستضيف هو خادم ضمان تهيئة خادم الويب بشكل صحيح لخدمة مضغوطًا فقط عندما يطلبه العميل.

يعرض الجدول السابق مقدار التوفير الذي يمكن لكل من Brotli وgzip الضغط عليه يتوفر لبعض مكتبات JavaScript المعروفة. تتراوح المبالغ التي يتم توفيرها بين 65% 86% اعتمادًا على الملف والخوارزمية. كمرجع لك، يجب أن يكون الحد الأقصى تم تطبيق مستوى الضغط على كل ملف لكل من Brotli وgzip. أينما كان قدر الإمكان، أفضّل Brotli بدلاً من gzip.

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

هناك طريقة سريعة لرؤية طريقة الضغط وهي من خلال فتح أدوات مطوري البرامج في Chrome، ثم فتح الشبكة، وحمِّل صفحة من اختيارك وراقب الجزء السفلي من لوحة الشبكة.

وكما في الصورة السابقة، من المفترض أن ترى تقسيمًا لما يلي:

• عدد الطلبات، وهو عدد الموارد التي تم تحميلها .
• حجم النقل لجميع الطلبات وهذا يعكس فعالية الضغط المطبَّق على أي من موارد الصفحة.
• حجم المورد لجميع الطلبات. يعكس هذا حجم الموارد المتاحة الصفحة بعد فك ضغطها.

التأثيرات على "مؤشرات أداء الويب الأساسية"

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

عند تطبيق التحسينات الموضحة في هذا الدليل على الموارد في موقعك الإلكتروني، قد يختلف تأثير "مؤشرات أداء الويب الأساسية" حسب الموارد تحسينه وكذلك المقاييس المعنية. ومع ذلك، إليك بعض الحالات التي ويمكن أن يؤدي تطبيق هذه التحسينات إلى تحسين مؤشرات Core Web Vitals الخاصة بموقعك الإلكتروني:

• يمكن لموارد HTML التي يتم تصغيرها وضغطها تحسين تحميل HTML هذا، أي قابلية اكتشاف موارده الفرعية، وبالتالي تحسين بتحميلها. يمكن أن يكون ذلك مفيدًا في سرعة عرض أكبر محتوى مرئي على الصفحة. (LCP): بينما يمكن استخدام تعديلات الموارد مثل rel="preload" للتأثير في قابلية اكتشاف الموارد، واستخدام الكثير منها يمكن أن يتسبب في مشكلات في التنافس في النطاق الترددي. من خلال ضمان استجابة HTML لطلب التنقل مضغوطة، يمكن اكتشاف الموارد المضمنة فيها في أسرع وقت ممكن بواسطة أداة فحص التحميل المسبق.
• يمكن أيضًا تحميل بعض الاقتراحات المرشحة لـ LCP في وقت أقرب باستخدام الضغط. بالنسبة على سبيل المثال، يمكن تحميل حمولة الموارد إلى صور SVG المرشّحة لمقياس LCP. المدة من خلال الضغط المستند إلى النص. هذا يختلف عن التحسينات التي ستجريها على أنواع الصور الأخرى، وهي مضغوطة بشكل أساسي من خلال طرق ضغط أخرى، مثل كيفية عمل ملفات JPEG تستخدم الصور ضغطًا مع فقدان البيانات.
• بالإضافة إلى ذلك، يمكن أن تكون العُقد النصية أيضًا مرشحة لـ LCP. كيف تم تصميم الأساليب الموضحة في هذا الدليل على ما إذا كنت تستخدم خط ويب للنص على لصفحات الويب الخاصة بك. إذا كنت تستخدم خط ويب، فمن الأفضل تحسين خطوط الويب الممارسات. ومع ذلك، إذا كنت لا تستخدم خطوط الويب، بل تستخدم نظام التي يتم عرضها دون تحمل أي مدة تحميل للموارد - تقليص فإن ضغط CSS يقلل من هذه المدة، مما يعني أن عرض يمكن أن تحدث العُقد النصية المحتملة لسرعة عرض أكبر محتوى مرئي (LCP) بشكل أسرع.

الخاتمة

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

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

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