WP Rocket SaaS: خلف الكواليس

توضح هذه المقالة الفنية تفاصيل تطوير وتحسين زاحف الويب القادر على معالجة أكثر من 15000 صفحة ويب في الدقيقة باستخدام NodeJS وPuppeteer وBullMQ. نوضح كيف تعمل ميزة إزالة CSS غير المستخدمة (RUCSS) وتعزز أداء الويب عن طريق إزالة CSS غير الضرورية، وتحسين أوقات التحميل، وتعزيز مقاييس الأداء الرئيسية. نوضح أيضًا كيف تعاملنا مع التحديات الأولية، بما في ذلك مشكلات المعالجة والاستقرار غير الفعالة، من خلال الاستفادة من Puppeteer لجمع الموارد، وتخصيص مكتبات JavaScript، وتنفيذ نظام انتظار باستخدام BullMQ. وأخيرًا، نوضح كيف حققنا التميز التشغيلي الذي يهدف إلى الحفاظ على معايير الجودة العالية، وتمكين الابتكار السريع، ودعم العملاء الفعال.

ما هو RUCSS؟

تم تصميم ميزة إزالة CSS غير المستخدمة (RUCSS) لإزالة جميع ملفات CSS وأوراق الأنماط غير المستخدمة على صفحة الويب، مع الاحتفاظ فقط بـ CSS الضروري لكل صفحة. بمجرد تطبيق التحسين، سيقدم موقع الويب الخاص بك فقط CSS المطلوب للصفحة المحددة التي يطلبها المستخدم، مما يجعل تحميل الصفحة أسرع بكثير!

في المتوسط، أدى هذا التحسين إلى تقليل حجم ملف CSS الذي تم تسليمه بنسبة 76%!

فوائد RUCSS

• حجم صفحة مخفض : يقلل الحجم الإجمالي لصفحة الويب.
• طلبات HTTP أقل : يقلل عدد أوراق أنماط CSS التي يجب تحميلها.
• أوقات تحميل أسرع : تعمل على تحسين سرعة تحميل الصفحة.
• عناصر الويب الأساسية المحسنة : يعزز مقاييس الأداء الرئيسية مثل أكبر طلاء محتوى (LCP) وأول طلاء محتوى (FCP) وإزاحة التخطيط التراكمي (CLS).
• إزالة CSS الذي يحظر العرض : يمنع CSS من تأخير عرض الصفحة.

تحديد CSS غير المستخدم: ضربة جراحية

تعد عملية إزالة CSS غير المستخدمة معقدة للغاية: بالنسبة لكل قاعدة CSS نقوم بإزالتها، يجب علينا التأكد من عدم الحاجة إليها على الإطلاق في تلك الصفحة؛ وإلا فقد ينكسر التصميم! يجب أن تأخذ في الاعتبار الكثير من العوامل لضمان تحديد CSS غير المستخدم بشكل صحيح:

• تفاعلات JavaScript : تقوم JavaScript بتغيير DOM وCSS ديناميكيًا. على سبيل المثال، قد تظهر نافذة منبثقة بعد النقر على الزر، لتقدم عناصر DOM وقواعد CSS جديدة. يعد التعامل مع هذه التفاعلات أمرًا بالغ الأهمية لتحديد CSS المستخدم بدقة، وهناك العديد من أشرطة التمرير والقوائم والمعارض خارج اللوحة.
• اختلافات CSS وHTML : تقدم سمات WordPress والمكونات الإضافية أشكالًا لا حصر لها من قواعد CSS. يعد التعامل مع CSS المتداخلة وحالات الحافة وحتى أخطاء بناء الجملة أمرًا ضروريًا. مطلوب تحليل HTML دقيق لتحديد وإزالة CSS غير المستخدمة بشكل فعال.
• أحجام إطار العرض : يتم تطبيق بعض أنماط CSS تحت بعض الشروط على حجم الشاشة. لضمان إمكانية تقديم CSS بشكل صحيح لمستخدمي الأجهزة المحمولة وسطح المكتب، فإننا نوفر CSS المستخدم لمختلف أحجام الشاشات ونقدم فقط الحجم المناسب لكل زيارة. بالإضافة إلى ذلك، تنطبق قواعد تحسين محددة على أنماط CSS سريعة الاستجابة.

RUCSS كحل SaaS

تعد معالجة موارد الصفحة وإنشاء CSS المستخدمة عملية كثيفة الاستخدام للموارد. قد يؤدي تنفيذ هذه المهام مباشرة على مواقع العملاء إلى إبطائها وقد لا يكون ممكنًا على جميع الخوادم وأجهزة الاستضافة. ولذلك، فإن بعض ميزات WP Rocket الأكثر تقدمًا، مثل Removed Unused CSS، يتم تشغيلها بواسطة SaaS الخاص بنا. يتم إجراء هذه التحسينات على خوادمنا بناءً على طلبات من المكون الإضافي WP Rocket، ثم يتم تطبيق النتائج على مواقع الويب تلقائيًا. هذا النهج له بعض الفوائد العظيمة للعملاء:

• إجراء تحسين كثيف الاستخدام للموارد وتقليل الحمل على خوادم المستخدم.
• تقديم التحسينات في أسرع وقت ممكن ومعالجة التعليقات بسرعة.
• مراقبة المشكلات والأخطاء وإصلاحها بشكل استباقي دون انتظار تذكرة الدعم.
• تأكد من استفادة جميع المستخدمين من أحدث الإصدارات دون أي تحديث من جانب العميل.
• يمكنك التكرار بسرعة ونشر التحسينات دون الحاجة إلى تحديث المكون الإضافي WP Rocket.

كيف يبدو الأمر خلف الكواليس؟

يقوم WP Rocket SaaS بزيارة ما يصل إلى 20 ألف صفحة في الدقيقة وتحسينها، ومعالجة CSS والصور العلوية! وللقيام بذلك، نقوم باستمرار بتشغيل الآلاف من متصفحات الويب عبر حوالي 40 خادمًا مختلفًا لتلبية جميع طلبات المستخدمين لدينا في غضون دقيقتين. ولتحقيق ذلك، يستفيد فريقنا من أحدث التقنيات بما في ذلك NodeJS وDjango وRedis وCockroachDB وKubernetes وتشغيلها مع فرق group.One.

التحديات التقنية الرئيسية

1. جمع موارد الصفحة

نحن نستخدم Puppeteer على نطاق واسع، وهي مكتبة عقدية توفر واجهة برمجة تطبيقات عالية المستوى للتحكم في متصفحات Chrome أو Chromium مقطوعة الرأس. تعتبر هذه الأداة ضرورية لاستراتيجية جمع الموارد لدينا بفضل قدرتها على عرض صفحات الويب تمامًا كما يفعل المستخدم الحقيقي، مما يضمن التقاط جميع العناصر الديناميكية. فهو يوفر العديد من الميزات القوية التي نعتمد عليها لتحسين العملية، مثل التحكم في حجم إطار العرض واعتراضات الطلبات وما إلى ذلك.

2. معالجة موارد الصفحة

نظرًا لأن سمات WordPress والمكونات الإضافية تستخدم مجموعة واسعة من CSS وJavaScript، فقد كنا بحاجة إلى حل قوي لمعالجة هذه الملفات.

بعد اختبار العديد من الأساليب لمعالجة موارد الصفحة، مثل Webpack وPostCSS وCleanCSS، قررنا أخيرًا إنشاء مكتبة JavaScript مخصصة وصيانتها لتناسب متطلباتنا المحددة بشكل أفضل. يتضمن ذلك التعامل مع حالات الحافة وقواعد CSS المتداخلة ومشكلات بناء الجملة الموجودة في العديد من سمات WordPress والمكونات الإضافية لضمان إمكانية إجراء التحسين بشكل موثوق لجميع مستخدمينا.

3. الضبط الدقيق بفضل خبرة فريقنا

يمكن أن تكون معالجة CSS صعبة للغاية وتكون هناك مخاطرة كبيرة لكسر تخطيط الصفحة إذا لم يتم توفير العناية الكافية لهذه العملية. يتمتع فريقنا بمعرفة واسعة بموضوعات WordPress وأدوات إنشاء الصفحات الشائعة، بالإضافة إلى التعليقات المستمرة من مئات الآلاف من المستخدمين حول التوافق مع أحدث اتجاهات WordPress. لذلك، قمنا بتطوير نظام قائمة آمنة ديناميكي لزملائنا في الفريق لتحديث قواعد معالجة CSS الخاصة بـ SaaS لدينا مباشرةً في الوقت الفعلي لتكييف تحسيناتنا بشكل مستمر وزيادة التوافق كل يوم.

4. إدارة تدفق آلاف الصفحات في الدقيقة

للتعامل مع تدفق 15000 صفحة ويب في الدقيقة، قمنا بتنفيذ نظام انتظار باستخدام BullMQ. يقدم هذا النظام:

• المعالجة غير المتزامنة لإلغاء تحميل عملية التحسين من البرنامج المساعد إلى الواجهة الخلفية غير المتزامنة.
• موازنة التحميل وإدارة التزامن : توزيع المهام عبر خوادم متعددة، مما يسمح لـ SaaS بالتعامل مع عدد كبير من عناوين URL بكفاءة وسهولة التوسع.
• الموثوقية والتسامح مع الأخطاء : يتم حفظ جميع المهام المقدمة ونتائجها بمجرد توفرها. وهذا يوفر المرونة في حالة فشل أحد خوادمنا أو إذا كان موقع الويب الخاص بالمستخدم غير قادر على استرداد النتائج على الفور.
• تحديد الأولويات : يمكن استخدام قوائم انتظار BullMQ لتحديد أولويات المهام، مما يضمن معالجة المهام الأكثر أهمية أولاً. على سبيل المثال، يتم إعطاء الأولوية لتحسين الصفحات الرئيسية للسماح لمستخدمينا برؤية التحسينات على صفحتهم الرئيسية على الفور واختبارها على الفور باستخدام Pagespeed!

التميز التشغيلي

يعد إنشاء نظام قابل للتطوير وموثوق به لـ SaaS أمرًا ضروريًا لسهولة وكفاءة العملاء وللتعامل مع العدد المتزايد من المستخدمين والحجم المتزايد لطلبات معالجة الصفحات. فيما يلي نظرة متعمقة على الخطوات التي أتاحت لنا تحقيق هذا التميز.

1. بنية قابلة للتطوير

يتم استخدام WP Rocket في ملايين مواقع الويب حول العالم في أي وقت. لذلك، يجب أن تظل SaaS الخاصة بنا متاحة وتعمل كما هو متوقع في جميع الأوقات. تتم استضافة الخدمة على أكثر من 40 خادمًا فعليًا موجودًا في مناطق مختلفة. ويتم تنسيقها مع Kubernetes لتسهيل نشر دورات حياة الحاوية وتوسيع نطاقها وإدارتها. نحن نعتمد على ميزات قوية مثل تحقيقات الحيوية والتحديثات المستمرة والقياس التلقائي لإضفاء المرونة على الخدمة والحفاظ على وقت التشغيل في جميع الظروف. بالإضافة إلى ذلك، تقوم خدمة البوابة المخصصة بإدارة المهام وفرض أمان واجهة برمجة التطبيقات (تحديد المعدل، والمصادقة، وما إلى ذلك).

2. المراقبة والتنبيه

تتم مراقبة جميع هذه الخدمات والخوادم ومراقبتها باستمرار باستخدام المقاييس الفنية من خلال Prometheus وGrafana، بالإضافة إلى المقاييس الوظيفية، لضمان استقرار الخدمة وتقديم أفضل أداء لمستخدمينا. تتيح لنا المراقبة المتعمقة ضمان بقاء معدل النجاح مرتفعًا مع الحفاظ على مدة المهمة منخفضة وكفاءة التحسين هي الأفضل في فئتها. تتيح لنا التنبيهات الصادرة عن أدوات مثل Prometheus وMetabase التفاعل في الوقت الفعلي في حالة عدم تصرف شيء ما كما هو متوقع.

3. القدرة على الملاحظة لمساعدة عملائنا

بينما نعمل بجد لجعل SaaS الخاص بنا سهل الاستخدام لعملائنا، يمكن أن تحدث بعض الصعوبات في إعدادات معقدة للغاية مع جدران الحماية أو قواعد الأمان أو مواقع WordPress التي تحتوي على العديد من المكونات الإضافية أو السمات المتعارضة، على سبيل المثال. بفضل نهج SaaS، تم تجهيز فريق الدعم لدينا بأدوات داخلية من خلال Metabase للوصول إلى البيانات المتعلقة بمستخدم معين، ومراقبة وظائفه ونتائج التحسين، مما يسمح لنا بتحديد المشكلات المحتملة بسرعة. ويصبحون بعد ذلك قادرين على التكرار والتعديل والضبط والحصول على تعليقات في الوقت الفعلي باستخدام PostMan وMetabase. ونتيجة لذلك، يمكنهم مساعدة العملاء المتعثرين بكفاءة وحتى ضبط قواعد تحسين SaaS مباشرة لفتح قفل المستخدمين.

4. الاختبار الآلي والتكامل المستمر

يمكن أن يشكل الحفاظ على معايير الجودة العالية مع الحفاظ على معدل تسليم كبير تحديًا للمهندسين. نحن نحل هذه المشكلة من خلال الأتمتة الموثوقة التي يمر بها كل تغيير في التعليمات البرمجية. بدءًا من الاختبار الآلي وحتى النشر بزر واحد في الإنتاج، فإننا نستفيد أيضًا من النسخ المطابق وآليات إصدار الظل وعمليات طرح الإصدار التدريجي. كل هذه الأساليب القوية تسمح لفريقنا الهندسي بالازدهار والاستمرار في الابتكار دون تعريض جودة الخدمة للخطر. تتم معظم هذه الأمور تلقائيًا، لذا لا نحتاج حتى إلى التفكير فيها والتركيز على ما يهم: إنشاء أفضل الميزات لمستخدمينا!

التفاف

لتلخيص ذلك، أدى تطوير وتحسين زاحف الويب باستخدام NodeJS وPuppeteer وBullMQ إلى حل عالي الكفاءة وقابل للتطوير لمعالجة أكثر من 15000 صفحة ويب في الدقيقة. من خلال معالجة التحديات الأولية والاستفادة من الأدوات والمنهجيات المتقدمة، أنشأنا نظامًا قويًا يعمل على تحسين أداء الويب بشكل كبير من خلال ميزة إزالة CSS غير المستخدمة (RUCSS). يضمن التكامل المستمر والاختبار الآلي والتركيز على قابلية التوسع والموثوقية بقاء خدمتنا على أعلى مستوى، مما يوفر للمستخدمين أوقات تحميل أسرع وتجارب ويب محسنة بشكل عام.