WPBeginner’da Sayfa Yükleme Hızını Nasıl Artırıyoruz (6 İpucu Açıklandı)

Henüz farkında değilseniz… Google, Google Core Web Vitals adlı web sitesi performans ölçümlerinde bazı önemli değişiklikler yaptı.

Core Web Vitals artık İlk Giriş Gecikmesinin (FID) yerini alan istikrarlı Sonraki Boyamaya Etkileşim (INP) özelliğini de içeriyor.

Birçok okuyucumuz WPBeginner’da hızlı yükleme sürelerini nasıl koruduğumuzu sordu. Standart optimizasyon uygulamalarını takip ediyoruz ancak yüksek trafiğimizi idare etmek için ek adımlar atıyoruz.

Bu makalede, sayfa yükleme hızınızı artırmak için birçoğu herhangi bir web sitesine uygulanabilecek ekstra ipuçlarını paylaşacağız.

İşte bu makalede tartışacağımız tüm öğelere hızlı bir genel bakış:

Sayfa Yükleme Hızı Neden Önemlidir?

Sayfa yükleme hızı, bir kullanıcı bir bağlantıya tıkladığında web sitenizin ne kadar hızlı göründüğüdür.

Amacımız, kullanıcıların ihtiyaç duydukları bilgilere hızlı bir şekilde ulaşmalarını sağlamaktır. Daha hızlı yüklenen bir web sitesi kullanıcıları mutlu eder çünkü aradıkları bilgiye hemen ulaşabilirler.

Öte yandan, yavaş yüklenen bir web sitesi onları terk etmeye zorlayabilir. Tüm web sitelerimizde kaçınmak istediğimiz şey budur. Kullanıcılar sitenizde daha uzun süre kalırsa abone veya müşteri olma olasılıkları daha yüksektir.

Kullanıcıların, yüklenmesi 3 saniye süren bir web sitesini terk etme (hemen çıkma) olasılığı %36 daha yüksektir. Ve yüklenmesi 5 saniye veya daha uzun süren web sitelerini terk etme olasılıkları %90 daha fazladır.

Source: ThinkWithGoogle

İşte sayfa yükleme hızının neden bu kadar önemli olduğuna dair birkaç neden daha:

• Kullanıcı Etkileşimini Artırır: Hızlı yüklenen bir web sitesi, ziyaretçilerin ilgisini çekerek bilgiye hızlı bir şekilde erişmelerini sağlar. Bir sitede daha fazla zaman geçiren kullanıcıların harcama yapma veya dönüşüm gerçekleştirme olasılığı daha yüksektir.
• Arama Motoru Sıralamalarını İyileştirir: Daha iyi kullanıcı deneyimi nedeniyle, arama motorları hızlı yüklenen web sitelerini daha yüksek sıralayarak tercih eder.
• Mobil Kullanıcılar için Çok Önemli: Hız, mobil gezinti için özellikle önemlidir. Mobil kullanıcıların yavaş bir web sitesini terk etme olasılığı masaüstü kullanıcılarına göre iki kat daha fazladır.
• Güven ve Otorite Oluşturur: Hızlı yüklenen bir site daha güvenilir ve profesyonel görünür, bu da kullanıcıları işletmenizden satın almaya ikna etmenize yardımcı olabilir.

Özetlemek gerekirse, sayfa yükleme hızı, daha yüksek müşteri memnuniyeti ve etkileşimi ile genel kullanıcı deneyimini iyileştirir.

WPBeginner’da Sayfa Yükleme Hızını Nasıl İyileştiriyoruz

WordPress performans ve hız optimizasyonu el kitabımızdaki tüm standart en iyi uygulamaları uyguluyoruz.

Buna ek olarak, WPBeginner’da WordPress performansını daha da artırmak için bazı ek adımlar attık.

İşte uyguladığımız tekniklerden önce ve sonra performans optimizasyonumuzun yeni bir ekran görüntüsü.

Web siteniz için benzer bir test yapmak ve Google Core Web Vitals puanınızı görmek istiyorsanız PageSpeed Insights aracını kullanın.

Test etmek istediğiniz URL’yi girmeniz ve ‘Analiz Et’ düğmesine tıklamanız yeterlidir.

Araç, web sayfasını birkaç saniye boyunca analiz edecek ve ardından size test sonuçlarını gösterecektir.

Şimdi, bu performans skoruna ulaşmak için attığımız adımları inceleyelim.

1. Daha Hızlı Hosting Platformu

WordPress tabanlı işletmeleri yönetme konusundaki yılların deneyimiyle, en iyi WordPress barındırma hizmetini seçmenin önemini öğrendik.

Küçük web siteleri için Bluehost veya Hostinger gibi en iyi hosting şirketlerinden herhangi biriyle başlayabilirsiniz.

Ancak WPBeginner, yüksek trafik hacmine sahip daha büyük bir web sitesidir. Paylaşımlı veya VPS barındırma planları bu ölçekte çok sınırlıdır.

Bu nedenle WPBeginner, SiteGround‘un Google Bulut Platformu üzerinde çalışan Kurumsal Bulut Altyapısı üzerinde barındırılmaktadır.

Neden SiteGround Kullanıyoruz

• SiteGround’un kurumsal düzeyde barındırma altyapısı, maksimum çalışma süresi sağlayan çeşitli yedekleme katmanlarına sahiptir.
• Google’ın son teknoloji ağına bağlı olan Google Cloud Platform üzerinde çalışır ve dünyanın her noktasından en yüksek hızları sağlar.
• Bireysel tahsis edilmiş barındırma sunucularını yönetmekle ilgili maliyetleri ve zorlukları azaltır.
• SiteGround’un Ultrafast PHP, daha hızlı MySQL ve Brotli sıkıştırma gibi şirket içi geliştirmeleri ekstra performans artışı sağlar.
• SiteGround destek ekibiyle çalışma konusunda ilk elden deneyime sahibiz. Mühendislerinin uzmanlığı, daha hızlı yanıt süreleri ve genel olarak yardımseverlikleri bizi her zaman etkiledi.

Daha fazla ayrıntı için WPBeginner’ın neden SiteGround hosting’e geçtiğine dair makalemize bakabilirsiniz.

Şu anda WPBeginner kullanıcılarına ücretsiz bir alan adı ile cömert bir indirim de sunuyorlar. Aylık 2.99$’dan başlıyor, ki bu da teknoloji ve sağlanan hizmet seviyesi düşünüldüğünde oldukça uygun.

En iyi yanı ise SiteGround’un avantajlarının kurumsal müşterilerle sınırlı olmamasıdır. Tüm SiteGround paylaşımlı barındırma hesapları Google Cloud Platformunda da barındırılır.

2. CloudFlare DNS

Önceki bir WPBeginner Insider makalesinde, Sucuri’den Cloudflare’e geçişle ilgili vaka çalışmamızı paylaşmıştık.

Güvenliğin yanı sıra, Cloudflare DNS’i kullanmak WPBeginner’a performansta önemli bir avantaj sağlar.

DNS (Alan Adı Sistemi) web siteleri için bir telefon rehberi gibidir.

Bir web sitesinin adresini tarayıcınıza girdiğinizde veya bir bağlantıya tıkladığınızda, bir DNS hizmeti alan adını arar ve web sitenizi söz konusu web sitesinin IP adresine yönlendirir.

Normalde, web siteleri DNS’i yönetmek için barındırma şirketlerinin ad sunucularını kullanır. Bunlar Cloudflare kadar hızlı değildir ve dünya çapında 310’dan fazla şehirdeki veri merkezlerinde ağ ucunda DNS çözümlemesine izin verir.

Neden Cloudflare DNS Kullanıyoruz

• En hızlı DNS çözünürlüğü: Cloudflare’in küresel ağı, DNS’in herhangi bir kullanıcıya en yakın konumda çözümlenmesini sağlar.
• Yerleşik Güvenlik: Tüm trafik Cloudflare DNS’den geçtiği için, web uygulaması güvenlik duvarı (WAF) DDoS saldırılarını, spam’i, gereksiz botları, SQL enjeksiyonlarını, bilgisayar korsanlığı girişimlerini ve daha fazlasını hızla azaltabilir ve engelleyebilir.
• CDN Teslimatı – Ağları statik varlıkları otomatik olarak önbelleğe alır ve bunları küresel ağları üzerinden sunarak web sitelerinin daha hızlı yüklenmesini sağlar. Bu işlem DNS düzeyinde gerçekleştiğinden, CDN varlıkları için ayrı alt alan adlarına sahip olmanız gerekmez.

Biz Kurumsal planı kullanıyoruz, ancak Cloudflare daha küçük web siteleri için ücretsiz CDN ve DNS sunuyor, bu da aslında aynı şeyi daha az özellik ile yapıyor.

3. WP Rocket Kullanarak Performans Optimizasyonu

Daha fazla performans optimizasyonu için, piyasadaki en iyi WordPress performans eklentilerinden biri olan WP Rocket‘i kullanıyoruz. Diğer şeylerin yanı sıra, önbelleğe alma işlemini gerçekleştirir, yani web sitenizin kopyalarını kaydeder, böylece sayfalar tekrar gelen ziyaretçiler için daha hızlı yüklenir.

WP Rocket hakkında en çok sevdiğimiz şey, en kapsamlı WordPress performans optimizasyon eklentisi olması, bu nedenle birçok farklı görevi yerine getirmek için yalnızca bir araca ihtiyacımız var.

Neden WP Rocket Kullanıyoruz

• Önbellek ön yüklemesi – Genellikle bir önbellek eklentisi, önbelleğe alınmış bir kopyasını oluşturmak için kullanıcı bir sayfayı ziyaret edene kadar bekler. WP Rocket önbelleğinizi otomatik olarak hazır tutar, bu da sayfa yükleme süresinde büyük bir fark yaratır.
• Tarayıcı önbelleği – Görüntüler, JavaScript ve CSS gibi statik varlıkların tarayıcı önbelleğinde depolanması, sonraki sayfa görüntülemelerinde daha hızlı yükleme anlamına gelir.
• Dosya optimizasyonu – WP Rocket, JavaScript ve stil sayfaları gibi statik dosyaların dağıtımını küçültmenize ve optimize etmenize yardımcı olur. Bu dosyaları küçültmek genel sayfa yükleme süresini önemli ölçüde azaltır.

Bu eklentiyle ilgili detaylı deneyimimizi artıları ve eksileriyle WP Rocket incelememizde paylaştık.

WP Rocket’ta Hangi Ayarları Kullanıyoruz?

Aşağıdaki WP Rocket ayarlarını açtık:

• Tam sayfa önbelleğe alma
• Dosya optimizasyonu(JS ve CSS dosyalarını küçültme ve kritik CSS sunma)
• JavaScript erteleme (JS’nin yüklenmesini geciktirir, bu da render engelleme sorununu çözmeye yardımcı olur)
• Görüntülerin ve medya dosyalarının tembel yüklenmesi

Bu ayarları sitenizde kullanmak için yardıma mı ihtiyacınız var? En iyi sonuçları elde etmek için WP Rocket’i ayarlamaya yönelik adım adım bir kılavuzumuz var.

4. JavaScript ve CSS’yi sıraya koyma

JavaScript ve CSS dosyalarının teslimini WP Rocket ile optimize ediyoruz, ancak bundan önce web sitemizin yalnızca bir sayfanın ihtiyaç duyduğu JavaScript ve CSS dosyalarını yüklediğinden emin oluyoruz.

Bunu yapmanın en kolay yolu, WordPress’in en iyi kodlama uygulamalarını takip eden WordPress eklentileri ve temaları kullanmaktır. Bu geliştiriciler yalnızca gerektiğinde bir komut dosyası yükleyecektir.

Ancak bazen bir eklenti veya tema geliştiricisi bu kararı sizin için veremez. Daha iyi bir kullanıcı deneyimi için komut dosyalarını global olarak yükleyebilirler.

WPBeginner’da bu konuyla ilgilenen şirket içi geliştiricilerimiz var. Gereksiz komut dosyalarının ve CSS’nin sırasını kaldırıyoruz ve ardından gereken yerlerde sıraya alıyoruz.

Ancak, WordPress kodlamasını temel düzeyde anlayan kullanıcılar aşağıdaki adımları izleyerek bunu yapabilirler.

İlk olarak, gereksiz komut dosyalarını bulmanız gerekir. Hangi komut dosyalarının ve stil sayfalarının yüklendiğini bulmanın en kolay yolu Query Monitor eklentisini kullanmaktır.

Size bir sayfada yüklü olan JavaScript ve CSS dosyalarını gösterecek ve siz de hangilerinin gereksiz olduğunu anlayabileceksiniz.

Bir komut dosyasının sırasını kaldırmak için, Sorgu Monitörü’nde gösterildiği gibi komut dosyası tanıtıcısını kullanmanız gerekir. Bundan sonra, sırasını kaldırmak için aşağıdaki kodu kullanabilirsiniz:

function prefix_remove_scripts() {
	if ( is_front_page() ) {
		wp_dequeue_script( 'plugin-script-handle' );
	}
}
add_action( 'wp_print_scripts', 'prefix_remove_scripts', 100 );

Benzer şekilde, gereksiz stil sayfalarını kaldırmak için aşağıdaki kodu kullanabilirsiniz:

/**
 * Remove unnecessary stylesheets 
 */
function prefix_remove_styles() {
	if ( is_front_page() ) {
	wp_dequeue_style( 'stylesheet-handle' );
	}
}
add_action( 'wp_enqueue_scripts', 'prefix_remove_styles', 100 );

Daha fazla ayrıntı için WordPress’te JavaScript ve CSS’nin nasıl doğru şekilde ekleneceğine ilişkin eğitimimize bakın.

5. Blok Düzenleyici Stillerini Kaldırma

WPBeginner’da varsayılan WordPress blok editörünü kullanıyoruz. Son derece hızlıdır ve çekirdek WordPress geliştirme ekibi performansını artırmak için çok fazla zaman ve kaynak harcamaktadır.

Performansı daha da artırmak için WPBeginner’da kullanmadığımız bazı blok düzenleyici stillerini kaldırıyoruz.

Bu, DOM boyutunu azaltır ve tarayıcıların istenen sayfayı daha hızlı işlemesini sağlar.

Tarayıcı terminolojisinde DOM, bir sayfadaki öğelerin ve alt öğelerin haritası gibidir (başlıklar, metinler, resimler, stil sayfaları, komut dosyaları vb.)

Daha büyük bir DOM, tarayıcının onu işlemek için biraz daha fazla zaman harcayacağı anlamına gelir. Daha küçük bir DOM hızlı bir şekilde işlenir.

Bununla birlikte, bundan elde edilen performans kazancı o kadar büyük değildir ve daha küçük WordPress web sitelerine sahip çoğu kullanıcı için bunu önermeyiz.

6. Çeşitli Performans İyileştirmeleri

Yukarıda belirtilen ipuçlarının yanı sıra, daha iyi sayfa yükleme hızları sağlamak için en iyi uygulamalara da sahibiz.

İşte web sitenizde kolayca uygulayabileceğiniz bunlardan bazıları:

• Optimize Edilmiş Görseller – Ekibimiz, yüklediğimiz ekran görüntülerinin, görsellerin ve medyanın dosya boyutunu azaltmak için yüksek oranda optimize edilmesini sağlar. WordPress için görsellerin nasıl optimize edileceğine ilişkin kılavuzumuza göz atın.
• Cron İşleriniOptimize Edin – Cron işleri, güncellemeleri kontrol etmek, zamanlanmış gönderileri yayınlamak vb. için arka planda çalışan zamanlanmış WordPress görevleridir. WordPress eklentileri de kendi arka plan işlemlerini ekleyebilir. Cron işlerini optimize etmek sunucu yükünü azaltır ve performansı artırır.
• Harici HTTP İsteklerini Azaltın – Kullandığınız bazı eklentilerin ve araçların harici alan adlarından dosya yüklemesi gerekebilir. Bu isteklerin çok fazla olması sayfa yükleme süresini artırabilir. Bunu düzeltmek için, eklentilerinizin CSS dosyalarını ve JavaScript’i nasıl devre dışı bırakacağınıza ilişkin eğitimimize bakabilirsiniz.

Sayfa yükleme sürenizi iyileştirmek için bu yöntemlerin ve diğer stratejilerin daha ayrıntılı bir incelemesi için eksiksiz WordPress hız ve performans kılavuzumuzu takip edebilirsiniz.

Bu makalenin size kendi web sitelerinizde sayfa yükleme hızını nasıl artırabileceğiniz konusunda fikir verdiğini umuyoruz. Ayrıca e-posta listemizi nasıl büyüttüğümüzü görmek veya organik trafiğinizi artırmak için WordPress SEO kılavuzumuza göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.