Core Web Vitals to kluczowe metryki wydajności stron internetowych, które Google uwzględnia w algorytmie rankingowym. Dlatego dla właścicieli stron WordPress optymalizacja pod kątem tych wskaźników jest niezbędna dla utrzymania dobrej pozycji w wynikach wyszukiwania i zapewnienia doskonałego doświadczenia użytkowników.

Czym są Core Web Vitals?

Core Web Vitals to trzy kluczowe wskaźniki wydajności stron internetowych wprowadzone przez Google:

Largest Contentful Paint (LCP)

LCP mierzy czas ładowania największego elementu widocznego na stronie. Idealnie powinien wynosić poniżej 2.5 sekundy.

Co wpływa na LCP:

• Przede wszystkim wielkość obrazów i multimediów
• Następnie czas odpowiedzi serwera
• Również renderowanie po stronie klienta
• Wreszcie blokowanie zasobów

First Input Delay (FID)

FID mierzy czas od pierwszej interakcji użytkownika (kliknięcie, dotknięcie) do momentu, gdy przeglądarka może na nią odpowiedzieć. Najlepiej, gdy wynosi poniżej 100 milisekund.

Co wpływa na FID:

• Po pierwsze ciężkie skrypty JavaScript
• Po drugie długie zadania wykonywane przez przeglądarkę
• Potem duże bundle’y (pakiety) JavaScript
• Łącznie z nieoptymalnym wykonywaniem kodu

Cumulative Layout Shift (CLS)

CLS mierzy stabilność wizualną strony – jak bardzo elementy „przeskakują” podczas ładowania. Właściwie wynik powinien być poniżej 0.1.

Co wpływa na CLS:

• Czyli obrazy bez określonych wymiarów powodują wydłużenie tego czasu
• Również dynamicznie ładowane treści
• Następnie nieodpowiednie fonty – czcionki internetowe
• Bez wątpienia reklamy i embedy (czy wszystkie są konieczne?)

Praktyczne metody optymalizacji

Optymalizacja LCP

1. Po pierwsze optymalizacja obrazów

html

<!-- Użyj formatów nowej generacji -->

<picture> 
        <source srcset="image.webp" type="image/webp"> 
        <source srcset="image.avif" type="image/avif"> 
        <img src="image.jpg" alt="Opis obrazu" width="800" height="600"> 
</picture>

2. Następnie implementacja lazy loading

php

// W functions.php //
function add_lazy_loading() { 
      add_filter('wp_get_attachment_image_attributes', function($attr) {
           $attr['loading'] = 'lazy'; 
           return $attr; 
      });
} 
add_action('init', 'add_lazy_loading');

3. Natomiast optymalizacja serwera to już trudniejsza sprawa

• Użyj CDN (CloudFlare, MaxCDN)
• Włącz kompresję Gzip/Brotli
• Zoptymalizuj bazę danych
• Użyj cache’owania (W3 Total Cache, WP Rocket)

Optymalizacja FID

1. Optymalizacja JavaScript

javascript

// Użyj async/defer dla skryptów
<script src="script.js" async></script>
<script src="script.js" defer></script>

// Podziel kod na mniejsze części
import('./heavy-module.js').then(module => {
    // Użyj modułu tylko gdy jest potrzebny
});

2. Redukcja niepotrzebnych pluginów

php

// Wyłącz niepotrzebne skrypty na określonych stronach
function disable_scripts_on_pages() {
    if (is_page('contact')) {
        wp_deregister_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'disable_scripts_on_pages');

Optymalizacja CLS

1. Określ wymiary obrazów

css

img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9; /* Nowa właściwość CSS */
}

2. Preload krytycznych fontów

html

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

3. Rezerwuj miejsce dla dynamicznych treści

css

.ad-container {
    min-height: 250px; /* Zarezerwuj miejsce dla reklam */
}

.loading-placeholder {
    width: 100%;
    height: 200px;
    background: #f0f0f0;
}

Narzędzia do testowania

Google PageSpeed Insights

Podstawowe narzędzie do testowania Core Web Vitals. Zapewnia szczegółowe informacje o wydajności i konkretne rekomendacje.

Chrome DevTools

Lighthouse w Chrome DevTools umożliwia lokalne testowanie wydajności i debugowanie problemów.

GTmetrix

Zaawansowane narzędzie oferujące szczegółowe analizy wydajności, monitoring i porównania historyczne.

WebPageTest

Profesjonalne narzędzie umożliwiające testowanie z różnych lokalizacji i urządzeń.

Search Console

Google Search Console pokazuje rzeczywiste dane Core Web Vitals z prawdziwego ruchu użytkowników.

Implementacja w WordPress

Niezbędne pluginy

• WP Rocket – kompleksowa optymalizacja wydajności
• Smush – kompresja obrazów
• Autoptimize – optymalizacja CSS i JavaScript
• LiteSpeed Cache – zaawansowane cache’owanie

Konfiguracja .htaccess

apache

# Kompresja Gzip
<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>

# Browser Caching
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    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"
</IfModule>

Wpływ na SEO

Ranking Factor

Core Web Vitals są oficjalnym czynnikiem rankingowym Google od 2021 roku. Strony o lepszych wskaźnikach mają przewagę w wynikach wyszukiwania.

User Experience

Lepsze Core Web Vitals oznaczają:

• Niższy bounce rate
• Wyższą konwersję
• Lepsze zaangażowanie użytkowników
• Zwiększoną satysfakcję odwiedzających

Mobile-First Indexing

Google ocenia głównie wersję mobilną strony, więc optymalizacja pod kątem urządzeń mobilnych jest kluczowa.

Monitorowanie i utrzymanie

Regularne audyty

• Sprawdzaj podstawowe wskaźniki internetowe co miesiąc
• Monitoruj wpływ zmian na wydajność
• Testuj na różnych urządzeniach i połączeniach

Automatyzacja

Skonfiguruj alerty w Google Search Console i innych narzędziach, aby być na bieżąco z wydajnością strony.

Podsumowanie

Optymalizacja Core Web Vitals to ciągły proces wymagający systematycznego podejścia. Zacznij od identyfikacji największych problemów, implementuj zmiany stopniowo i regularnie monitoruj wyniki. Pamiętaj, że dobra wydajność strony to inwestycja w sukces Twojego biznesu online.

PAMIĘTAJ!!
Wszystkie zmiany na stronie www wprowadzasz na własną odpowiedzialność. Zawsze przed wszelkimi zmianami zrób kopię zapasową strony!!
Jeśli nie czujesz się pewnie „w kodzie” zleć te czynności profesjonaliście.