/* ========================================== PERFORMANCE OPTIMIZATION CSS ضع هذا الكود في أول ملف CSS الخاص بك ========================================== */ /* ===== 1. إخفاء Loader فوراً ===== */ .loader-init, .loader-init::after { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* ===== 2. منع Layout Shifts - الأهم ===== */ /* تثبيت أبعاد الصور */ img { max-width: 100%; height: auto; display: block; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } /* منع CLS في صور المنتجات */ .s-product-card-image { aspect-ratio: 1 / 1; width: 100%; min-height: 200px; max-height: 400px; overflow: hidden; background: #f5f5f5; position: relative; } .s-product-card-image-cover, .s-product-card-image img { aspect-ratio: 1 / 1 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; position: absolute; top: 0; left: 0; } /* تثبيت ارتفاع Product Cards */ .s-product-card-entry { min-height: 350px !important; contain: layout size !important; } .s-product-card-vertical { min-height: 380px; } /* ===== 3. تثبيت Header Height ===== */ header, .store-header { height: 68px !important; min-height: 68px !important; max-height: 68px !important; contain: layout !important; } .top-navbar { min-height: 40px !important; contain: layout !important; } .main-nav-container { height: 68px !important; min-height: 68px !important; } #mainnav { height: 68px !important; } /* ===== 4. تثبيت Footer Height ===== */ footer, .store-footer, .store-footer__inner { min-height: 200px !important; contain: layout !important; } /* ===== 5. منع Container Shifts ===== */ .container, .s-products-list-wrapper { contain: layout style !important; } /* ===== 6. إلغاء Animations عند التحميل ===== */ /* يقلل من استهلاك CPU */ * { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; } /* بعد 3 ثواني نرجع Animations */ .animations-ready * { animation-duration: revert !important; animation-delay: revert !important; transition-duration: revert !important; } /* ===== 7. تحسين Skeleton Loading ===== */ .s-skeleton-item { animation: skeleton-pulse 1.5s ease-in-out infinite !important; background: linear-gradient( 90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75% ) !important; background-size: 200% 100% !important; } @keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* إخفاء Skeleton بعد التحميل */ .loaded .s-skeleton-item { display: none !important; } /* ===== 8. تحسين الخطوط ===== */ /* منع FOIT (Flash of Invisible Text) */ body { font-family: var(--font-main), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* ===== 9. تحسين الأزرار والـ Icons ===== */ button, .btn, .s-button-element { contain: layout style !important; will-change: auto !important; } /* ===== 10. تحسين Grid/Flex Layouts ===== */ .s-products-list-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; contain: layout !important; } /* ===== 11. تقليل Repaints ===== */ .s-product-card-wishlist-btn, .header-btn { will-change: auto !important; transform: translateZ(0); backface-visibility: hidden; } /* ===== 12. Hide Modals Initially ===== */ salla-modal, .s-modal, .s-hidden { display: none !important; visibility: hidden !important; } /* ===== 13. تحسين الـ Scroll Performance ===== */ * { scroll-behavior: auto !important; } /* بعد التحميل نرجع smooth scroll */ .loaded * { scroll-behavior: smooth !important; } /* ===== 14. تحسين Web Components ===== */ salla-products-list, salla-product-card, salla-add-product-button { contain: layout !important; } /* ===== 15. منع Invisible Elements من أخذ مساحة ===== */ [hidden], .hidden, .s-hidden { display: none !important; } /* ===== 16. تحسين Logo ===== */ .navbar-brand img { width: auto; max-width: 150px; height: auto; max-height: 50px; } /* ===== 17. تثبيت Cart Summary ===== */ .s-cart-summary-wrapper { contain: layout !important; min-width: 100px; } /* ===== 18. تحسين Social Icons ===== */ .s-social-list, .s-contacts-list { contain: layout !important; } /* ===== 19. Critical Above-the-Fold Styles ===== */ /* هذه الأنماط للمحتوى المرئي فوراً */ .store-header, .top-navbar, .main-nav-container { opacity: 1 !important; visibility: visible !important; transform: none !important; } /* ===== 20. Reduce Motion للأجهزة الضعيفة ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== 21. تحسين الـ Responsive Images ===== */ .lazy, img[loading="lazy"] { min-height: 150px; background: #f5f5f5; } /* ===== 22. إخفاء Third-party Iframes حتى التحميل الكامل ===== */ iframe:not([src*="youtube"]):not([src*="maps"]) { display: none !important; } /* ===== 23. تحسين Search Modal ===== */ .s-search-modal, .s-login-modal, .s-offer-modal { display: none !important; contain: layout !important; } /* عند الفتح */ .s-modal:not(.s-hidden) { display: flex !important; } /* ===== 24. GPU Acceleration للعناصر المهمة فقط ===== */ .s-product-card-entry, .store-header, .main-nav-container { transform: translateZ(0); backface-visibility: hidden; } /* ===== 25. تحسين الـ Grid Performance ===== */ @supports (grid-template-rows: masonry) { .s-products-list-wrapper { grid-template-rows: masonry; } } /* ===== 26. تقليل Complexity للـ Shadows ===== */ .shadow-default, .shadow { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; } /* ===== 27. Contain للـ Footer ===== */ .store-footer * { contain: layout style !important; } /* ===== 28. تحسين الـ Mobile Menu ===== */ .mobile-menu, .mm-spn { contain: layout !important; transform: translateZ(0); } /* ===== 29. Critical Visibility ===== */ /* اظهار المحتوى المهم فوراً */ body, main, #main-content, .s-block--latest-products { visibility: visible !important; opacity: 1 !important; } /* ===== 30. Font Display Swap ===== */ @font-face { font-family: 'PingARLT'; font-display: swap; /* مهم جداً للـ performance */ } /* ===== 31. Reduce Paint Area ===== */ .s-product-card-content, .s-product-card-content-main, .s-product-card-content-sub { contain: layout paint !important; } /* ===== 32. Hardware Acceleration للـ Hover States ===== */ .s-product-card-entry:hover { transform: translateZ(0) scale(1.02); } /* ===== Responsive Optimizations ===== */ @media (max-width: 768px) { /* تقليل complexity على Mobile */ * { box-shadow: none !important; } .s-product-card-entry { min-height: 300px !important; } /* تبسيط الـ Grid */ .s-products-list-wrapper { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; } } /* ===== Print Styles (تقليل حجم الملف) ===== */ @media print { .store-header, .store-footer, .s-cart-summary-wrapper, button, .btn { display: none !important; } }