WordPress’i Statik Site Oluşturuculardan Nasıl Daha Hızlı Hale Getirdik (Vaka Çalışması – WPBeginner’ı Hızlandırma)

WPBeginner’ın 10. yıldönümünde, WPBeginner barındırma altyapısının web barındırma ortağımız HostGator sayesinde büyük bir yükseltme aldığını paylaşmıştım.

Kısa bir süre sonra, okuyucularımdan WPBeginner’ı nasıl çok hızlı yüklediğimizin ayrıntılarını paylaşmamı isteyen e-postalar almaya başladım.

Evet, WPBeginner çoğu statik site oluşturucudan daha hızlı yüklenir ve bazı durumlarda Google AMP sitelerinden de daha hızlıdır.

Bu makalede, WordPress’i statik site oluşturuculardan ve başsız CMS platformlarından nasıl daha hızlı hale getirdiğimizin perde arkasını anlatacağım.

Not: Bu makale genellikle WPBeginner’da yayınladığımızdan biraz daha tekniktir. Teknik bilgisi olmayan kullanıcılar için WordPress’i hızlandırma konusundaki nihai kılavuzumuzu takip etmenizi öneririm.

Güncelleme: Artık bu makalede paylaşılan kurulumu kullanmıyoruz. Bunun yerine tamamen SiteGround tarafından yönetilen Google Cloud platformuna geçtik. Aynı hız sonuçlarına sahibiz ve daha da hızlı arka uç performansının kilidini açtık. Neden SiteGround’a geçtiğimizi okuyun.

Arka plan

Son zamanlarda WordPress, “modern” geliştiricilerin WordPress’in yavaş olduğunu söyledikleri kötü bir şöhrete sahip.

Bu ifadenin ardından genellikle GatsbyJS gibi bir JAMstack statik site oluşturucuya geçmeniz gerektiği söylenir. Kurumsal dünyadaki diğerleri Contentful gibi başsız bir CMS’ye geçmeniz gerektiğini söyleyecektir.

Çok başarılı girişimci arkadaşlarımdan birkaçı bana bunun doğru olup olmadığını sormaya başladı.

Hatta bazıları, WordPress’ten statik site oluşturuculara geçerek başkalarının nasıl büyük hız iyileştirmeleri elde ettiğine dair vaka çalışmalarını okudukları için başsız bir CMS’ye geçiş sürecine başladı.

Bu benim için çok sinir bozucuydu çünkü geçiş maliyetleri için on binlerce doları boşa harcadıklarını biliyordum. Gelecekte birikecek sonsuz özelleştirme maliyetlerinden bahsetmiyorum bile.

Bu yüzden WPBeginner gibi büyük bir WordPress içerik sitesinin çoğu modern statik site oluşturucudan daha hızlı olmasa da aynı hızda yüklenebileceğini kanıtlamayı bir meydan okuma olarak kabul ettim.

Bana eski kafalı diyebilirsiniz, ancak günün sonunda statik bir site sadece önbellekten yüklenen bir sayfadır.

Sonuçlar

Tam olarak WordPress hosting altyapısına, sunucu yapılandırmalarına ve eklentilere geçmeden önce, sonuçları paylaşmanın yararlı olacağını düşünüyorum.

İşte WPBeginner ana sayfasının Washington, DC sunucularından Pingdom’da ne kadar hızlı yüklendiği:

Günün saatine ve kontrol ettiğiniz konuma bağlı olarak, bu sonuç bir ana sayfa için oldukça hızlı olan 400ms – 700ms aralığında değişecektir.

İşte daha büyük görsellere ve daha fazla içeriğe sahip olduğu için tek bir gönderi sayfası için yaptığım bir test:

Masaüstü için Google sayfa hızı testinde de “100” gibi mükemmel bir puan aldık. Yine de mobil skorda iyileştirme için biraz yerimiz var.

Yukarıdaki sonuçlar, okuyucularımızın ve arama motoru botlarının web sitemizi görüntülediklerinde elde ettikleri önbelleğe alınmış sayfalar içindir. WPBeginner’ın algılanan yükleme süresi neredeyse anlıktır (bu konuda daha sonra daha fazla bilgi verilecektir).

Karşılaştırma yapmak adına, işte Gatsby’nin ana sayfası için bir hız testi sonucu. Bu, birçok geliştiricinin övgüyle bahsettiği popüler bir statik site oluşturucudur:

İşte birçok geliştiricinin tavsiye ettiği popüler bir statik site barındırıcısı olan Netlify’nin ana sayfasının hız testi sonucu. WPBeginner’ın yarısı kadar istek aldıklarına ve sayfa boyutlarının WPBeginner’ın %30’u kadar olduğuna dikkat edin, ancak yine de ana sayfamızdan daha yavaş yükleniyor.

“İşletmelerin daha iyi dijital deneyimler sunmasını sağlayan” başsız CMS Contentful’un ana sayfa hızı hiç optimize edilmemiş. Bu, test ettiğimiz en yavaş web sitesiydi.

Bu istatistikleri diğer çerçeveleri kötülemek için değil, her yeni şeyin göründüğü kadar parlak olmadığına dair bir perspektif sunmak için paylaşıyorum.

WordPress, uygun bir barındırma altyapısı ve optimizasyonlarla herhangi bir statik site oluşturucu kadar hızlı olabilir. Dahası, başka hiçbir platform WordPress’in geniş eklenti ve tema ekosistemi aracılığıyla işletme sahiplerine sunduğu esneklik düzeyine yaklaşamaz bile.

WPBeginner Hosting Altyapısı

Web sitesi hızı söz konusu olduğunda, hiçbir şey web barındırma altyapınızdan daha önemli bir rol oynamaz.

Birçoğunuzun zaten bildiği gibi, 2007’den beri HostGator müşterisiyim. WPBeginner blogunu 2009 yılında küçük bir HostGator paylaşımlı hosting hesabıyla başlattım.

Web sitemiz büyüdükçe, VPS barındırma ve ardından özel sunuculara yükselttik.

Son on yılda, ekip üyelerinin çoğuyla yakın çalışma şansım oldu ve WPBeginner ailesinin geniş bir parçası haline geldiler.

Bu yüzden WPBeginner’ı statik site oluşturuculardan daha hızlı hale getirme görevini üstlendiğimde, yardım için onlara başvurdum.

Vizyonumu liderlik ekibiyle paylaştım ve WPBeginner için türünün tek örneği bir kurumsal barındırma kurulumu oluşturmama yardımcı olmayı teklif ettiler.

WPBeginner’ı çok hızlı hale getirmek için hem Bluehost hem de HostGator ekibinden en iyi mühendisleri benimle yakın bir şekilde çalışmak üzere görevlendirdiler.

İşte WPBeginner barındırma kurulumunun neye benzediğine dair genel bir bakış:

Gördüğünüz gibi bu, iki coğrafi bölgeye (Teksas ve Utah) yayılmış çok sunuculu bir kurulum. Yük dengeleyici bulutu hariç toplam 9 sunucu bulunmaktadır. Her sunucu, 32GB RAM ve 2 x 1TB SSD (RAID kurulumu) ile 8 çekirdekli (16 iş parçacığı) bir Xeon-D CPU’dur.

Google’ın Bulut Yük Dengeleme platformunu kullanıyoruz, böylece dünya çapında sorunsuz otomatik ölçeklendirme ve yük dengeleme yapabiliyoruz.

Donanım uygun veri senkronizasyonu ile kurulduktan sonra, Bluehost ve HostGator ekibi WordPress için sunucu yapılandırmalarını optimize etmek için birlikte çalıştı. Umuyorum ki bu optimizasyonlardan bazıları yakında gelecekteki WordPress barındırma planlarında yer alacak

Sunucu Yapılandırma Özeti

Bu karmaşık kurulumun sunucu yapılandırmalarını sadece birkaç paragrafta özetlemek çok zor, ancak elimden gelenin en iyisini yapmaya çalışacağım.

Web sunucusu yazılımımız için Apache kullanıyoruz çünkü ekibimiz Apache ‘ye daha aşina. NGINX vs Apache tartışmasına girmeyeceğim.

PHP-FPM havuzları ile birlikte PHP 7.2 kullanıyoruz, böylece yüksek işlem ve istek yüklerini kaldırabiliyoruz. Eğer hosting şirketiniz PHP 7+ kullanmıyorsa, ciddi bir hız optimizasyonunu kaçırıyorsunuz demektir.

Hiçbir gerçek kullanıcının önbelleğe alınmamış bir sayfa görüntüleme deneyimi yaşamamasını sağlamak için gelişmiş bir önbellek ısıtıcısı ile Opcode önbellekleme kullanıyoruz.

Ayrıca memcache ile Object cache kullanıyoruz, böylece oturum açmış kullanıcılar (yazarlarımız) için WordPress yönetici alanında önbelleğe alınmamış sayfa vuruşları ve diğer API yanıt süreleri için yanıt süresini iyileştirebiliriz. İşte WordPress yöneticisindeki “Tüm Yazılar” ekranımızın ağ yükü sekmesi:

Bir perspektiften bakacak olursak, yönetici alanı deneyimimiz artık daha önce sahip olduğumuzdan 2 kat daha hızlı.

Veritabanı sunucumuz için MySQL’den MySQL’in bir klonu olan ancak daha hızlı ve daha iyi olan MariaDB’ye geçtik. Ayrıca HyperDB ‘den LudicrousDB ‘ye geçtik çünkü veritabanı replikasyonumuzu, yük devretmemizi ve yük dengelememizi geliştirmemize yardımcı oluyor.

Ayrıca, daha hızlı bağlantı + şifreleme için HTTP/2 ve HSTS, veri merkezi kesintisi durumunda yeni bölgelerde ek sunucular açma yeteneği gibi performans ve ölçeklenebilirlik konusunda bize yardımcı olan birçok başka yapılandırma da var.

Ekibin inşa ettiği harika kurulumun hakkını veremediğimi hissediyorum, ancak lütfen temel gücümün pazarlama olduğunu bilin. Evet, WordPress hakkında yazan bir blog yazarıyım ama buradaki teknik optimizasyonların çoğu benim boyumu çok aşıyor.

Bunlar, David Collins (Endurance’ın baş mimarı / HostGator’ın CTO’su), Mike Hansen (çekirdek WordPress geliştiricisi) ve aşağıdaki krediler bölümünde teşekkür edeceğim diğerleri de dahil olmak üzere Endurance ekibindeki süper akıllı mühendisler tarafından yapıldı.

CDN, WAF ve DNS

Web barındırmanın yanı sıra, web sitenizin hızında önemli rol oynayan diğer alanlar DNS sağlayıcınız, içerik dağıtım ağınız (diğer adıyla CDN) ve web uygulaması güvenlik duvarınızdır (WAF).

Ben bunları üç ayrı şey olarak listelemiş olsam da, Sucuri, Cloudflare, MaxCDN (StackPath) gibi pek çok şirket artık bu çözümleri bir paket halinde sunuyor.

Maksimum kontrole sahip olmak ve riski yaymak istediğimden, her bir parçayı verimli bir şekilde ele almak için üç ayrı şirket kullanıyorum.

WPBeginner DNS, DNS Made Easy (Constellix ile aynı şirket) tarafından desteklenmektedir. Sürekli olarak dünyanın en hızlı DNS sağlayıcıları olarak sıralanıyorlar. DNS Made Easy’nin avantajı, maksimum çalışma süresini sağlamak için CDN veya WAF’ımdaki belirli bir veri merkezi düzgün çalışmadığında küresel trafik yönlendirmesi yapabilmemdir.

CDN’imiz MaxCDN (StackPath) tarafından desteklenmektedir. Temel olarak statik varlıklarımızı (resimler, CSS dosyaları ve JavaScripts) dünya genelindeki geniş sunucu ağlarından sunmamızı sağlıyorlar.

Sucuri ‘yi web uygulaması güvenlik duvarımız olarak kullanıyoruz. Saldırıları engellemenin yanı sıra, başka bir CDN katmanı olarak da işlev görüyorlar ve genel performansları inanılmaz. Piyasadaki en iyi WordPress güvenlik duvarı çözümüne sahip olduklarına inanıyorum.

Web sitesi hız optimizasyonları üzerinde çalışırken, her milisaniyenin tasarruf edilmesi önemlidir. Bu nedenle bu çözüm sağlayıcıları yeni web barındırma altyapımızla birlikte kullanmak büyük bir fark yaratıyor.

Örnek olarak, WPBeginner.com vs GatsbyJS.org vs CloudFlare.com’un şelale dökümü aşağıda verilmiştir:

WPBeginner’ın DNS süresinin, SSL süresinin, Bağlanma süresinin ve Bekleme süresinin bu diğer popüler web sitelerine kıyasla birinci sınıf olduğuna dikkat edin. Bu iyileştirmelerin her biri en iyi sonuçları sunmak için bir araya getirilmiştir.

Instant.page, Optimize Edilmiş Görüntüler ve Diğer En İyi Uygulamalar

Fark etmiş olabileceğiniz şeylerden biri, WPBeginner gönderilerine ve sayfalarına göz atarken neredeyse anında yükleme süresidir.

Yukarıda bahsettiğim tüm şeylerin yanı sıra, tam zamanında ön yükleme kullanan instant.page adlı bir komut dosyası kullanarak gecikme hilesi de yapıyoruz.

Temel olarak bir kullanıcı bir bağlantıya tıklamadan önce faresini o bağlantının üzerine getirmelidir. Bir kullanıcı 65 ms (çok kısa bir süre) boyunca faresini gezdirdiğinde, her iki kişiden biri gerçekten bağlantıya tıklayacaktır.

Instant.page komut dosyası bu anda sayfayı önceden yüklemeye başlar, böylece kullanıcı bağlantıyı gerçekten tıkladığında ağır işlerin çoğu zaten yapılmış olur. Bu, insan beyninin web sitesi yükleme süresini neredeyse anlık olarak algılamasını sağlar.

Sitenizde Instant.page’i etkinleştirmek için Instant Page WordPress eklentisini kurup etkinleştirmeniz yeterlidir.

Bu script oldukça güzel. Web sitelerine göz atmanızı ve beyni nasıl kandırdığını görmek için “tıklama hızınızı test edin” düğmesine tıklamanızı şiddetle tavsiye ederim.

Güncelleme: Şimdilik instant.page’i devre dışı bıraktım ve yakın gelecekte FlyingPages ek lentisini test edeceğim. Gijo Varghese yeni eklentisini WPBeginner Engage Facebook grubunda benimle paylaştı ve instant.page ve quicklink script’in en iyilerini birleştiriyor gibi görünüyor.

Görüntüleri Web için Optimize Etme

Webp gibi yeni görüntü formatları geliştiriliyor olsa da, henüz bunları kullanmıyoruz. Bunun yerine tüm yazarlarımızdan TinyPNG aracını kullanarak her görüntüyü optimize etmelerini istiyoruz.

Ayrıca Optimole veya EWWW Image Optimizer gibi eklentileri kullanarak görüntü sıkıştırma işlemini otomatikleştirebilirsiniz.

Ancak ben şahsen ekibin bunu manuel olarak yapmasını tercih ediyorum, böylece sunucuya büyük dosyalar yüklememiş oluyoruz.

Şu anda resimler için tembel yükleme yapmıyoruz, ancak Google’ın Chrome 76’da yerleşik tembel yükleme desteği olduğu için yakın gelecekte bunu eklemeyi planlıyorum.

Ayrıca WordPress çekirdeğinde bu özelliği tüm sitelere eklemek için bir bilet var (bunun yakında gerçekleşmesini umuyorum), böylece özel bir eklenti yazmak zorunda kalmayacağım.

Güncelleme: Blog yazısını yayınladıktan birkaç saat sonra Google, WordPress için Native Lazy Load eklentisini yayınladı.

HTTP Sorgularını Sınırlama + En İyi Uygulamalar

Kullandığınız WordPress eklentilerine bağlı olarak, bazıları her sayfa yüklemesinde ek CSS ve JavaScript dosyaları ekleyecektir. Web sitenizde çok sayıda eklenti varsa bu ek HTTP istekleri kontrolden çıkabilir.

Daha fazla ayrıntı için WordPress eklentilerinin sitenizin yüklenme süresini nasıl etkileyebileceğine bakın.

Çok fazla WordPress eklentisinin kötü olduğu gibi yanlış bir sonuca varmadan önce, WPBeginner web sitesinde çalışan 62 aktif eklenti olduğunu bilmenizi isterim.

Yapmanız gereken, HTTP isteklerini azaltmak için mümkün olan yerlerde CSS ve JavaScript dosyalarını birleştirmektir. WP Rocket gibi bazı WordPress önbellekleme eklentileri, küçültme özellikleriyle bunu otomatik olarak yapabilir.

WPBeginner ekibimizin yaptığı gibi manuel olarak yapmak için bu makaledeki talimatları da takip edebilirsiniz.

Eklentilerin ve temaların eklediği HTTP isteklerinin yanı sıra, web sitenize eklediğiniz diğer üçüncü taraf komut dosyalarına da dikkat etmek istersiniz çünkü her komut dosyası web sitenizin hızını etkileyecektir.

Örneğin, çok sayıda reklam komut dosyası veya yeniden hedefleme komut dosyası çalıştırıyorsanız, bunlar sitenizi yavaşlatacaktır. Komut dosyalarını yalnızca ihtiyaç duyulduklarında koşullu olarak yüklemek için Google Etiket Yöneticisi gibi bir araç kullanmak isteyebilirsiniz.

TechCrunch veya TheNextWeb gibi reklam destekli bir web sitesiyseniz, reklamları kaldırmak bir seçenek olmadığından bu konuda yapabileceğiniz çok az şey vardır.

Neyse ki, WPBeginner para kazanmak için üçüncü taraf reklam komut dosyalarına güvenmiyor. WPBeginner’ın nasıl para kazandığını görmek ister misiniz? WPBeginner geliri hakkındaki blog yazıma bakın.

Alınan Dersler (şimdiye kadar) + Son Düşüncelerim

Bu yepyeni bir hosting altyapısı ve eminim zamanla öğreneceğim tonlarca ders olacak.

Şimdiye kadar hız iyileştirmelerini sevdim çünkü SEO sıralamamızı yükseltmemize yardımcı oldu ve yönetici alanımız çok daha hızlı.

Yeni çoklu sunucu kurulumu ile WPBeginner’ı Awesome Motive ürün sitelerinin geri kalanıyla aynı seviyeye getirmek için yeni bir dağıtım iş akışı sunduk.

Bunun anlamı, artık yerleşik olarak uygun sürüm kontrolüne sahip olduğumuz ve dikkatsiz davranmamı engellemek için önlemler aldığımızdır (örneğin, uygun testler yapmadan eklentiler eklemek, eklentileri test etmeden kontrol panelinden güncellemek vb.)

Bu değişiklikler aynı zamanda benim nihayet geliştirmeden çekilmemin ve WPBeginner sitesinin yönetimini geliştirme ekibimize devretmemin yolunu açtı.

Buna yıllardır direniyorum ama sanırım zamanı geliyor ve bunu kabul etmem gerekiyor.

Yeni kurulumda cPanel veya WHM yok, bu yüzden artık komut satırında çok akıcı olmadığım için bu beni pratikte işe yaramaz hale getiriyor.

Şu ana kadar iki büyük ders çıkardık:

İlk olarak, WordPress’i güncellemek sunucu senkronizasyonu / replikasyonu nedeniyle o kadar kolay değil. Kişisel blogumu(SyedBalkhi.com) WordPress 5.2’ye yükselttiğimizde, güncelleme dosyaları web düğümlerinden birinde düzgün bir şekilde senkronize olmadı ve hata ayıklama işlemi beklenenden çok daha uzun sürdü. Bunun için daha iyi bir derleme / test süreci oluşturmaya çalışıyoruz.

İkinci olarak, ekipler arasında daha iyi bir iletişim kurmamız gerekiyor çünkü yük dengeleyici yanlış yapılandırmalarıyla ilgili küçük bir kriz yaşadık ve bu da bazı kesintilere neden oldu. Daha da kötüsü, Türk Hava Yolları ile transatlantik bir uçuştaydım ve WiFi çalışmıyordu.

Neyse ki barındırma ekibinin hızlı müdahalesi sayesinde her şey çözüldü, ancak bu, gelecekte olayı daha iyi ele almak için birkaç yeni Standart Çalışma Prosedürü (SOP) oluşturmamıza yardımcı oldu.

Genel olarak kurulumdan çok memnunum ve WPBeginner için yapılan bazı önbellek yapılandırmalarının / optimizasyonlarının HostGator Cloud ve Bluehost WordPress hosting planlarının standart bir parçası haline geleceğini biliyorum.

Bence bunu söylemeye gerek yok, eğer sadece bir web sitesi, blog veya online mağaza açıyorsanız, bu sofistike kurumsal kuruluma ihtiyacınız YOK.

Her zaman benim yaptığım gibi HostGator paylaşımlı veya Bluehost paylaşımlı planlarıyla küçükten başlamanızı ve ardından işletmeniz büyüdükçe hosting altyapınızı yükseltmenizi öneririm.

Yukarıda paylaştığım optimizasyonların çoğunu mevcut WordPress hosting planlarınıza uygulayabilirsiniz.

Örneğin, Bluehost standart planı zaten kullanabileceğiniz yerleşik bir önbellek eklentisi ile birlikte gelir ve varsayılan olarak PHP 7’yi de sunarlar.

Bunu Sucuri gibi bir CDN + WAF ile birleştirerek web sitenizi önemli ölçüde hızlandırabilirsiniz.

Benzer bir barındırma kurulumu isteyen orta ölçekli / kurumsal bir şirketseniz, lütfen iletişim formumuz aracılığıyla bana ulaşın. Sizi doğru yöne yönlendirmeye yardımcı olabilirim.

Özel Teşekkürler + Krediler

Yukarıdaki makalede HostGator ve Bluehost markalarına tonlarca övgüde bulunmuş olsam da, bunun gerçekleşmesi için perde arkasında çalışan bireysel insanları tanımak ve takdir etmek için bir dakikanızı ayırmak istiyorum.

Öncelikle, Endurance liderlik ekibi Suhaib, Mitch, John Orlando, Mike Lillie ve Brady Nord’a bu zorlu görevde bana yardımcı olmayı kabul ettikleri için teşekkür etmek istiyorum.

Ayrıca Mike Hansen, David Collins, Rick Radinger, Chris Miles, David Ryan, Jesse Cook, David Foster, Micah Wood, William Earnhardt, Robin Mendieta, Rod Johnson, Alfred Najem ve veri merkezi ekibindeki diğer kişilere bu zor işi gerçekleştirdikleri için teşekkür etmek istiyorum.

Steven Job’a ( DNSMadeEasy‘nin kurucusu) sorularıma hızlı bir şekilde cevap verdiği ve bazı ayarları daha iyi anlamama yardımcı olduğu için özel bir teşekkür etmek istiyorum. Ayrıca Sucuri ‘den Tony Perez ve Daniel Cid’e de her zaman arkamda oldukları için teşekkür etmek istiyorum.

Son olarak, Chris Christoff’a özel bir teşekkür etmek istiyorum. Kendisi MonsterInsights‘ın kurucu ortağı ve bana test ve dağıtım konusunda çok yardımcı oldu.

Umarım WPBeginner hosting altyapısı hakkındaki bu perde arkası vaka çalışmasını faydalı bulmuşsunuzdur. Ayrıca WordPress’in nasıl hızlandırılacağına dair daha acemi dostu olan nihai rehberimizi de görmek isteyebilirsiniz.

Bonus: İşte tüm WordPress siteleri için önerdiğim en iyi WordPress eklentileri ve araçları.

Bu makaleyi beğendiyseniz, WordPress video eğitimleri için lütfen YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook‘ta da bulabilirsiniz.