Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

تحسين الترميز وحجم نقل الأصول القائمة على نصوص

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

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

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

ويتطلب الحصول على أفضل أداء الجمع بين كل هذه الأساليب.

TL;DR

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

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

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

# في ما يلي رسالة سرية تتألف من مجموعة من العناوين بتنسيق
# قيمة أساسية يتبعه سطر جديد ورسالة مشفرة.
format: secret-cipher
date: 04/04/14
AAAZZBBBBEEEMMM EEETTTAAA
  1. قد تتضمن الرسائل تعليقات توضيحية عشوائية، تتم الإشارة إليها بالبادئة “#”. لا تؤثر التعليقات التوضيحية في المعنى أو أي سلوك آخر للرسالة.
  2. قد تتضمن الرسائل عناوين تعد أزواج قيمة أساسية (مفصولة بـ “:”) ويجب أن تظهر في بداية الرسالة.
  3. تحمل الرسائل أحمالاً نصية.

فما الذي يمكننا تنفيذه لخفض حجم الرسالة الواردة أعلاه التي يصل عدد أحرفها إلى 200 حرف؟

  1. رائع، التعليق مثير، إلا أننا نعرف أنه لا يؤثر في معنى الرسالة، ولذلك فقد قررنا التخلص منه عند نقل الرسالة.
  2. ربما تكون هناك بعض الأساليب الذكية التي يمكننا استخدامها لترميز العناوين بطريقة فعالة، على سبيل المثال، لا نعرف ما إذا كانت جميع الرسائل تتضمن تنسيقًا وتاريخًا، ولكن إذا كان الأمر كذلك، فقد نحولها إلى معرِّفات قصيرة بأرقام صحيحة ونرسلها فقط! إلا أننا لا نضمن ما إذا كان الحال كذلك أم لا، ولذلك سنترك ذلك في الوقت الحالي.
  3. يمثل الحمل نصًا فقط، وعلى الرغم من أننا لا نعرف محتوياته بالفعل (يبدو أنه يستخدم رسالة سرية)، يكفي النظر إلى النص لإدراك وجود تكرار كثير. ربما يمكننا، بدلاً من إرسال أحرف مكررة، أن نكتفي بعد الأحرف المكررة ونرمزها بشكل أكثر فعالية؟
    • على سبيل المثال، يمكن أن يصبح “AAA” بعد الترميز “3A” - أو سلسلة من A’s.

ومن خلال الجمع بين الأساليب، يمكننا الوصول إلى النتيجة التالية:

format: secret-cipher
date: 04/04/14
3A2Z4B3E3M 3E3T3A

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

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

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

TL;DR

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

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

<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>…</div>
   <!-- awesome container content: END -->
   <script>
     awesomeAnalytics(); // beacon conversion metrics
   </script>
 </body>
</html>

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

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

^

<html><head><style>.awesome-container{font-size:120%;width: 50%}
</style></head><body><div>…</div><script>awesomeAnalytics();
</script></body></html>

وبعد تطبيق الخطوات الواردة أعلاه تتحول الصفحة من 406 حرفًا إلى 150 حرفًا - أي توفير 63% عن طريق الضغط. ومن المسلم به أنه لا يكون سهل القراءة تمامًا ولكنه لا يجب أن يكون كذلك: ويمكننا الاحتفاظ بالصفحة الأصلية باعتبارها نسخة تطوير وتطبيق الخطوات الواردة أعلاه متى كنا على استعداد لتدشين الصفحة على موقع الويب.

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

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

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

ضغط النصوص باستخدام GZIP

TL;DR

  • أفضل تطبيق لضغط GZIP يتم على الأصول القائمة على نصوص: في CSS وجافا سكريبت وHTML
  • تتوافق جميع المتصفحات الحديثة مع ضغط GZIP وستطلبه تلقائيًا
  • يحتاج الخادم إلى التهيئة ليتمكن من إجراء ضغط GZIP
  • تتطلب بعض وحدات CDN اهتمامًا خاصًا لضمان تمكين GZIP

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

وتتوافق جميع المتصفحات الحديثة مع ضغط GZIP كما تتفاوض فيه تلقائيًا بالنسبة إلى جميع طلبات HTTP: والمهمة هنا ضمان تهيئة الخادم على نحو سليم لعرض المورد المضغوط عندما يطلبه العميل.

المكتبة الحجم الحجم بعد الضغط معدل الضغط
jquery-1.11.0.js 276 كيلوبايت 82 كيلوبايت 70%
jquery-1.11.0.min.js 94 كيلوبايت 33 كيلوبايت 65%
angular-1.2.15.js 729 كيلوبايت 182 كيلوبايت 75%
angular-1.2.15.min.js 101 كيلوبايت 37 كيلوبايت 63%
bootstrap-3.1.1.css 118 كيلوبايت 18 كيلوبايت 85%
bootstrap-3.1.1.min.css 98 كيلوبايت 17 كيلوبايت 83%
foundation-5.css 186 كيلوبايت 22 كيلوبايت 88%
foundation-5.min.css 146 كيلوبايت 18 كيلوبايت 88%

يوضح الجدول الوارد أعلاه التوفير الذي يمكن الحصول عليه من ضغط GZIP لبعض مكتبات جافا سكريبت الشائعة وإطارات عمل CSS. وتتراوح نسبة التوفير بين 60 و 88%، مع ملاحظة أن الجمع بين الملفات المخفضة (المحددة باستخدام “.min” في اسم الملفات)، بالإضافة إلى GZIP، يؤدي إلى نتيجة أكبر بكثير.

  1. نفِّذ عمليات التحسين الخاص بالمحتوى أولاً: عمليات الخفض في CSS وجافا سكريبت وHTML .
  2. استخدم GZIP في ضغط المنتج المخفض.

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

ما التهيئة الأفضل للخادم؟ يتضمن مشروع HTML5 Boilerplate نموذج ملفات تهيئة لجميع الخوادم الشائعة التي تتضمن تعليقات مفصلة لكل شارة وإعداد تهيئة: ابحث عن الخادم المفضل من القائمة، وابحث عن قسم GZIP، وأكِّد أنه تمت تهيئة الخادم باستخدام الإعدادات الموصى بها.

عرض تجريبي على DevTools لتوضيح الفرق بين الحجم الفعلي وحجم النقل

هناك طريقة بسيطة وسريعة للاطلاع على GZIP عمليًا وهي فتح Chrome DevTools وفحص العمود الحجم / المحتوى في لوحة الشبكة: يشير الحجم إلى حجم نقل الأصل، بينما يشير المحتوى إلى حجم الأصل بدون ضغط. بالنسبة إلى أصل HTML في المثال الموضح أعلاه، تمكن GZIP من توفير 24.8 كيلوبايت خلال النقل.

أخيرًا، هناك تحذير: على الرغم من أن معظم الخوادم ستضغط الأصول تلقائيًا نيابة عنك عند عرضها للمستخدم، تتطلب بعض وحدات CDN مزيدًا من الاهتمام والعمل اليدوي للتأكد من أنه تم تعيين GZIP وفقًا لما يتم عرضه. راجع الموقع وتأكد من أنه يتم ضغط الأصول فعلاً!