WordPress Hız Optimizasyonu
•
0 likes•85 views
🚀 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
WordPress Hız Optimizasyonu
- 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)
- 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)
- 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/
- 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?
- 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.
- 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
- 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
- 37. Sorular?