Portfolyo Web Sitemi Nasıl Optimize Ettim
Portfolyonuz ilk izleniminizdir. Eğer yavaş yükleniyorsa veya Google'da görünmüyorsa, fırsatları kaçırırsınız. Sitemi hız, SEO ve bakım kolaylığı için optimize ettim.
İşte yaklaşımım.
Hız ve Performans
Hafif bir teknoloji yığını (stack) seçin. Astro veya Next.js gibi statik site oluşturucuları kullanın. Bunlar, ağır framework'lere kıyasla daha az JavaScript ile çalışır.
Ağır UI kütüphanelerinden kaçının. Kilobaytlar kazanmak için basit bileşenleri kendiniz oluşturun.
Yazı tiplerinizi kendi sunucunuzda barındırın (self-host). DNS sorgularını azaltmak için üçüncü taraf CDN'lerden kaçının. Düzen kaymalarını (layout shifts) önlemek için font-display: swap kullanın.
Her görseli optimize edin.
- Görselleri WebP veya AVIF formatına dönüştürün.
- Görselleri yüklemeden önce boyutlandırın.
- Ekranın altında kalan (below the fold) görseller için
loading="lazy"kullanın. - Düzen kaymalarını önlemek için genişlik (width) ve yükseklik (height) öznitelikleri ekleyin.
JavaScript'inizi yönetin.
- Rotalarınızı kod parçalarına ayırın (code-split).
- Analiz araçları gibi kritik olmayan scriptleri erteleyin (defer).
- Paket (bundle) boyutunuzu düzenli olarak denetleyin.
SEO ve Yapı
Her sayfa için benzersiz başlıklar ve meta açıklamaları kullanın.
Semantik HTML kullanın. Sayfa başına bir adet H1 kullanın ve nav, main ve footer gibi uygun etiketleri tercih edin.
Open Graph ve Twitter Card etiketlerini ekleyin. Bu, bağlantılarınızı paylaştığınızda güzel görünmesini sağlar.
Bir sitemap.xml ve robots.txt dosyası ekleyin. Bu, arama motorlarının sizi bulmasına yardımcı olur.
JSON-LD yapılandırılmış verilerini kullanın. Bu, arama motorlarına tam olarak kim olduğunuzu söyler.
Erişilebilirlik ve SEO için görsellere her zaman alt metin (alt text) ekleyin.
Bakım ve İş Akışı
İçeriği Markdown veya basit bir JSON dosyasında yazın. Bu, koda dokunmadan projeler eklemenize olanak tanır.
Tek komutla dağıtım (deployment) kurun. Bir git push işleminin sitenizi anında güncellemesi için Vercel veya Netlify kullanın.
Bağımlılıkları (dependencies) düşük tutun. Bu, ileride oluşabilecek kurulum sorunlarını önler.
Sitenizi test edin. Sorunları bulup düzeltmek için Google PageSpeed Insights veya Lighthouse kullanın.
Sitemi Next.js ve Vercel ile kurdum. WebP görseller, benzersiz meta veriler ve otomatik dağıtım kullanıyor. Artık yeni bir proje eklemek sadece otuz saniye sürüyor.
Temellere odaklanın. Teknoloji yığınınızı, görsellerinizi ve işaretlemenizi (markup) bir kez doğru yapın. Siteniz hızlı ve yönetimi kolay kalacaktır.
Portfolyo optimizasyonunuzda en büyük farkı ne yarattı? Yorumlarda bana bildirin.