Bilgi Bankası

Web Sitem Neden Yavaş?

Web sitenizin yavaş olmasının birçok nedeni olabilir. En yaygın nedenlerden bazıları şunlardır:

• Büyük boyutlu resimler: Yüksek çözünürlüklü resimler, sayfanın yüklenme süresini önemli ölçüde artırabilir.
• Optimize edilmemiş kod: Kötü yazılmış veya gereksiz kodlar, tarayıcının sayfayı işlemesini yavaşlatır.
• Çok sayıda HTTP isteği: Tarayıcının sunucudan çok sayıda dosya (resim, stil dosyası, komut dosyası vb.) istemesi, performansı olumsuz etkiler.
• Sunucu sorunları: Yavaş veya aşırı yüklenmiş bir sunucu, tüm web sitenizin performansını etkiler.
• Önbellekleme eksikliği: Tarayıcı önbelleğinin kullanılmaması, ziyaretçilerin aynı sayfayı tekrar ziyaret ettiklerinde bile tüm içeriği yeniden indirmesine neden olur.
• JavaScript engellemesi: Sayfanın üst kısmında yer alan ve tarayıcıyı durduran JavaScript kodları, sayfanın görüntülenmesini geciktirebilir.
• CDN kullanılmaması: İçerik dağıtım ağı (CDN) kullanılmaması, kullanıcıların web sitenize uzak bir sunucudan erişmesine neden olarak gecikmeye yol açabilir.

Bu nedenleri ortadan kaldırarak web sitenizin hızını önemli ölçüde artırabilirsiniz.

Google PageSpeed Insights Nedir ve Nasıl Kullanılır?

Google PageSpeed Insights (PSI), web sayfalarının performansını analiz eden ve iyileştirme önerileri sunan ücretsiz bir araçtır. PSI, hem mobil hem de masaüstü cihazlar için sayfanın hızını değerlendirir ve 1 ile 100 arasında bir puan verir. Ayrıca, performansı artırmak için uygulanabilecek belirli düzeltmeleri de önerir.

PageSpeed Insights'ı kullanmak için:

1. PageSpeed Insights web sitesini ziyaret edin.
2. Analiz etmek istediğiniz web sayfasının URL'sini girin.
3. "Analiz Et" düğmesine tıklayın.
4. PSI, sayfanın performansını analiz edecek ve bir puan verecektir. Ayrıca, iyileştirme önerileri de sunacaktır.

PSI raporunda aşağıdaki bölümler bulunur:

• Performans: Sayfanın genel performansını gösteren bir puan.
• Fırsatlar: Sayfanın yüklenme süresini iyileştirmek için yapabileceğiniz şeyler.
• Teşhisler: Performansı etkileyebilecek sorunlar hakkında ek bilgiler.
• Başarılı Denetimler: Sayfanın zaten iyi yaptığı şeyler.

PageSpeed Insights'ın sunduğu önerileri takip ederek web sitenizin hızını önemli ölçüde artırabilirsiniz.

Gerçek Hayattan Örnek: Bir e-ticaret sitesi, PageSpeed Insights analizinden sonra resimlerini optimize etmemiş olduğunu fark etti. Resimleri sıkıştırdıktan ve yeniden boyutlandırdıktan sonra, sayfa yüklenme süreleri %40 oranında azaldı ve dönüşüm oranları %15 arttı.

Resimleri Nasıl Optimize Ederim?

Resim optimizasyonu, web sitenizin hızını artırmak için en önemli adımlardan biridir. Büyük boyutlu resimler, sayfanın yüklenme süresini önemli ölçüde etkileyebilir. Resimleri optimize etmek için aşağıdaki yöntemleri kullanabilirsiniz:

• Resim Formatını Seçin:
  • JPEG: Fotoğraflar için idealdir. Kayıplı sıkıştırma kullanır, bu da dosya boyutunu küçültür ancak kaliteyi bir miktar azaltır.
  • PNG: Logolar, simgeler ve şeffaflık gerektiren resimler için idealdir. Kayıpsız sıkıştırma kullanır, bu da kaliteyi korur ancak JPEG'e göre daha büyük dosya boyutlarına sahip olabilir.
  • WebP: Modern bir resim formatıdır ve hem kayıplı hem de kayıpsız sıkıştırma sunar. JPEG ve PNG'ye göre daha iyi sıkıştırma oranları sağlayabilir. Tüm tarayıcılar tarafından desteklenmeyebilir, bu nedenle geriye dönük uyumluluk için JPEG veya PNG alternatifleri sunmanız gerekebilir.
  • AVIF: WebP'den bile daha iyi sıkıştırma sağlayan yeni nesil bir formattır. Ancak tarayıcı desteği hala sınırlıdır.
• Resimleri Sıkıştırın: Resimleri sıkıştırmak, dosya boyutunu azaltırken görsel kaliteyi korumanıza yardımcı olur. Birçok çevrimiçi resim sıkıştırma aracı (TinyPNG, ImageOptim, Compressor.io vb.) mevcuttur.
• Resimleri Yeniden Boyutlandırın: Resimleri, web sayfasında görüntülenecekleri boyuta yeniden boyutlandırın. Çok büyük resimleri küçültmek, gereksiz veri yükünü ortadan kaldırır.
• Duyarlı Resimler Kullanın: Farklı cihaz boyutları için farklı resim boyutları sunarak, her kullanıcının cihazına uygun optimize edilmiş resimleri almasını sağlayın. <picture> etiketi veya srcset özelliği kullanılarak uygulanabilir.

Örnek: <picture> etiketi ile duyarlı resimler

<picture>
  <source media="(max-width: 600px)" srcset="image-small.jpg">
  <source media="(max-width: 1200px)" srcset="image-medium.jpg">
  <img src="image-large.jpg" alt="Açıklama">
</picture>

Bu kod, ekran boyutu 600 pikselden küçükse "image-small.jpg", 1200 pikselden küçükse "image-medium.jpg" ve daha büyükse "image-large.jpg" resmini gösterecektir.

JavaScript ve CSS'i Nasıl Optimize Ederim?

JavaScript ve CSS dosyalarının optimizasyonu, web sitenizin hızını artırmak için kritik öneme sahiptir. Optimize edilmemiş JavaScript ve CSS dosyaları, tarayıcının sayfayı işlemesini yavaşlatabilir ve sayfa yüklenme süresini artırabilir. İşte JavaScript ve CSS'i optimize etmek için bazı yöntemler:

• Küçültme (Minification): JavaScript ve CSS dosyalarındaki gereksiz karakterleri (boşluklar, satır sonları, yorumlar vb.) kaldırarak dosya boyutunu küçültün. Birçok çevrimiçi küçültme aracı (UglifyJS, CSSNano vb.) veya derleme araçları (Webpack, Parcel vb.) mevcuttur.
• Birleştirme (Concatenation): Birden fazla JavaScript veya CSS dosyasını tek bir dosyada birleştirerek HTTP isteklerinin sayısını azaltın.
• Sıkıştırma (Compression): Sunucunuzda Gzip veya Brotli sıkıştırmasını etkinleştirerek, tarayıcıya gönderilen JavaScript ve CSS dosyalarının boyutunu küçültün.
• Kritik CSS'i Satır İçi (Inline) Yapın: Sayfanın ilk görüntülenmesi için gerekli olan CSS'i (kritik CSS) doğrudan HTML içine yerleştirerek, tarayıcının harici bir CSS dosyası indirmesini engelleyin. Geri kalan CSS'i asenkron olarak yükleyin.
• JavaScript'i Asenkron veya Ertelenmiş Yükleyin: JavaScript dosyalarını <script async> veya <script defer> etiketleriyle yükleyerek, tarayıcının HTML ayrıştırmasını engellemeyin. async, komut dosyasını indirir indirmez yürütürken, defer komut dosyasını HTML ayrıştırması tamamlandıktan sonra yürütür.
• Kullanılmayan CSS'i Kaldırın: Web sitenizde kullanılmayan CSS kurallarını tespit edin ve kaldırın. Bu, dosya boyutunu küçültür ve tarayıcının daha az CSS işlemesine yardımcı olur.

Örnek: JavaScript'i asenkron yükleme

<script src="script.js" async></script>

Bu kod, "script.js" dosyasını asenkron olarak yükleyecektir. Tarayıcı, HTML ayrıştırmasına devam ederken komut dosyasını indirecek ve indirme tamamlandığında komut dosyasını yürütecektir.

Tarayıcı Önbelleğini (Browser Caching) Nasıl Kullanırım?

Tarayıcı önbelleği, web sitenizin performansını artırmak için önemli bir araçtır. Tarayıcı önbelleği, web sitesinin statik kaynaklarını (resimler, CSS dosyaları, JavaScript dosyaları vb.) kullanıcının bilgisayarında saklar. Bir kullanıcı aynı sayfayı tekrar ziyaret ettiğinde, tarayıcı kaynakları sunucudan yeniden indirmek yerine önbellekten yükler. Bu, sayfa yüklenme süresini önemli ölçüde azaltır.

Tarayıcı önbelleğini kullanmak için, sunucunuzda HTTP önbellekleme başlıklarını yapılandırmanız gerekir. En yaygın kullanılan önbellekleme başlıkları şunlardır:

• Cache-Control: Önbelleğin nasıl davranması gerektiğini belirtir. Örneğin, Cache-Control: max-age=3600, kaynağın 3600 saniye boyunca önbellekte saklanabileceğini belirtir.
• Expires: Kaynağın ne zaman geçersiz olacağını belirtir.
• ETag: Kaynağın benzersiz bir tanımlayıcısını belirtir. Tarayıcı, kaynağı tekrar istemeden önce ETag'i sunucuyla karşılaştırır.
• Last-Modified: Kaynağın son değiştirilme tarihini belirtir.

Örnek: Apache'de .htaccess dosyası kullanarak önbellekleme yapılandırması

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
  Header set Cache-Control "max-age=604800, public"
</FilesMatch>

<FilesMatch "\.(css)$">
  Header set Cache-Control "max-age=1209600, public"
</FilesMatch>

<FilesMatch "\.(js)$">
  Header set Cache-Control "max-age=1209600, private"
</FilesMatch>

<FilesMatch "\.(xml|txt)$">
  Header set Cache-Control "max-age=604800, private, must-revalidate"
</FilesMatch>

<FilesMatch "\.(html|htm)$">
  Header set Cache-Control "max-age=0, private, must-revalidate"
</FilesMatch>

Bu kod, farklı dosya türleri için farklı önbellekleme süreleri belirler. Örneğin, resimler ve videolar 604800 saniye (7 gün) boyunca önbellekte saklanırken, CSS ve JavaScript dosyaları 1209600 saniye (14 gün) boyunca önbellekte saklanır.

İçerik Dağıtım Ağı (CDN) Nedir ve Nasıl Kullanılır?

İçerik Dağıtım Ağı (CDN), web sitenizin içeriğini dünya çapında dağıtılmış sunucularda depolayan bir ağdır. Bir kullanıcı web sitenize eriştiğinde, CDN içeriği kullanıcının coğrafi konumuna en yakın sunucudan sunar. Bu, sayfa yüklenme süresini önemli ölçüde azaltır ve kullanıcı deneyimini iyileştirir.

CDN'nin Faydaları:

• Daha Hızlı Yüklenme Süreleri: CDN, içeriği kullanıcılara daha yakın sunuculardan sunarak gecikmeyi azaltır.
• Daha İyi Kullanıcı Deneyimi: Daha hızlı yüklenme süreleri, kullanıcıların web sitenizde daha uzun süre kalmasına ve daha fazla etkileşimde bulunmasına yardımcı olur.
• Daha Az Sunucu Yükü: CDN, sunucunuzdaki yükü azaltarak web sitenizin daha iyi performans göstermesini sağlar.
• Daha İyi SEO: Google, web sitenizin hızını bir sıralama faktörü olarak kullanır. CDN kullanarak web sitenizin hızını artırmak, SEO performansınızı iyileştirebilir.
• Güvenlik: CDN'ler genellikle DDoS saldırılarına karşı koruma ve diğer güvenlik önlemleri sunar.

CDN Kullanım Adımları:

1. CDN Sağlayıcısı Seçin: Cloudflare, Akamai, Amazon CloudFront gibi birçok CDN sağlayıcısı mevcuttur. İhtiyaçlarınıza ve bütçenize uygun bir sağlayıcı seçin.
2. Web Sitenizi CDN'ye Entegre Edin: CDN sağlayıcısının talimatlarını izleyerek web sitenizi CDN'ye entegre edin. Bu genellikle DNS ayarlarınızı değiştirmenizi ve CDN sağlayıcısının sağladığı bir alan adını kullanmanızı gerektirir.
3. İçeriğinizi CDN'ye Yükleyin: Statik içeriğinizi (resimler, CSS dosyaları, JavaScript dosyaları vb.) CDN'ye yükleyin. Bazı CDN'ler, içeriği otomatik olarak sunucunuzdan çekerken, bazıları içeriği manuel olarak yüklemenizi gerektirir.
4. CDN'yi Yapılandırın: CDN'nin önbellekleme kurallarını, güvenlik ayarlarını ve diğer seçeneklerini yapılandırın.
5. Test Edin ve İzleyin: CDN'nin doğru şekilde çalıştığından emin olmak için web sitenizi test edin ve performansını izleyin.

Veritabanı Sorgularını Nasıl Optimize Ederim?

Web sitenizin veritabanı kullanıyorsa, veritabanı sorgularının performansı sayfa yüklenme süresini önemli ölçüde etkileyebilir. Yavaş veritabanı sorguları, web sitenizin yavaşlamasına ve hatta çökmesine neden olabilir. Veritabanı sorgularını optimize etmek için aşağıdaki yöntemleri kullanabilirsiniz:

• İndeksleme: Veritabanı tablolarında sıkça sorgulanan sütunlara indeksler ekleyin. İndeksler, veritabanının verileri daha hızlı bulmasına yardımcı olur.
• Sorgu Optimizasyonu: SQL sorgularınızı optimize edin. Gereksiz verileri seçmekten kaçının ve WHERE ve JOIN ifadelerini doğru şekilde kullanın.
• Sorgu Önbellekleme: Sıkça çalıştırılan sorguların sonuçlarını önbelleğe alın. Bu, veritabanının aynı sorguyu tekrar tekrar çalıştırmasını engeller.
• Veritabanı Yapısını Optimize Edin: Veritabanı tablolarınızın yapısını optimize edin. Gereksiz sütunları kaldırın ve veri türlerini doğru şekilde seçin.
• Veritabanı Sunucusunu Optimize Edin: Veritabanı sunucunuzun yapılandırmasını optimize edin. Bellek ayarlarını, disk G/Ç ayarlarını ve diğer parametreleri doğru şekilde ayarlayın.

Örnek: MySQL'de indeks ekleme

ALTER TABLE users ADD INDEX email_index (email);

Bu kod, "users" tablosundaki "email" sütununa bir indeks ekleyecektir. Bu, "email" sütununa göre yapılan sorguların daha hızlı çalışmasını sağlayacaktır.

Sunucu Yanıt Süresini (TTFB) Nasıl İyileştiririm?

Sunucu Yanıt Süresi (Time to First Byte - TTFB), tarayıcının sunucudan ilk baytı alması için geçen süredir. TTFB, web sitenizin hızını etkileyen önemli bir faktördür. Yüksek bir TTFB, web sitenizin yavaş yüklenmesine neden olabilir.

TTFB'yi İyileştirme Yolları:

• Daha İyi Bir Hosting Sağlayıcısı Seçin: Kaliteli bir hosting sağlayıcısı, daha hızlı sunucular ve daha iyi altyapı sunar.
• Sunucunuzu Optimize Edin: Sunucunuzun yapılandırmasını optimize edin. Bellek ayarlarını, disk G/Ç ayarlarını ve diğer parametreleri doğru şekilde ayarlayın.
• Önbellekleme Kullanın: Sunucunuzda önbellekleme kullanın. Önbellekleme, sunucunun statik içeriği daha hızlı sunmasına yardımcı olur.
• CDN Kullanın: CDN, içeriği kullanıcılara daha yakın sunuculardan sunarak gecikmeyi azaltır.
• Veritabanı Sorgularını Optimize Edin: Yavaş veritabanı sorguları, TTFB'yi artırabilir. Veritabanı sorgularınızı optimize edin.
• HTTP/2 Kullanın: HTTP/2, HTTP/1.1'e göre daha verimli bir protokoldür. HTTP/2, çoklu istekleri paralel olarak gönderebilir ve sıkıştırma kullanabilir.

Örnek: Nginx'te önbellekleme yapılandırması

proxy_cache_path /tmp/nginx_cache levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m use_temp_path=off;

server {
    location / {
        proxy_cache my_cache;
        proxy_cache_valid 200 302 60m;
        proxy_cache_valid 404 1m;
        proxy_pass http://backend;
        proxy_set_header Host $host;
    }
}

Bu kod, Nginx'te önbellekleme yapılandırır. Önbellek, "/tmp/nginx_cache" dizininde saklanır ve "my_cache" adında bir anahtar bölgesi kullanır. 200 ve 302 HTTP durum kodlarına sahip yanıtlar 60 dakika boyunca önbellekte saklanırken, 404 HTTP durum koduna sahip yanıtlar 1 dakika boyunca önbellekte saklanır.

Mobil Optimizasyon Neden Önemli?

Günümüzde internet trafiğinin büyük bir kısmı mobil cihazlardan gelmektedir. Bu nedenle, web sitenizin mobil cihazlarda hızlı ve sorunsuz bir şekilde çalışması kritik öneme sahiptir. Mobil optimizasyon, web sitenizin mobil cihazlarda kullanıcı deneyimini iyileştirmek için yapılan bir dizi işlemdir.

Mobil Optimizasyonun Faydaları:

• Daha İyi Kullanıcı Deneyimi: Mobil cihazlarda hızlı ve sorunsuz bir web sitesi, kullanıcıların daha uzun süre kalmasına ve daha fazla etkileşimde bulunmasına yardımcı olur.
• Daha Yüksek Dönüşüm Oranları: İyi bir mobil deneyim, dönüşüm oranlarını artırabilir. Mobil kullanıcılar, mobil uyumlu bir web sitesinde daha kolay alışveriş yapabilir veya form doldurabilir.
• Daha İyi SEO: Google, mobil uyumlu web sitelerini daha üst sıralarda listeler. Mobil optimizasyon, SEO performansınızı iyileştirebilir.
• Daha Düşük Hemen Çıkma Oranı: Yavaş veya kullanışsız bir mobil web sitesi, kullanıcıların hemen çıkmasına neden olabilir. Mobil optimizasyon, hemen çıkma oranını azaltabilir.

Mobil Optimizasyon Teknikleri:

• Duyarlı Tasarım (Responsive Design): Web sitenizin farklı ekran boyutlarına otomatik olarak uyum sağlamasını sağlayan bir tasarım yaklaşımıdır.
• Mobil Hız Optimizasyonu: Web sitenizin mobil cihazlarda hızlı yüklenmesini sağlamak için resimleri optimize edin, JavaScript ve CSS'i küçültün, önbellekleme kullanın ve CDN kullanın.
• Dokunmatik Dostu Arayüz: Web sitenizin mobil cihazlarda kolayca kullanılabilmesi için dokunmatik dostu bir arayüz tasarlayın. Büyük düğmeler ve kolayca okunabilen metinler kullanın.
• Mobil Öncelikli İndeksleme (Mobile-First Indexing): Google, web sitenizin mobil sürümünü birincil indeksleme kaynağı olarak kullanır. Mobil web sitenizin tüm önemli içeriği içerdiğinden emin olun.

Google PageSpeed Insights Puanımı Nasıl Artırırım?

Google PageSpeed Insights (PSI) puanı, web sitenizin performansının bir göstergesidir. Yüksek bir PSI puanı, web sitenizin hızlı ve kullanıcı dostu olduğunu gösterir. PSI puanınızı artırmak için aşağıdaki adımları izleyebilirsiniz:

1. PSI Raporunu Analiz Edin: PSI raporunu dikkatlice analiz edin ve belirtilen sorunları tespit edin.
2. Önerileri Uygulayın: PSI raporunda belirtilen önerileri uygulayın. Resimleri optimize edin, JavaScript ve CSS'i küçültün, önbellekleme kullanın, CDN kullanın ve diğer optimizasyon tekniklerini uygulayın.
3. Tekrar Test Edin: Değişiklikleri yaptıktan sonra web sitenizi tekrar PSI ile test edin ve puanınızın arttığından emin olun.
4. İyileştirmeye Devam Edin: Web sitenizin performansını sürekli olarak izleyin ve iyileştirmeye devam edin.

Vaka Çalışması: Bir haber sitesi, PageSpeed Insights analizinden sonra JavaScript ve CSS dosyalarını optimize etmemiş olduğunu fark etti. Dosyaları küçülttükten ve birleştirdikten sonra, PSI puanı 55'ten 85'e yükseldi ve sayfa yüklenme süreleri %30 oranında azaldı.

Önemli PageSpeed Optimizasyon Metrikleri ve Hedef Değerler

Web Sitenizin Hızını Test Etmek İçin Kullanabileceğiniz Diğer Araçlar