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

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

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

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

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

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

ملف خوارزمية الحجم غير المضغوط الحجم المضغوط نسبة الانضغاط
angular-1.8.3.js بروتلي 1,346 كيبيبايت 256 كيبيبايت 81‏%
angular-1.8.3.js gzip 1,346 كيبيبايت 329 كيبيبايت 76%
angular-1.8.3.min.js بروتلي 173 كيبيبايت 53 كيبيبايت 69%
angular-1.8.3.min.js gzip 173 كيبيبايت 60 كيبيبايت 65%
jquery-3.7.1.js بروتلي 302 كيبيبايت 69 كيبيبايت 77%
jquery-3.7.1.js gzip 302 كيبيبايت 83 كيبيبايت 73%
jquery-3.7.1.min.js بروتلي 85 كيبيبايت 27 كيبيبايت 68%
jquery-3.7.1.min.js gzip 85 كيبيبايت 30 كيبيبايت 65%
lodash-4.17.21.js بروتلي 531 كيبيبايت 73 كيبيبايت 86%
lodash-4.17.21.js gzip 531 كيبيبايت 94 كيبيبايت 82%
lodash-4.17.21.min.js بروتلي 71 كيبيبايت 23 كيبيبايت 68%
lodash-4.17.21.min.js gzip 71 كيبيبايت 25 كيبيبايت 65%

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

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

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

اقرأ أدوات مطوّري البرامج الحجم الفعلي مقابل حجم النقل.
تمثيل لحجم النقل (أي المضغوط) لجميع موارد الصفحة مقابل حجمها الفعلي كما هو موضّح في لوحة الشبكة في "أدوات مطوري البرامج في Chrome".

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

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

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

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

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

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

الخلاصة

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

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

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