
Web sitesi hızı bir lüks değil, kritik bir iş ölçüsüdür. Veriler ilgi çekici:
Web sitesi hızı bir lüks değil, kritik bir iş ölçüsüdür. Veriler ilgi çekici:
Her milisaniye önemlidir. Bu makale, web sitelerinizi çok hızlı hale getirecek kapsamlı stratejileri kapsamaktadır.
HTML, CSS ve JavaScript'teki boşlukları, yorumları ve gereksiz karakterleri kaldırın. Modern yapı araçları bunu otomatik olarak gerçekleştirir:
# Using Terser for JavaScript
npx terser input.js -o output.min.js --compress --mangle
# Using cssnano via PostCSS
npx postcss input.css -o output.min.css --use cssnano
# Using html-minifier
npx html-minifier input.html -o output.min.html --collapse-whitespace
Etki — Küçültme genellikle dosya boyutlarını %30-60 oranında azaltır.
Görseller çoğu web sitesinde sayfa ağırlığının %50'sinden fazlasını oluşturur.
Modern formatlar:
Duyarlı görseller:
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Description"
loading="lazy"
/>
Aletler:
Etki — Uygun görsel optimizasyonu sayfa ağırlığını %60-80 oranında azaltabilir.
Kod bölme, JavaScript'inizi isteğe bağlı olarak yüklenen parçalara ayırır:
// React lazy loading
const Dashboard = React.lazy(() => import('./Dashboard'));
// Webpack dynamic import
import(/* webpackChunkName: "chart" */ './Chart').then(module => {
module.renderChart();
});
Ağaç sallama ölü kodu ortadan kaldırır. Webpack, Rollup ve esbuild, paketleme sırasında kullanılmayan dışa aktarmaları kaldırır. Ağaç sallamanın etkili bir şekilde çalışması için ES modüllerini ("içe aktarma"/"dışa aktarma") kullandığınızdan emin olun.
Önbelleğe alma, daha önce yerel depolama alanından getirilen kaynakları sunarak ağ isteklerini tamamen ortadan kaldırır.
# Apache .htaccess
<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|js|css|svg|woff2)$">
Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>
# Nginx
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
HTML dosyaları için daha kısa önbellek süreleri (max-age=0, must-revalidate) veya tazelik doğrulaması için ETag'ler kullanın.
Hizmet çalışanları tarayıcıda programlanabilir bir ağ proxy'si görevi görür:
// service-worker.js
const CACHE_NAME = 'v1';
const urlsToCache = ['/', '/styles.css', '/app.js'];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
// Cache-first strategy for static assets
return response || fetch(event.request);
})
);
});
Hizmet çalışanı önbelleğe alma stratejileri:
| Strateji | Kullanım Örneği |
|---|---|
| Önce Önbellek | Statik varlıklar (resimler, CSS, JS) |
| Önce Ağ | API çağrıları, dinamik içerik |
| Yeniden Doğrulama Sırasında Eski | Haber akışları, blog gönderileri |
| Yalnızca Ağ | Formlar, ödeme API'leri |
Bir CDN (İçerik Dağıtım Ağı), içeriği coğrafi olarak dağıtılmış uç sunucularda önbelleğe alır. Popüler sağlayıcılar:
Etki — CDN önbelleğe alma, sunucu yükünü %80+ oranında azaltır ve global kullanıcılar için gecikmeyi %50-80 oranında azaltır.
Tarayıcı "" veya "" etiketleriyle karşılaştığında HTML ayrıştırma duraklatılır. Bu, oluşturmayı engeller.
<!-- Async: download in parallel, execute as soon as downloaded -->
<script async src="analytics.js"></script>
<!-- Defer: download in parallel, execute in order after HTML parsing -->
<script defer src="app.js"></script>
Temel kural:
Ekranın üst kısmındaki içerik için gereken CSS'yi çıkarın ve satır içi yapın:
<head>
<style>
/* Inlined critical CSS */
header { background: #333; color: white; }
.hero { min-height: 80vh; display: flex; align-items: center; }
/* ... only what's visible on initial load */
</style>
<!-- Deferred non-critical CSS -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>
Araçlar: Kritik (Node.js), Penthouse ve webpack-kritik, satır içi CSS'yi otomatik olarak oluşturur.
<!-- Preload critical resources early -->
<link rel="preload" href="hero-image.webp" as="image">
<!-- Preconnect to third-party origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://api.example.com">
<!-- Prefetch resources needed on the next page -->
<link rel="prefetch" href="next-page.html">
Kritik oluşturma yolu, tarayıcının bir sayfayı oluşturmak için attığı adımların sırasıdır. Bunu optimize etmek etkileşim süresini azaltır.
| Protokol | Temel Özellikler |
|---|---|
| HTTP/1.1 | Bağlantı başına bir istek (sınırlı) |
| HTTP/2 | Çoğullama, sunucu itme, başlık sıkıştırma, ikili protokol |
| HTTP/3 | QUIC tabanlı, sıfır RTT bağlantısı, paket kaybını daha iyi yönetir |
HTTP/2, paketlemeyi daha az kritik hale getirir; HTTP/1.1'in bağlantı ek yükü olmadan birçok küçük dosyayı sunabilirsiniz.
# Enable Brotli (preferred, ~20% better than Gzip)
brotli on;
brotli_types text/plain text/css application/json application/javascript;
# Fallback Gzip
gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_min_length 1000;
gzip_vary on;
Google'ın Önemli Web Verileri, kullanıcı deneyimini en çok etkileyen üç ölçümdür:
Yükleme performansını ölçer. Görünür en büyük öğenin (kahraman resim, başlık) hızlı bir şekilde oluşturulması gerekir.
Optimizasyon:
fetchpriority="high" kullanmayı düşünün:
<img src="hero.webp" fetchpriority="high" alt="Hero">
Etkileşimi ölçer. 2024'te INP (Sonraki Boyayla Etkileşim) ile değiştirildi.
Optimizasyon:
Görsel stabiliteyi ölçer. Öğeler beklenmedik şekilde değişmemelidir.
Optimizasyon:
img, video {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
/* Reserve space for dynamic content */
.ad-container {
min-height: 250px;
}
Yerel tembel yükleme tüm modern tarayıcılarda desteklenir:
<img src="photo.webp" loading="lazy" alt="Lazy loaded image">
<iframe src="map.html" loading="lazy"></iframe>
Daha eski tarayıcılar için kesişim gözlemcisini geri dönüş olarak kullanın:
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
<!-- DNS prefetch resolves domain names early -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<!-- Preconnect establishes full connection (DNS + TCP + TLS) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
/* Font-display controls how fonts render while loading */
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2');
font-display: swap; /* Show fallback text immediately */
}
/* Subset fonts to include only needed characters */
/* Use variable fonts for multiple weights in one file */
| Alet | Tip | En İyisi |
|---|---|---|
| Deniz feneri | Laboratuvar | Denetim ve öneriler |
| Sayfa Hızı Analizleri | Laboratuvar + Saha | Google'a özel metrikler |
| Web Sayfası Testi | Laboratuvar | Detaylı şelale analizi |
| Chrome Geliştirme Araçları | Laboratuvar | Ağ, performans, kapsama alanı |
| Sentry Performansı | ROM | Gerçek kullanıcı izleme |
| Datadog RUM | ROM | Uçtan uca performans takibi |
| Kalibre | Sürekli | Performans bütçeleri ve CI |
| Deniz Feneri CI | CI | Gerilemelerin önlenmesi |
Gerilemeleri önlemek için bir performans bütçesi belirleyin:
{
"budgets": [
{
"resourceType": "total",
"budget": 500000
},
{
"resourceType": "script",
"budget": 150000
},
{
"resourceType": "image",
"budget": 200000
},
{
"timing": {
"metric": "interactive"
},
"budget": 5000
}
]
}
Web performansı sürekli bir disiplindir. En yüksek etkiye sahip öğelerle başlayın:
Performans optimizasyonu hiçbir zaman "tamamlanmaz"; sürekli dikkat gerektirir, ancak kullanıcı memnuniyeti, dönüşümler ve SEO'ya yapılan yatırımın geri dönüşü önemlidir.
Henüz onaylı yorum yok. Yeni yanıtlar moderasyon bekleyebilir.