إلى جانب التخلص من عمليات تنزيل الموارد غير الضرورية، فإن أفضل ما يمكنك فعله لتحسين سرعة تحميل الصفحة هو تقليل حجم التنزيل الإجمالي عن طريق تحسين الموارد المتبقية وضغطها.
أساسيات ضغط البيانات
بعد إعداد موقعك الإلكتروني لتجنُّب تنزيل أي موارد غير مستخدَمة، تتمثّل الخطوة التالية في ضغط أي موارد مؤهَّلة متبقية على المتصفّح تنزيلها. بناءً على نوع المورد، سواء كان نصًا أو صورًا أو خطوطًا أو غير ذلك، هناك العديد من الأساليب المختلفة التي يمكن الاختيار من بينها، مثل الأدوات العامة التي يمكن تفعيلها على خادم الويب، وتحسينات المعالجة المسبقة لأنواع معيّنة من المحتوى، والتحسينات الخاصة بالموارد التي تتطلب إدخالاً من المطوّر.
يتطلب تقديم أفضل أداء مزيجًا من جميع الأساليب التالية:
- الضغط هو عملية ترميز المعلومات باستخدام وحدات بت أقل.
- إنّ إزالة البيانات غير الضرورية تؤدي دائمًا إلى تحقيق أفضل النتائج.
- هناك العديد من أساليب وخوارزميات الضغط المختلفة.
- ستحتاج إلى مجموعة متنوعة من الأساليب لتحقيق أفضل ضغط.
تُعرف عملية تقليل حجم البيانات باسم ضغط البيانات. ساهم العديد من الأشخاص في تطوير خوارزميات وتقنيات وتحسينات لزيادة نسب الضغط وسرعته وتقليل الذاكرة التي تتطلبها خوارزميات الضغط المختلفة.
إنّ المناقشة الكاملة لضغط البيانات تتجاوز نطاق هذا الدليل. ومع ذلك، من المهم فهم طريقة عمل الضغط بشكل عام والأساليب التي يمكنك استخدامها لتقليل حجم مواد العرض المختلفة التي تتطلبها صفحاتك.
لتوضيح المبادئ الأساسية لهذه الأساليب، لنفترض أنّنا نريد تحسين تنسيق رسالة نصية بسيطة تم إنشاؤه لهذا المثال فقط:
# 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
- قد تحتوي الرسائل على تعليقات توضيحية عشوائية، يُشار إليها أحيانًا باسم التعليقات، ويُشار إليها بالبادئة "#". لا تؤثر التعليقات التوضيحية على معنى الرسالة أو سلوكياتها.
- قد تحتوي الرسائل على رؤوس، وهي أزواج من المفاتيح والقيم (مفصولة بـ
":"في المثال السابق) تظهر في بداية الرسالة. - تحمل الرسائل حمولات نصية.
ما الذي يمكن فعله لتقليل حجم الرسالة السابقة التي تبدأ بـ 200 حرف؟
- التعليق مثير للاهتمام، ولكنه لا يؤثر في معنى الرسالة. تخلَّص منه عند نقل الرسالة.
- هناك تقنيات جيدة لترميز العناوين بطريقة فعالة. على سبيل المثال، إذا كنت تعرف أن جميع الرسائل تحتوي على "تنسيق" و "تاريخ"، يمكنك تحويلها إلى معرّفات أعداد صحيحة قصيرة وإرسالها فقط. ومع ذلك، قد لا يكون ذلك صحيحًا، لذا من الأفضل تركه في الوقت الحالي.
- الحمولة هي نص فقط. على الرغم من أنّنا لا نعرف محتوى الملف فعليًا (يبدو أنّه يستخدم
"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 السابق وأنواع المحتوى الثلاثة المختلفة التي يتضمّنها:
- ترميز HTML
- CSS لتخصيص طريقة عرض الصفحة
- 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 هو الأفضل. بالنسبة إلى Brotli، يتراوح هذا النطاق بين 0 و11، ويكون 11 هو الأفضل. ومع ذلك، تتطلب إعدادات الضغط الأعلى مزيدًا من الوقت. بالنسبة إلى الموارد التي يتم ضغطها ديناميكيًا، أي في وقت الطلب، تميل الإعدادات في منتصف النطاق إلى تقديم أفضل مفاضلة بين نسبة الضغط والسرعة. ومع ذلك، يمكن استخدام الضغط الثابت، وهو ضغط الردود مسبقًا، وبالتالي يمكن استخدام إعدادات الضغط الأكثر قوة المتاحة لكل خوارزمية ضغط.
- شبكات توصيل المحتوى (CDN) تقدّم عادةً ضغطًا تلقائيًا للموارد المؤهَّلة. يمكن لشبكات CDN أيضًا إدارة الضغط الديناميكي والثابت نيابةً عنك، ما يقلّل من جوانب الضغط التي يجب أن تقلق بشأنها.
gzip وBrotli هما ضاغطان شائعان يمكن تطبيقهما على أي سلسلة من وحدات البايت. في الخلفية، تتذكّر هذه الخوارزميات بعض المحتوى الذي تم فحصه سابقًا في ملف، ثم تحاول العثور على أجزاء البيانات المكرّرة واستبدالها بطريقة فعّالة.
من الناحية العملية، يحقّق كل من gzip وBrotli أفضل أداء مع المحتوى النصي، وغالبًا ما يحقّقان معدلات ضغط تصل إلى %70-%90 للملفات الأكبر حجمًا. ومع ذلك، فإن تشغيل هذه الخوارزميات على مواد العرض التي تم ضغطها بالفعل باستخدام خوارزميات بديلة، مثل معظم تنسيقات الصور التي تستخدم تقنيات الضغط مع معلومات مفقودة أو بدون فقدان البيانات، لا يؤدي إلى تحسين يُذكر أو لا يؤدي إلى أي تحسين على الإطلاق.
تعلن جميع المتصفحات الحديثة عن إتاحة gzip وBrotli في عنوان طلب HTTP الخاص بـ Accept-Encoding. ومع ذلك، تقع على عاتق مقدّم خدمة الاستضافة مسؤولية التأكّد من ضبط خادم الويب بشكل صحيح لعرض المورد المضغوط عندما يطلبه العميل.
| ملف | خوارزمية | الحجم غير المضغوط | الحجم المضغوط | نسبة الانضغاط |
|---|---|---|---|---|
| angular-1.8.3.js | Brotli | 1,346 كيلوبايت | 256 كيلوبايت | 81% |
| angular-1.8.3.js | gzip | 1,346 كيلوبايت | 329 كيلوبايت | 76% |
| angular-1.8.3.min.js | Brotli | 173 كيلوبايت | 53 كيلوبايت | 69% |
| angular-1.8.3.min.js | gzip | 173 كيلوبايت | 60 كيلوبايت | 65% |
| jquery-3.7.1.js | Brotli | 302 كيلوبايت | 69 كيلوبايت | 77% |
| jquery-3.7.1.js | gzip | 302 كيلوبايت | 83 كيلوبايت | 73% |
| jquery-3.7.1.min.js | Brotli | 85 كيلوبايت | 27 كيلوبايت | 68% |
| jquery-3.7.1.min.js | gzip | 85 كيلوبايت | 30 كيلوبايت | 65% |
| lodash-4.17.21.js | Brotli | 531 كيلوبايت | 73 كيلوبايت | 86% |
| lodash-4.17.21.js | gzip | 531 كيلوبايت | 94 كيلوبايت | 82% |
| lodash-4.17.21.min.js | Brotli | 71 كيلوبايت | 23 كيلوبايت | 68% |
| lodash-4.17.21.min.js | gzip | 71 كيلوبايت | 25 كيبيبايت | 65% |
يعرض الجدول السابق مقدار التوفير الذي يمكن أن يوفّره ضغط Brotli وgzip لبعض مكتبات JavaScript المعروفة. تتراوح نسبة التوفير بين %65 و%86 حسب الملف والخوارزمية. للعلم، تم تطبيق الحد الأقصى لمستوى الضغط على كل ملف لكل من Brotli وgzip. يُفضَّل استخدام Brotli بدلاً من gzip كلما أمكن ذلك.
يُعدّ تفعيل الضغط أحد أبسط التحسينات وأكثرها فعالية. إذا لم يكن موقعك الإلكتروني يستفيد من هذه الميزة، فأنت تفوّت فرصة كبيرة لتحسين الأداء للمستخدمين. لحسن الحظ، توفّر العديد من خوادم الويب إعدادات تلقائية تتيح هذا التحسين المهم، وتكون شبكات توصيل المحتوى (CDN) على وجه الخصوص فعّالة جدًا في تنفيذها بطريقة توازن بين سرعة الضغط ونسبته.
يمكنك الاطّلاع على عملية الضغط بسرعة من خلال فتح "أدوات مطوري البرامج في Chrome"، ثم فتح لوحة الشبكة وتحميل صفحة من اختيارك ومراقبة الجزء السفلي من لوحة الشبكة.
كما هو موضّح في الصورة السابقة، من المفترض أن يظهر لك تفصيل لما يلي:
- عدد الطلبات، وهو عدد الموارد التي تم تحميلها للصفحة.
- حجم النقل لجميع الطلبات ويعكس ذلك فعالية الضغط المطبَّق على أي من موارد الصفحة.
- حجم الموارد لجميع الطلبات ويوضّح هذا المقياس حجم موارد الصفحة بعد إلغاء ضغطها.
التأثيرات في Core Web Vitals
لا يمكن قياس تحسينات الأداء ما لم تكن هناك مقاييس تعكس هذه التحسينات. تم إطلاق مبادرة Core Web Vitals لإنشاء مقاييس تعكس تجربة المستخدم الفعلية وزيادة الوعي بها. ويختلف ذلك عن المقاييس التي لا تعكس بوضوح جودة تجربة المستخدم، مثل وقت تحميل الصفحة البسيط.
عند تطبيق التحسينات الموضّحة في هذا الدليل على الموارد في موقعك الإلكتروني، يمكن أن تختلف التأثيرات في مؤشرات Core Web Vitals، استنادًا إلى الموارد التي تم تحسينها والمقاييس المعنيّة. ومع ذلك، إليك بعض الحالات التي يمكن أن يؤدي فيها تطبيق هذه التحسينات إلى تحسين مؤشرات Core Web Vitals لموقعك الإلكتروني:
- يمكن لموارد HTML التي تمت إزالة البيانات غير الضرورية منها وضغطها أن تحسّن تحميل ملف HTML هذا، وإمكانية العثور على موارده الفرعية، وبالتالي تحسين تحميلها. ويمكن أن يكون ذلك مفيدًا لمقياس سرعة عرض أكبر محتوى مرئي (LCP) في الصفحة. على الرغم من أنّه يمكن استخدام تلميحات الموارد، مثل
rel="preload"، للتأثير في قابلية اكتشاف الموارد، إلا أنّ استخدام عدد كبير منها قد يؤدي إلى حدوث مشاكل في التنافس على معدل نقل البيانات. من خلال التأكّد من ضغط استجابة HTML لطلب التنقّل، يمكن للماسح الضوئي للتحميل المُسبَق العثور على الموارد ضمنها في أسرع وقت ممكن. - يمكن أيضًا تحميل بعض العناصر المرشّحة لتكون "سرعة عرض أكبر جزء من الصفحة" في وقت أقرب باستخدام الضغط. على سبيل المثال، يمكن تقليل مدة تحميل الموارد لصور SVG المرشّحة لتكون سرعة عرض أكبر محتوى مرئي من خلال الضغط المستند إلى النص. ويختلف ذلك عن التحسينات التي يتم إجراؤها على أنواع الصور الأخرى التي يتم ضغطها بطبيعتها من خلال طرق ضغط أخرى، مثل كيفية استخدام صور JPEG للضغط مع معلومات مفقودة.
- بالإضافة إلى ذلك، يمكن أن تكون عُقد النص أيضًا من العناصر المرشّحة لتكون LCP. تعتمد كيفية تطبيق الأساليب الموضّحة في هذا الدليل على ما إذا كنت تستخدم خط ويب للنص على صفحات الويب. إذا كنت تستخدم خط ويب، تنطبق أفضل ممارسات تحسين خطوط الويب. في المقابل، إذا كنت لا تستخدم خطوط الويب، بل خطوط النظام التي يتم عرضها بدون استغراق أي مدة لتحميل الموارد، فإنّ تصغير وضغط CSS يقلّلان من هذه المدة، ما يعني أنّ عرض عُقد نص LCP المحتملة يمكن أن يحدث في وقت أقرب.
الخاتمة
إنّ طريقة تحسين ترميز ونقل مواد العرض النصية هي مفهوم أساسي للأداء، ولكنّها طريقة لها تأثير كبير. تأكَّد من أنّك تبذل قصارى جهدك لضمان استفادة الموارد المؤهَّلة لإزالة البيانات غير الضرورية والضغط من هذه التحسينات.
والأهم من ذلك، تأكَّد من أنّ هذه العمليات تتم بشكل آلي. بالنسبة إلى إزالة البيانات غير الضرورية، استخدِم أداة تجميع لتطبيق هذه العملية على الموارد المؤهّلة. تأكَّد من أنّ إعدادات خادم الويب تتيح الضغط، واستخدِم أكثر طرق الضغط فعالية. لجعل هذا الأمر بسيطًا قدر الإمكان، استخدِم شبكات توصيل المحتوى (CDN) لضغط الموارد تلقائيًا، لأنّها لا تضغط الموارد فحسب، بل تفعل ذلك بسرعة كبيرة.
من خلال ترسيخ مفاهيم الأداء الأساسية هذه في بنية موقعك الإلكتروني، يمكنك ضمان أنّ جهودك لتحسين الأداء تسير على الطريق الصحيح، وأنّ التحسينات اللاحقة يمكن أن تستند إلى أساس متين من الممارسات الأساسية الجيدة.