تحسين أداء الويب الحديث: ما بعد الأساسيات

في عام ٢٠٢٥، أداء الويب لا يتعلق فقط بأوقات التحميل السريعة - بل يتعلق بتقديم تجارب مستخدم استثنائية تؤثر بشكل مباشر على مقاييس عملك. أصبحت مؤشرات الويب الأساسية من Google عوامل ترتيب، ويتوقع المستخدمون تفاعلات شبه فورية.

دعنا نستكشف تقنيات تحسين الأداء المتقدمة التي تتجاوز النصائح المعتادة “التصغير والضغط”.

فهم ميزانية الأداء

قبل التحسين، حدد ميزانية الأداء:

// performance-budget.config.ts
export const performanceBudget = {
  // Size limits
  javascript: 170, // KB
  css: 50,
  images: 300,
  fonts: 100,

  // Timing limits
  lcp: 2500, // Largest Contentful Paint (ms)
  fid: 100,  // First Input Delay (ms)
  cls: 0.1,  // Cumulative Layout Shift
  ttfb: 600, // Time to First Byte (ms)
};

التحميل الكسول المتقدم

تجاوز loading="lazy" التقليدي:

// Using Intersection Observer with priorities
const lazyLoadImages = () => {
  const imageObserver = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const img = entry.target as HTMLImageElement;

          // Load high-resolution image
          if (img.dataset.src) {
            img.src = img.dataset.src;
          }

          // Load webp images if supported
          if (img.dataset.srcset && supportsWebP) {
            img.srcset = img.dataset.srcset;
          }

          imageObserver.unobserve(img);
        }
      });
    },
    {
      rootMargin: '50px', // Start loading 50px before viewport
      threshold: 0.01,
    }
  );

  document.querySelectorAll('img[data-src]').forEach((img) => {
    imageObserver.observe(img);
  });
};

تحسين الخطوط

الخطوط هي واحدة من أكبر عوائق الأداء:

/* Use display: swap for instant text */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

/* Preload critical fonts */
<link rel="preload" href="/fonts/critical.woff2" as="font" type="font/woff2" crossorigin>

تقسيم الكود الذكي

لا تقسم كل شيء - قسم بذكاء:

// Route-level splitting
const HomePage = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));

// Component-level splitting for heavy components
const Chart = lazy(() => import('./components/Chart'));

// Preload likely routes
const preloadRoute = (path: string) => {
  import(`./pages/${path}`);
};

// On hover, preload the route
<Link
  to="/dashboard"
  onMouseEnter={() => preloadRoute('Dashboard')}
>
  Dashboard
</Link>

استراتيجيات التخزين المؤقت

استخدم التخزين المؤقت الحديث بفعالية:

// Service Worker caching strategy
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.open('v1').then((cache) => {
      return cache.match(event.request).then((response) => {
        // Cache hit - return response
        if (response) {
          return response;
        }

        return fetch(event.request).then((response) => {
          // Don't cache if not a success response
          if (!response || response.status !== 200) {
            return response;
          }

          // Clone the response
          const responseToCache = response.clone();

          cache.put(event.request, responseToCache);
          return response;
        });
      });
    })
  );
});

تحسين الصور

استخدم تنسيقات الصور الحديثة والاستجابة:

<picture>
  <source
    srcset="/images/hero.avif"
    type="image/avif"
  >
  <source
    srcset="/images/hero.webp"
    type="image/webp"
  >
  <img
    src="/images/hero.jpg"
    alt="Hero image"
    width="1200"
    height="630"
    loading="lazy"
    decoding="async"
  >
</picture>

الخلاصة

تحسين الأداء عملية مستمرة. ركز على:

١. قياس كل شيء باستخدام أدوات حقيقية (RUM) ٢. تحسين المسار الحرج ٣. الاستفادة من التخزين المؤقت الحديث ٤. المراقبة المستمرة والتحسين

تذكر: الأداء هو ميزة، وليس فكرة لاحقة!