Nuxt 3 Portföyümde Performansı İyileştirme Süreci

Portföy sitem aleynaertin.com’u ilk geliştirdiğimde daha çok tasarıma ve içeriklere odaklanmıştım. Ancak siteyi kullanırken bazı sayfaların beklediğimden yavaş açıldığını fark ettim. Bunun üzerine yükleme sürecini inceleyerek gecikmenin hangi aşamalarda oluştuğunu anlamaya çalıştım.

Nuxt 3, Strapi ve Vercel kullandığım bu yapıda; sunucu yanıt süresi, içeriklerin alınması ve görsellerin yüklenmesi üzerinde durdum. Bu yazıda performansı iyileştirirken ele aldığım noktaları paylaşacağım.

Sunucu konumunu değerlendirmek

İlk incelediğim konulardan biri, uygulamanın çalıştığı sunucunun konumuydu. Türkiye’den yapılan ziyaretlerde, sunucuda işlenen isteklerin uzak bir bölgeye gitmesi yanıt süresini etkileyebiliyordu.

Bu nedenle Vercel’de uygulamanın sunucu tarafında çalıştığı bölgeyi Frankfurt olarak ayarladım. Buradaki amacım, ziyaretçilerim ile uygulamanın istekleri işlediği sunucu arasındaki mesafeyi azaltmaktı.

Bu değişikliği değerlendirirken özellikle TTFB’ye, yani tarayıcının ilk yanıt baytını alana kadar geçen süreye odaklandım.

Her istekte yeniden oluşturulmayan sayfalar

Bir diğer konu, Strapi’den alınan içeriklerin sayfa yüklenmesine etkisiydi. Sık değişmeyen içerikler için her istekte yeniden veri almak ve sayfayı sunucuda oluşturmak yerine, önbellekten sunulabilecek bir yapı üzerinde çalıştım.

Nuxt’un route rules özelliğiyle ana sayfa, proje ve blog sayfaları için farklı yenileme kuralları tanımladım. ISR kullanarak oluşturulan sayfaların belirli sürelerle yeniden üretilmesini hedefledim.

Böylece içeriklerin güncellenme sıklığına göre karar verebildim. Blog yazıları gibi daha seyrek değişen sayfalar ile daha sık güncellenebilecek alanların aynı kurala bağlı olması gerekmiyordu.

Görsellerin yüklenmesini düzenlemek

Görseller, özellikle ilk ekranda büyük yer kaplayan hero görseli, performans çalışmasının önemli bir parçasıydı.

NuxtImg ve Cloudinary ile görsellerin boyutlarını ve sunulma biçimini düzenledim. İlk ekranda görünen görselin erken yüklenmesine öncelik verirken, sayfanın aşağısındaki görseller için lazy loading kullandım.

Burada dikkat ettiğim noktalar şunlardı:

• Görseli, görüntüleneceği alana uygun boyutta sunmak.

• Desteklenen modern görsel formatlarından yararlanmak.

• Ana görselin yüklenmesini gereksiz yere geciktirmemek.

• Genişlik ve yükseklik bilgilerini belirterek sayfa düzeninin yükleme sırasında kaymasını azaltmak.

Bu adımlar, sayfanın en büyük görünür öğesinin yüklenme süresini ifade eden LCP’yi iyileştirmek için önemliydi.

Strapi tarafındaki bekleme süresi

Frontend tarafındaki değişikliklerin yanında, içeriklerin geldiği Strapi uygulamasını da değerlendirdim.

Render’ın ücretsiz planında uygulamanın bir süre kullanılmadığında uykuya geçmesi, sonraki istekte yeniden başlamasını beklememe neden oluyordu. Bu gecikme, içeriklerin alınmasını ve dolayısıyla sayfanın açılmasını etkileyebiliyordu.

Bu durumu ele almak için düzenli erişim kontrollerini, uygulamanın sürekli çalışacağı bir planı ve önbellekleme seçeneklerini değerlendirdim. Burada önemli olan, gecikmenin hangi katmanda oluştuğunu ayırabilmekti. Frontend’de yapılan bir iyileştirme, içerik servisinin geç yanıt vermesini tek başına çözmeyebilirdi.

Sonuçları ölçmek

Değişikliklerin etkisini anlamak için Lighthouse sonuçlarını ve yükleme sürelerini karşılaştırdım. Yalnızca toplam performans puanına bakmak yerine, hangi metriğin nasıl değiştiğini değerlendirmeye çalıştım.

Karşılaştırdığım ölçümlerde sonuçlar şöyleydi:

Bu değerler karşılaştırılan testlere ait sonuçlardı. Cihaz, bağlantı ve önbellek durumu değiştiğinde farklı sonuçlar görülebileceği için bunları her ziyaretçi için sabit bir yükleme süresi olarak değerlendirmedim.

Bu süreçte öğrendiklerim

Performans sorunlarını incelerken tek bir değişikliğin bütün gecikmeleri çözmesini beklememek gerektiğini gördüm. Sunucu konumu, sayfaların oluşturulma biçimi, görseller ve içerik servisinin yanıt süresi birlikte değerlendirilmesi gereken konulardı.

Benim için en faydalı yaklaşım, önce gecikmenin kaynağını anlamak, ardından yaptığım değişikliklerin etkisini ölçmek oldu. Böylece yalnızca daha yüksek bir performans puanı elde etmeye değil, sitenin yükleme sürecini daha iyi anlamaya da odaklandım.