CSS Dosyalarını Preload ile Hızlandırmak: Neden ve Nasıl?
Web sitenizin açılış hızını artırmak için resimleri sıkıştırıyor, eklentileri azaltıyor olabilirsiniz. Peki, tarayıcıya stil dosyanızı (CSS) daha sayfa yüklenmeden “hazırda bekle” dediğinizde ne olur? Bugün, modern web sitelerinde kullanılan rel="preload" tekniğini ve CSS yükleme hızını nasıl ikiye katladığımızı inceleyeceğiz.
Bu yöntem aslında “Web Performance Optimization” (Web Performans Optimizasyonu) dünyasının en kritik konularından biri. Birçok kişi preload ile stylesheet arasındaki farkı ve neden ikisini bir arada kullandığımızı tam olarak anlamıyor.
Sitedeki hızı artırmak için yaptığın bu dokunuş, özellikle Google’ın Lighthouse ve Core Web Vitals (LCP – En Büyük İçerik Boyaması) skorları için hayati önem taşıyor.
Sorun: Render Blocking (İşlem Engelleyici) CSS
Normal şartlarda bir tarayıcı sitenize girdiğinde, HTML’i okurken bir CSS dosyasına rastlarsa durur. CSS dosyasını indirir, işler ve sonra sayfayı çizmeye devam eder. Bu da kullanıcının o meşhur “beyaz ekranı” daha uzun süre görmesine neden olur.
Çözüm: Preload ve Stylesheet İkilisi
Sitemizde kullandığımız şu yapı, tarayıcıya çok net bir komut verir:
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css" media="all">Nasıl Oluyor?
rel="preload": Tarayıcıya, “Bu dosya çok önemli, diğer her şeyi bırak ve bunu arka planda hemen indirmeye başla” der. Ancak bu komut, dosyayı indirir ama uygulamaz.as="style": Tarayıcıya bu dosyanın bir CSS olduğunu söyler, böylece tarayıcı doğru önceliklendirmeyi yapar.rel="stylesheet": Dosya arka planda inerken, tarayıcı bu satıra geldiğinde dosya muhtemelen çoktan inmiş olur ve hiç beklemeden tasarımı sayfaya giydirir.
Neden Bu Yöntemi Seçtik?
- LCP Skorunu İyileştirir: Sayfanın en büyük görsel ögesi stil dosyası inene kadar render edilmez. Preload ile bu süreyi kısaltıyoruz.
- FOUC Hatasını Önler: (Flash of Unstyled Content) Yani sayfanın önce CSS’siz, dağınık görünüp bir saniye sonra düzelmesi olayını minimize eder.
- Önceliklendirme: Tarayıcının kafasını karıştırmadan, stil dosyasını en yüksek önceliğe taşırız.
WordPress’te Nasıl Uygulanır?
WordPress kullanıyorsanız, functions.php üzerinden stil dosyalarınızı bu şekilde yüklemek için bir “hook” kullanabilirsiniz. Ancak manuel ekleme yapmak her zaman daha kontrollüdür.
Sonuç
Küçük bir kod satırı gibi görünse de, preload kullanımı sitenizin performans testlerinde yeşil bölgeye geçmesini sağlayan o gizli kahramandır. Sitenizi sadece görsel olarak değil, altyapı olarak da modern dünyaya hazırlayın!
Not: 2018 yılında konu ile ilgili bir yazım ( Preload ile CSS stylesheet dosyanızı optimize edin) bulunmaktadır. Ancak o zamanlar tarayıcı uyumu tam değilmiş, sanırım. Yıllar içinde vazgeçmişim. Şimdi yeniden uyguladım.