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:
- Görüntüyü arka plan görüntüsü olarak yükleme
- Simgeye ihtiyaç duyduğumuz öğenin genişliğini ve yüksekliğini tanımlayın
- 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.
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!
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
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.
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!
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
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
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).
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)?
Editorial Staff says
We are using their Dedicated server plan with the WordPress Booster package. We used Pingdom for the server response time graph.
Yönetici
Jay Castillo says
Got it, thanks!
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
Editorial Staff says
Yup you probably don’t need SuperCache. I would confirm with SiteGround support just to make sure though
Yönetici
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.
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.