Düşük Bütçeyle Sayfa Hızı: Web Sitesi Performansını Artırmanın Uygun Maliyetli Yolları

Düşük Bütçeyle Sayfa Hızı

Bir Core Web Vitals danışmanı olarak sayfa hızı desteği için birçok farklı talep alıyorum. Ve evet, bazen büyük bir bütçe olmuyor. Böyle durumlarda zamanımı daha da verimli kullanmam ve yalnızca yüksek kazanç / düşük efor gerektiren optimizasyonlar yapmam gerekiyor. Bu makalede, web sitesi performansını artırmak ve kusursuz bir user experience sunmak için pratik ve uygun maliyetli stratejileri keşfedeceğiz.

Core Web Vitals İPUCU: Sunduğum en bütçe dostu hizmet 2 saatlik Core Web Vitals desteğidir! 2 saat içinde en acil sorunları çözecek ve paranızın karşılığını en iyi şekilde almanızı sağlayacak etkili bir strateji oluşturmanıza yardımcı olacağım!

Şimdi rezervasyon yapın!

Önce sorunları belirleyin

Düşük bütçeyle Web Performansı optimize ederken mümkün olduğunca etkili bir şekilde optimize ettiğimizden kesinlikle emin olmamız gerekir. Bu da önce gerçek sorunun ne olduğunu bilmemiz gerektiği anlamına gelir.

CrUX verilerini sorgulamak için mükemmel ve ücretsiz PageSpeed Insights aracını kullanabiliriz. CrUX verileri, Google'ın kullandığı veri kaynağı olduğu için önemli olan tek veri kaynağıdır.

CrUX verileri geçti!

CrUX verileri başarısız!

CrUX skorunun altında bir Lighthouse denetimi göreceksiniz. 

Lighthouse denetimi hakkında açık konuşayım! Şu anda Lighthouse ile ilgilenmiyoruz. Neden? Çünkü Core Web Vitals'ı ölçmüyor. Elbette, Lighthouse harika bir test aracıdır ve tüm önerilerini incelemekten çekinmeyin, ancak bütçemiz kısıtlı olduğu için Core Web Vitals'ı geçmeyi önemsiyoruz. Şu anda sentetik testleri geçmeyi önemsemiyoruz!

CrUX verilerine dönelim. Bütçeniz kısıtlıysa izlemeniz gereken bazı yönergeler! Core Web Vitals'ı tam olarak bu sırayla araştırmaya başlayın ve önce bu sorunlara odaklanın!

• Time to First Byte'da başarısız oluyorsanız önce bunu düzeltin!
• First Contentful Paint'te başarısız oluyorsanız render engelleyen kaynakları düzeltin (scriptleri erteleyin ve stilleri optimize edin)
• Largest Contentful Paint'te başarısız oluyorsanız o LCP için ihtiyacınız olan kaynakları önceliklendirin (fontlar veya görseller gibi)
• CLS'de başarısız oluyorsanız tüm görsellere genişlik ve yükseklik ekleyin, CSS geçişlerini bulup kaldırın ve geç render edilen öğeler için alan ayırın (reklamlar, ürün filtreleri vb.)
• Interaction to Next Paint'te başarısız oluyorsanız büyük olasılıkla yanlış zamanda çok fazla JavaScript kullanıyorsunuz. Gereksiz scriptleri/eklentileri kaldırın, en yavaş scriptleri bulmak için CoreDash gibi bir RUM aracı kullanın

Görselleri Sorumlu Bir Şekilde Optimize Etme

Görseller Core Web Vitals'a birkaç farklı şekilde katkıda bulunur. Genellikle web sayfası boyutuna en büyük katkıyı sağlarlar. Verimli görsel sıkıştırma tekniklerinden yararlanarak ve WebP gibi modern görsel formatlarını kullanarak, site sahipleri yükleme sürelerini önemli ölçüde azaltırken görsel kaliteyi koruyabilir. Çoğu zaman görseller Largest Contentful Paint öğesi haline gelir. Bu da önemli LCP görsellerini önceliklendirmemiz ve daha az önemli ve ekranın altındaki görselleri geri plana almamız gerektiği anlamına gelir.

1. Görselleri Ücretsiz Olarak WebP'ye Dönüştürün

Görselleri WebP gibi daha yeni, daha hızlı ve daha modern formatlara dönüştürmenizi sağlayan birçok ücretsiz araç, çözüm ve eklenti mevcuttur. Örneğin WordPress için mükemmel ve ücretsiz WebP Express eklentisini öneririm

2. Lazy loading Uygulayın

Lazy loading, tarayıcıya bir görselin görünür viewport'a (sayfanın görünür kısmı) yaklaşana kadar yüklenmemesi gerektiğini bildirir. Bir sayfada 15 görsel varsa ve yalnızca 3'ü sayfanın görünür kısmındaysa, görünür viewport'ta olmayan görsellere güvenle loading="lazy" ekleyebilirsiniz. 

Bunu ele almanın 2 yolu vardır. İlki CMS'inizde lazy loading'i etkinleştirmektir. Bu, tüm görsellere lazy loading ekleyecektir. Ardından görünür ve önemli görseller için lazy loading'i nasıl kaldıracağınızı belgelerden öğrenin. Diğer yol ise ekranın altındaki görsellere manuel olarak loading="lazy" eklemektir.

<img loading="lazy" src="image.jpg">

3. Görsel fetchpriority Ayarlayın

Bir görsel etiketine fetchpriority = "high" ekleyerek tarayıcıya bu görselin diğer görsellerden daha önemli olduğunu ve yüksek fetchpriority ile indirilmesi gerektiğini bildirebiliriz. Image preloading ve 103 early hints dahil daha iyi yollar olduğunun farkındayım, ancak fetchpriority ayarlamak basit, hızlı ve etkilidir! İşlem basittir: sayfanızdaki en önemli görseli belirleyin, sayfanın şablonunu düzenleyin ve görsele fetchpriority = "high" ekleyin. Bu şöyle görünecektir

<img fetchpriority="high" src="image.jpg">

2. Tutarlılık İçin Tarayıcı Önbelleğinden Yararlanma

Bütçe dostu barındırma kullanıyorsanız, web sunucusunun optimal şekilde yapılandırılmamış olma ihtimali yüksektir. Sıkça karşılaştığım hatalardan biri yanlış yapılandırılmış tarayıcı önbelleğidir. Tarayıcı önbelleği, görseller, scriptler ve stil dosyaları gibi sık erişilen kaynakların yerel olarak depolanmasını sağlayarak geri dönen ziyaretçiler için yükleme sürelerini azaltır. Optimal performans ile kullanıcıların en son içerik güncellemelerini almasını sağlamak arasında bir denge kurmak için önbellek başlıklarını yapılandırın.

Web sunucunuz olarak Apache kullanıyorsanız, web sitenizin kök (ana) dizininde .htaccess adında bir dosya oluşturun ve şu satırları ekleyin

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|webp|gif|css|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>
</FilesMatch>

NGINX gibi farklı bir web sunucusu kullanıyorsanız lütfen barındırma sağlayıcınızla iletişime geçin ve onları bu makaleye yönlendirin!

3. CloudFlare Gibi Ücretsiz veya Bütçe Dostu Bir CDN Düşünün

Statik içeriği dünya çapındaki sunuculara dağıtmak için Content Delivery Networks'ün avantajlarını keşfedin. Premium CDN'ler gelişmiş özellikler sunarken, ücretsiz veya bütçe dostu seçenekler bile sayfa hızında ve güvenilirlikte önemli bir artış sağlayabilir.

Ücretsiz planda:

Ücretsiz planda aşağıdaki gibi birçok 'iyi özellik' elde edersiniz 

1. Süper hızlı DNS. CloudFlare DNS sunucuları ücretsizdir ve muhtemelen bütçe dostu barındırma sağlayıcınızın DNS sunucularından daha iyi performans gösterecektir. Sadece bu nedenle bile CloudFlare'e geçmek harika bir fikirdir 
2. HTTP/3. CloudFlare en yeni protokolleri ve en hızlı sıkıştırma yöntemlerini kullanır. Çok fazla detaya girmeden, bunun ağ hızınızı en az %10 artıracağından emin olabilirsiniz.
3. Tutarlı tarayıcı önbelleği. CloudFlare, statik kaynakları önbelleğe alma konusunda oldukça güçlü bir geçmişe sahiptir. Hazır yapılandırma muhtemelen şu anda sahip olduğunuzdan daha iyidir!
4. Statik kaynaklar için edge önbelleği. CloudFlare, görseller, scriptler ve CSS dosyaları gibi statik kaynaklarınızın versiyonlarını önbelleğe alır ve bunları doğrudan edge ağından son kullanıcıya sunar. Bu, kaynak sunucunuza gidiş-dönüş ihtiyacını ortadan kaldırır.
5. Rocket loader. Rocket loader, scriptlerin yüklenmesini erteleyecek ve bundan kaynaklanan tüm komplikasyonları yönetecektir. Rocket loader kaba bir yöntemdir ancak scriptleri manuel olarak erteleyemiyorsanız, bu muhtemelen Largest Contentful Paint gibi boya metriklerini iyileştirecektir.

Pro planda

Ücretsiz bir CloudFlare planı gördüğümde her zaman söylediğim ilk şeylerden biri 'pro'ya geçin!' dir. 25$ harcayabilecek ve daha hızlı bir site için harcamaya istekliyseniz, bunu düşünmelisiniz.

1. Tüm ücretsiz özellikler. Doğal olarak pro plan tüm ücretsiz özelliklerle birlikte gelir.
2. WordPress için CloudFlare APO. WordPress için APO, ziyaretçiler oturum açmadığında sayfalarınızı edge ağında önbelleğe alacak eksiksiz bir çözümdür. Bu, Time to First Byte'ı muazzam ölçüde hızlandırabilir. 
3. Kayıpsız ve Kayıplı Görsel Optimizasyonu. CloudFlare'in pro versiyonunu kullanmanın başlıca avantajlarından biri görsel optimizasyonlarıdır. CloudFlare görselleri webp formatına dönüştürüp önbelleğe alacak ve yalnızca bu formatları kabul eden ziyaretçilere sunacaktır.

4. Mümkün olduğunca kendi sunucunuzda barındırın!

Bir diğer basit ve etkili optimizasyon 'statik kaynakları' kendi sunucunuzda barındırmaktır. Birçok sitede statik kaynaklar harici CDN'lerde barındırılır (bunu kendi CDN'inizle karıştırmayın). Örneğin jQuery https://code.jquery.com/ adresinde,  Bootstrap https://cdn.jsdelivr.net adresinde ve fontlarınız https://fonts.googleapis.com adresinde barındırılır. Cazibesini anlıyorum, bu CDN'ler kendilerini kolay ve hızlı olarak sunuyor ancak bunları kullanmak aslında oldukça kötü bir fikirdir ve sitenizi yavaşlatacaktır!

Bu tür dosyalar için paylaşımlı bir CDN kullanma fikri, tarayıcıların bu dosyaları web siteleri arasında paylaşabildiği dönemlerde mantıklıydı. O günler geride kaldı. Sonuç olarak yeni bir ziyaretçinin her zaman statik dosyayı indirmesi ve her dosya için yeni bir sunucuya yeni bir bağlantı kurması gerekir. Ve bu yeni sunuculara kurulan yeni bağlantılar çok fazla ekstra zaman alabilir.

Çözüm, bu üçüncü taraf dosyalarını kendi sunucunuzda barındırmaktır. Bunu yapmak kolaydır, dosyayı indirin, sunucunuza yerleştirin ve bu dosyaya yapılan referansı değiştirin.

5. Asenkron Script Yükleme

Büyük bir darboğaz sayfanın head bölümündeki 'engelleyici scriptler' olabilir. Bu scriptler bazen sayfanın yüklenmesini 20 saniyeye kadar geciktirebilir! Şimdi bu scriptleri ertelemek hiç de zor değil. Script etiketine defer ekleyin ve işlem tamam. Yapabiliyorsanız yapın! Şablonu düzenleyin ve scriptinizi şu şekilde değiştirin

<!-- eski engelleyici script etiketi -->
<script src="script.js"></script>

<!-- yeni ertelenmiş script etiketi -->
<script defer src="script.js"></script>

Ancak dikkat edilmesi gerekenler var! Script etiketlerine defer eklemek her türlü sorun ve bağımlılık hatasına neden olabilir. Ve bütçeniz kısıtlı olduğu için ortaya çıkabilecek tüm sorunları düzeltmek üzere bir JavaScript uzmanı tutma imkanınız olmadığını varsayıyorum. Bu yüzden lütfen scriptlerinizi ertelemeyi deneyin ve hataları kontrol edin (Chrome'da Ctrl-Shift-I tuşlarına basın ve konsol sekmesini kontrol edin). Test ettikten sonra hata yoksa... şanslı azınlıktansınız! Hata varsa muhtemelen aşağıdaki çözümlerden birine başvurmalısınız:

Rocket loader Kullanın 

Daha önce bahsedildiği gibi CloudFlare'in ücretsiz versiyonu Rocket Loader'a erişim sağlar. Bu, bir sayfadaki tüm scriptleri erteleyecektir. Mükemmel olmaktan uzaktır ancak çoğu zaman oldukça iyi bir iş çıkaracaktır.

Bir eklenti kullanın

Çoğu CMS tabanlı sitede geniş bir eklenti deposu bulunur. JavaScript'i ertelemenizi ve scriptlerin ertelenmesiyle ortaya çıkabilecek tüm komplikasyonları yönetmenizi sağlayan birçok eklenti mevcuttur.

6. Önbellekleme önbellekleme önbellekleme!

Bütçeniz kısıtlıysa ve barındırma için çok fazla harcamak istemiyorsanız, önbellekleme bir web sitesini hızlandırmanın en etkili yollarından biridir. Önbellekleme özellikle yüksek Time to First Byte'a karşı etkilidir. Önbellekleme farklı seviyelerde yapılabilir. 

İstemci tarafı önbellek: Web sunucunuzu, tarayıcıya mümkün olduğunca çok statik kaynağı önbelleğe almasını söyleyecek şekilde yapılandırın. Bu, sunucunuzdaki yükü azaltacaktır.

Nesne Önbelleği:  Nesne önbelleği, karmaşık veritabanı sorgularının sonuçları gibi yeniden oluşturulması hesaplama açısından pahalı olabilecek verileri depolamak için kullanılabilir. Barındırma sağlayıcınızdan Redis veya Memcached kurmasını isteyin.

Tam Sayfa Önbelleği: Bir CMS kullanıyorsanız, muhtemelen sitenize tam sayfa önbelleği eklemek isteyeceksiniz. WordPress için iyi seçenekler WP Fastest Cache veya WP Core Web Vitals'tır

7. Stratejik barındırma seçimleri yapın

Barındırma söz konusu olduğunda araştırma yapmak işe yarar ve en pahalı barındırma her zaman en hızlısı değildir. Genel olarak CMS'iniz için optimize edilmiş bir barındırma planı arıyorsunuz çünkü her işin ustası hiçbir işin ustası değildir! Optimize edilmiş sunucular sunan sağlayıcıları arayın. Stratejik bir barındırma seçimi, web sitesi hızında önemli bir fark yaratabilir.

8. Sürekli İzleme ve Analiz

[url =https://coredash.app]CoreDash[/url] gibi uygun fiyatlı araçlarla güçlü bir izleme stratejisi uygulayın. Yeni optimizasyon fırsatlarını belirlemek ve tutarlı hız iyileştirmeleri sağlamak için web sitenizin performansını düzenli olarak denetleyin.