Next.js'ten Kaldırılırken Blog Performansı 100'ü Geçti

0:00

/0

1×

Next.js'ten Kaldırılırken Blog Performansı 100'ü Geçti

Bir blog yapmak, sadece metin yazmak değil, aynı zamanda hız, performans ve kullanıcı deneyimiyle birlikte çalışmayı da gerektirir. Ben de bu amaçla kişisel blogumu oluştururken, bir çok farklı platformu denedim: Medium, Blogger, Ghost, WordPress, Hugo ve hatta Bear Blog gibi modern çözümleri. Ancak hepsinde ya performans sorunu, ya da sınırlı esneklik, ya da pahalıya mal olan özellikler yüzünden tatmin olamadım.

Sonunda, kendi blogumu kendi kurulumumla yapmaya karar verdim. Hedefim: hızlı, temiz, etkileşimli olmayan, erişilebilir ve ücretsiz bir blog. Ancak bu hedefe ulaşmak için bir adım daha atmak gerekti — Next.js’i tamamen bıraktım.

Bugün sana, bir Next.js kullanıcısının performans optimizasyonu sürecini, 100 puanlık bir Lighthouse performans puanına nasıl ulaştığını adım adım anlatacağım.

Neden Next.js’dan vazgeçtim?

Next.js, özellikle statik ve hizmetleriyle bilinen bir framework. ISR (Incremental Static Regeneration), otomatik image optimization, routing ve server components gibi özelliklerle oldukça çekici görünüyor. Ben de bu features sayesinde bir zamanlar Next.js ile blogumu kurmuştum.

Ama zaman geçtikçe fark ettim ki:

• İhtiyacım olan tek şey statik sayfalardı. Her sayfa önceden render edilip, herhangi bir etkileşim gerektirmiyordu.
• Next.js, bana gerekli olmayan bir runtime sağlıyordu. JavaScript paketlerinde, hatta tek sayfalar için bile, büyük miktarda "kullanılmayan" kod geliyordu.
• Bazı Next.js yapıları (örneğin next/link ve next/image) kendi içinde use client içeriyordu. Bu da tüm sayfalar için JavaScript yığınına katkıda bulunuyordu.
• Her gönderiye göre iki tane cache’i (Next.js ve CDN) geçmek zorundaydım. Bu da yönetimi karmaşıklaştırıyordu.

Dünya çapında kullanıcılar için performans sağlamak istiyorsanız, CDN’lerin gücü çok daha fazla. Ve Next.js, bu gücü sana sağlarken, aynı zamanda gerekmiyen bir yapıyı da getiriyor. Eğer sadece statik içerik veriyorsanız, Next.js’in tüm bu ekstra katmanları, sadece bir zorluk.

Lighthouse’da 100 Puan Ne Demek?

Lighthouse, web sitelerinin performansını, erişilebilirlik, SEO, güvenlik ve kullanıcı deneyimini ölçen bir araçtır. 100 puan, her kategoride mükemmel bir performans anlamına gelir.

Benim blogum, önce Next.js ile çalıştırıldığında, çok iyi bir performansa sahipti. Ama 100’ü geçmek için bazı ciddi optimizasyonlar gerekiyordu. İlk olarak, Lighthouse’ın “Kullanılmayan JavaScript” dediği alan bana çok büyük bir sorun oluşturuyordu. Bu, kendi yazdığım kod değil, Next.js’in kendi runtime’undan kaynaklanan bir hata idi.

Gerçekten Ne Oluyordu?

Next.js, her sayfada JavaScript runtime’ını yükler. Hatta sayfalarınız static olsa bile, hydration (canlandırma) süreci için gerekli olan kütüphaneler, RSC (React Server Components) payload’ı, ve router gibi yapılar her zaman yüklenir. Bu, tek sayfada bile 230.460 bayt kadar kullanılmayan JavaScript oluşturuyordu.

Daha da ilginci:
- next/link ve next/image bile use client ile tanımlanmış.
- Yani bu bileşenleri kullanır kullanmaz, client side runtime’u etkinleştiriyorduk.
- Ve bu runtime, tüm sayfa yüklemelerinde gerekli olmamasına rağmen, sayfaya ekleniyordu.

Peki, Ne Yaptım?

İlk olarak, tüm client component’leri kaldırdım. Sadece server components kullandı. Ama Lighthouse puanı değişmedi.
Daha sonra, next/link ve next/image bileşenlerini de kaldırdım. Ama yine aynı şey: yine de bir runtime vardı.

Açıkçası, bu durumda sadece hile ile bu scriptleri kaldırabilirdim — HTML’den doğrudan silerek. Ama bu, ne bir çözüm, ne de bir geliştirme stratejisiydi.

İşin en büyük derdi: “Eğer bu kadar uğraşıyorsam, neden hala Next.js kullanıyorum?”

Yeni Yol: Next.js’den Tamamen Çıkmak

Bir gün, aklıma bir düşünce geldi:

“Eğer Lighthouse 100’ü istiyorsam, Next.js’i tamamen bırakmalıyım.”

Bu karar, kulağa korkutucu gelebilir. Ama düşündükçe daha mantıklı oluyordu:

• Statik içerik için herhangi bir server-side işlevi gerekmiyordu.
• Her sayfa önceden render edilmişti.
• Image optimizasyonu için Cloudflare Image Transformations’u kullanabilirdim. (Ücretsiz planında 5.000 görüntü)
• CDN ile tüm sayfaları dünyanın her yerinden hızlıca sunabilirdim.
• Server components gibi Next.js’in avantajları, statik bir blog için gerekmiyordu.

Böylece, Next.js’i kaldırıp, tamamen statik bir yapıya geçtim.

Performans Nasıl Arttı?

Bu dönüşümde, aşağıdaki adımları uyguladım:

1. Next.js’i tamamen kaldırdım.
   Artık React bile kullanmıyordum. Sadece HTML, CSS ve JavaScript (gerekirse) ile çalışıyordum.

2. Cloudflare’ın Image Transformations’ını kullandım.
   Her resim 10MB’ı geçiyordu. Cloudflare, resimleri otomatik olarak boyutlandırıp sıkıştırıyordu. Bu sayede, yüklenen veri hacmi azaldı.

3. CDN ile tüm içerikleri dünya çapında hızlandırdım.
   Cloudflare, her sayfayı dünyanın en yakın veri merkezine kopyalıyordu. Bu, latency’i (gecikmeyi) sıfıra indirdi.

4. Her sayfada JavaScript kullanmadım.
   Sayfalar tamamen statik ve bir kere yüklendikten sonra, herhangi bir etkileşim gerekmiyordu. Bu da JavaScript’i tamamen çıkardı.

5. Lighthouse’ı her sayfada çalıştırdım.
   Ve sonuç: Her kategoride 100 puan.
   Performans, erişilebilirlik, SEO, güvenlik ve kullanıcı deneyimi: hepsi mükemmel.

Sonuç: Ne Öğrendim?

1. Next.js, her zaman bir çözüm değildir.
   Büyük projelerde harika bir framework, ama statik bloglar için fazla gereksiz.

2. Performans, her zaman bir seçimdir.
   “Daha az kod, daha fazla hız.” Bu temel bir kural. Çoğu geliştirici, “ne kadar çok özellik varsa o kadar iyi” düşünür. Ama bu, sadece performans açısından değil, karmaşıklık açısından da bir zorluk.

3. Kullanılmayan kod, bir çöp gibi değil, bir zulüm gibi.
   Her bayt, kullanıcıya bir saniye daha uzun süre bekletir. 230.460 bayt kullanım dışı JavaScript, bir sayfada 1-2 saniye daha yavaş olmamı sağlayabilirdi.

4. Kendi çözümünüzü oluşturmak, çok zor olabilir ama kazançlıdır.
   Bir blog, herkes için aynı değildir. Eğer bir şeyi gerçekten istiyorsanız, onu yapmak için kendiniz bir çözüm üretmeniz gerekebilir.

Son Söz

Bugün blogum, her kategoride 100 puan alıyor. Lighthouse’ın her ölçümünde, “Perfect” yazıyor.
Bu, bir kez daha bana gösterdi:

Bazı durumlarda, en iyi performans, sadece en basit yolu seçmekle ilgilidir.

Eğer sen de bir blog kuracaksan, önce sor:

“Bu blog için ne kadar karmaşık olmam gerekir?”
“Benim ihtiyaçlarım ne?”
“Kullanıcı deneyimi için hangi adımlar en etkili olur?”

Belki de, Next.js’i bırakmak, senin için de doğru karar olur.

Bu blog, bloffy.co adresinde ziyaret edilebilir.
Performansını doğrulamak istersen, pagespeed.web.dev üzerinden kontrol edebilirsin.