ضغط البيانات هو أسلوب تحسين أداء تم اختباره بمرور الوقت، وهو يعمل على تقليل حجم موارد الصفحة المؤهلة. لفترة من الوقت، كان من الشائع استخدام gzip على خوادم الويب لضغط موارد الصفحات الشائعة المستندة إلى النص، مثل ملفات HTML وCSS وJavaScript، وإرسالها إلى جهاز العميل حيث يمكن فك ضغطها. والنتيجة هي أوقات تحميل أسرع للموارد بدون التأثير في السلوك المقصود للصفحة.
على الرغم من أن برنامج gzip يتميز بفعالية كبيرة في حد ذاته، تم إدخال تحسينات إضافية في الضغط على الويب خلال السنوات الأخيرة. في عام 2016، تم شحن خوارزمية Brotli في Chrome، ما أدى إلى تحسين نسب الضغط بشكل عام للموارد المؤهلة. وبحلول نهاية عام 2017، أصبحت جميع المتصفحات الحديثة متوافقة مع Brotli، وبدأ دعم الخوادم لها يزداد انتشاره. وفي الآونة الأخيرة، شحن أداة "ضغط ZStandard" في Chrome.
إلا أن العمل لا يتوقف عند هذا الحد! يعمل فريق 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 وBotli و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 بمثابة آلية تنطبق على الإصدارات المستقبلية من مورد يتطابق مع النمط المحدّد فيه. لنفترض مثلاً أنّ موقعك الإلكتروني يوفّر جميع أنماطه في ملف 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=:
وفي هذه المرحلة، يرجع الأمر إلى الخادم في ضبط الضغط من جانبه لضمان استخدام القاموس المطابق. بعد ذلك، سيتم إرسال المورد المضغوط بهذا القاموس، وسيتم استخدام القاموس المتاح في ذاكرة التخزين المؤقت لمتصفّح المستخدم لفك ضغطه.
إذا كنت تشحن رمزًا جديدًا بشكل متكرّر لموقعك الإلكتروني، قد يكون لضغط دلتا تأثير كبير. ومع ذلك، فإن العملية مرنة. إذا لم يحدِّد المتصفّح توفّر قاموس في ذاكرة التخزين المؤقت لمتصفّح المستخدم، لن يحدد الرموز المميزة الإضافية br-d أو zstd-d في العنوان Accept-Encoding. في هذه الحالة، ينطبق تدفق الضغط العادي.
ضغط القاموس المشترك للموارد الديناميكية
يمكن للموارد الديناميكية أيضًا الاستفادة من ضغط القاموس المشترك. الموارد الديناميكية هي الموارد التي تتغير استنادًا إلى السياق، مثل موقع إلكتروني إخباري يتم فيه تعديل الصفحة الرئيسية بشكل متكرر عند حدوث فواصل إخبارية. غالبًا ما تكون مستندات HTML موارد ديناميكية. وفي مثل هذه الحالات، يمكن أن يحتوي القاموس على معظم بنية HTML الشائعة للموقع ورمز النموذج الذي يؤدي إلى صفحات مضغوطة لا يتم فيها إرسال سوى الأجزاء الفريدة من كل صفحة.
نظرًا لطبيعة الموارد التي يتم إنشاؤها ديناميكيًا، يجب تحميل القاموس على البرنامج لاستخدامه لاحقًا. يعني تحميل قاموس بشكل مسبق أن تطبيق ضغط القاموس المشترك على الموارد الديناميكية هو أمر يعتمد على توقُّع. الأمل في مثل هذه الحالات هو أن يتلقى موقعك على الويب ما يكفي من الزيارات بحيث يمكن إلغاء تكلفة المعجم عبر عدد كبير من عمليات التنقل. إذا قررت تجربة استخدام هذه الأداة، ستتمثل الخطوة الأولى في تحديد مكان القاموس عن طريق استخدام عنصر <link> في ملف HTML الخاص بصفحتك:
<link rel="dictionary" href="/dictionary.dat">
عندما يصادف Chrome عنصر <link> هذا، قد يجلب القاموس بعد أن تكون الصفحة غير نشطة، وبأولوية منخفضة في محاولة لتفادي التضارب في معدل نقل البيانات. ويجب أن تحدد استجابة القاموس نفسه عنوان Use-As-Dictionary وأن تحدد مسار المورد الديناميكي الذي ينطبق عليه:
Use-As-Dictionary: match="/product/*"
من هنا، التدفق هو ذاته إلى حد كبير مثل الموارد الثابتة. سيرى المتصفّح أنّ القاموس نفسه ينطبق على الموارد المطابقة، وسيرفق عنوان Available-Dictionary بالطلب مع تجزئة محتوى القاموس، على نحو يشبه تدفق الموارد الثابتة الذي تم توضيحه سابقًا.
ضغط الموارد الثابتة في وقت الإصدار
إذا كنت معتادًا على استخدام برامج الحزم، فقد تكون على دراية بمكونات إضافية متنوعة لها يمكن أن تضغط الموارد في وقت الإنشاء، ومن ثم تعرض تلك الموارد المضغوطة. على سبيل المثال، يتيح لك Apache استخدام الأوامر لعرض تلك الموارد المضغوطة مسبقًا في وقت الطلب.
تستخدم معظم الحزم المستندة إلى Node.js والتي تتيح الضغط مكتبة Zlib المضمّنة في Node. يوفّر Zlib إمكانية استخدام خدمات Brotli وبرامج الحِزم التي تستخدمها عادةً لتوفير واجهة لتمرير الخيارات مباشرةً إلى Zlib، ما يتيح الضغط باستخدام القاموس. إليك بعض برامج الحزم التي تدعم استخدام القواميس:
CompressionWebpackPluginالخاصة بحزمة الويب من خلال واجهةcompressionOptions.- يوفّر
rollup-plugin-brotliإعدادoptionsينتقل مباشرةً إلى Zlib في Node.js، حيث يمكن تحديد القواميس. - يوفّر المكوّن الإضافي
esbuild-plugin-compressالتابع لجهة خارجية من أجل esbuild أيضًا إمكانية الوصول إلى خيارات Zlib في Node.js.
لاحظ أن القواميس المتوفرة لأي إصدار معين من المورد قد تستخدم أحد أي إصدارات سابقة من المورد. وهذا يعني أنّك ستحتاج إلى تحليل زيارات المستخدِمين والتخطيط وفقًا لذلك. اسعَ إلى تحقيق توازن وإنشاء موارد تفيد أكبر عدد ممكن من المستخدمين المكرّري الزيارة. يقوم موفرو شبكة توصيل المحتوى (CDN) حاليًا بتجربة ضغط القاموس المشترك. لا تتوفر أي عمليات تنفيذ حتى الآن للاستخدام العام، ولكننا نتوقع أن يتغير ذلك!
ننصحكم بتجربتها
ومن المحتمل أن يؤدي دمج ضغط القاموس المشترك مع إمكانات الضغط الحالية في المتصفح إلى تحسين أداء التحميل بدرجة كبيرة للمواقع الإلكترونية التي تشحن رمز إنتاج مُحدثًا بشكل متكرر وتستقطب عددًا كبيرًا من الزيارات المتكررة. إذا كنت مهتمًا بعرض لقطة لضغط القاموس المشترك، فلديك خياران:
- إذا أردت تعديل ضغط القاموس المشترك بنفسك لمعرفة طريقة عمله، يمكنك تفعيل الميزة التجريبية نقل قاموس مضغوط على صفحة
chrome://flags. - إذا أردت تجربة هذه الميزة على موقع الإنتاج الإلكتروني الخاص بك والاطّلاع على فوائد ضغط القاموس المشترك، يمكنك التسجيل في مرحلة التجربة والتقييم للحصول على رمز مميّز والتعرُّف على آلية عمل مراحل التجربة والتقييم.
الخلاصة
نحن متحمسون جدًا لهذا التطور الكبير في تقنية الضغط على الويب، ومدى سرعته في جعل التطبيقات الحالية التي يستخدمها الأشخاص كل يوم. ننصحك بتجربتها، والأهم من ذلك، نريد معرفة رأيك إذا فعلت ذلك. إذا عثرت على خطأ، يمكنك الإبلاغ عنه على crbug.com. وللحصول على أدوات وموارد إضافية، اطّلِع على الموقع الإلكتروني use-as-dictionary.com. وأخيرًا، إذا كنت مهتمًا بالمزيد من التفاصيل حول آلية عمل كل هذه الأخطاء، يمكنك استخدام الفيديو التوضيحي كخطوة تالية جيدة.