WordPress'i Hızlandırmak: List25 Performansını %256 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, List25 sitemizi performansı artırmak için 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şimi, daha fazla sayfa görüntüleme ve daha iyi satışlar anlamına gelir. Bir strangeloop vaka çalışmasında, bir saniyelik bir gecikmenin size satışların %7'sini, sayfa görüntülemelerinin %11'ini ve müşteri memnuniyetinde %16'lık bir düşüşe mal olabileceği bulundu.

Peki WordPress'i nasıl hızlandırırsınız?

Hız ipuçlarının bir listesini 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. Site 1,5 milyondan fazla aboneye sahip ve YouTube kanalı çeyrek MİLYAR görüntülenmenin üzerinde izlenmeye sahip.

Sitedeki içerik çoğunlukla bant genişliğinin terabaytlarını kaplayan resimler ve videolardan oluşuyor, bu nedenle maliyetleri düşürmek, sayfa terkini azaltmak ve sitede geçirilen süreyi 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 bittiğinde, 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ırabildik, sayfa hızı performans puanımızı iyileştirebildik, toplam istek sayısını azaltabildik ve genel yükleme süresini iyileştirebildik.

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

WordPress Hosting

İyi bir web barındırıcısı, 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.

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

List25 için barındırma hizmeti olarak, bu site için genel olarak en iyi değeri sundukları için SiteGround'u kullanmaya karar vererek çeşitli yönetilen WordPress barındırma seçeneklerini inceledik.

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

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, bu da daha iyi genel performansla sonuçlanır.

web barındırma hizmetinizi ne zaman değiştirmeniz gerektiği hakkında, 7 temel göstergeden bahseden bir makale yazdık.

Barındırma hizmeti değiştirmeyi düşünüyorsanız, kesinlikle SiteGround'u deneyin. WPBeginner kullanıcıları, barındırma hizmetinde özel %60 indirim + ücretsiz alan adı kazanıyor.

Önbellekleme Eklentisi

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

Normalde bir ziyaretçi WordPress sitenize geldiğinde, sunucunuz PHP isteğini MySQL Veritabanına iletir, bu veritabanı istenen sayfayı bulur, anında oluşturur ve ziyaretçiye gösterir. Bu çok fazla kaynak tüketir. Önbellekleme olduğunda, zaman ve kaynak tasarrufu sağlar.

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

List25 sitesi için, özel olarak müşterileri için geliştirdikleri SiteGround SuperCacher eklentisini 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 Cache veya WP Super Cache gibi mevcut çözümlerden birini kullanarak WordPress sitenizde önbellek kurabilirsiniz.

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

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

CDN

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

CDN'nin ne olduğu ve neden ihtiyacınız olduğu hakkında, ayrıca bir infografik içeren tam bir makale yazdık.

CDN, tüm CSS, Javascript ve resimleri bir İçerik Dağıtım Ağından sunmamıza olanak tanır. Bu, site ziyaretçisinin konumunu belirleyerek ve içeriği ziyaretçiye en yakın sunucudan sunarak çalışır.

Premium bir CDN çözümü aramıyorsanız, Cloudflare kullanabilirsiniz.

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

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

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

Şu anda sitede belirli bir bölümde ihtiyacımız olmayan bazı küçük işlevleri yüklüyor olsak da, bu kod CDN'de önbelleğe alınır ve sonuçlar, birkaç küçük JS dosyasını yüklemekten daha az dosya isteğinin daha iyi performans sağladığını göstermektedir.

Eklentiler zamanla değiştiği için bunu düzenli olarak yapmanız gereken bir şeydir.

Resim Sprite'ları

Birkaç sosyal ve site simgesini tek bir görüntüde birleştiren bir görüntü sprite'ı kullandık:

Belirli bir simgeyi göstermemiz gerektiğinde, CSS'i şunları yapmak için kullanırdık:

1. Resmi arka plan resmi olarak yükleyin
2. Simgeye ihtiyacımız olan öğ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 şunu kullanırız:

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, çıktısını almak istediğimiz görüntünün belirli bölümünü hedeflememize yardımcı olur:

Sonuç olarak, bu resim dosyası için yalnızca ilk istek bant genişliği kullanır. CDN'ye yapılan sonraki istekler, önbelleğe alınmış (genellikle yerel) sürümün yüklenmesine neden olur ve ayrıca 6 farklı sosyal simge yerine yalnızca tek bir simge istemeniz gerekir.

JavaScript, CSS ve resimleri birleştirerek istek sayısını önemli ölçüde azalttık.

Kod Küçültme

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

List25 için, okunması kolay bir düzende geliştirmenin çeşitli alanlarında CSS dosyalarımızı yapılandırmamıza olanak tanıyan sözdizimi tabanlı bir stil sayfası olan SCSS kullanıyoruz (Sass'a Giriş).

SCSS dosyalarını tek bir CSS dosyasına derlemek için CodeKit 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 boyutunu %28 oranında azaltabildik.

Görüntü Optimizasyonu

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

WordPress temamız için, tüm resimlerin kayıpsız bir şekilde sıkıştırıldığından emin olmak için CodeKit'i kullandık. Bu, kaliteden ödün vermeden 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ş resimleri kaydetmenin önemi konusunda eğittik. Web için optimize edilmiş resimlerin nasıl kaydedileceğine dair rehberimize bakın.

Javascript'siz 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 betiklerini entegre etmek testlerimizde sayfa yükleme süresini etkilemese de, mobil bir cihazda görüntülenirken web sitesini gözle görülür şekilde yavaşlattı. Betikler eşzamansız olarak yüklenmesine rağmen, sosyal paylaşım düğmelerinin görünmesi birkaç saniye sürdü, bu da düğmeler göründüğünde gönderi içeriğinin etrafta hareket etmesine neden oldu.

Bu sorunu çözmek için (neredeyse) Javascript'siz bir çözüme geçtik. Sosyal ağın paylaşım düğmelerinin her biri özel WordPress Eklentimiz tarafından oluşturulur ve temanın Javascript'i yalnızca kullanıcı bir düğmeye tıkladığında web tarayıcı penceresini açmak için kullanılır.

Ancak, yine de bir gönderinin tüm sosyal ağlardaki toplam paylaşım sayısını görüntülemek istedik. Bunu yapmak için, her sosyal ağdan sosyal paylaşım sayılarını almak ve önbelleğe almak için küçük özel bir WordPress Eklentisi ürettik ve Post meta tablosuna kaydettik. Bu sayılar her 24 saatte bir güncellenir, bu da zaman alan sorguların sürekli çalışmadığından emin olur.

Ya Sharre gibi bir API kullanabilir ya da özelleştirme için Floating Social Bar'ı inceleyebilirsiniz.

Pingdom'un RUM'unu (Gerçek Kullanıcı İzleme) kullanarak, bu yeni paylaşım eklentisi 'gerçek' sayfa yüklenme süresini 6 saniyeden 2 saniyenin biraz üzerine düşürdü. Ayrıca üçüncü taraf betikler için yapılan istek sayısını azalttığımızdan emin olduk.

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 azaltabildik.

Bu, Google botunun bir sayfayı indirmek için harcadığı süreyi azaltmaya yardımcı oldu ve bu da tarama oranımızı artırdı.

Sitenin daha hızlı yüklenmesi sayesinde genel hemen çıkma oranımız %7 düştü ve barındırma hizmetini değiştirerek sunucu hatalarını azaltabildik.

Tahmin edebileceğiniz gibi, daha düşük hemen çıkma oranıyla sitede geçirilen süre de 30 saniyeden fazla arttı.

Sonuç

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

Umarım bu makale WordPress sitenizi hızlandırmanıza yardımcı olmuştur. Ayrıca 2015'in mutlaka sahip olunması gereken 20 WordPress eklentisi hakkındaki makalemize de göz atmak isteyebilirsiniz.

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