تعزيز كفاءة الضغط باستخدام القواميس المشتركة

Jeremy Wagner

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

على الرغم من أنّ تنسيق gzip فعّال للغاية بحد ذاته، تمّ إجراء المزيد من التحسينات على عملية الضغط على الويب في السنوات الأخيرة. في عام 2016، تم تضمين خوارزمية Brotli في Chrome، ما أدّى إلى تحقيق نسب ضغط أفضل بشكل عام للموارد المؤهّلة. بحلول نهاية عام 2017، أصبحت جميع المتصفحات الحديثة متوافقة مع Brotli، وبدأ استخدام هذا التنسيق على الخوادم بشكلٍ أوسع. في الآونة الأخيرة، طرح Chrome تقنية ضغط ZStandard.

لا يتوقف العمل عند هذا الحد. عمل فريق Chrome على إتاحة استخدام القواميس المشتركة على الويب، وهي متاحة الآن في إصدار تجريبي أوّلي لكل من Brotli وZStandard. يمكن أن تُكمل القواميس المشترَكة ضغط Brotli وZStandard لتوفير نسب ضغط أعلى بكثير للمواقع الإلكترونية التي تُصدر رموزًا مُعدَّلة بشكل متكرّر، ويمكن أن تحقّق في بعض الحالات نسب ضغط تبلغ% 90 أو أعلى. تتناول هذه المشاركة بالتفصيل طريقة عمل القواميس المشتركة، وكيفية التسجيل في الإصدارات التجريبية من المصدر لاستخدامها مع Brotli وZStandard على موقعك الإلكتروني.

شرح القواميس المشتركة

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

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

في ما يلي مثال على مدى فعالية قاموس الضغط المخصّص: لنفترض أنّ موقعك الإلكتروني يستخدم إطار عمل Angular، وأنّ الإصدار الحالي الذي تستخدمه هو 1.7.9. يبلغ حجم هذا الإصدار من إطار عمل Angular حوالي 172 كيلوبايت غير مضغوط. وعند ضغطه باستخدام الإعدادات التلقائية لبرنامج Brotli، يصبح حجمه 53 كيلوبايت تقريبًا. ويؤدي ذلك إلى نسبة ضغط تبلغ ‎70% تقريبًا. لنفترض أنّك قرّرت الترقية إلى Angular 1.8.3 لاحقًا. بما أنّ حجم هذا الإصدار من Angular هو نفسه تقريبًا حجم الإصدار 1.7.9، يمكنك توقّع نسبة الضغط نفسها تقريبًا التي كانت في الإصدار السابق.

في هذه الحالة، يمكن أن يكون القاموس المخصّص مفيدًا باستخدام عملية تُعرف باسم الضغط التفاضلي، وهي عملية يتم فيها استخدام قاموس لإصدار سابق من أحد الموارد لضغط إصدار لاحق. باستخدام المثال السابق، إذا ضغطت الإصدار 1.8.3 من Angular باستخدام الإصدار 1.7.9 كقاموس، سيكون الناتج أكثر بقليل من 4 كيلوبايت. ويمثّل ذلك نسبة ضغط تبلغ ‎98%تقريبًا. من الواضح أنّ قواميس الضغط يمكن أن تؤثر بشكل كبير في أداء التحميل، وقد تمّت ملاحظة فعاليتها في التطبيقات في العالم الواقعي.

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

الطريقة التي يعلن بها Chrome عن توفّر دعم القواميس المشتركة

تعلن جميع المتصفّحات عن خوارزميات الضغط التي تتوافق معها من خلال عنوان طلب Accept-Encoding. محتوى الرأس هو قائمة مفصولة بفواصل بترميزات متوافقة:

Accept-Encoding: gzip, br, zstd

يشير عنوان Accept-Encoding هذا تحديدًا إلى أنّ المتصفّح الذي يطلب المورد متوافق مع خوارزميات ضغط gzip وBrotli وZStandard. يمكن لخادم الويب الذي يستجيب للطلب بعد ذلك تحديد الخوارزمية التي سيتم استخدامها عند الاستجابة للطلب.

عند تفعيل ميزة القاموس المشترَك وتوفر قاموس ذي صلة بمصدر معيّن، تتم إضافة عناصر رمزية إضافية إلى العنوان Accept-Encoding. هذه الرموز هي br-d لـ Brotli وzstd-d لـ Zstandard. سيتضمّن Chrome أيضًا تجزئة قاموس متاح، كما هو موضّح أدناه.

Accept-Encoding: gzip, br, zstd, br-d, zstd-d
Available-Dictionary: :pZGm1Av0IEBKARczz7exkNYsZb8LzaMrV7J32a2fFG4=:

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

ضغط القاموس المشترَك للموارد الثابتة

مورد الصفحة الثابت هو المورد الذي يقدّم دائمًا الاستجابة نفسها لعنوان URL محدد. ومن الأمثلة الشائعة لموارد الصفحات الثابتة القابلة للضغط ملفات JavaScript وCSS. يتم عادةً إنشاء نُسخ من هذه الموارد لأغراض التخزين المؤقت بطريقة ما، وفي بعض الأحيان يتم ذلك باستخدام تجزئة لمحتوى الملف في اسم الملف (مثل styles.abcd1234.css) أو طريقة أخرى لإنشاء بصمة للمورد. وأنواع الموارد هذه هي مرشحة رائعة لضغط البيانات التفاضلي الذي يوفّره القاموس المشترَك، لأنّ الموارد الثابتة غالبًا ما يتم تخزينها مؤقتًا لفترات طويلة من الزمن وتميل إلى أن يتم تعديلها ببعض التردد.

يمكن تحديد قاموس لمورد ثابت من خلال ضبط عنوان الاستجابة Use-As-Dictionary له. يقبل العنوان أحد أزواج المفتاح/القيمة القليلة، ولكن العنصر الوحيد المطلوب هو match الذي يقبل بنية URLPattern التي تحدّد مسار المورد الذي يجب استخدام القاموس فيه:

Use-As-Dictionary: match="/dist/styles.*.css"

ملاحظة: هناك أزواج مفتاح/قيمة اختيارية أخرى يمكنك استخدامها مع العنوان Use-As-Dictionary لتخصيص طريقة استخدام القواميس بشكل أكبر.

يمكنك اعتبار العنوان Use-As-Dictionary آلية تنطبق على الإصدارات المستقبلية من المورد التي تتطابق مع النمط المحدّد فيه. لنفترض أنّ موقعك الإلكتروني يُرسِل جميع أنماط CSS في ملف واحد. للتبسيط، لنفترض أنّ النسخة الأولى من هذا المورد متوفّرة على العنوان /dist/styles.v1.css، ويتم إرسالها باستخدام عنوان استجابة Use-As-Dictionary يحتوي على قيمة match‏ /dist/styles.*.css.

بعد مرور بعض الوقت، عدّلت ملف CSS لموقعك الإلكتروني وأرسلت إصدارًا جديدًا منه على العنوان /dist/styles.v2.css. بما أنّ قيمة match المستخدَمة في عنوان الاستجابة Use-As-Dictionary من الإصدار السابق تنطبق على هذا الطلب، سيُرسِل المتصفّح عنوان Available-Dictionary يحتوي على تجزئة للقاموس مُشفَّرة على شكل تسلسل وحدات بت للحقل من الموقع:

Accept-Encoding: gzip, br, zstd, br-d, zstd-d
Available-Dictionary: :pZGm1Av0IEBKARczz7exkNYsZb8LzaMrV7J32a2fFG4=:

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

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

إذا كنت تُرسِل رمزًا جديدًا لموقعك الإلكتروني بشكل متكرّر، يمكن أن يُحقّق لك ضغط البيانات بطريقة دلتا نتائج رائعة. ومع ذلك، يمكن تنفيذ هذه العملية بشكل مرن. إذا لم يحدِّد المتصفّح توفُّر قاموس في ذاكرة التخزين المؤقت للمتصفّح، لن يحدِّد الرموز br-d أو zstd-d الإضافية في عنوان Accept-Encoding. في هذه الحالة، يتم تطبيق عملية الضغط العادية.

ملاحظة مهمة: بما أنّ ميزة الضغط المستندة إلى القاموس المشترَك تعطي الأولوية لمخاوف الأمان والخصوصية، تفترض هذه العملية أنّه سيتم تطبيقها على الموارد من المصدر نفسه. إذا كنت تريد استخدامها لموارد من مصادر متعددة، تسري قواعد مشاركة الموارد المتعدّدة المصادر (CORS)، ويجب تحديد عنوان Access-Control-Allow-Origin لكي تكون القواميس قابلة للاستخدام في مثل هذه السيناريوهات.

ضغط القاموس المشترَك للموارد الديناميكية

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

بسبب طبيعة الموارد التي يتم إنشاؤها ديناميكيًا، يجب تحميل قاموس على العميل لاستخدامه لاحقًا. يعني تحميل قاموس مسبقًا أنّ تطبيق ضغط القاموس المشترَك على الموارد الديناميكية هو عملية تخمينية. في هذه الحالات، نأمل أن يتلقّى موقعك الإلكتروني عددًا كافيًا من الزيارات كي تتم تسوية تكلفة القاموس على مدار عدد كبير من عمليات التنقّل. إذا قرّرت تجربة ذلك، تكون الخطوة الأولى هي تحديد موقع القاموس باستخدام عنصر <link> في رمز HTML للصفحة:

<link rel="dictionary" href="/dictionary.dat">

عندما يصادف Chrome عنصر <link> هذا، قد يجلب القاموس بعد أن تصبح الصفحة غير نشِطة، وبأولوية منخفضة في محاولة لتجنُّب التنافس على عرض النطاق. يجب أن يحدِّد الردّ الخاص بالقاموس نفسه عنوان Use-As-Dictionary وأن يحدِّد مسار المورد الديناميكي الذي ينطبق عليه:

Use-As-Dictionary: match="/product/*"

من هنا، تكون العملية متشابهة إلى حد كبير مع الموارد الثابتة. سيلاحظ المتصفّح أنّ القاموس نفسه ينطبق على الموارد المطابقة، وسيُرفِق المتصفّح رأس Available-Dictionary بالطلب مع تجزئة لمحتوى القاموس، تمامًا مثل عملية الموارد الثابتة الموضّحة سابقًا.

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

ضغط الموارد الثابتة في وقت الإنشاء

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

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

• CompressionWebpackPlugin في webpack، من خلال واجهة compressionOptions
• يوفّر rollup-plugin-brotli إعدادات options يتم تمريرها مباشرةً إلى Zlib في Node.js، حيث يمكن تحديد القواميس.
• يتيح أيضًا المكوّن الإضافي التابع لجهة خارجية esbuild-plugin-compress لـ esbuild الوصول إلى خيارات Zlib في Node.js.

ملاحظة: بما أنّ إتاحة استخدام Zstandard في Chrome هي ميزة تم تطويرها مؤخرًا جدًا في وقت كتابة هذه المقالة، لا تتيح أدوات تجميع حزم التطبيقات استخدام هذا التنسيق حاليًا، ولكن من المؤكد أنّ ذلك سيتغيّر في المستقبل.

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

ننصحكم بتجربتها.

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

1. إذا كنت تريد فقط تعديل ميزة ضغط القاموس المشترَك بنفسك للتعرّف على آلية عملها، يمكنك تفعيل الميزة التجريبية نقل البيانات باستخدام قاموس الضغط في صفحة chrome://flags.
2. إذا كنت مهتمًا بتجربة هذه الميزة على موقعك الإلكتروني ومعرفة مدى استفادة المستخدمين الحقيقيين من ميزة ضغط القاموس المشترَك، يمكنك التسجيل في الفترة التجريبية للإصدار الأصلي للحصول على رمز مميّز، والاطّلاع على آلية عمل الفترات التجريبية للإصدار الأصلي.

الخاتمة

نحن متحمّسون جدًا لهذا التقدّم الكبير في تكنولوجيا الضغط على الويب، ومدى سرعة تحسين التطبيقات الحالية التي يستخدمها المستخدمون يوميًا. ننصحك بتجربة هذه الميزة، والأهم من ذلك، نريد معرفة رأيك بها. إذا صادفت خطأ، يمكنك إبلاغنا به على crbug.com. للحصول على مزيد من المراجع والأدوات، يمكنك الاطّلاع على use-as-dictionary.com. أخيرًا، إذا كنت مهتمًا بالتعمّق أكثر في آلية عمل هذه الميزة، يمكنك الاطّلاع على الشرح.