Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Editoryal Not: WPBeginner üzerindeki ortak bağlantılardan komisyon kazanıyoruz. Komisyonlar, editörlerimizin görüşlerini veya değerlendirmelerini etkilemez. Editoryal Süreç hakkında daha fazla bilgi edinin.

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.

Strangeloop Speed Case Study

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.

List25 Server Response Time After Switching to SiteGround

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.

What is Page Cache?

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.

What is a CDN

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:

List25 Sprite

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:

List25 Sprite, Edited

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:

List25 SCSS

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.

List25 Image Optimisation

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.

List25 Social Sharing Buttons

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

6

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

List25 Server Response Time After Switching to SiteGround

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.

Webmaster Tools time spent crawling page

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.

List25 Bounce Rate

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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

15 yorumBir Cevap Bırakın

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Peter says

    I love Performance Guides so much :) Thanks for Sharing with us. In Germany there not so many WordPress Blogs. But we have Great Guides too.

    But don’t forget HTTP/2 this will change a lot. I mean combine fiels no longer good for optimize and priority are comes in the game :)

  3. Gabe Livan says

    To further reduce the number of HTTP requests I recommend “WP Asset Clean Up” plugin as it removes all unnecessary styles and scripts that are not needed on the home page and other posts/pages.

  4. Patrick Evans says

    I’m using Rosehosting to host my WordPress websites and I’m very pleased with the speed and reliability of my VPS.
    From your tutorials, I learned how to make use of image sprites and how to save images optimized for web and my websites are faster now.
    Thanks!

  5. Miro says

    Switched to site ground recently and I am really happy with them. I also followed steps in this article and got quite good results except one thing. I failed in Combining Files to Reduce HTTP Requests. Plugins that are out there to do so don’t work well, moreover, they either break my site or make it extremely slow. Do you have an article / a tutorial on how to manually Combine Files to Reduce HTTP Requests? Would you suggest anyone who provides such a service (combining js and css files to reduce http requests). Thank you

  6. Jane says

    Thanks for the article guys.

    We deffo needed something to optimize our speed due to large number of high res images

    We use Wp Cache on our free photo site, but we also noticed that even though this helps, we still need to compress (resize) images cause it takes a lot of time to laod 20 images (on home page).

    So, basically, resize everything and keep high resolution images in the background (for downloads)

    Have a great weekend
    Jane

  7. Piet says

    For the images you use a sprite you say, but the images you’re using can easily be replaced with a font icon such as FontAwesome. Depending how you install that (I would use Bower), it’s not even an outgoing http request, so you could save yourself the loading of that image file (and all the calculating to make it right of course).

  8. Jay Castillo says

    Wow! Your numbers for List25 with Siteground are awesome! Did you use the GoGeek plan or is there a bigger plan not listed on their website?

    One more thing, what tool did you use to get server response times (the graph just above Google bot crawl rate)?

  9. Alberto Serrano says

    Hello , I hosted my site on site ground but didn’t knew they had a cache plugin already installed so I installed WP supercache , should I disable one and which one would be better ?
    Thanks

      • Lawrence says

        Thanks for this very helpful guide!
        Please, did you setup Maxcdn together with Siteground’s SuperCacher?
        I recently moved to siteground and will love to know how to setup Maxcdn, given that the supercacher plugin is already active on my account

        • WPBeginner Support says

          Hi Lawrence,

          When you cache content on your website, it is still served by the same server. MaxCDN, on the other hand serves your content using their content delivery network which improves your website’s performance. As for compatibility concerns, you may want to contact your hosting provider.

  10. Ian Douglas says

    Please consider letting loose your custom social sharing plugin into the wild (i.e., free to download for the public). Social sharing has always been a drain on pages, so it would be great to get a sleek and fast option.

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.