3 Saniyelik Tuzağı: HTML’den Laravel Blade’e Dönüşümlerin Neden Bu Kadar Yavaş Yükleniyor

Yeni bir admin paneli üzerinde çalışıyorsunuz. İnternette harika, çok hızlı bir statik HTML şablonu buldunuz. Bunun bir kopyasını indirip, index.html dosyasını tarayıcınızda açtığınızda, anında yüklendi. Mükemmel.

Bu HTML’yi Laravel projenize kopyalayıp, yeni bir Blade görünümüne yapıştırıp, yerel sunucunuzu başlatıyorsunuz ve yenileme tuşuna basıyorsunuz.

…Bir saniye.
…İki saniye.
…Üç saniye.

Birdenbire, düzen yerli yerine oturuyor ve simgeler nihayet ekranda belirmeye başlıyor.

Ne oldu? Nasıl olup da yakıcı bir hızda olan bir HTML dosyası, Laravel ile temas ettikten sonra yavaş bir hale döndü?

Eğer bu can sıkıcı gecikmeyi debug etmek için saatler harcadıysanız, yalnız değilsiniz. Yıllardır Laravel uygulamaları inşa eden bir yazılım mimarı olarak, pek çok geliştiricinin bu hataya düştüğüne tanık oldum. Bugün, bu “gecikme sorununu” neden yaşadığımızı ve tam olarak nasıl düzeltebileceğimizi inceleyeceğiz.

Temel Sebep: Varlık Bağlama Tuzakları

Statik bir HTML şablonunu Laravel Blade dosyasına dönüştürürken yapılan en yaygın hata, Blade dosyasını sıradan bir HTML dosyası gibi ele almaktır.

Blade, standart HTML sözdizimini tam olarak desteklediği için, CSS, JS ve resim klasörlerinizi projenize sürükleyip bırakmak ve ve etiketlerini olduğu gibi bırakmak oldukça cazip gelir. Genellikle şöyle görünür:

 rel="stylesheet" href="css/style.css">
 rel="stylesheet" href="vendors/fontawesome/all.min.css">
"js/main.js">

Standart bir HTML ortamında, tarayıcı bu dosyaları, HTML dosyasının bulunduğu klasör yapısına göre arar. Ancak Laravel’de, uygulamanız public dizini üzerinden yönlendirilir ve URL’ler dinamik olur.

Gecikme Sorununun Açıklaması

Blade dosyanızda bu göreceli bağlantıları bıraktığınızda, tarayıcı karışıklık yaşar. CSS veya simgeleriniz için web fontlarını asenkron olarak yüklemeye çalışır. Ancak dosya yolu Laravel’in yönlendirme yapısıyla uyumlu olmadığında, sunucu ilişkili varlıkları kolayca bulamaz.

Arka planda, tarayıcı asılı kalır. Özellikle simge web fontları ve ana stil dosyaları için ön koşul dosyalarını umutsuzca arar. Bu, büyük bir darboğaza neden olur. Tarayıcı, eksik veya uyumsuz varlıklarla ne yapılacağına karar vermeye çalışırken, görsel çizim işlemini 2 ila 3 saniye duraklatır. Nihayetinde pes eder veya geri döner ve sayfanız aniden görünmeye başlar.

Kodunuza bakıp, “CSS orada, neden yavaş?” diye düşünebilirsiniz. Gerçek şu ki, CSS’iniz yüklenmeye çalışıyor olabilir, ancak bozuk varlık bağlantıları sayfanın geri kalanını esir alıyor.

Çözüm: Laravel Yolu

Bunu çözmek için, genel HTML göreceli yollarına güvenmeyi bırakmalıyız ve Laravel’in yerleşik yardımcı işlevlerini, özellikle asset() fonksiyonunu kullanmalıyız.

asset() fonksiyonu, mevcut istek şartınıza (HTTP veya HTTPS) göre uygulamanız için tam, mutlak bir URL oluşturur. Bu, tarayıcıya tam olarak public dizininde nerede bakması gerektiğini belirtir, tamamen belirsizlikleri ve yükleme gecikmelerini ortadan kaldırır.

1. Varlıklarınızı Taşıyın
Öncelikle, şablonunuzun css, js, resimler ve fontlar klasörlerinin hepsinin doğrudan Laravel projenizin public dizinine yerleştirildiğinden emin olun.

2. Bağlantılarınızı Sarmalayın
Sonra, Blade dosyanızda her bir statik varlık bağlantısını {{ asset() }} sözdizimiyle güncelleyin.

 rel="stylesheet" href="{{ asset('css/style.css') }}">
 rel="stylesheet" href="{{ asset('vendors/fontawesome/all.min.css') }}">

3. Script ve resimlerinizi unutmayın!
Bu kural her şeye uygulanır. Eğer bir statik dosya ise, asset() yardımcı fonksiyonunu kullanmalısınız.

"{{ asset('js/main.js') }}">

 src="{{ asset('images/logo.png') }}" alt="Dashboard Logo">

Gerçek Hayatta Oyun Değiştirici

Birkaç yıl önce mentorluk yaptığım bir junior geliştiricinin tamamen takılıp kaldığını hatırlıyorum. Devasa bir admin portalı inşa ediyordu ve tüm bir öğleden sonrayı veritabanı sorgularını profil çıkarmakla geçirmişti, çünkü arka uç kodunun sayfayı yavaşlattığını düşünüyordu.

Onların app.blade.php düzen dosyasına bakınca onlarca sabit etiketi gördüm. Beş dakikada bunları asset() yardımcı fonksiyonu ile sarmaladık. Yenilediğimizde, o acı veren 3 saniyelik gecikme tamamen ortadan kalktı. Simgeler anında yüklendi ve sayfa yine akıcı hissettirdi.

Bu, onlar için tam anlamıyla bir oyun değiştirici oldu.