WordPress Mobil Site Hızlandırma:Web Sitenizin Mobil Yükleme Süresini Nasıl İyileştirirsiniz?

7 Haziran 2021
Yıldırım SERTBAŞ
İlgili Yazılar

WordPress sitelerin hızlandırılmasında mobil tarafta genellikle istenilen optimizasyonu istediğimiz şekilde yapamayabiliriz. İş web sitelerinin mobil versiyonlarının hızlandırılmasına gelince farklı parametrelerle uğraşmak zorunda kalınabiliyor.

Fakat şunu belirtmeyelim ki masaüstü versiyonları için kullanılan tekniklerin çoğu mobil versiyonlar için de kullanılabiliyor.

Bu içeriğimde WordPress sitelerde mobil hız optimizasyonu yapılarak sayfa yükleme süreleri nasıl düşürülür, Core Web Vitals değerleri nasıl optimize edilir bunlardan bahsettim.

Hızlı Mobil Sayfa Yükleme Süresi Nedir?

Mobil artık her yerde ve Google arama motorundan yapılan aramanın %50'den fazlası mobil cihazlardan geliyor. Aşağıdaki akıllı telefon kullanıcılarının büyüme istatistiklerine bakın.

mobil kullanim istatistikleri

Yapılan araştırmaların neticesinde Google, mobil kullanıcıların %53'ü, yüklenmesi 3 saniyeden uzun süren siteleri terk ettiğini ortaya ortaya koyuyor.

Kaynak: Google: 53% of mobile users abandon sites that take over 3 seconds to load

Web Site Hızı Neden Önemlidir?

  1. İlk izlenim son izlenimdir. Bu özel konsept web siteleri için de geçerlidir. Bir kullanıcı web sitenizi ilk kez ziyaret ettiğinde, web sitenizin kalitesi ve işletmeniz hakkında bir değerlendirme yapacaklarından emin olabilirsiniz. Web sitenizde gezinmek çok yavaş veya çok zorsa, o kullanıcı geri gelmeyecektir. Bu nedenle, güçlü bir ilk izlenim bırakmak istiyorsanız, web sitenizin hızlı yüklendiğinden emin olun.
  2. Bir web sitesinin yüklenmesini beklemek isteyen insanları bulmanın tek yolu, yüksek otoriteye sahip bir site olmasıdır. Eğer değilseniz sürekli geliştirmelere ve iyileştirmelere açık olmalısınız.
  3. Dijital pazarlamanın amacı, insanları ürünlerinizi veya hizmetlerinizi denemeye çekmektir. İçerikleriniz harika olabilir. Ürünleriniz göz alıcı hizmetleriniz çok iyi olabilir ama web siteniz yerlerdeyse diğerlerinin hiç birinin önemi yoktur.
  4. Web site hızının çok kötüyse, dönüşüm oranlarınızın da aynı olması muhtemeldir. Ortalama olarak, web sitenizin yüklenmesi 3 saniyeden uzun sürerse, ziyaretlerinizin yaklaşık %40'ı sitenizi terk eder. Ne anlama geliyor? Bu, yavaş bir web sitesinin müşterileri uzaklaştıracağı anlamına gelir.

WordPress Mobil Site Hızlandırma Teknikleri

Artık WordPress mobil site hızlandırma yöntemlerine geçebiliriz.

1. Site Hızınızı Test Edin

Google'ın Think With Google sayfasındaki araçla web sitenizin 4G ve 3G bağlantısı ile ne kadar sürede açıldığını ölçebilirsiniz. Şunu ekleyeyim Google bulunduğunuz ülkedeki trafiğinize ait yeterli verisi varsa konumunuza göre sonucu verecektir. Aksi taktirde random bir makineden sonuçları size sunacaktır.

Bu durumda ben size BrowserStack'in SpeedLab aracını önerebilirim.

web site yukleme suresini olcme

Araç bulunduğunuz konuma en yakın sunucudan ölçümleri yapıyor. Ölçümler yapılırken 6 ayrı mobil cihaz üzerinden alınan verileri de detaylı bir şekilde sunuyor.

Core Web Vitals skorlarınızı da görmek için ayrıca Pagespeed İnsights ile de web sitenizi taratabilirsiniz.

2. Mobil Önbelleğe Alma Özelliğini Etkinleştirin

WP Rocket ve WP Fastest Cache gibi çoğu önbellek eklentisinin mobil önbelleğe alma seçeneği vardır.

mobil önbellekleme özelliği - wprocket

Web siteniz responsive değilse , yani otomatik olarak daha küçük ekranlara uyum sağlamıyor ve sığmıyorsa, mobil önbelleğe almayı etkinleştirmeyin. Fakat artık günümüzde çoğu tema responsive olduğu için mobil cihazlar için önbelleklemeyi kullanmanız önemlidir.

3. Uyarlanabilir Görüntüler Kullanın

Uyarlanabilir görüntüler, mobil cihazlara daha küçük görüntüler sunar. Bunun için de ShortPixel eklentisini kullanabilirsiniz.

Eklenti otomatik olarak görsellerinizi optimize edecek mobil cihazlarda görsellerinizin uyumlu çalışmasını sağlayacaktır.

4. Lazy Laoding Kullanın

Birçok önbellek ve görüntü optimizasyon eklentisi, görüntüleri mobil cihazlarda lazy loading olarak getirmenize imkan sunar.

mobil resimler için lazy loading

5. Mobilde Silder Kullanmayın

Birçok kez bahsedildi ve görüldü ki slider gerçekten hızı baltalıyor.

Onlara sahip olmakta ısrar ediyorsanız, en azından mobilden kaldırmayı düşünün ve resim sayısını azaltın. Hemen hemen tüm slider'lar WordPress'i yavaşlatır ve bu mobil için de geçerlidir. Elementor gibi bir sayfa oluşturucu kullanıyorsanız mobil cihazlarda kaydırıcıları kaldırmak için responsive modu kullanın.

6. Mobil Yönlendirme Hatalarını Düzeltin

PageSpeed Insights'ta yönlendirme hataları görüyorsanız, bunun nedenleri muhtemelen:

  • HTTPS veya WWW'ye geçtiniz ve bağlantıları güncellememiş olabilirsiniz.
  • Cloudflare'de sayfa kuralları kurmuş olabilirsiniz.
  • Kötü kodlanmış veya yanlış yapılandırılmış eklentiler yönlendirmelere neden oluyor olabilir.
  • Cloudflare SSL seçenekleri, sunucu yapılandırmanızla uyumlu olmayabilir.

Cloudflare kullanıyorsanız, “mobil cihaz ziyaretçilerini otomatik olarak mobil cihazlar için optimize edilmiş bir alt alana yönlendir” olarak mobil yönlendirme seçeneğini kullanabilirsiniz.

Bir mobil alt alan adınız (veya bu konudaki herhangi bir yönlendirmeniz) varsa, WordPress'i hiç etkilememesi için bunu sunucu düzeyinde kurmak en iyisidir. Sunucu düzeyinde yönlendirmeler, eklentilerden daha hızlıdır.

7. Daha Hızlı Hosting ile TTFB'yi Azaltın

Web.dev dokümanlarına göre tarayıcı, sunucunun ana belge isteğine yanıt vermesi için 600 ms'den fazla beklediğinde bu denetim başarısız olur. Kullanıcılar sayfaların yüklenmesinin uzun sürmesinden hoşlanmazlar. Yavaş sunucu yanıt süreleri, uzun sayfa yüklemelerinin olası nedenlerinden biridir.

Sunucu yanıt süreleri nasıl iyileştirilir

Yavaş sunucu yanıtlarının birçok olası nedeni ve dolayısıyla iyileştirmenin birçok olası yolu vardır:

  • Sayfaları daha hızlı hazırlamak için sunucunun uygulama mantığını optimize edin. Bir sunucu framework'ü kullanıyorsanız, framework'ün bunun nasıl yapılacağına dair önerileri olabilir.
  • Sunucunuzun veritabanlarını sorgulama şeklini optimize edin veya daha hızlı veritabanı sistemlerine geçiş yapın.
  • Daha fazla belleğe veya CPU'ya sahip olmak için sunucu donanımınızı yükseltin.

8. AMP Kullanın

AMP (hızlandırılmış mobil sayfalar), mobil arama sonuçlarında size bir AMP işareti verirken, mobil sayfaları daha hızlı hale getirir. Ancak AMP, mobil WordPress sitenizin tasarımını tamamen değiştirir.

Kinsta.com AMP uyguladıktan sonra mobil taraftaki dönüşümlerinin %59 oranında düştüğünü fark ettiğinde AMP'i kaldırmışlardı. Case study'e aşağıdaki linkten erişebilirsiniz.

Kaynak: https://kinsta.com/blog/disable-google-amp/

Tasarıma yardımcı olacak AMP eklentileri var, ancak yine de biraz sınırlı ve ortaya çıkan sonuçtan hayal kırıklığına uğrayabilirsiniz. Ve AMP'yi ekleyip kaldırmaya karar verirseniz, normal mobil sayfalara geri dönmek için yönlendirmeleri ayarlamanız ve başka önlemler almanız gerekeceğinden, bu ekstra bir iştir.

Eğer hala AMP kullanmak isterseniz AMP for WP eklentisini kullanabilirsiniz.

9. Mobil Layout'u Düzenlemek İçin Responsive Mod Kullanın

Sayfa oluşturucular genellikle sitenizi responsive sunmak için iyi bir iş çıkarır, ancak iyi göründüğünden emin olmak için responsive görünümü kontrol edin ve mobil cihazlarda slider'ları veya gereksiz ağır JavaScript'leri kaldırın.

10. Yavaş Bağlantılarda Görüntü Kalitesini Düşürün

Optimole gibi bazı görsel optimizasyon eklentileri, ziyaretçileriniz yavaş bir bağlantıdayken görselinizin kalitesini düşürmenize izin verir. WordPress mobil hızınızın mı (yalnızca yavaş bağlantılarda) yoksa görüntü kalitesinin mi (%40 sıkıştırmada) öncelikli olduğuna karar vermeniz gerekir.

internet hizina gore resim kalitesi ayarlama optimole

Cloudflare Pro kullanıyorsanız Mirage da bunu yapar.

Cloudflare - mirage

11. Mobil Cihazda "Daha Fazla Yorum Yükle" Düğmesini Kullanın

Gönderilerde çok fazla yorum varsa, onları bölmeyi düşünün veya "daha fazla yorum yükle" düğmesini kullanın.

wpDiscuz ve çoğu yorum eklentisi, daha fazla yükle düğmesi ve diğer hız ayarlarına sahiptir.

daha fazla yorum yükle

12. Core Web Vitals'i Optimize Edin

Google'ın yeni çekirdek güncellemesi ile resmi olarak sıralama faktörleri arasına giren Core Web Vitals skorlarınızı optimize etmek mobil site hızını etkileyen faktörlerden biridir.

Bu metrikler Largest Contentful Paint (LCP), First Contentful Paint (FCP) ve Cumulative Layout Shift (CLS)'dir.

Largest Contentful Paint (LCP): En büyük içerikli görünür öğeniz PageSpeed Insights'ta gösterilir ve genellikle büyük bir resim veya arka plan resmidir (video, animasyon veya blok düzeyinde öğe de olabilir).

Ancak çoğu durumda, genellikle sitenizin tamamına yüklenen bir resim veya arka plan resmidir.

Bu görüntüyü sıkıştırarak optimize edin, boyutunun doğru olduğundan emin olun ve daha hızlı bir görüntü formatı (ör. WebP) düşünün. Ayrıca resmi CDN'nizden sunabilir veya lazy loading'den hariç tutmayı deneyebilirsiniz. Ayrıca belirtilen boyutlarda olduğundan emin olmalısınız.

largest contentful paint arka plan resmi

Cumulative Layout Shift (CLS): Google'ın Cumulative Layout Shift Debugger aracını kullanın ve Pagespeed İnsights raporunun “avoid large layout shifts” yani büyük düzen kaymalarından kaçının kısmının kontrol edin.

Boyutları (div kodundaki resimler, videolar, iframe'ler ve reklamlar) belirterek düzen kaymalarını önleyin.

Kullandığınız fontun CCS'ine font-display:swap ekleyerek "Ensure Text Remains Visible During Webfont Load" yani fontlerın yüklenmesi sırasında metnin görünür kalmasını sağlayın sorununu düzeltin. Bunu manuel ya da Swap Google Fonts Display eklentisini kullanarak yapabilirsiniz.

First Contentful Paint (FCP): , First Contentful Paint sayfanızın yüklenmeye başlaması anından sayfanızın herhangi bir yerindeki ilk öğenin görünür olmasına kadar geçen süreyi ifade eder.

first contentful paint ornegi

First Contentful Paint skorunuzu optimize etmek için şunları yapabilirsiniz.

  1. TTFB süresini düşürün. TTFB tarayıcınızın sunucunuza sunduğu HTTP isteği gönderme, sunucunun bu isteği işleme ve cevap verme süresinin toplamıdır. Bu süre ne kadar azsa sayfalarınız o kadar hızlı yüklenir.
  2. Oluşturmayı engelleyen kaynakları kaldırın.(Eliminate Render-Blocking Resources)
  3. Kritik CSS yolu oluşturun ve bunu inline yapın.
  4. Sayfanın en üst bölgelerinde script bazlı elementler kullanmaktan kaçının. Bunlar silder eklentileri, ağır animasyonlar, sosyal medya paylaşım butonları, mega menü eklentileri ya da Google reklamları.
  5. Sayfanın üstlerinde bulunan görsel elemanlar için Lazy Load kullanmayın.
  6. Temel görüntüleri inline yapın. Logo, ikon, banner ya da arka planlar.
  7. DOM boyutunu optimize edin.
  8. Font yüklenmesi sırasında metnin görünür kalmasını sağlayın.
  9. Kritik kaynaklarınızın öncelikli olarak yüklenmesini sağlayın.(Preload, prefetch ve preconnect)
  10. Birden çok sayfa yönlendirmesinden kaçının

13. Header, Footer ve Sidebar' Sabit Kodlayın

Bunları CSS'de kodlamak, JavaScript ağırlıklı eklentilerde, Elementor'da oluşturmaktan çok daha hızlıdır.

Sayfa oluşturucular ve eklentiler çok sayıda gereksiz kod bütünleri ekleyebilir. Hedaer-footer sitenizde (hem mobil hem de masaüstü) yüklendiğinden, tüm URL'ler üzerinde büyük bir etki yaratabilecek küçük bir şeydir.

Divi ve Elementor(özellikle) fazladan CSS, JavaScript ve div wraperlar ekler. Ekstra şişkinlik, muhtemelen masaüstü ve mobil için PageSpeed Insights'ta (CSS ve JavaScript ile ilgili) birden çok öğeyi işaretleyecektir. Sayfa oluşturucunuzu kaldırmanızı ve hafif bir alternatifle değiştirmenizi öneririm.

  • Divi, Elementor ve Brizy en yavaş sayfa yapıcılardan bazılarıdır.
  • Astra + Gutenberg, GeneratePress ve Oxygen popüler alternatiflerdir.
  • Kadence ve Genesis Framework diğer alternatiflerdir.
  • Elementor kullanıyorsanız, DOM'u optimize et ve Improve Asset Loading'i etkinleştirin.
  • Elementor'u kullanmakta ısrar ediyorsanız, daha hafif olan Hello temasını kullanın.
  • Sayfa oluşturucular tarafından oluşturulan kullanılmayan varlıkları yüklenmesini engellemek için Perfmatters veya Asset CleanUp kullanın.

14. Responsive Tema Ve Eklentiler Kullanın

Responsive temaların ve eklentilerin mobil cihazlara uyum sağlaması gerekiyor.

Bu neden önemli? Çünkü tıpkı uyarlanabilir görseller gibi, web sitenizdeki diğer öğeler de mobil ekranlara uyacak şekilde otomatik olarak yeniden boyutlandırılacak ve masaüstü sürümünden daha hızlı yüklenmelerini sağlayacaktır.

Çoğu tema ve eklenti mobil uyumlu olsa da, bu sitenizin responsive olduğu anlamına gelmez. Responsive tasarım denetleyicisi kullanılarak kontrol edilebilecek hatalara sahip olabilirsiniz.

15. PHP 8.0 Kullanın

Bazı hostingler (Cloudways gibi) artık PHP 8.0'ı destekliyor.

Temalarınız/eklentileriniz uyumlu olmayabilir, bu nedenle PHP 7.4'te daha iyi durumda olabilirsiniz. Ancak, daha yüksek PHP sürümleri = daha hızlı web siteleri olduğundan, her zaman en son PHP sürümünü test edin.

16. Performanslı Bir CDN Kullanın

Cloudflare, Bunny CDN ve QUIC.cloud CDN on LiteSpeed 3 iyi seçenektir.

Bunny CDN birçok Facebook anketinde kullanıcılar tarafından önerilen bir CDN servisidir. Sabit bir fiyat üzerinden değil işlenen data kadar ödeme yaptığınız bir CDN servisidir. Kurulum ve etkinleştirme aşamaları çok basittir.

Halihazırda Cloudflare kullanıyorsanız, Automatic Platform Optimizations (APO) kullanmaya değer bir uygulamadır. Birçok kişi Facebook gruplarında harika sonuçlar elde etti ve Cloudflare, TTFB'leri önemli ölçüde azaltabileceğini ve HTML'yi önbelleğe alabileceğini söylüyor.

Cloudflare'ın APO'su, web sitenizin tamamına uç ağlarından hizmet veriyor. Cloudflare panelinden aylık 5 $ karşılığında satın alınabilir veya Cloudflare'ın eklentisi kullanılabilir.

5 Adımda Cloudflare Automatic Platform Optimization Kurulumu içeriğimde kurulum adımlarını detaylı şekilde anlattım. Kullanmayı düşünerseniz kurulumu bu içeriğimle kolayca yapabilirsiniz.

17. Eklentilerinizi Optimize Edin

Çok fazla eklenti veya herhangi bir yüksek CPU eklentisi (özellikle harici komut dosyaları kullananlar) sitenizi mobil cihazlarda bile yavaşlatabilir. Hangi eklentileri kullanacağım konusunda çok seçiciyim ve yeni bir eklenti yükledikten sonra Query Monitor kullanarak test ediyorum. Daima en hızlı, en hafif, güvenilir eklentileri kullanın.

  • Yüksek CPU kullanan eklentilerinden kaçının: Bu bağlantıdaki yavaş eklentiler listesinden uzak durun. Yaygın yavaş eklentiler arasında sosyal paylaşım eklentileri, portföyler, sliderlar, istatistikler, yedeklemeler ve diğerleri bulunur.
  • Yüksek CPU kullanan eklentileri daha hızlı olanlarla değiştirin: Biraz araştırma yapmanız gerekecek, ancak yüksek CPU eklentilerinizi daha hızlı, daha hafif eklentilerle değiştirin.
  • İhtiyacınız olmayan eklentileri silin: Eklentileri kodla değiştirebilir misiniz? Tabiki bu mümkün. (örneğin, doğrudan GA izleme kodunu ekleyebilir ya da bir tablo eklemek için HTML+CSS kullanarak bunu halledebilirsiniz. Ayrıca WordPress'in native tablolar aracı da var. Kolaylıkla oluşturabilirsiniz.
  • Modüler tasarımlı eklentiler kullanın: Bu, kullanmadığınız bir eklentideki belirli işlevleri devre dışı bırakmanıza olanak tanır ve sonuçta daha az şişkinlik ve daha yüksek hızlar sağlar.
  • En yavaş eklentilerinizi bulun: En yavaş eklentilerinizi görmek için GTmetrix Waterfall sekmesini veya Query Monitor'ü (bileşenlere göre sorgular sekmesi) kullanın. Bir eklenti GTmetrix veya Lighthouse raporunuzda birden çok kez gösteriliyorsa, bu da bir göstergedir.

18. Daha İyi Bir Önbellek Eklentisi Kullanın

Bu konuda WPRocket'ı kendi eklentiniz ile kıyaslayabilirsiniz.

Bu özelliklere sahip olmayan başka bir önbellek eklentisi kullanacak olsaydınız, yaklaşık 6-7 ekstra eklenti yüklemeniz gerekirken, WP Rocket'in tüm bu özellikleri yerleşik olarak bulunur. Bahsettiğim özellikler şunlardır:

  • Database temizliği. Ayrı bir eklenti kullanmak isterseniz Wp Optimize eklentisi
  • CCS/JS dosya optimizasyonu. Ayrı eklenti olarak Autoptimize
  • JavaScript yürütmesini geciktirme. Flying Scripts eklentisi
  • GA'yı hostta barındırma. Flying Analytics eklentisi
  • CDN entegrasyonu. Bunny CDN
  • Heartbeat kontrolü ya da ayrı olarak eklentisi
  • Linkleri ön yükleme. Perfmatters / Flying Pages
  • Resim ve videolar için Lazy Load. Optimole / WP YouTube Lyte eklentileri
  • Facebook Pixel kodunu hostta barındırma
  • Font-display:swap özelliği ya da  Swap Google Fonts Display eklentisi
  • Prefetch/preload/preconnect özellikleri ya da Pre* Party Resource Hints eklentisi

Gördüğünüz gibi epey bir eklentiden sizi kurtarmayı başarıyor WP Rocket.

Sık Sorulan Sorular

Web sitemin mobil hızını nasıl test ederim?

SpeedLab ve Pagespeed İnsights araçlarıyla ölçümleri yapabilirsiniz.

WordPress sitem mobilde neden yavaş?

Mobil siteniz yavaşsa, eklentiler, sayfa oluşturucular ve üçüncü taraf kod bütünlerinin neden olduğu ağır JavaScript'ten kaynaklanıyor olabilir. Ayrıca yanıt vermeyen görüntülerden, mobil önbelleğe alma eksikliğinden, sliderlar yüzünden ve yavaş bir TTFB'den de kaynaklanabilir.

PageSpeed Insights mobil puanım neden düşük?

PageSpeed Insights, mobil web sitenizi test etmek için yavaş bir 4G bağlantısı kullanır. Bunu sunucuda yaşanan darboğaz ile birleştirin. Web sitelerinin masaüstünde mobil cihazlardan daha iyi puan almasının nedeni budur.

Hangi WordPress eklentileri mobil hızı artırır?

Mobil hızı artırmaya adanmış bir WordPress eklentisi yoktur. Autoptimize, Asset CleanUp, ShortPixel ve sağlam bir önbellek eklentisi gibi genel optimizasyon eklentilerini kullanmayı deneyin.

Hızlandırılmış mobil sayfaları (AMP) kullanmalı mıyım?

Facebook gruplarındaki çoğu kişi, tasarımı değiştirdiği ve düzgün çalışmasının zor olabileceği için AMP'yi önermemektedir. Kinsta, AMP'yi kullandıktan sonra dönüşümlerinin %59 düştüğünü bildirdi ve sonunda onu devre dışı bırakmaya karar verdi.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir