WordPress’i Hızlandırmak: List25 Performansını %256 Oranında Nasıl Optimize Ettik?

WordPress sitenizi hızlandırmak mı istiyorsunuz? Sitenizin yüklenme süresini azaltmanıza yardımcı olabilecek WordPress optimizasyon hilelerini bilmek ister misiniz? Bu makalede, performansı artırmak için List25 sitemizi nasıl optimize ettiğimizi paylaşarak WordPress’i nasıl hızlandıracağınızı göstereceğiz.

WordPress hızının SEO için önemli olduğunu muhtemelen duymuşsunuzdur. Daha hızlı bir site daha iyi kullanıcı etkileşimine, daha fazla sayfa görüntülemeye ve daha iyi satışlara sahiptir. Bir strangeloop vaka çalışmasında, bir saniyelik gecikmenin size satışlarda %7, sayfa görüntülemelerinde %11 ve müşteri memnuniyetinde %16 düşüşe mal olabileceğini buldular.

Peki WordPress’i gerçekten nasıl hızlandırırsınız?

Sadece bir hız ipuçları listesi paylaşmak yerine, List25 sitemizden elde ettiğimiz sonuçları ve tüm bunları nasıl başardığımızı göstermek için tam bir vaka çalışması yapmaya karar verdik.

Genel Bakış

List25, kurucumuz Syed Balkhi tarafından başlatılan bir eğlence blogudur. Sitenin 1,5 milyondan fazla abonesi var ve YouTube kanalı çeyrek MİLYAR görüntülemeye sahip.

Sitedeki içerik çoğunlukla terabaytlarca bant genişliği kaplayan resim ve videolardan oluşuyor, bu nedenle maliyetleri düşük tutmak, sayfayı terk etmeyi azaltmak ve sitede kalma süresini iyileştirmek için genel hız optimizasyonu bizim için çok önemliydi.

Optimizasyona başlamadan önce Pingdom’a göre ana sayfamızın yüklenmesi 2,21 saniye sürüyordu. İşimiz bittikten sonra sayfa yükleme süremiz 1,21 saniyeye düştü (~%45 daha hızlı).

Bu optimizasyon sırasında sunucu yanıt süremizi hızlandırmayı, sayfa hızı performans puanımızı iyileştirmeyi, toplam istek sayısını azaltmayı ve genel yükleme süresini iyileştirmeyi başardık.

WordPress sitemizi hızlandırmamıza yardımcı olan optimizasyon tekniklerine bir göz atalım.

WordPress Hosting

İyi bir web barındırma şirketine sahip olmak web sitenizin hızı için çok önemlidir. Sitemiz daha popüler hale geldikçe, önceki barındırma şirketimizi (HostGator) geride bıraktık.

List25 on milyonlarca sayfa görüntülemesi aldığı için sunucuları bu büyüklükteki bir siteyi kaldıramazdı. HostGator daha küçük siteler için harika, ancak bu büyüklükte bir site için değil.

Çeşitli yönetimli WordPress barındır ma seçeneklerine baktık ve sonunda bu site için en iyi genel değeri sundukları için List25’i barındırmak için SiteGround ‘u kullanmaya karar verdik.

Sunucu yanıt süremizdeki iyileşmeyi hemen görebilirsiniz. Maksimum 442 ms’den 172 ms yanıt süresine ulaştık. Bu %256’lık bir iyileşme demek.

Siteground, WordPress, Joomla ve Magento gibi belirli platformlar için performans artırıcılar geliştirmiştir. Sitenizin platformuna bağlı olarak, sunucularınızı özel olarak optimize ederler ve bu da daha iyi bir genel performansla sonuçlanır.

Web hostinginizi ne zaman değiştirmeniz gerektiği hakkında 7 temel göstergeden bahseden bir makale yazdık.

Eğer host değiştirmek istiyorsanız, SiteGround’u kesinlikle deneyin. WPBeginner kullanıcıları, barındırma + ücretsiz alan adı için özel %60 indirim alır.

Önbellekleme Eklentisi

WordPress’i hızlandırmak söz konusu olduğunda, önbellekleme, web barındırmanızdan sonra en önemli ikinci faktördür.

Normalde bir ziyaretçi WordPress sitenize geldiğinde, sunucunuz PHP isteğini MySQL Veritabanına iletir, bu da istenen sayfayı bulur, anında oluşturur ve ziyaretçiye gösterir. Bu çok fazla kaynak gerektirir. Önbelleğe aldığınızda zamandan ve kaynaklardan tasarruf edersiniz.

Aşağıdaki diyagram süreci vurgulamaktadır. Daha basit bir ifadeyle, önbelleğe almayı dosyaya daha hızlı ulaşmanıza yardımcı olan bir masaüstü kısayolu oluşturmak olarak düşünün.

List25 sitesi için, müşterileri için özel olarak oluşturdukları bir eklenti olan SiteGround SuperCacher’ı kullanıyoruz. Bunun üzerine, Varnish (performans artırıcılarının bir parçası) kullanarak gelişmiş dinamik önbellekleme seçenekleri eklediler.

Siteground kullanmıyorsanız endişelenmeyin. W3 Total C ache veya WP Super Cache gibi mevcut birçok çözümden birini kullanarak WordPress sitenize önbellek kurabilirsiniz.

WPBeginner’da, bir dizi sayfa önbelleğe alma seçeneği, veritabanı önbelleğe alma ve nesne önbelleğe alma sağlayan W3 Total Cache kullanıyoruz.

Daha fazla hosting şirketi WordPress için uzmanlaştıkça, daha fazla özel önbellekleme çözümü oluşturulduğunu göreceğiz. Pagely ve WPEngine de kendi yerleşik önbellekleme sistemlerini sunuyor.

CDN

İçerik Dağıtım Ağları (CDN) web sitenizin hızını artırmanıza yardımcı olabilir. List25’in başından beri MaxCDN kullanıyoruz, bu yüzden bu kısım değişmedi.

CDN’in ne olduğu ve neden CDN ‘e ihtiyacınız olduğu hakkında bir infografik ile birlikte tam bir makale yazdık.

CDN, tüm CSS, Javascript ve görüntüleri bir İçerik Dağıtım Ağından sunmamızı sağlar. Bu, site ziyaretçisinin konumunu belirleyerek ve ziyaretçiye en yakın sunucudan içerik sunarak çalışır.

Premium bir CDN çözümü için pazarda değilseniz, Cloudflare‘i kullanabilirsiniz.

HTTP İsteklerini Azaltmak için Dosyaları Birleştirme

Daha fazla eklenti ekledikçe, genellikle kendi JavaScript ve CSS dosyalarını eklerler. Her ek dosya yeni bir HTTP isteğidir.

İstekleri azaltmak ve yükleme süresini hızlandırmak için bu JavaScript ve CSS dosyalarını her biri için tek bir dosyada birleştirdik. Bununla ilgili daha fazla ayrıntıyı WordPress eklentilerinin yükleme süresini nasıl etkilediği konusunda görebilirsiniz.

Şu anda sitenin belirli bir bölümünde ihtiyaç duymayabileceğimiz bazı küçük işlevleri yüklerken, bu kod CDN’de önbelleğe alınıyor ve sonuçlar, daha az sayıda dosya talebinin birkaç küçük JS dosyası yüklemekten daha iyi performans sağladığını gösteriyor.

Bu, düzenli olarak yapmanız gereken bir şeydir çünkü kullandığınız eklentiler zamanla değişir.

Görüntü Sprite’ları

Çeşitli sosyal ve site simgelerini tek bir görüntüde birleştiren bir görüntü sprite’ı kullandık:

Belirli bir simgeyi görüntülememiz gerektiğinde CSS kullanıyorduk:

1. Görüntüyü arka plan görüntüsü olarak yükleme
2. Simgeye ihtiyaç duyduğumuz öğenin genişliğini ve yüksekliğini tanımlayın
3. Gerekli simgeyi yüklemek için resmimizin arka plan konumunu ayarlayın

Örneğin, kenar çubuğunun sosyal medya simgelerini yüklemek için kullanıyoruz:

li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; }
li.widget_social_icons ul li.twitter { background-position: 0 -50px; }
li.widget_social_icons ul li.facebook { background-position: -36px -50px; }
li.widget_social_icons ul li.pinterest { background-position: -72px -50px; }
li.widget_social_icons ul li.google { background-position: -108px -50px; }
li.widget_social_icons ul li.rss { background-position: -144px -50px; }
li.widget_social_icons ul li.youtube { background-position: -180px -50px; }

background-position, width ve height CSS özellikleri, görüntünün çıktısını almak istediğimiz belirli bölümünü hedeflememize yardımcı olur:

Sonuç olarak, bu görüntü dosyası için yalnızca ilk istek bant genişliğini kullanır. Görsel için CDN’e yapılan sonraki talepler, önbelleğe alınan (tipik olarak yerel) sürümün yüklenmesinin yanı sıra 6 farklı sosyal simgeye karşılık yalnızca tek bir görselin talep edilmesiyle sonuçlanacaktır.

JavaScript, CSS ve görüntüleri bir araya getirerek istek sayısını önemli ölçüde azalttık.

Kod Minifikasyonu

Kod küçültme, dosya boyutunu küçültmek ve istendiğinde daha hızlı yüklenmesini sağlamak için boşlukların ve satır sonlarının kaldırılmasını içerir.

List25 için sözdizimi tabanlı bir stil sayfası olan SCSS’yi kullanıyoruz(Sass’a Giriş). Bu, CSS dosyalarımızı çeşitli geliştirme alanlarında okunması kolay bir düzende yapılandırmamızı sağlıyor:

Daha sonra SCSS dosyalarını tek bir CSS dosyasında derlemek için CodeKit’i kullanıyoruz. CodeKit ayrıca dosyanın mümkün olduğunca küçük olmasını sağlamak için boşlukları ve satır sonlarını kaldırır:

Sonuç olarak, CSS dosya boyutumuzu %28 oranında azaltmayı başardık.

Görüntü Optimizasyonu

Görsellerimizi iki alanda optimize ettik: WordPress temamız ve yüklenen içerik.

WordPress temamız için CodeKit kullanarak tüm görüntülerin kayıpsız bir şekilde sıkıştırılmasını sağladık. Bu, kalite kaybı olmadan dosya boyutlarının mümkün olduğunca küçük olmasını sağlar.

Ayrıca tüm yazarlarımızı web için optimize edilmiş görselleri kaydetmenin önemi konusunda eğittik. Web için optimize edilmiş görsellerin nasıl kaydedileceğine ilişkin kılavuzumuza göz atın.

Javasız Sosyal Paylaşım

List25 için sosyal paylaşım, diğer tüm web siteleri gibi gerçekten önemlidir. Ancak sosyal paylaşım eklentileri sitenizi önemli ölçüde yavaşlatabilir.

Bu dört sosyal ağın komut dosyalarının entegre edilmesi testlerimizde sayfa yükleme süresini etkilememiş olsa da, mobil bir cihazda görüntülenirken web sitesini gözle görülür şekilde yavaşlattı. Sosyal paylaşım düğmelerinin görünmesi, komut dosyalarının eşzamansız olarak yüklenmesine rağmen birkaç saniye sürdü ve düğmeler görüntüye yüklenirken gönderi içeriğinin hareket etmesine neden oldu.

Bu sorunun üstesinden gelmek için (neredeyse) Javascript içermeyen bir çözüme geçtik. Sosyal ağın paylaşım düğmelerinin her biri özel WordPress Eklentimiz tarafından işleniyor ve temanın Javascript’i yalnızca kullanıcı bir düğmeye tıkladığında web tarayıcısı penceresini açmak için kullanılıyor.

Ancak yine de bir gönderinin tüm sosyal ağlarda sahip olduğu toplam paylaşım sayısını görüntülemek istedik. Bunu yapmak için, her bir sosyal ağdaki sosyal paylaşım sayılarını Post meta tablosuna almak ve önbelleğe almak için küçük bir özel WordPress Eklentisi ürettik. Bu sayılar her 24 saatte bir güncellenerek zaman alıcı sorguların sürekli çalışmamasını sağlıyor.

Özelleştirme için Sharre gibi bir API kullanabilir ya da Yüzen Sosyal Çubuğu inceleyebilirsiniz.

Pingdom’un RUM (Gerçek Kullanıcı İzleme) özelliğini kullanan bu yeni paylaşım eklentisi, ‘gerçek’ sayfa yükleme süresini 6 saniyeden 2 saniyenin biraz üzerine düşürdü. Ayrıca üçüncü taraf komut dosyaları için yapılan isteklerin sayısını azaltmamızı sağladı.

Sonuç

Site hızımızı önemli ölçüde iyileştirdik. Yükleme süresi 2,2 saniyeden 1,22 saniyeye düştü.

Sunucu yanıt süremizi önemli ölçüde azaltmayı başardık.

Bu, Google bot tarafından bir sayfanın indirilmesi için harcanan sürenin azaltılmasına yardımcı oldu ve bu da tarama oranımıza yardımcı oldu.

Genel hemen çıkma oranımız %7 düştü çünkü site daha hızlı yükleniyordu ve ana bilgisayar değiştirerek sunucu hatalarını azaltabildik.

Tahmin edebileceğiniz gibi, hemen çıkma oranının düşmesiyle birlikte sitede geçirilen süre de 30 saniyenin üzerinde arttı.

Sonuç

Gördüğünüz gibi daha hızlı yüklenen bir web sitesi ziyaretçi etkileşimini artırabilir. Ele aldığımız teknikler, WordPress sitenizi optimize etmek için uygulayabileceğiniz bir dizi temel ve orta düzey iyileştirmeyi kapsamaktadır.

Umarız bu makale WordPress sitenizi hızlandırmanıza yardımcı olmuştur. Ayrıca 2015’te mutlaka sahip olmanız gereken 20 WordPress eklentisi hakkındaki yazımıza da göz atmak isteyebilirsiniz.

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.