Web Performance Optimization & Lighthouse · درس

الضغط وترميز النقل

قلّل حجم ما يعبر الشبكة باستخدام ضغط gzip وBrotli، وأنواع المحتوى المناسبة، والضغط المسبق، لتصل الاستجابات بسرعة أكبر عبر كل اتصال.

الدرس 4 من 413 خطوة

الضغط وترميز النقل درس مجاني في Web Performance Optimization & Lighthouse على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web Performance Optimization & Lighthouse، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web Performance Optimization & Lighthouse 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Why Compress?

Text assets like HTML, CSS, JS, JSON, and SVG are highly compressible. Compressing them before transfer can cut payloads by 70-90%, directly speeding up load on every network.

How Negotiation Works

The browser advertises supported algorithms with the Accept-Encoding header; the server responds with the chosen one in Content-Encoding.

Accept-Encoding: br, gzip
Content-Encoding: br

gzip

gzip is universally supported and a safe baseline. It offers good compression with low CPU cost and is enabled on virtually every server and CDN.

Brotli

Brotli (br) typically compresses text 15-25% smaller than gzip. It is supported in all modern browsers over HTTPS, making it the preferred choice today.

Compress the Right Types

Compress text-based MIME types only. Already-compressed binaries like JPEG, PNG, WebP, MP4, and woff2 fonts gain nothing and waste CPU if recompressed.

Static Precompression

For static assets, precompress at build time at the highest level. The server then serves the .br or .gz file directly, avoiding per-request CPU.

# nginx serving precompressed files
brotli_static on;
gzip_static on;

Dynamic Compression Levels

For dynamic responses, use a lower compression level so CPU cost does not delay the response. High levels are best reserved for static, build-time compression.

Express Example

In Node, the compression middleware adds gzip/Brotli to dynamic responses with sensible defaults.

const compression = require('compression');
app.use(compression());

Verifying Compression

Inspect a response in the Network panel: check Content-Encoding: br or gzip and compare transferred size to resource size. Lighthouse flags uncompressed text assets.

Compression and HTTPS

Modern compression for sensitive content is served over HTTPS, which also avoids historic attacks. Brotli in browsers is only offered on secure connections.

Strategy Summary

  • Prefer Brotli, fall back to gzip.
  • Compress text types only.
  • Precompress static assets at max level.
  • Use lower levels for dynamic responses.

Quick Check

You enable maximum-level compression on dynamically generated API responses and notice slower responses under load. What is the better approach?

Recap

You learned to shrink transfers with gzip and Brotli, negotiated via Accept-Encoding. Compress text types only, precompress static assets at max level, use lower levels for dynamic responses, and verify with the Network panel.

البدء مجانًا

تعلم Web Performance Optimization & Lighthouse مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات
12
الدروس
48

الأسئلة الشائعة

هل درس «الضغط وترميز النقل» مجاني؟

نعم — نص درس «الضغط وترميز النقل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web Performance Optimization & Lighthouse، انتقل إلى CoddyKit PRO. تتضمن دورة Web Performance Optimization & Lighthouse 4 دروس في المجموع.

ماذا ستتعلم في «الضغط وترميز النقل»؟

قلّل حجم ما يعبر الشبكة باستخدام ضغط gzip وBrotli، وأنواع المحتوى المناسبة، والضغط المسبق، لتصل الاستجابات بسرعة أكبر عبر كل اتصال. تتمرن على Web Performance Optimization & Lighthouse مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Web Performance Optimization & Lighthouse؟

لا تُشترط خبرة سابقة. Web Performance Optimization & Lighthouse على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «الضغط وترميز النقل»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Web Performance Optimization & Lighthouse هذا؟

نعم. كل درس في Web Performance Optimization & Lighthouse يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. أساسيات HTTP/2 وHTTP/3
  2. التخزين المؤقت في المتصفح والخادم
  3. شبكات توصيل المحتوى (CDNs)
  4. الضغط وترميز النقل
← العودة إلى Web Performance Optimization & Lighthouse