Tarayıcının kaynakları yüklemeye hazırlanmasına nasıl yardımcı olabiliriz?

Ön yükleme yönergelerini kullanın: preconnect, dns-prefetch, preload, prefetch, prerender.

Yönerge	Açıklama	Örnek
preconnect	Başka bir veri kaynağıyla önceden bağlantı kurar (DNS sorgusu, TCP el sıkışması, TLS müzakeresi).	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Alan adını önceden çözümleme yapar.	<link rel="dns-prefetch" href="//api.example.com">
preload	Kaynakları (JS, CSS, fontlar) yüksek öncelikle önceden talep eder, render'ı engellemez.	<link rel="preload" href="/styles.css" as="style">
prefetch	Muhtemelen gelecekte ihtiyaç duyulacak kaynakları talep eder (örneğin, bir sonraki sayfa).	<link rel="prefetch" href="/next_page.html">
prerender	Bir sonraki sayfayı gizli sekmede önceden render eder.	<link rel="prerender" href="/upcoming_page.html">

<script> etiketi için async veya defer özniteliğini kullanarak, betikleri asenkron yükleyip çalıştırabilir, HTML ayrıştırmasını engellemez:

<script src="script.js" async></script>
<script src="another-script.js" defer></script>

Görüntüler ve <iframe> için loading="lazy" özniteliğini kullanarak, bunların görünüm alanına girdiklerinde gecikmeli yüklenmesini sağlayın:

<img src="image.jpg" loading="lazy" alt="Lazy yüklenen görüntü">

Görüntüleri (sıkıştırma, modern formatlar kullanma gibi), fontları (alt kümeler, WOFF/WOFF2 formatları) ve diğer kaynakları optimize edin.

CSS, JavaScript ve HTML'yi minify ve sıkıştırın.

Service Worker kullanarak kaynakları önbelleğe alın ve çevrimdışı erişimi sağlayın.

Büyük JavaScript kodunu daha küçük parçalara bölün (code splitting) ve ihtiyaç duyulduğunda yükleyin.

HTTP/2 ve HTTP/3 kullanarak daha verimli çoklama ve başlık sıkıştırması sağlayın.

Sunucuda uygun önbellekleme başlıkları (Cache-Control, Expires) ayarlayın.

<link rel="modulepreload"> kullanarak ES modüller JavaScript ön yüklemesi yapın.

<link rel="modulepreload" href="/dist/module.js">