PRR (Partial / Progressive Rendering)
اسم · أداء الويب
تقنية عرض ويب حيث تُرسَل العناصر الحرجة للصفحة وتُعرَض أولًا، بينما تُحمَّل المكونات الثانوية تدريجيًا — مما يقلل زمن التحميل المُدرَك ويحسّن Core Web Vitals.
بنية أداء تتبناها الأطر الحديثة مثل Next.js و React، تتيح بث HTML على أجزاء إلى المتصفح عبر آليات مثل Suspense والبث SSR، مما يتجنب الانتظار الكتلي لصفحة كاملة.
استراتيجية تحسين تفصل عرض المكونات الثقيلة (رسوم بيانية، قوائم ضخمة، أدوات طرف ثالث) عن عرض المحتوى الرئيسي، مما يضمن عرضًا فوريًا للمعلومات الأساسية على جميع الأجهزة.
PRR (Partial / Progressive Rendering) هو تقنية عرض ويب تتمثل في إرسال وعرض العناصر الحرجة للصفحة أولًا، ثم تحميل بقية المحتوى تدريجيًا. بدلًا من انتظار توليد الصفحة بالكامل من جانب الخادم، يستقبل المتصفح تدفقًا مستمرًا من HTML ويعرض كل قسم فور جاهزيته. تستخدم وكالتنا هذا النهج مع React Suspense والبث SSR في Next.js لتوفير أزمنة عرض مُدرَكة شبه فورية.
يحسّن العرض التقدمي تجربة المستخدم بشكل جذري بإزالة الشاشة البيضاء أثناء الانتظار: يرى المستخدم المحتوى الرئيسي فورًا بينما تُحمَّل العناصر الثانوية في الخلفية. هذا الإحساس بالسرعة يقلل معدل الارتداد ويزيد التفاعل. تنفذ وكالتنا مؤشرات تحميل أنيقة (هياكل عظمية) للمناطق قيد العرض، محولةً الانتظار إلى تجربة سلسة واحترافية تبعث على الثقة.
لـ PRR تأثير مباشر وإيجابي على Core Web Vitals، خاصة Largest Contentful Paint (LCP) و First Input Delay (FID). بإرسال المحتوى الحرج أولًا، يُحقَّق LCP أبكر بكثير لأن المتصفح لا ينتظر المكونات الثقيلة. يُحرَّر الخيط الرئيسي بسرعة أكبر، مما يحسّن FID و Interaction to Next Paint (INP). تستخدم وكالتنا PRR كرافعة تقنية رئيسية لتحقيق درجات Core Web Vitals في المنطقة الخضراء على جميع الصفحات.
الترطيب التقليدي ينتظر عرض كامل HTML من جانب الخادم، ثم يتولى JavaScript العميل التحكم بالصفحة بأكملها في عملية واحدة. أما العرض الجزئي فيتيح ترطيب المكونات بشكل انتقائي وتدريجي: كل قسم يصبح تفاعليًا بشكل مستقل فور تحميل JavaScript الخاص به. تستغل وكالتنا هذه الدقة لجعل العناصر التفاعلية الحرجة (التنقل، أزرار الدعوة للعمل) تعمل فورًا دون انتظار ترطيب الأقسام الأقل أولوية.
على الاتصالات المحمولة محدودة النطاق الترددي، يُعد العرض التقدمي حاسمًا لأنه يتيح للمستخدم البدء في استهلاك المحتوى دون انتظار التحميل الكامل للصفحة. يرسل بث HTML البايتات فور توفرها، ويعرض المتصفح المحتوى المستلَم تدريجيًا. تحسّن وكالتنا هذا النهج للجمهور المحمول بإعطاء الأولوية للمحتوى النصي الحرج وتأجيل الصور والمكونات الثقيلة، مما يضمن إمكانية وصول شاملة.
يعزل PRR المكونات الثقيلة (رسوم بيانية معقدة، دوارات صور، أدوات طرف ثالث) داخل حدود Suspense التي لا تؤثر على عرض المحتوى الرئيسي. يرسل الخادم عنصرًا بديلًا لهذه المكونات ويستمر في بث بقية الصفحة. عندما يكون المكون الثقيل جاهزًا، يُحقَن ديناميكيًا دون حجب الواجهة. تستخدم وكالتنا هذه البنية لدمج وظائف غنية دون المساس أبدًا بالسرعة المُدرَكة من قبل المستخدم.
يعتمد العرض التقدمي على بث HTTP، وهي ميزة مدعومة أصلًا من جميع المتصفحات الحديثة (Chrome و Firefox و Safari و Edge). يُرسَل HTML على أجزاء عبر Transfer-Encoding chunked، وهي قدرة قياسية في بروتوكول HTTP/1.1. بالنسبة للمتصفحات الأقدم، يتم العرض بالطريقة التقليدية دون أي تدهور وظيفي. تحرص وكالتنا على تنفيذ تقنية التحسين هذه بشكل تدريجي، مقدمةً أفضل أداء ممكن لكل متصفح.
للعرض الجزئي تأثير إيجابي على SEO التقني لأن المحتوى الحرج — العناوين والفقرات والبيانات الوصفية — يُرسَل أولًا في تدفق HTML، تمامًا كما تريده روبوتات الفهرسة. يستقبل Googlebot المحتوى الرئيسي دون انتظار المكونات الثانوية، مما يسرّع الفهرسة ويحسّن تقييم جودة الصفحة. تنظم وكالتنا البث بحيث تكون المعلومات الحرجة لـ SEO دائمًا في الجزء الأول المُرسَل إلى المتصفح.
تنفيذ PRR يتطلب إطارًا يدعم بث SSR مثل Next.js مع React Suspense، وخادم Node.js قادرًا على إدارة الاستجابات المجزأة، وشبكة CDN مُهيأة لعدم تخزين الاستجابات المبثوثة مؤقتًا. يجب أن تحدد البنية المكونات الحرجة للعرض بالأولوية وتغلف الأقسام الثانوية في حدود Suspense. تنشر وكالتنا هذه البنية التحتية جاهزة للاستخدام، من تكوين الخادم إلى تحسين المكونات، لتعظيم فوائد العرض التقدمي.