تحسين سرعة الجوال: إصلاح ملفات CSS الحاجبة للعرض وخطأ CORS في صفحة المنتج

العنوان: تحسين سرعة الجوال: ملفات CSS حاجبة للعرض وخطأ CORS في صفحة المنتج

الوصف:
عند فحص صفحات المنتجات في PageSpeed Insights (الجوال) تظهر مشكلتان من جهة المنصة، وتخفضان درجة الأداء وأفضل الممارسات لدى المتاجر:

1. ملفات CSS تابعة للقالب تحجب عرض الصفحة (Render-blocking):

• app.css (72.5 KiB) — تأخير مقدّر 3,450 ms

• product-details.css (15.9 KiB) — تأخير مقدّر 1,500 ms

• ويظهر أيضًا rocket-loader.min.js من Cloudflare رغم أن النطاق على DNS only من جهة التاجر.

2. أخطاء في وحدة التحكم في كل زيارة لصفحة المنتج:

• CORS: الطلب https://api.salla.dev/store/v1/metadata/values?type=product&entities[]=... محجوب بسياسة CORS لأن استجابة preflight لا تحمل حالة HTTP ناجحة.

• AxiosError: Network Error من twilight/3.0.6.

• Failed to load resource: net::ERR_FAILED.

النتيجة على متجر dailycares.co: الأداء بين 36 و53 على الجوال، وأفضل الممارسات 73، وإمكانية الوصول 90، وتحسين محركات البحث 100. وبقيت النتيجة نفسها بعد إيقاف أي وسيط من جهة التاجر.

المطلوب (مقترح):

• تقسيم CSS الحرج (Critical CSS) وتحميل الباقي بشكل غير حاجب.

• إصلاح استجابة preflight لنقطة metadata/values حتى لا يظهر خطأ CORS.

• توضيح هل Rocket Loader مفعّل على المتاجر ويمكن للتاجر التحكم فيه.

هذا يفيد كل المتاجر لأن الاختبار يظهر في قالب المنصة نفسه، ويؤثر على السرعة وتجربة الجوال وأفضل الممارسات.

المرفقات: لقطات من تقرير PageSpeed (حظر العرض، أخطاء المتصفح، الدرجات).