Prestanda 11 maj 2024

Optimera din webbsidas prestanda

Lär dig tekniker för att göra din webbsida snabbare och mer effektiv för en bättre användarupplevelse.

Webprestanda

Varför är webprestanda viktig?

Webprestanda har direkt påverkan på användarupplevelsen, sökmotoroptimering och slutligen din webbsidas framgång. Forskning visar att:

  • 53% av användarna överger en webbsida om den tar mer än 3 sekunder att ladda
  • En sekunds fördröjning kan minska konverteringen med 7%
  • Google använder laddningstid som en rankingfaktor
  • Snabba webbsidor förbättrar SEO och användarengagemang

Mäta prestanda

Innan du kan optimera måste du mäta din webbsidas nuvarande prestanda:

Verktyg för prestandamätning

  • Google PageSpeed Insights: Analyserar prestanda och ger förbättringsförslag
  • GTmetrix: Detaljerad prestandaanalys
  • WebPageTest: Omfattande testning från olika platser
  • Lighthouse: Inbyggt i Chrome DevTools
  • Pingdom: Verktyg för hastighetstestning

Viktiga prestandamätvärden

  • First Contentful Paint (FCP): När första innehållet visas
  • Largest Contentful Paint (LCP): När huvudinnehållet laddar
  • First Input Delay (FID): Svarstid för första interaktion
  • Cumulative Layout Shift (CLS): Visuell stabilitet
  • Time to Interactive (TTI): När sidan blir fullt interaktiv

Bildoptimering

Bilder står ofta för 60-70% av en webbsidas storlek. Optimering av bilder är därför avgörande:

Välj rätt bildformat

/* Moderna bildformat */
<picture>
    <source srcset="bild.webp" type="image/webp">
    <source srcset="bild.avif" type="image/avif">
    <img src="bild.jpg" alt="Fallback för äldre webbläsare">
</picture>

/* Responsiva bilder */
<img srcset="small.jpg 480w, 
             medium.jpg 768w, 
             large.jpg 1200w"
     sizes="(max-width: 768px) 100vw, 
            (max-width: 1200px) 50vw, 
            33vw"
     src="medium.jpg" 
     alt="Responsiv bild">

Lazy loading

Ladda bilder endast när de behövs:

/* Inbyggd lazy loading */
<img src="bild.jpg" alt="Beskrivning" loading="lazy">

/* JavaScript-baserad lazy loading */
<img data-src="bild.jpg" alt="Beskrivning" class="lazy">

<script>
const lazyImages = document.querySelectorAll('.lazy');
const imageObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.remove('lazy');
            imageObserver.unobserve(img);
        }
    });
});

lazyImages.forEach(img => imageObserver.observe(img));
</script>

Bildkomprimering

Verktyg för bildkomprimering:

  • ImageOptim: Mac-verktyg för bildkomprimering
  • TinyPNG: Online PNG och JPEG-komprimering
  • Squoosh: Googles webb-baserade bildkomprimering
  • ImageMagick: Kommandoradsverktyg för bildbehandling

CSS-optimering

Minifiering och komprimering

/* Före minifiering */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Efter minifiering */
body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#fff}.container{max-width:1200px;margin:0 auto;padding:0 20px}

Critical CSS

Ladda endast kritisk CSS inline och skjut upp resten:

<!-- Kritisk CSS inline -->
<style>
/* Endast CSS för above-the-fold innehåll */
body { font-family: Arial, sans-serif; margin: 0; }
.header { background: #fff; padding: 1rem; }
.hero { background: #f8f9fa; padding: 2rem; }
</style>

<!-- Icke-kritisk CSS laddas asynkront -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

CSS-prestanda tips

  • Använd effektiva CSS-selektorer (undvik komplexa nästlade selektorer)
  • Minimera användning av !important
  • Använd CSS-transform istället för att ändra position
  • Undvik CSS-expressions och advanced filters

JavaScript-optimering

Async och defer

Ladda JavaScript utan att blockera HTML-parsning:

<!-- Async: Ladda och kör så snart som möjligt -->
<script src="analytics.js" async></script>

<!-- Defer: Ladda men vänta med att köra till HTML är färdigt -->
<script src="main.js" defer></script>

<!-- Vanlig blockande laddning (undvik) -->
<script src="script.js"></script>

Code splitting

Dela upp JavaScript i mindre delar:

// Dynamisk import för code splitting
const loadFeature = async () => {
    const module = await import('./feature.js');
    module.initializeFeature();
};

// Ladda bara när användaren interagerar
button.addEventListener('click', loadFeature);

// Intersection Observer för lazy loading av funktioner
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadFeature();
            observer.unobserve(entry.target);
        }
    });
});

observer.observe(document.querySelector('.feature-section'));

Minimera DOM-manipulation

// Ineffektivt - många DOM-operationer
for (let i = 0; i < 1000; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`;
    container.appendChild(div);
}

// Effektivt - en DOM-operation
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`;
    fragment.appendChild(div);
}
container.appendChild(fragment);

Nätverksoptimering

HTTP/2 och HTTP/3

Moderna HTTP-protokoll förbättrar prestanda:

  • HTTP/2: Multiplexing, server push, header compression
  • HTTP/3: QUIC-protokoll, snabbare handskakningar
  • Aktivera genom din webbserver (Apache, Nginx)

Komprimering

Konfigurera Gzip/Brotli-komprimering:

# Apache .htaccess
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

# Nginx
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;

Caching-strategier

# Browser caching med .htaccess
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType text/html "access plus 600 seconds"
</IfModule>

# Cache-Control headers
<IfModule mod_headers.c>
    <FilesMatch "\.(css|js|png|jpg|jpeg|gif|ico|svg)$">
        Header set Cache-Control "max-age=31536000, public"
    </FilesMatch>
</IfModule>

Resource Hints

Optimera resursladdning med resource hints:

Preload, Prefetch och DNS-prefetch

<!-- Preload kritiska resurser -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/js/main.js" as="script">

<!-- DNS-prefetch för externa domäner -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdn.example.com">

<!-- Prefetch för sannolika nästa sidor -->
<link rel="prefetch" href="/about.html">
<link rel="prefetch" href="/contact.html">

<!-- Preconnect för viktiga externa resurser -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>

Web Workers

Använd Web Workers för tunga beräkningar:

// main.js
const worker = new Worker('worker.js');

worker.postMessage({
    task: 'heavyCalculation',
    data: largeDataSet
});

worker.onmessage = function(e) {
    const result = e.data;
    updateUI(result);
};

// worker.js
self.onmessage = function(e) {
    const { task, data } = e.data;
    
    if (task === 'heavyCalculation') {
        const result = performHeavyCalculation(data);
        self.postMessage(result);
    }
};

function performHeavyCalculation(data) {
    // Tung beräkning som inte blockerar main thread
    return processedData;
}

Service Workers för caching

Implementera avancerad caching med Service Workers:

// sw.js
const CACHE_NAME = 'site-cache-v1';
const urlsToCache = [
    '/',
    '/css/styles.css',
    '/js/main.js',
    '/images/logo.png'
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(urlsToCache))
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if (response) {
                    return response;
                }
                return fetch(event.request);
            })
    );
});

// Registrera Service Worker
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js');
}

Database och server-optimering

Database-optimering

  • Använd index för ofta sökt data
  • Optimera SQL-queries
  • Implementera database connection pooling
  • Använd caching för database-queries

Server-optimering

  • Använd CDN (Content Delivery Network)
  • Implementera server-side caching
  • Optimera server-konfiguration
  • Använd load balancing för hög trafik

Prestanda-budget

Sätt upp prestanda-budget för ditt team:

// Exempel på prestanda-budget
const performanceBudget = {
    totalPageSize: '1.5MB',
    totalRequests: 50,
    firstContentfulPaint: '1.5s',
    largestContentfulPaint: '2.5s',
    cumulativeLayoutShift: 0.1,
    firstInputDelay: '100ms',
    timeToInteractive: '3.5s'
};

// Automatisk testning med Lighthouse CI
module.exports = {
    ci: {
        collect: {
            numberOfRuns: 3,
            url: ['http://localhost:3000/']
        },
        assert: {
            assertions: {
                'categories:performance': ['warn', { minScore: 0.9 }],
                'categories:accessibility': ['error', { minScore: 0.9 }]
            }
        }
    }
};

Monitoring och kontinuerlig optimering

Real User Monitoring (RUM)

// Mät verklig prestanda
const observer = new PerformanceObserver((list) => {
    const entries = list.getEntries();
    entries.forEach(entry => {
        if (entry.entryType === 'paint') {
            console.log(`${entry.name}: ${entry.startTime}ms`);
        }
        if (entry.entryType === 'largest-contentful-paint') {
            console.log(`LCP: ${entry.startTime}ms`);
        }
    });
});

observer.observe({ entryTypes: ['paint', 'largest-contentful-paint'] });

// Skicka data till analytics
function sendToAnalytics(metric, value) {
    fetch('/analytics', {
        method: 'POST',
        body: JSON.stringify({ metric, value })
    });
}

Kontinuerlig optimering

  • Sätt upp automatisk prestandatestning i CI/CD
  • Övervaka Core Web Vitals regelbundet
  • Analysera prestanda efter varje release
  • Använd A/B-tester för optimeringar

Verktyg och automation

Build-verktyg

  • Webpack: Bundling och optimering
  • Vite: Snabb utveckling och optimering
  • Rollup: Effektiv bundling
  • Parcel: Zero-config bundler

Automatisering

// Automatisk bildoptimering med Webpack
const ImageminPlugin = require('imagemin-webpack-plugin').default;

module.exports = {
    plugins: [
        new ImageminPlugin({
            test: /\.(jpe?g|png|gif|svg)$/i,
            pngquant: {
                quality: '65-90'
            },
            mozjpeg: {
                progressive: true,
                quality: 85
            }
        })
    ]
};

Mobil-prestanda

Speciella överväganden för mobila enheter:

  • Optimera för 3G-anslutningar
  • Minimera JavaScript-exekvering
  • Använd adaptive loading baserat på nätverk
  • Implementera Progressive Web App-funktioner

Adaptive loading

// Anpassa innehåll baserat på nätverk
if ('connection' in navigator) {
    const connection = navigator.connection;
    
    if (connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g') {
        // Ladda minimal version
        loadMinimalVersion();
    } else if (connection.effectiveType === '3g') {
        // Ladda standard version
        loadStandardVersion();
    } else {
        // Ladda full version
        loadFullVersion();
    }
}

Vanliga prestanda-misstag

  • Blockande JavaScript: Ladda script utan async/defer
  • Stora, ooptimerade bilder: Använd aldrig råa bilder
  • För många HTTP-requests: Minimera antalet requests
  • Ingen caching: Implementera alltid caching
  • Ignorera mobil-prestanda: Testa på riktiga mobila enheter
  • Ingen prestandabudget: Sätt upp mål och övervaka

Slutsats

Webprestanda är avgörande för användarupplevelse, SEO och konvertering. Genom att implementera dessa tekniker systematiskt kan du skapa snabba, effektiva webbsidor som användarna älskar.

Kom ihåg att prestandaoptimering är en kontinuerlig process. Mät regelbundet, sätt upp budgetar och optimera baserat på verklig användardata.

Börja med de förändringar som ger störst effekt: bildoptimering, minifiering och caching. Bygg sedan vidare med mer avancerade tekniker som lazy loading och Service Workers.

Vill du lära dig mer om webprestanda och optimering? Våra kurser täcker både grundläggande och avancerade prestanda-tekniker.

Dela artikel

Tillbaka till blogg Kontakta oss