🚀 WordPress Hız Optimizasyonuna dair püf noktalarını keşfetmeye hazır mısınız? https://www.meetup.com/wordpress-istanbul/events/296215806/ Etkinlik sunumu

1. WordPress Hız
Optimizasyonu
@m_uysl
me@uysalmustafa.com
uysalmustafa.com

2. Günümüzde Web Performans

3. WordPress neden yavaş?
● WordPress dinamik olarak çalışır.
○ advanced-cache.php
○ object-cache.php
● Kötü hosting.
● Kötü codebase.

4. Neye Göre? Kime Göre?
● PageSpeed Insights
○ https://pagespeed.web.dev/
○ DevTools -> Lighthouse
○ `npm i -g lighthouse`
● https://gtmetrix.com/
● https://www.webpagetest.org/

5. https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/server-response-time.js#L24-L27
1000ms+ — Çok Yavaş
350-999ms — Yavaş
250-349ms — Eh işte
100-249ms — Hızlı
0-99ms — Çok Hızlı (Anlık)

6. https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/

7. Query Monitor
https://wordpress.org/plugins/query-monitor/
● Veritabanı sorguları
● Hooks
● API İstekleri
● PHP Hataları
● Rewrite kuralları
● ….

8. > wp profile
wp package install wp-cli/profile-command
> wp profile stage bootstrap --fields=hook,time,cache_ratio --spotlight

9. ● Verinin gelecek için kullanıma
hazır beklemesi.
● Daha az iş yap.
● Daha az çalış/hesapla.
● Çıktı kişiye göre değişmesin
(mümkün olduğunca)

10. CDN
Content
Delivery
Network

11. Varnish veya Nginx
● PHP çalıştırılmadan istekler cevaplanır
● Varnish (varsayılan olarak RAM)
○ VCL - Varnish Configuration Language
○ https://wordpress.org/plugins/varnish-http-purge/
● Nginx fastcgi/proxy cache
○ https://github.com/rtCamp/nginx-helper

12. Cache Eklentileri
● Batcache
○ https://wordpress.org/plugins/batcache/
● WP Super Cache
○ https://wordpress.org/plugins/wp-super-cache/
● Wonder Cache
○ https://wordpress.org/plugins/wonder-cache/
WordPress Justice League

13. Powered Cache
● WordPress performans çatısı.
● Sayfa Önbelleği
● Nesne Önbelleği
● Dosya (JS/CSS) Optimizasyonu
● Rewrite desteği
● Cache önyükleme
https://wordpress.org/plugins/powered-cache/
https://poweredcache.com/

14. Object Cache
● MySQL yükünü hafifletir.
● Dinamik sayfa gösterimini hızlandırır.
● Giriş yapan kullanıcıya daha hızlı bir WP
deneyimi sunar.
● Ölçeklenmeye yardımcı.
wp-content/object-cache.php

15. Object Cache
● APCu
○ Tek sunucu
○ https://wordpress.org/plugins/apcu-manager/
● Memcached
○ https://wordpress.org/plugins/memcached/
● Redis
○ https://wordpress.org/plugins/wp-redis/
○ https://wordpress.org/plugins/redis-cache/
● SQLite Object Cache
○ https://wordpress.org/plugins/sqlite-object-cache/

16. Transient API
https://developer.wordpress.org/apis/transients/

17. Tarayıcı Önbelleği
Cache-Control?

18. Content-Encoding
Brotli > GZIP

19. Kötü Hosting?
● Managed? Ama ne kadar managed?
● PHP & MySQL sürümleri?
● Uptime
● Hızlı depolama, NVMe?
● Güvenlik?

20. Kötü Codebase?

21. Kaynak: https://twitter.com/kovshenin/status/1499125396641566726

22. Resource hints
● dns-prefetch = DNS
● preconnect = DNS + TCP + TLS
○ Fazladan CPU kullanımı
● prefetch = bir sonraki adımda gerekli
kaynaklar icin (CSS, JS?)
○ Trafik kullanımını artırabilir.

23. https://twitter.com/addyosmani/status/1090874825286000640

24. rel="preload"
● resource hint degil
● önemli bir kaynağı önceliklendirmek için
kullanımı uygundur

25. Oluşturmayı engelleyen
kaynakları ortadan kaldırın
● Critical CSS
○ Onemli CSS inline olarak kalsin
○ Kritik olmayanlar sonradan yüklensin.
● Defer JS
○ Tarayıcı sayfayı parse ettikten sonra JS çalıştırsın.
● Delay JS?
○ JS yüklemek (ve/veya) çalıştırmak için kullanıcı
etkileşimini bekle

26. Largest Contentful Paint
● LCP bir görsel ise (<img..) src veya
srcset HTML ciktisinda boş olmamalı.
● Background görseli ise:
○ <link rel="preload">
○ Link header
● LCP bir text-node ise:
○ <link rel="preload">
○ Link header

27. Eksik Görsel Boyutları
● Eksik width ve height değerleri
Cumulative Layout Shift (CLS)’e neden
olur ve PSI sonucunu olumsuz etkiler.
● CLS’nin PSI sonuclarına etkisi %25
○ https://googlechrome.github.io/lighthouse/scorecalc/

28. Lazy Loading
● FCP üzerinde olumsuz etkisi.
○ İlk nth görseli atla.
● Native lazy load. ~%90
● Images & Iframes

29. AVIF & WebP
● Kalite kaybı ne kadar önemli?
● LCP üzerine etkisi.
● Anında optimize
○ Cloudflare
○ Jetpack Site Accelerator
○ Powered Cache Image Optimizer
○ Imgproxy
● Görsel Optimize Eklentileri
○ EWWW
○ Smush
○ Shortpixel

30. AVIF > WebP
https://squoosh.app/

31. Performance Lab
● wordpress.org/plugins/performance-lab/
● Fetchpriority
○ WP 6.3 ile birlikte core’a eklendi
● Site sağlığı: WebP durumu
● WebP desteği (hosting destekliyorsa)
● JS/CSS kontrolü
● Autoloaded Options?

32. 3rd Party Resources
● Dışarıdaki kodun içerisine ne koydukları
belli değil.
● async yükle/çalıştır mümkünse.
● TTL?
○ timestamp + local cache
● feature flag

33. Performance Budget
● Önceden belirlenmiş metrikler
○ Görsel sayısı
○ Kullanılacak web font sayısı
○ 3rd party betik sayısı, boyutu
○ FCP
○ Sayfa yüklenme süresi
● Para yerine kullanıcı deneyimi harcıyoruz
● Farklı disiplinler: UI, UX, Dev…

34. Performance Budget
LightWallet
`npm install -g lighthouse`
https://github.com/GoogleChrome/lighthouse-ci

35. budget.json
https://web.dev/use-lighthouse-for-performance-budgets/
● FCP < 1800
● LCP < 2500
● 125KB toplam JS
● 300KB toplam
sayfa boyutu
● Harici
kaynaklara max
10 istek

36. lighthouse https://poweredcache.com/ --budget-path=./budget.json --view

37. Sorular?