Tippek

Weboldal sebességoptimalizálás 2025-ben

Kristóf Kristóf
2025. január 12.
7 perc olvasás

A weboldal sebessége kritikus fontosságú a felhasználói élmény és az SEO szempontjából. Ebben a cikkben részletes útmutatót kapsz arról, hogyan optimalizáld a weboldalad teljesítményét 2025-ben.

"53% a látogatók elhagyja az oldalt, ha 3 másodpercnél tovább tart a betöltés." - Google

Miért fontos a sebesség?

  • 🚀 Jobb felhasználói élmény: Gyorsabb oldal = elégedettebb látogatók
  • 📈 Magasabb konverzió: 1 másodperc késés = 7% konverziócsökkenés
  • 🎯 Jobb SEO: A Google rangsorolja a gyors oldalakat
  • 💰 Több bevétel: Amazon szerint 100ms késés = 1% bevételkiesés

1. Képoptimalizálás - Az ördög a részletekben

A képek általában a weboldal tartalmának 50-90%-át teszik ki. Itt van a legnagyobb optimalizációs potenciál:

Modern formátumok használata:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback">
</picture>

Responsive képek:

<img 
  srcset="image-400.webp 400w,
          image-800.webp 800w,
          image-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  src="image-800.webp"
  alt="Leírás"
/>

Lazy Loading:

<img src="image.jpg" loading="lazy" alt="Lazy loaded kép">

Képoptimalizáló eszközök:

  • ImageOptim: Mac-re ingyenes
  • Squoosh: Online, Google által
  • Sharp: Node.js library automatizáláshoz
  • TinyPNG: Online PNG/JPEG tömörítés

2. CSS és JavaScript optimalizálás

Minifikálás és tömörítés:

// Build folyamat (pl. Vite)
{
  build: {
    minify: 'terser',
    cssMinify: true
  }
}

Kritikus CSS inline:

<head>
  <style>
    /* Kritikus CSS a hero sectionhöz */
    .hero { 
      display: flex; 
      min-height: 100vh; 
    }
  </style>
  <link rel="stylesheet" href="styles.css">
</head>

JavaScript kód szétválasztása:

// Dynamic import
button.addEventListener('click', async () => {
  const module = await import('./heavy-module.js');
  module.doSomething();
});

Defer és Async használata:

<!-- Defer: DOM betöltés után fut -->
<script src="app.js" defer></script>

<!-- Async: Aszinkron betöltés és futtatás -->
<script src="analytics.js" async></script>

3. Font optimalizálás

A betűtípusok jelentősen lelassíthatják az oldalt. Íme a best practice-ek:

Font-display használata:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Azonnal mutat fallback fontot */
}

Font preloading:

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

Csak szükséges karakterek:

/* Google Fonts subset */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789');

4. Caching stratégiák

HTTP Headers:

# .htaccess vagy nginx config
# Képek - 1 év
<filesMatch ".(jpg|jpeg|png|webp|gif|svg)$">
  Header set Cache-Control "max-age=31536000, public"
</filesMatch>

# CSS és JS - 1 hónap
<filesMatch ".(css|js)$">
  Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Service Worker caching:

// service-worker.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/styles.css',
        '/script.js',
        '/logo.svg'
      ]);
    })
  );
});

5. CDN használata

A Content Delivery Network (CDN) világszerte elosztott szervereken tárolja a statikus fájlokat:

  • Cloudflare: Ingyenes tier remek kezdéshez
  • Fastly: Kiváló teljesítmény
  • AWS CloudFront: Integráció AWS-sel
  • Bunny CDN: Költséghatékony alternatíva

6. Database és Backend optimalizálás

Query optimalizálás:

// ❌ ROSSZ - N+1 probléma
users.forEach(user => {
  const posts = db.query('SELECT * FROM posts WHERE user_id = ?', user.id);
});

// ✅ JÓ - Egy query
const posts = db.query(`
  SELECT users.*, posts.* 
  FROM users 
  LEFT JOIN posts ON users.id = posts.user_id
`);

Redis caching:

// Node.js példa
const redis = require('redis');
const client = redis.createClient();

async function getUser(id) {
  // Először cache-ből próbáljuk
  const cached = await client.get(`user:${id}`);
  if (cached) return JSON.parse(cached);

  // Ha nincs cache-ben, lekérjük DB-ből
  const user = await db.query('SELECT * FROM users WHERE id = ?', id);
  
  // Cache-eljük 1 órára
  await client.setex(`user:${id}`, 3600, JSON.stringify(user));
  
  return user;
}

7. Gzip/Brotli tömörítés

# Nginx config
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css text/xml text/javascript 
           application/x-javascript application/xml+rss;

# Brotli (jobb tömörítés)
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/javascript;

8. Preload, Prefetch, Preconnect

<!-- Preload: Kritikus erőforrások -->
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="script.js" as="script">

<!-- Prefetch: Következő oldal erőforrásai -->
<link rel="prefetch" href="/next-page.html">

<!-- Preconnect: Külső domainek -->
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- DNS-prefetch: DNS feloldás -->
<link rel="dns-prefetch" href="https://analytics.google.com">

9. Monitoring és mérés

Amit nem mérsz, azt nem tudod javítani. Használd ezeket az eszközöket:

Core Web Vitals:

  • LCP (Largest Contentful Paint): < 2.5s
  • FID (First Input Delay): < 100ms
  • CLS (Cumulative Layout Shift): < 0.1

Eszközök:

  • Google PageSpeed Insights: Ingyenes, részletes elemzés
  • Lighthouse: Chrome DevTools-ban
  • WebPageTest: Részletes waterfall diagram
  • GTmetrix: Átfogó riportok

10. Third-party scriptek kezelése

A third-party scriptek (analytics, reklámok, chatbotok) gyakran lassítják az oldalt:

  • Töltsd őket aszinkron módon
  • Halaszd a betöltést user interakcióig
  • Használj facade pattern-t (pl. YouTube embed helyett thumbnail)
  • Auditáld rendszeresen, hogy melyik script mennyit lassít

Gyors ellenőrzőlista

Menj végig ezen a listán minden projektnél:

  • ☑️ Képek WebP/AVIF formátumban?
  • ☑️ Lazy loading implementálva?
  • ☑️ CSS és JS minifikálva?
  • ☑️ Gzip/Brotli tömörítés bekapcsolva?
  • ☑️ Browser caching beállítva?
  • ☑️ CDN használata?
  • ☑️ Critical CSS inline?
  • ☑️ Font optimalizálva?
  • ☑️ Database queryк indexelve?
  • ☑️ Lighthouse score 90+?

Összegzés

A weboldal sebességoptimalizálás folyamatos munka, nem egyszeri feladat. Kezdd a legnagyobb hatású optimalizációkkal (képek, caching, minifikálás), majd fokozatosan menj tovább a részletekig.

Ne feledd: minden 100ms számít! A felhasználók gyors oldalakat várnak, és a Google is jutalmazza őket. Fektess be az optimalizálásba, és látni fogod az eredményeket mind a metrikákban, mind az üzleti eredményekben.