بعد إلغاء عمليات تنزيل الموارد غير الضرورية، أفضل ما يمكنك فعله لتحسين سرعة تحميل الصفحة هو تقليل حجم التنزيل الإجمالي من خلال تحسين الموارد المتبقية وضغطها.
الدليل الإرشادي لضغط البيانات
بعد إعداد موقعك الإلكتروني لتجنُّب تنزيل أي موارد غير مستخدَمة، تتمثّل الخطوة التالية في ضغط أي موارد متبقية مؤهَّلة يجب أن ينزّلها المتصفّح. بناءً على نوع المورد، سواء كان نصًا أو صورًا أو خطوطًا أو غير ذلك، تتوفّر العديد من الأساليب المختلفة للاختيار من بينها، مثل الأدوات العامة التي يمكن تفعيلها على خادم الويب، وعمليات التحسين المسبقة لأنواع محددة من المحتوى، وعمليات التحسين الخاصة بالموارد التي تتطلّب إدخال بيانات من المطوّر.
يتطلّب تحقيق أفضل أداء مزيجًا من جميع التقنيات التالية:
- الضغط هو عملية ترميز المعلومات باستخدام عدد أقل من البتات.
- تؤدي إزالة البيانات غير الضرورية دائمًا إلى تحقيق أفضل النتائج.
- تتوفّر العديد من أساليب الضغط والخوارزميات المختلفة.
- ستحتاج إلى مجموعة متنوعة من الأساليب لتحقيق أفضل ضغط.
تُعرف عملية تقليل حجم البيانات باسم ضغط البيانات. وقد ساهم العديد من الأشخاص في تطوير خوارزميات وأساليب وتحسينات لتحسين نسب الضغط وسرعة الضغط والذاكرة المطلوبة من خلال خوارزميات الضغط المختلفة.
إنّ مناقشة ضغط البيانات بشكل كامل تتجاوز نطاق هذا الدليل. ومع ذلك، من المهم أن تفهم، بشكل عام، طريقة عمل الضغط والتقنيات التي يمكنك استخدامها لتقليل حجم مختلف مواد العرض التي تتطلّبها صفحاتك.
لتوضيح المبادئ الأساسية لهذه الأساليب، لنأخذ في الاعتبار عملية تحسين تنسيق بسيط للرسائل النصية تم ابتكاره لهذا المثال فقط:
# 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) عادةً ميزة الضغط التلقائي للموارد المؤهَّلة. يمكن لشبكات توصيل المحتوى أيضًا إدارة الضغط الديناميكي والثابت نيابةً عنك، ما يقلّل من الجوانب التي عليك الاهتمام بها بشأن الضغط.
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 لطلب التنقّل، يمكن أن يكتشف ماسح التحميل المُسبق الموارد المضمّنة فيها في أسرع وقت ممكن. - يمكن أيضًا تحميل بعض عناصر LCP المرشّحة بشكل أسرع باستخدام الضغط. على سبيل المثال، يمكن تقليل مدة تحميل الموارد لصور SVG المرشّحة لعرض أكبر محتوى مرئي من خلال ضغطها استنادًا إلى النصوص. يختلف ذلك عن التحسينات التي تجريها على أنواع الصور الأخرى، والتي يتم ضغطها بشكل أساسي من خلال طرق ضغط أخرى، مثل الطريقة التي تستخدمها صور JPEG في الضغط مع فقدان البيانات.
- بالإضافة إلى ذلك، يمكن أن تكون عقد النص أيضًا مرشّحة لعنصر LCP. تعتمد التقنيات الموضّحة في هذا الدليل على ما إذا كنت تستخدم خط ويب للنص على صفحات الويب. إذا كنت تستخدم خط ويب، عليك اتّباع أفضل الممارسات لتحسين خطوط الويب. في المقابل، إذا كنت لا تستخدم خطوط الويب، بل خطوط النظام التي يتم عرضها بدون أي مدة لتحميل الموارد، فإنّ تصغير CSS وضغطه يقلّل من هذه المدة، ما يعني أنّه يمكن عرض عقد نص LCP المحتملة بشكل أسرع.
الخاتمة
إنّ طريقة تحسين ترميز ونقل مواد العرض المستندة إلى النصوص هي مفهوم أساسي للأداء، ولكنّه مفهوم له تأثير كبير. احرص على اتّخاذ كل الإجراءات اللازمة لضمان استفادة الموارد المؤهَّلة للتصغير والضغط من عمليات التحسين هذه.
والأهم من ذلك، تأكَّد من تنفيذ هذه العمليات تلقائيًا. للتصغير، استخدِم أداة تجميع لتطبيق التصغير على الموارد المؤهَّلة. تأكَّد من أنّ إعدادات خادم الويب تتيح الضغط، واستخدِم أكثر طرق الضغط فعاليةً. لتسهيل هذه العملية قدر الإمكان، استخدِم شبكات توصيل المحتوى (CDN) لأتمتة عملية الضغط، فهي لا تضغط الموارد فحسب، بل يمكنها أيضًا إجراء ذلك بسرعة كبيرة.
من خلال ترسيخ مفاهيم الأداء الأساسية هذه في بنية موقعك الإلكتروني، يمكنك التأكّد من أنّ جهود تحسين الأداء تستند إلى أساس جيد، وأنّ عمليات التحسين اللاحقة يمكن أن تستند إلى أساس متين من الممارسات الأساسية الجيدة.