⚡ Performance Optimization

Complete guide για page speed optimization και Core Web Vitals
Στόχος: <2s load time, 90+ Lighthouse score, top Google rankings
← Πίσω στο Main Guide

🎯 Target Performance Metrics

Αυτά είναι τα metrics που πρέπει να πετύχετε για top Google rankings. Η Google χρησιμοποιεί αυτά τα metrics ως ranking factors από το 2021.

<2.5s
LCP Target
Largest Contentful Paint
<100ms
FID Target
First Input Delay
<0.1
CLS Target
Cumulative Layout Shift
90+
Lighthouse Score
Mobile & Desktop
<2s
Page Load Time
Full page load (mobile)
<1MB
Total Page Size
Compressed
⚠️
Mobile-First = Priority!
Με 83.6% mobile traffic στο cardnow.gr, η mobile performance δεν είναι προαιρετική. Η Google χρησιμοποιεί την mobile έκδοση για indexing.

🖼️ Image Optimization (Biggest Impact!)

Οι εικόνες αποτελούν συνήθως το 50-70% του total page weight. Proper optimization μπορεί να μειώσει το page load time κατά 40-60%.

📦 WebP Format
Critical
WebP images είναι 25-35% μικρότερες από JPEG/PNG χωρίς quality loss. Essential για mobile performance.
🎯 Lazy Loading
Critical
Φορτώστε images μόνο όταν χρειάζονται (when they enter viewport). Μειώνει initial page load κατά 50%+.
📏 Dimensions & Compression
High
Specify width/height για να αποφύγετε layout shifts. Compress χωρίς quality loss.
HTML - Perfect Image Implementation 
<!-- ✅ PERFECT Image Setup -->
<picture>
  <!-- WebP for modern browsers -->
  <source 
    type="image/webp"
    srcset="
      /images/paysafecard-10-320w.webp 320w,
      /images/paysafecard-10-640w.webp 640w,
      /images/paysafecard-10-1024w.webp 1024w
    "
    sizes="(max-width: 768px) 100vw, 50vw">
  
  <!-- Fallback JPEG for older browsers -->
  <source 
    type="image/jpeg"
    srcset="
      /images/paysafecard-10-320w.jpg 320w,
      /images/paysafecard-10-640w.jpg 640w,
      /images/paysafecard-10-1024w.jpg 1024w
    "
    sizes="(max-width: 768px) 100vw, 50vw">
  
  <!-- Default fallback -->
  <img 
    src="/images/paysafecard-10-640w.jpg"
    alt="Paysafecard €10 - Άμεση παράδοση σε 3 λεπτά | cardnow.gr"
    width="640"
    height="360"
    loading="lazy"
    decoding="async"
    style="width: 100%; height: auto;">
</picture>

<!-- Above-the-fold hero image (NO lazy loading) -->
<img 
  src="/images/hero.webp"
  alt="cardnow.gr - Gift Cards με άμεση παράδοση"
  width="1920"
  height="1080"
  priority
  fetchpriority="high">
Image Type Recommended Size Max File Size Format Loading
Hero Images 1920x1080px <200KB WebP + JPEG fallback Eager (above fold)
Product Images 640x360px <80KB WebP + JPEG fallback Lazy
Thumbnails 320x180px <30KB WebP + JPEG fallback Lazy
Category Banners 1200x400px <120KB WebP + JPEG fallback Lazy
Icons/Logos Vector <10KB SVG (inline) Eager
❌ Before Optimization
  • • Product image: 450KB (JPEG)
  • • No lazy loading
  • • No responsive images
  • • Missing width/height
  • Result: 3.8s LCP ⚠️
✅ After Optimization
  • • Product image: 65KB (WebP)
  • • Lazy loading enabled
  • • Responsive srcset
  • • Dimensions specified
  • Result: 1.8s LCP ✅

🔧 JavaScript Optimization

⏱️ Defer Non-Critical JS
Critical
Defer JavaScript που δεν χρειάζεται για initial render. Βελτιώνει FID κατά 60%+.
HTML - Defer Scripts 
<!-- ✅ Defer non-critical scripts -->
<script src="/js/analytics.js" defer></script>
<script src="/js/chat-widget.js" defer></script>
<script src="/js/social-share.js" defer></script>

<!-- ✅ Async for independent scripts -->
<script src="https://www.googletagmanager.com/gtag/js" async></script>

<!-- ❌ Blocking scripts (avoid!) -->
<script src="/js/heavy-library.js"></script> <!-- Blocks rendering! -->
📦 Code Splitting
High
Split code σε μικρότερα chunks. Load μόνο τι χρειάζεται για κάθε page.
🗜️ Minification
High
Remove whitespace, comments, shorten variable names. Reduces JS size by 30-50%.
💡
JavaScript Budget
Στόχος: <200KB total JavaScript (compressed). Κάθε 100KB JavaScript προσθέτει ~1s στο mobile load time.

🎨 CSS Optimization

⚡ Critical CSS
Critical
Inline το CSS που χρειάζεται για above-the-fold content. Load υπόλοιπο CSS async.
HTML - Critical CSS Inline 
<head>
  <!-- 1. Inline Critical CSS (above-the-fold) -->
  <style>
    /* Critical CSS here - header, hero, navigation */
    body { font-family: 'Roboto', sans-serif; margin: 0; }
    .header { background: #2563eb; padding: 20px; }
    .hero { min-height: 600px; background: linear-gradient(...); }
    /* ... only what's visible immediately */
  </style>

  <!-- 2. Preload Main CSS -->
  <link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

  <!-- 3. Noscript Fallback -->
  <noscript><link rel="stylesheet" href="/css/main.css"></noscript>
</head>
🗜️ Minify & Compress
High
Remove whitespace, comments, και compress CSS files.
📱 Mobile-First CSS
Medium
Write mobile CSS first, add desktop με media queries. Smaller initial load.
CSS - Mobile-First Approach 
/* ✅ Mobile-first (base styles) */
.container {
  padding: 15px;
  max-width: 100%;
}

.card {
  width: 100%;
  margin-bottom: 20px;
}

/* Desktop adjustments (loaded only when needed) */
@media (min-width: 768px) {
  .container {
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .card {
    width: calc(50% - 20px);
    display: inline-block;
  }
}

💾 Caching Strategy

✅
Caching = 10x Faster Repeat Visits
Με 43.5% repeat rate στο cardnow.gr, proper caching είναι κρίσιμο. Repeat visitors θα φορτώνουν τη σελίδα σε <0.5s.
Apache - .htaccess Caching Headers 
# Enable mod_expires
<IfModule mod_expires.c>
  ExpiresActive On
  
  # Images - Cache για 1 έτος
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  
  # CSS & JavaScript - Cache για 1 μήνα
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  
  # Fonts - Cache για 1 έτος
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"
  
  # HTML - No cache (ή μικρό cache)
  ExpiresByType text/html "access plus 0 seconds"
</IfModule>

# Cache-Control Headers
<IfModule mod_headers.c>
  # Images
  <FilesMatch "\.(jpg|jpeg|png|gif|webp|svg)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
  </FilesMatch>
  
  # CSS & JS
  <FilesMatch "\.(css|js)$">
    Header set Cache-Control "public, max-age=2592000"
  </FilesMatch>
  
  # HTML
  <FilesMatch "\.(html|htm)$">
    Header set Cache-Control "public, max-age=0, must-revalidate"
  </FilesMatch>
</IfModule>
Resource Type Cache Duration Cache-Control Reasoning
Images 1 year public, immutable Rarely change, use versioned filenames
CSS/JS 1 month public Updated occasionally, use versioning
Fonts 1 year public, immutable Never change
HTML 0s - 5min public, must-revalidate Content updates frequently
API Responses 0s - 1min private, no-cache Real-time data
🌐 CDN Setup
Use Cloudflare (free) ή άλλο CDN για global caching
💾 Browser Caching
Configure proper cache headers στο server

🔤 Font Optimization

⚠️
Web Fonts = 200-500KB Extra Weight
Fonts μπορούν να προσθέσουν significant load time. Optimize για να αποφύγετε FOIT (Flash of Invisible Text).
HTML - Optimized Font Loading 
<head>
  <!-- 1. Preconnect to Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  
  <!-- 2. Load Font with display=swap -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  
  <!-- Alternative: Self-hosted fonts (faster) -->
  <link rel="preload" href="/fonts/roboto-regular.woff2" as="font" type="font/woff2" crossorigin>
  
  <style>
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-display: swap; /* CRITICAL: Avoid FOIT */
      src: url('/fonts/roboto-regular.woff2') format('woff2');
    }
    
    /* Fallback system fonts */
    body {
      font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
  </style>
</head>

🖥️ Server & Hosting Optimization

⚡ HTTP/2 & Compression
🌍 Geographic Location
⏱️ Server Response Time
Apache - Compression Configuration 
# Enable Gzip Compression
<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE application/json
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE text/xml
  
  # Compress SVG
  AddOutputFilterByType DEFLATE image/svg+xml
  
  # Don't compress images (already compressed)
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|webp)$ no-gzip
</IfModule>

# Browser Compatibility
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

🧪 Testing & Monitoring Tools

Tool Purpose Key Metrics URL
Google PageSpeed Insights Core Web Vitals, Lighthouse score LCP, FID, CLS, Performance Score pagespeed.web.dev
WebPageTest Detailed waterfall, real device testing Start Render, Speed Index, TTFB webpagetest.org
GTmetrix Performance monitoring, historical data Page Load Time, Total Size, Requests gtmetrix.com
Google Search Console Real user Core Web Vitals data Field Data (actual users) search.google.com/search-console
Chrome DevTools Local debugging, network analysis Network, Performance, Coverage Built into Chrome (F12)
💡
Test από Mobile Device!
Always test performance από real mobile device (όχι μόνο desktop). Χρησιμοποιήστε WebPageTest με Athens/Greece location και Moto G4/3G connection για realistic testing.

💰 Performance Budget

Set limits για page weight και load times. Monitor και enforce αυτά τα limits.

Resource Type Budget (Mobile) Budget (Desktop) Priority
Total Page Size <800KB <1.2MB Critical
JavaScript <150KB <250KB Critical
CSS <50KB <80KB High
Images <500KB <700KB Critical
Fonts <100KB <150KB Medium
HTTP Requests <50 <70 High
❌ Typical E-commerce Site
  • • Total: 2.5MB
  • • 89 HTTP requests
  • • 3.8s LCP (mobile)
  • • Lighthouse: 45/100
✅ Optimized cardnow.gr Target
  • • Total: 800KB
  • • 42 HTTP requests
  • • 1.8s LCP (mobile)
  • • Lighthouse: 92/100

Performance Optimization Guide | Part of cardnow.gr SEO Implementation

© 2025 cardnow.gr | Τελευταία ενημέρωση: Νοέμβριος 2025

← Main SEO Guide PageSpeed Insights WebPageTest GTmetrix