Debugging Performance The Right Way! - WCAhmedabad2018

Transcript

1. Debugging Performance The Right Way! https://2018.ahmedabad.wordcamp.org/
2. Dhaval Shah Founder at Mindmantra Digital A digital wrangler who loves web and WordPress just like you. #WCAHMEDABAD
3. SPEED ≠ Performance
4. Performance is the experience that you provide to your end- users!
5. While optimizing, we expect this scenario...
6. At worst this..
7. But get this!
8. Performance optimization is a continuous process
9. Performance optimization needs constant monitoring
10. Start with website analytics!
11. Which metrics to analyze? ➔ Which are the regions from where your users are coming? ➔ Which browsers they use? ➔ What kind of devices they are using? ➔ How is your bounce rate vs dwell time across the site? ➔ Is there any bounce rate correlated to specific region, browser, or device? ➔ Are there specific pages / sections where user abandons an action? ➔ Site speed analytics
12. Uptime and Performance Monitoring Tools ( use in combination with Google Analytics ) ➔ updown.io (uptime monitoring) ➔ Pingdom (uptime and performance monitoring) ➔ Uptime Robot (uptime monitoring) ➔ StatusCake (uptime and performance monitoring) ➔ ManageWP (uptime and performance monitoring)
13. Use Data to plan, execute, and analyze
14. Tools to start with.. ➔ WebPageTest.org ➔ GTMetrics ➔ Pingdom Tools ➔ PageSpeedInsights ➔ Google Lighthouse
15. Key metrics https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics
17. Key factors affecting connection performance... ➔ DNS resolution delay ➔ Network latency ➔ Not using HTTP/2 ➔ SSL handshake ➔ No / Bad Browser Caching
18. How to optimize for them? ➔ Use a better / premium DNS ➔ Prefetch DNS / Preconnect ➔ Host near your target audience ➔ Use HTTP/2 with nginx ➔ Configure OCSP stapling for SSL ➔ Implement browser caching with gzip compression https://www.keycdn.com/blog/latency-optimization https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/ https://www.digitalocean.com/community/tutorials/how-to-configure-ocsp-stapling-on-apache-and-nginx
20. Key issues affecting page render ➔ Too external resources ➔ Render blocking CSS and Javascript ➔ Unoptimized Animations (both CSS & JS) ➔ Web fonts ➔ Unoptimized images
21. How to resolve them ➔ Limit external resources ➔ Inline critical CSS ➔ Defer and lazy load additional CSS ➔ Use async Javascript ➔ Use only subset of font (Weight, Language, Variant) ➔ Optimize images and lazy load https://kinsta.com/blog/critical-rendering-path/ https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp https://in.udacity.com/course/website-performance-optimization--ud884 https://in.udacity.com/course/browser-rendering-optimization--ud860
22. Optimized front-end
23. What about server side?
24. First determine which pages are critical Pages with highest traffic vs bounce rates, pages with high server response times
25. Server Logs to Rescue nginx.conf log_format extensive '$host ' '$remote_addr - $remote_user [$time_local] ' '"$request" $status $body_bytes_sent ' '"$http_referer" "$http_user_agent" ' '$upstream_cache_status - ' '$request_time'; https://docs.nginx.com/nginx/admin-guide/monitoring/logging/ https://dzone.com/articles/using-nginx-logging-for-application-performance-mo
26. Analyzing Logs https://goaccess.io/features
27. Finding slow code
28. QueryMonitor Plugin
29. QueryMonitor Plugin - Queries
30. QueryMonitor Plugin - Queries by Component
31. QueryMonitor with Debug Bar Slow Actions Plugin
32. WP-CLI to loop through plugins for p in $(wp plugin list --fields=name --status=active -- format=csv) do echo $p wp plugin deactivate $p for i in {1..5} do curl -so /dev/null -w "%{time_total}\n" \ -H "Pragma: no-cache" $(wp option get home) done wp plugin activate $p done https://wordpress.tv/2018/03/28/otto-kekalainen-improving-wordpress-performance-with- xdebug-and-php-profiling-2/
33. WP-CLI Profile Command wp-cli profile -wp profile stage --allow-root https://github.com/wp-cli/profile-command https://guides.wp-bullet.com/using-wp-cli-wp-profile-to-diagnose-wordpress- performance-issues/
34. WP-CLI Profile Command wp profile stage bootstrap --fields=hook,time,cache_ratio -- spotlight
35. PHP Code Profiling • Xdebug with webgrind (never in production) • XHProf • New Relic (Paid APM) • Blackfire (Paid* APM) * available for free for local development environments
36. PHP Code Profiling - Code Graphs Hot Paths Most Intensive Nodes (functions) https://deliciousbrains.com/finding-bottlenecks-wordpress- code/ https://wordpress.tv/2018/03/28/otto-kekalainen- improving-wordpress-performance-with-xdebug-and-php- profiling-2/
37. PHP Code Profiling - Code Graphs https://wordpress.tv/2018/03/28/otto-kekalainen-improving-wordpress-performance-with- xdebug-and-php-profiling-2/
38. What we did not cover? (because they need their own talks) • Database optimization • Cache Debugging • Performance Budget • Performance Driven Development
39. Key Takeaways • Performance is continuous process • Constantly Monitor For Performance • Plan Optimization based on data, not by hunch • Performance is part of development not an afterthought.
40. Dhaval Shah www.mindmantradigital.com dhaval@mindmantradigital.com @dhavalgshah