Core Web Vitals: Laravel Geliştiricileri için Google Sıralamalarında Başarılı Olmanın Pratik Rehberi

Güzel bir şekilde hazırlanmış Laravel uygulamanızı başlattıysanız ancak arama sıralamalarında zorlandığını gördüyseniz, Core Web Vitals sorunları bunun nedenlerinden biri olabilir. Google, bu metrikleri onaylı bir sıralama faktörü haline getirdiğinden, hızlı bir site ile yavaş bir site arasındaki fark bir ölçülebilir iş sorunu haline gelmiştir. Bu kılavuz, Laravel geliştiricilerinin Core Web Vitals sorunlarını denetleme, tanıma ve düzeltme yollarına odaklanmaktadır. Belirsiz tavsiyeler yerine, gerçekten uygulanabilir teknikler ve gerçek kodlar sunulmaktadır.

Üç Temel Web Vitals’ı Anlamak

Optimize etmeden önce, ölçtüğünüz şeyin tam olarak ne olduğunu bilmeniz gerekir:

LCP (Largest Contentful Paint): En büyük görünür öğenin ne zaman yüklendiğini ölçer. Hedef: 2.5 saniyenin altında.
INP (Interaction to Next Paint): 2024’te FID’nin yerini aldı. Kullanıcı etkileşimlerine yanıt verme süresini ölçer. Hedef: 200ms’nin altında.
CLS (Cumulative Layout Shift): Görsel istikrarı ölçer; yükleme sırasında öğelerin ne kadar kaydığını ölçer. Hedef: 0.1’in altında.

Google’ın PageSpeed Insights ve Chrome DevTools, ilk tanı araçlarınızdır. Bir satır kod bile dokunmadan önce, Laravel uygulamanızı bu araçlarla test edin.

Laravel Uygulamalarında LCP’yi Düzeltmek

LCP genellikle bir altyapı veya varlık teslimatı sorunudur. En etkili düzeltmeler şunlardır:

1. Blade Cache ile Sunucu Tarafı Render

Ağır sayfa içeriği her istekte oluşturulmaktan kaçının. Laravel’in görünüm önbelleği ve parça önbelleğini akıllıca kullanın:

// Maliyetli Blade parçalarını önbelleğe al
@php
    $featuredPosts = Cache::remember('featured_posts', 3600, function () {
        return Post::with('author')->featured()->limit(6)->get();
    });
@endphp

Yüksek trafikli statik sayfalar için tam sayfa önbellekleme yapmak isterseniz, spatie/laravel-responsecache paketini göz önünde bulundurun:

// Kontrolcünüzde
public function home()
{
    return response()
        ->view('home', ['posts' => $this->getPosts()])
        ->withHeaders([
            'Cache-Control' => 'public, max-age=3600',
        ]);
}

2. Kritik Kaynakları Önceden Yükleyin

Laravel’in varlık işlemi (Vite), LCP görseliniz veya kritik fontlarınız için önceden yükleme ipuçlarını kolayca eklemenizi sağlar:

// Ana düzen Blade dosyanızda
link rel="preload" as="image" href="{{ asset('images/hero.webp') }}" fetchpriority="high">
link rel="preload" as="font" href="{{ asset('fonts/inter.woff2') }}" type="font/woff2" crossorigin>

LCP öğenizi tembel yüklemeyin. Eğer kahraman görseliniz en büyük öğe ise, bu öğenin kesinlikle istekli olarak yüklenmesini sağlayın:

 
  src="{{ asset('images/hero.webp') }}" 
  alt="Hero image" 
  loading="eager" 
  fetchpriority="high"
  width="1200" 
  height="600"
>

3. Veritabanı Sorgularınızı Optimize Edin

Yavaş TTFB (Time to First Byte) LCP’yi öldürür. N+1 sorgularını bulmak için Laravel Debugbar veya Telescope kullanın:

// Kötü - N+1'i tetikler
$posts = Post::all();
foreach ($posts as $post) {
    echo $post->author->name; // Her post için ayrı sorgu
}

// İyi - eager loading
$posts = Post::with(['author', 'category'])->paginate(15);

Ayrıca sık sık filtrelediğiniz veya sıraladığınız sütunlara veritabanı indeksleri eklemeyi de unutmayın:

// Migration dosyanızda
public function up()
{
    Schema::table('posts', function (Blueprint $table) {
        $table->index(['status', 'published_at']);
        $table->index('category_id');
    });
}

INP’yi Livewire ile Geliştirmek

INP, TALL yığın geliştiricilerinin dikkat etmesi gereken bir durumdur. Livewire’ın sunucu tur dönüşleri dikkatli olmazsanız yavaş hissedilebilir.

Önemsiz Livewire Güncellemelerini Erteleyin

Gerçek zamanlı senkronizasyon gerektirmeyen girdiler için wire:model.lazy veya wire:model.blur kullanın:

Anlık UI Geri Bildirimi için Alpine.js Kullanın

Sunucu verisi gerektirmeyen etkileşimler için Alpine.js sıfır gecikmeli yanıtlar sağlar:

 x-data="{ open: false }">
    
     x-show="open" x-transition>

CLS’yi Ortadan Kaldırmak

Düzeni kaydırmalar genellikle boyutları belirtilmemiş görseller, dinamik olarak eklenmiş içerikler veya geç yüklenen fontlar nedeniyle oluşur.

Görsel Boyutlarını Her Zaman Belirleyin


 src="product.jpg" alt="Ürün">


 src="product.jpg" alt="Ürün" width="400" height="300">

Font Gösterim Stratejisi

CSS veya Vite yapılandırmanızda, font yüklenirken görünmeyen metinleri önlemek için her zaman font-display: swap belirtin:

@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter.woff2') format();
    font-display: swap;
}

Dinamik İçerik için Alan Ayırın

Reklamlar, bannerlar veya dinamik içerikler yüklüyorsanız, alanlarını önceden ayırın:


 class="min-h-[200px]" wire:init="loadRecommendations">
     wire:loading class="animate-pulse bg-gray-200 h-48 rounded">
     wire:loading.remove>
        @foreach($recommendations as $item)
            
        @endforeach

İlerlemenizi Ölçmek

Bu değişiklikleri uyguladıktan sonra, yalnızca PageSpeed Insights’ı tekrar çalıştırmayın. Core Web Vitals, gerçek kullanıcılar üzerinden Chrome’un CrUX veri setinde ölçülmektedir ve güncellenmesi 28 gün sürmektedir. İlerlemeyi izlemek için bu araçları kullanın:

Google Search Console → Core Web Vitals raporu (gerçek kullanıcı verisi)
PageSpeed Insights → Hızlı geri bildirim için laboratuvar verisi
Lighthouse CI → GitHub Actions hattınıza entegre ederek dağıtım öncesi geri dönüşleri önleyin

Basit bir Lighthouse CI yapılandırması lighthouserc.js dosyanızda:

module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:8000/', 'http://localhost:8000/blog'],
      startServerCommand: 'php artisan serve',
    },
    assert: {
      preset: 'lighthouse:recommended',
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
      },
    },
  },
};

Sonuç

Laravel uygulamaları için Core Web Vitals optimizasyonu birkaç tekrarlanabilir pratikten oluşmaktadır: sunucu ve HTTP katmanında agresif önbellekleme, N+1 sorgularını ortadan kaldırma, INP’yi düşük tutmak için sadece UI etkileşimleri için Alpine.js kullanma ve her zaman medya için boyutları tanımlama. Tüm bunlar, olağanüstü araçlar gerektirmez – Laravel’in zaten erişilebilir kıldığı temellerin disiplinli bir uygulamasıdır.

Arama sıralamasında başarılı olan geliştiriciler, mutlaka farklı araçlar kullanmıyorlar. İlk taahhütlerinden itibaren performansa daha bilinçli yaklaşanlar, sonuçları kazanıyorlar.

Kaynak: Orijinal Makale

Contents