الأمان والأداء
تحسين أداء الشبكة
مقدمة في أداء الشبكة
يعد أداء الشبكة أحد أهم العوامل التي تؤثر على سرعة تطبيقات الويب. بينما يمكنك تحسين كود الواجهة الأمامية بشكل مثالي، يمكن أن يؤدي ضعف أداء الشبكة إلى بطء تحميل الصفحة. يؤثر الوقت المستغرق لتنزيل الموارد وإنشاء الاتصالات ونقل البيانات بشكل مباشر على تجربة المستخدم.
في هذا الدرس الشامل، سنستكشف تقنيات تحسين الشبكة الحديثة بما في ذلك بروتوكولات HTTP/2 و HTTP/3، وتلميحات الموارد، وشبكات توصيل المحتوى (CDNs)، وخوارزميات الضغط، واستراتيجيات التخزين المؤقت، وService Workers، وتحسين DNS. يمكن لهذه التقنيات أن تقلل بشكل كبير من أوقات التحميل وتحسن الأداء المدرك.
تأثير أداء الشبكة: غالبًا ما يكون زمن انتقال الشبكة وقيود النطاق الترددي هي الاختناقات الأساسية في أداء الويب. قد ينتظر المستخدم على اتصال 3G أكثر من 10 ثوانٍ لصفحة تحمل في ثانية واحدة على الألياف البصرية. يضمن تحسين أداء الشبكة تجارب سريعة لجميع المستخدمين، بغض النظر عن جودة اتصالهم.
بروتوكولات HTTP/2 و HTTP/3
HTTP/2 و HTTP/3 هي بروتوكولات حديثة تحسن الأداء بشكل كبير مقارنة بـ HTTP/1.1 من خلال تعدد الإرسال وضغط الرؤوس والتحسينات الأخرى.
قيود HTTP/1.1
يحتوي HTTP/1.1، على الرغم من ثوريته في وقته، على عدة قيود على الأداء:
- حظر رأس الخط: يمكن أن يكون طلب واحد فقط نشطًا لكل اتصال في كل مرة
- رؤوس زائدة: يتم إرسال الرؤوس مع كل طلب، مما يهدر النطاق الترددي
- اتصالات متعددة: تفتح المتصفحات 6-8 اتصالات متوازية للتغلب على الحظر
- لا أولوية: جميع الموارد لها نفس الأولوية، قد تنتظر الموارد الحرجة
تحسينات HTTP/2
يعالج HTTP/2 هذه القيود بعدة ميزات رئيسية:
- تعدد الإرسال: يمكن أن تكون طلبات واستجابات متعددة نشطة في وقت واحد عبر اتصال واحد
- ضغط الرؤوس: يقلل ضغط HPACK من بيانات الرؤوس الزائدة
- دفع الخادم: يمكن للخوادم إرسال الموارد بشكل استباقي قبل طلبها
- تحديد أولويات التدفق: يمكن إعطاء الأولوية للموارد الحرجة على الموارد الأقل أهمية
// مثال على دفع الخادم (تكوين Apache)\n<FilesMatch "\.html$">\n Header add Link "</css/style.css>; rel=preload; as=style"\n Header add Link "</js/app.js>; rel=preload; as=script"\n</FilesMatch>\n\n// في Node.js مع HTTP/2\nconst http2 = require('http2');\nconst fs = require('fs');\n\nconst server = http2.createSecureServer({\n key: fs.readFileSync('key.pem'),\n cert: fs.readFileSync('cert.pem')\n});\n\nserver.on('stream', (stream, headers) => {\n if (headers[':path'] === '/') {\n // دفع CSS الحرج قبل استجابة HTML\n stream.pushStream({ ':path': '/css/critical.css' }, (err, pushStream) => {\n pushStream.respondWithFile('css/critical.css');\n });\n stream.respondWithFile('index.html');\n }\n});
HTTP/3 و QUIC
HTTP/3 هو أحدث تطور، مبني على قمة QUIC (اتصالات الإنترنت السريعة UDP) بدلاً من TCP. تشمل المزايا الرئيسية:
- لا حظر لرأس الخط: تمنع التدفقات المستقلة تدفقًا بطيئًا واحدًا من حظر الآخرين
- إعداد اتصال أسرع: استئناف 0-RTT للزوار العائدين
- أداء جوال أفضل: ترحيل الاتصال عند التبديل بين الشبكات (WiFi إلى خلوي)
- تشفير مدمج: TLS 1.3 إلزامي ومتكامل في QUIC
تمكين HTTP/2/3:
- يتطلب HTTPS (شهادة TLS)
- معظم الخوادم الحديثة تدعم HTTP/2 (nginx، Apache 2.4.17+، Caddy)
- دعم HTTP/3 ينمو (Cloudflare، LiteSpeed، nginx 1.25+)
- تحقق من الدعم: علامة تبويب Network في Chrome DevTools تظهر البروتوكول (h2، h3)
- لا حاجة لتغييرات في الكود - التفاوض على البروتوكول تلقائي
تلميحات الموارد
تلميحات الموارد هي توجيهات HTML تساعد المتصفحات على اتخاذ قرارات ذكية حول تحميل الموارد، مما يحسن الأداء المدرك من خلال التنبؤ بإجراءات المستخدم.
Preconnect
يؤسس Preconnect اتصالات مبكرة بأصول الطرف الثالث المهمة، مما يوفر الوقت في بحث DNS ومصافحة TCP والتفاوض على TLS.
<!-- إنشاء اتصال مبكر بنطاق التحليلات -->\n<link rel="preconnect" href="https://www.google-analytics.com">\n\n<!-- الاتصال المسبق بـ CDN مع سمة crossorigin -->\n<link rel="preconnect" href="https://cdn.example.com" crossorigin>\n\n<!-- الاتصال المسبق بمزود الخطوط -->\n<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
استخدم preconnect لـ 2-3 أصول حرجة سيتم استخدامها بالتأكيد. يستهلك كل اتصال ذاكرة ووحدة المعالجة المركزية، لذا لا تفرط في استخدامه.
DNS-Prefetch
DNS-prefetch يحل أسماء النطاقات مسبقًا، وهو أخف من preconnect ولكنه يتعامل فقط مع بحث DNS.
<!-- حل DNS للنطاقات المستخدمة لاحقًا على الصفحة -->\n<link rel="dns-prefetch" href="https://api.example.com">\n<link rel="dns-prefetch" href="https://images.example.com">\n<link rel="dns-prefetch" href="https://videos.example.com">
Preload
يخبر Preload المتصفح بجلب الموارد الحرجة في أقرب وقت ممكن، حتى قبل أن يكتشفها محلل HTML.
<!-- تحميل مسبق لـ CSS الحرج -->\n<link rel="preload" href="/css/critical.css" as="style">\n\n<!-- تحميل مسبق لصورة البطل -->\n<link rel="preload" href="/images/hero.jpg" as="image">\n\n<!-- تحميل مسبق لـ JavaScript الحرج -->\n<link rel="preload" href="/js/app.js" as="script">\n\n<!-- تحميل مسبق لخط الويب لمنع FOIT -->\n<link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>\n\n<!-- تحميل مسبق للفيديو للتشغيل الفوري -->\n<link rel="preload" href="/videos/intro.mp4" as="video">
استخدم Preload بحذر: يضيف Preload الموارد إلى قائمة انتظار عالية الأولوية في المتصفح. الإفراط في استخدامه يمكن أن يؤخر الموارد المهمة الأخرى. قم فقط بالتحميل المسبق للموارد المطلوبة خلال الثواني القليلة الأولى من تحميل الصفحة. المرشحون النموذجيون: CSS الحرج، صور البطل، الخطوط فوق الطية.
Prefetch
يشير Prefetch إلى المتصفح بأن موردًا قد يكون مطلوبًا للتنقل المستقبلي، وجلبه خلال وقت الخمول.
<!-- الجلب المسبق للصفحة التالية في التسلسل -->\n<link rel="prefetch" href="/page2.html">\n\n<!-- الجلب المسبق لأصول تفاصيل المنتج للنقرات المحتملة -->\n<link rel="prefetch" href="/css/product-detail.css">\n<link rel="prefetch" href="/js/product-viewer.js">\n\n<!-- الجلب المسبق بناءً على التحليلات -->\n<script>\n // الجلب المسبق للمنتجات الأكثر مشاهدة\n const popularProducts = ['/product/123', '/product/456'];\n popularProducts.forEach(url => {\n const link = document.createElement('link');\n link.rel = 'prefetch';\n link.href = url;\n document.head.appendChild(link);\n });\n</script>
Prerender
يقوم Prerender بتحميل وعرض صفحة كاملة في الخلفية، مما يجعل التنقل يبدو فوريًا. استخدمه بحذر لأنه يستهلك موارد كبيرة.
<!-- العرض المسبق للصفحة التالية المحتملة -->\n<link rel="prerender" href="/checkout.html">\n\n<!-- العرض المسبق الديناميكي بناءً على نية التمرير -->\n<script>\n let prerenderLink = null;\n document.querySelectorAll('a').forEach(link => {\n link.addEventListener('mouseenter', () => {\n if (!prerenderLink) {\n prerenderLink = document.createElement('link');\n prerenderLink.rel = 'prerender';\n prerenderLink.href = link.href;\n document.head.appendChild(prerenderLink);\n }\n });\n });\n</script>
شبكات توصيل المحتوى (CDNs)
CDN هي شبكة موزعة جغرافيًا من الخوادم التي تخزن المحتوى وتسلمه من مواقع أقرب إلى المستخدمين، مما يقلل من زمن الانتقال ويحسن أوقات التحميل.
كيف تعمل CDNs
- يطلب المستخدم موردًا (مثل صورة، ملف CSS)
- يحل DNS إلى أقرب خادم حافة CDN
- إذا تم تخزين المورد مؤقتًا، يعيده خادم الحافة على الفور (إصابة ذاكرة التخزين المؤقت)
- إذا لم يتم تخزينه مؤقتًا، يجلبه خادم الحافة من خادم الأصل (فقدان ذاكرة التخزين المؤقت)
- يخزن خادم الحافة المورد مؤقتًا للطلبات المستقبلية
- يحصل المستخدمون اللاحقون على النسخة المخزنة مؤقتًا من خادم الحافة
فوائد CDN
- تقليل زمن الانتقال: يتم تقديم المحتوى من خوادم أقرب جغرافيًا
- توفر أفضل: يظل المحتوى قابلاً للوصول إذا فشل خادم الأصل
- تقليل حمل الأصل: يمتص CDN حركة المرور، مما يحمي خوادم الأصل
- حماية DDoS: يمكن لـ CDN امتصاص وتصفية حركة المرور الضارة
- تفريغ SSL/TLS: يتعامل CDN مع التشفير، مما يقلل من حمل خادم الأصل
// تطبيق CDN للأصول الثابتة\n// قبل: عناوين URL المباشرة لخادم الأصل\n<img src="https://example.com/images/photo.jpg">\n<link rel="stylesheet" href="https://example.com/css/style.css">\n\n// بعد: عناوين URL لـ CDN\n<img src="https://cdn.example.com/images/photo.jpg">\n<link rel="stylesheet" href="https://cdn.example.com/css/style.css">\n\n// توليد عنوان URL ديناميكي لـ CDN\nconst CDN_URL = 'https://cdn.example.com';\nfunction getCDNUrl(path) {\n return `${CDN_URL}${path}`;\n}\n\n// استخدام في التطبيق\nconst imageUrl = getCDNUrl('/images/photo.jpg');\nconst cssUrl = getCDNUrl('/css/style.css');
مزودو CDN الشائعون
- Cloudflare: طبقة مجانية متاحة، حماية DDoS ممتازة، شبكة عالمية
- AWS CloudFront: يتكامل مع خدمات AWS، تسعير الدفع حسب الاستخدام
- Fastly: تطهير ذاكرة التخزين المؤقت في الوقت الفعلي، قدرات الحوسبة الحافة
- Akamai: أكبر شبكة CDN، تركز على المؤسسات
- StackPath: معقول التكلفة، أداء جيد، حوسبة الحافة
أفضل ممارسات CDN:
- استخدم CDN لجميع الأصول الثابتة (الصور، CSS، JS، الخطوط)
- تمكين HTTP/2 على CDN لفوائد تعدد الإرسال
- تعيين رؤوس ذاكرة التخزين المؤقت المناسبة (Cache-Control، ETag)
- استخدام عناوين URL ذات إصدارات أو سلاسل استعلام لتجاوز ذاكرة التخزين المؤقت
- تمكين ضغط gzip/brotli على CDN
- مراقبة أداء CDN ومعدلات إصابة ذاكرة التخزين المؤقت
الضغط
يقلل الضغط من حجم البيانات المنقولة، مما يؤدي إلى تنزيلات أسرع وتكاليف نطاق ترددي أقل. تدعم خوادم الويب والمتصفحات الحديثة خوارزميات ضغط متعددة.
ضغط Gzip
كان Gzip خوارزمية الضغط القياسية لعقود، حيث يوفر نسب ضغط جيدة مع فك ضغط سريع.
// تكوين Apache (.htaccess)\n<IfModule mod_deflate.c>\n # ضغط HTML و CSS و JavaScript و Text و XML والخطوط\n AddOutputFilterByType DEFLATE application/javascript\n AddOutputFilterByType DEFLATE application/json\n AddOutputFilterByType DEFLATE application/xhtml+xml\n AddOutputFilterByType DEFLATE application/xml\n AddOutputFilterByType DEFLATE font/opentype\n AddOutputFilterByType DEFLATE font/otf\n AddOutputFilterByType DEFLATE font/ttf\n AddOutputFilterByType DEFLATE image/svg+xml\n AddOutputFilterByType DEFLATE image/x-icon\n AddOutputFilterByType DEFLATE text/css\n AddOutputFilterByType DEFLATE text/html\n AddOutputFilterByType DEFLATE text/javascript\n AddOutputFilterByType DEFLATE text/plain\n AddOutputFilterByType DEFLATE text/xml\n</IfModule>\n\n// تكوين Nginx\ngzip on;\ngzip_vary on;\ngzip_proxied any;\ngzip_comp_level 6;\ngzip_types text/plain text/css text/xml text/javascript \n application/json application/javascript application/xml+rss \n application/xhtml+xml application/x-font-ttf \n application/x-web-app-manifest+json font/opentype \n image/svg+xml image/x-icon;
ضغط Brotli
Brotli هي خوارزمية ضغط حديثة طورتها Google تقدم ضغطًا أفضل بنسبة 15-25% من gzip، خاصة للموارد النصية.
// Nginx مع وحدة Brotli\nbrotli on;\nbrotli_comp_level 6;\nbrotli_types text/plain text/css application/json application/javascript \n text/xml application/xml application/xml+rss text/javascript \n image/svg+xml;\n\n// Node.js Express مع middleware للضغط\nconst compression = require('compression');\nconst express = require('express');\nconst app = express();\n\n// تمكين ضغط gzip\napp.use(compression());\n\n// أو تمكين Brotli مع shrink-ray-current\nconst shrinkRay = require('shrink-ray-current');\napp.use(shrinkRay());\n\napp.get('/api/data', (req, res) => {\n res.json({ message: 'سيتم ضغط هذه الاستجابة' });\n});
مقارنة الضغط:
- Gzip: دعم متصفح عالمي، سريع، تقليل حجم 60-80%
- Brotli: مدعوم من قبل جميع المتصفحات الحديثة، ضغط أبطأ ولكن نسب أفضل (تقليل حجم 65-85%)
- أفضل ممارسة: قم بتمكين كليهما - قدم Brotli إلى المتصفحات الداعمة، والتراجع إلى gzip للمتصفحات القديمة
- لا تضغط: الصور (JPEG، PNG، WebP)، الفيديوهات، التنسيقات المضغوطة بالفعل
الضغط المسبق
بالنسبة للأصول الثابتة، اضغط الملفات في وقت البناء بدلاً من الضغط أثناء التشغيل، مما يوفر دورات وحدة المعالجة المركزية.
// برنامج نصي للبناء مع الضغط المسبق\nconst zlib = require('zlib');\nconst fs = require('fs');\nconst path = require('path');\n\nfunction compressFile(filePath) {\n const content = fs.readFileSync(filePath);\n \n // إنشاء نسخة gzip\n const gzipped = zlib.gzipSync(content, { level: 9 });\n fs.writeFileSync(filePath + '.gz', gzipped);\n \n // إنشاء نسخة brotli\n const brotli = zlib.brotliCompressSync(content, {\n params: {\n [zlib.constants.BROTLI_PARAM_QUALITY]: 11\n }\n });\n fs.writeFileSync(filePath + '.br', brotli);\n}\n\n// ضغط جميع ملفات JS و CSS\nconst files = [\n 'dist/app.js',\n 'dist/style.css',\n 'dist/vendor.js'\n];\n\nfiles.forEach(compressFile);
استراتيجيات التخزين المؤقت
يقلل التخزين المؤقت الفعال من طلبات الخادم ويسرع الزيارات المتكررة. يعد فهم رؤوس ذاكرة التخزين المؤقت والاستراتيجيات أمرًا ضروريًا للأداء الأمثل.
رأس Cache-Control
رأس Cache-Control هو الآلية الأساسية للتحكم في سلوك التخزين المؤقت للمتصفح و CDN.
// أصول غير قابلة للتغيير (أسماء ملفات ذات إصدارات/تجزئة)\nCache-Control: public, max-age=31536000, immutable\n\n// أصول ذات بصمة (app.abc123.js)\nCache-Control: public, max-age=31536000\n\n// صفحات HTML (تحقق دائمًا من التحديثات)\nCache-Control: no-cache\n\n// استجابات API (ذاكرة تخزين مؤقت لمدة 5 دقائق)\nCache-Control: public, max-age=300\n\n// بيانات المستخدم الخاصة (ذاكرة التخزين المؤقت للمتصفح فقط)\nCache-Control: private, max-age=3600\n\n// لا تخزين مؤقتًا أبدًا\nCache-Control: no-store
// Node.js Express رؤوس ذاكرة التخزين المؤقت\napp.use('/static', express.static('public', {\n maxAge: '1y',\n immutable: true\n}));\n\napp.get('/api/products', (req, res) => {\n res.set('Cache-Control', 'public, max-age=300');\n res.json(products);\n});\n\napp.get('/', (req, res) => {\n res.set('Cache-Control', 'no-cache');\n res.sendFile('index.html');\n});
التحقق من ETag
تتيح ETags الطلبات المشروطة، مما يسمح للمتصفحات بالتحقق مما إذا كان المحتوى المخزن مؤقتًا لا يزال صالحًا دون تنزيله مرة أخرى.
// ينشئ الخادم ETag بناءً على المحتوى\nETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"\n\n// يرسل المتصفح ETag في الطلبات اللاحقة\nIf-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"\n\n// يستجيب الخادم بـ 304 Not Modified إذا لم يتغير المحتوى\n\n// تطبيق Node.js\nconst crypto = require('crypto');\n\napp.get('/api/data', (req, res) => {\n const data = { message: 'مرحبا بالعالم' };\n const content = JSON.stringify(data);\n const etag = crypto.createHash('md5').update(content).digest('hex');\n \n // تحقق مما إذا كان العميل لديه الإصدار الحالي\n if (req.headers['if-none-match'] === etag) {\n return res.status(304).end();\n }\n \n res.set('ETag', etag);\n res.set('Cache-Control', 'public, max-age=300');\n res.json(data);\n});
التخزين المؤقت لـ Service Worker
توفر Service Workers تحكمًا برمجيًا في التخزين المؤقت، مما يتيح وظائف غير متصلة بالإنترنت واستراتيجيات تخزين مؤقت متطورة.
// service-worker.js\nconst CACHE_NAME = 'v1';\nconst ASSETS_TO_CACHE = [\n '/',\n '/css/style.css',\n '/js/app.js',\n '/images/logo.png'\n];\n\n// حدث التثبيت - تخزين الأصول الأساسية مؤقتًا\nself.addEventListener('install', event => {\n event.waitUntil(\n caches.open(CACHE_NAME)\n .then(cache => cache.addAll(ASSETS_TO_CACHE))\n );\n});\n\n// حدث الجلب - استراتيجية ذاكرة التخزين المؤقت أولاً\nself.addEventListener('fetch', event => {\n event.respondWith(\n caches.match(event.request)\n .then(response => {\n // إرجاع النسخة المخزنة مؤقتًا إذا كانت متاحة\n if (response) {\n return response;\n }\n // وإلا اجلب من الشبكة\n return fetch(event.request).then(response => {\n // تخزين الاستجابات الجديدة مؤقتًا\n if (response.status === 200) {\n const responseClone = response.clone();\n caches.open(CACHE_NAME).then(cache => {\n cache.put(event.request, responseClone);\n });\n }\n return response;\n });\n })\n );\n});
استراتيجيات التخزين المؤقت:
- ذاكرة التخزين المؤقت أولاً: تحقق من ذاكرة التخزين المؤقت أولاً، والتراجع إلى الشبكة (دعم غير متصل)
- الشبكة أولاً: جرب الشبكة أولاً، والتراجع إلى ذاكرة التخزين المؤقت (أولوية المحتوى الحديث)
- قديم أثناء إعادة التحقق: تقديم محتوى مخزن مؤقتًا أثناء التحديث في الخلفية
- ذاكرة التخزين المؤقت فقط: تقديم من ذاكرة التخزين المؤقت فقط (للتطبيقات غير المتصلة أولاً)
- الشبكة فقط: جلب دائمًا من الشبكة (للبيانات في الوقت الفعلي)
تحسين DNS
تضيف عمليات بحث DNS زمن انتقال قبل بدء أي نقل بيانات. يمكن أن يؤدي تحسين DNS إلى تحسين أوقات الاتصال الأولية بشكل كبير.
تقليل عمليات بحث DNS
يتطلب كل نطاق فريد بحث DNS. قلل من عدد النطاقات المختلفة التي تستخدمها.
// سيء: نطاقات متعددة تزيد من عمليات بحث DNS\n<img src="https://cdn1.example.com/image1.jpg">\n<img src="https://cdn2.example.com/image2.jpg">\n<script src="https://cdn3.example.com/app.js"></script>\n<link href="https://cdn4.example.com/style.css">\n\n// جيد: دمج إلى نطاقات أقل\n<img src="https://cdn.example.com/image1.jpg">\n<img src="https://cdn.example.com/image2.jpg">\n<script src="https://cdn.example.com/app.js"></script>\n<link href="https://cdn.example.com/style.css">
استخدام مزودي DNS سريعين
اختر مزودي DNS بشبكات عالمية وأوقات استجابة سريعة:
- Cloudflare DNS: 1.1.1.1 - سريع، يركز على الخصوصية
- Google Public DNS: 8.8.8.8 - موثوق، حضور عالمي
- AWS Route 53: شبكة Anycast، يتكامل مع AWS
- DNS Made Easy: على مستوى المؤسسات، أداء ممتاز
تكوين الجلب المسبق لـ DNS
<!-- تمكين الجلب المسبق لـ DNS للنطاقات الخارجية -->\n<meta http-equiv="x-dns-prefetch-control" content="on">\n\n<!-- الجلب المسبق لنطاقات محددة -->\n<link rel="dns-prefetch" href="//fonts.googleapis.com">\n<link rel="dns-prefetch" href="//www.google-analytics.com">\n<link rel="dns-prefetch" href="//cdn.jsdelivr.net">
مراقبة أداء DNS
// قياس وقت بحث DNS\nconst timing = performance.getEntriesByType('navigation')[0];\nconst dnsTime = timing.domainLookupEnd - timing.domainLookupStart;\nconsole.log('استغرق بحث DNS:', dnsTime, 'مللي ثانية');\n\n// مراقبة جميع عمليات بحث DNS\nconst resources = performance.getEntriesByType('resource');\nresources.forEach(resource => {\n const dns = resource.domainLookupEnd - resource.domainLookupStart;\n if (dns > 0) {\n console.log(`DNS لـ ${resource.name}: ${dns}مللي ثانية`);\n }\n});
تمرين تطبيقي:
- تحقق مما إذا كان الخادم الخاص بك يدعم HTTP/2 (استخدم علامة تبويب Network في Chrome DevTools)
- أضف تلميحات preconnect لـ 2-3 نطاقات طرف ثالث حرجة على موقعك
- قم بتكوين ضغط gzip أو brotli على خادم الويب الخاص بك
- قم بتطبيق رؤوس ذاكرة التخزين المؤقت: max-age لمدة عام للأصول الثابتة، no-cache لـ HTML
- قم بإعداد CDN (جرب الطبقة المجانية من Cloudflare) للأصول الثابتة الخاصة بك
- قم بقياس أوقات بحث DNS باستخدام Performance API
- أضف تلميحات dns-prefetch للنطاقات الخارجية
- قم بإنشاء Service Worker باستراتيجية ذاكرة التخزين المؤقت أولاً للأصول الثابتة
الملخص
يعد تحسين أداء الشبكة ضروريًا لتطبيقات الويب السريعة. توفر البروتوكولات الحديثة مثل HTTP/2 و HTTP/3 تحسينات كبيرة من خلال تعدد الإرسال وتقليل زمن الانتقال. تمكن تلميحات الموارد المتصفحات من التنبؤ بالموارد وتحميلها مسبقًا بذكاء.
تقلل CDNs من زمن الانتقال من خلال تقديم المحتوى من خوادم موزعة جغرافيًا، بينما تقلل خوارزميات الضغط مثل gzip و brotli بشكل كبير من أحجام النقل. تقلل استراتيجيات التخزين المؤقت الفعالة من الطلبات الزائدة، ويقلل تحسين DNS من أوقات الاتصال الأولية.
توفر Service Workers تحكمًا برمجيًا في التخزين المؤقت، مما يتيح وظائف غير متصلة بالإنترنت وتحسينات أداء متطورة. من خلال تطبيق تقنيات أداء الشبكة هذه، يمكنك تقديم تجارب سريعة للمستخدمين في جميع أنحاء العالم، بغض النظر عن ظروف شبكتهم.
النقاط الرئيسية:
- استخدم HTTP/2 أو HTTP/3 لتعدد الإرسال وضغط الرؤوس وأداء أفضل
- قم بتطبيق تلميحات الموارد: preconnect للأصول الحرجة، preload للموارد الحرجة، prefetch للتنقلات المحتملة
- انشر الأصول الثابتة على CDN لتقليل زمن الانتقال وتوفر أفضل
- قم بتمكين ضغط gzip و brotli للموارد النصية (تقليل حجم 60-85%)
- قم بتكوين رؤوس ذاكرة التخزين المؤقت المناسبة: max-age طويل للأصول الثابتة، التحقق من صحة المحتوى الديناميكي
- استخدم Service Workers للدعم غير المتصل واستراتيجيات التخزين المؤقت المتقدمة
- قم بتحسين DNS: تقليل عمليات البحث، استخدام مزودين سريعين، تطبيق تلميحات dns-prefetch