Improving Website's Performance at WordCamp Miami 2016

Slides from presentation at WordCamp Miami 2016

Nobody likes waiting for a slow site. You have less than 5 seconds to engage your customer before they leave. With users increasingly on the go and having mobile connections of varying speeds, page-delivery performance has become more critical.

In this presentation we’ll go over tips and techniques that can dramatically increase your site performance. We’ll also go over some examples of before and after site optimization.

In detail we’ll cover:

Why speed matters – why should you care about website performance
How you can measure it – a variety of online tools to measure your page load time, page size, and any bottlenecks.
Ways to improve it – expect to learn best practices for optimizing and loading images, using gzip, caching, reducing requests and more.
We’ll also discuss new HTTP/2 protocol and how it can benefit your business.

Transcript

1. IMPROVE YOUR WEBSITE PERFORMANCE WordCamp Miami - 2016 IRINA BLUMENFELD @irinablumenfeld www.netmagik.com/wordcampmiami2016
2. @irinablumenfeld #wcmia
3. 74% of mobile users will abandon a site if it takes longer then 5 sec to load http://loadstorm.com/2014/04/infographic-web-performance-impacts-conversion-rates/
4. 2 sec peak load time for conversion http://loadstorm.com/2014/04/infographic-web-performance-impacts-conversion-rates/
5. http://searchengineland.com/google-testing-red-slow-label-search-results-slower-sites-215483
6. GOOGLE USES SITE SPEED IN WEB SEARCH RANKING https://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking,html
7. PHONE RAGE
9. Walmart 100 ms 1% revenue wpostats.com
10. 1s 10% conversion wpostats.com
11. 160kb 12% bounce rate Etsy wpostats.com
12. WHAT IMPACTS PAGE SPEED? Geographic Location Network Browser Number of requests File size
13. www.whatdoesmysitecost.com
17. HOW DO YOU MEASURE IT? Plugin Load: P3 Plugin Performance Profiler
18. P3 PLUGIN PERFORMANCE PROFILER
19. GT Metrix
 http://www.gtmetrix.com Pingdom Tools
 http://tools.pingdom.com/fpt/ Google Page Speed Insights
 https://developers.google.com/speed/pagespeed/insights/ WebPageTest.org HOW DO YOU MEASURE IT?
20. GTmetrix
21. GTmetrix Weekly Report
22. webpagetest.org
23. webpagetest.org
24. webpagetest.org
25. webpagetest.org
26. webpagetest.org
27. webpagetest.org
28. webpagetest.org
29. SPEED INDEX <1000 - Golden standard Source - Paul Irish - Google Performance Engineer
30. AVERAGE WEBSITE SPEED INDEX Source - HTTP Archive http://httparchive.org/
31. webpagetest.org
32. WATERFALL CHART
33. WATERFALL CHART http://bit.ly/how-to-read-waterfall-chart
34. HOW FAST IS FAST ENOUGH?
35. webpagetest.org
36. webpagetest.org
37. webpagetest.org
38. perfwars.com
39. perfwars.com
40. perfwars.com
41. perfwars.com
42. perfwars.com
43. HOW DO YOU IMPROVE IT?
44. LAY THE FOUNDATION Reliable Hosting www.uptimerobot.com Theme & Plugins
45. IMPROVE 1. Optimize Images 2. Concatenate/Minify Files 3. Defer/Async JS 4. Caching 5. Gzip 6. CDN 7. Evaluate Fonts 8. Remove Query Strings 9. Remove Bad Requests 10. Prefetch/Prerender
46. MAKE A BACKUP
47. 1. OPTIMIZE IMAGES http://www.soasta.com/blog/page-bloat-2015-web-performance-monitoring/
48. http://www.soasta.com/blog/page-bloat-2015-web-performance-monitoring/
49. PUT YOUR SITE ON A DIET
50. 1. OPTIMIZE IMAGES COMPRESS - reduce size in Kb
 EWWW Image Optimizer - WordPress Plugin
 Compress JPEG & PNG images - WordPress Plugin
 Kraken.io - Web Interface and WP Plugin
 ImageOptim - Free Mac app
 SCALE/RESIZE - set max width/height
 Imsanity - WordPress Plugin
 Compress JPEG & PNG images - WordPress Plugin
 Kraken.io - PRO (Web Interface)
51. 1. OPTIMIZE IMAGES Before - 762 Kb After - 304 Kb Lossy Compression
52. 1. OPTIMIZE IMAGES
53. 1. OPTIMIZE IMAGES Re-evaluate all your images Delete unnecessary Convert to SVG Use CSS3 instead of images
54. 2. REDUCE REQUESTS - CONCATENATE Minqueue plugin Autoptimize plugin ZenCache (Pro version) CSS file 1 + CSS file 2 + CSS file 3 + CSS file 4… YourSite.com/WP-Content/Resources/CSS/Combined_1234.css =
55. 2. MINIFY CODE BEFORE AFTER
56. 3. DEFER / ASYNC JAVASCRIPT Render-Blocking JavaScript <script type=“tex/javascript” defer async src=“//yourwebsite.com/wp-content/file.js”></script>
57. 3. DEFER / ASYNC JAVASCRIPT Add Async in functions.php - http://bit.ly/asyncJS
58. 4. CACHING Plugins W3 Total Cache Zen Cache WP Rocket WP Super Cache Managed Hosting Caching
59. 5. GZIP www.giftofspeed.com/gzip-test Reduces response time by up to 90%
60. 5. GZIP www.giftofspeed.com/gzip-test
61. <IfModule deflate_module> <IfModule filter_module> AddOutputFilterByType DEFLATE text/plain text/html AddOutputFilterByType DEFLATE text/xml application/xml application/xhtml+xml application/xml-dtd AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml image/svg+xml AddOutputFilterByType DEFLATE text/css text/javascript application/javascript application/x-javascript AddOutputFilterByType DEFLATE font/otf font/opentype application/font-otf application/x-font-otf AddOutputFilterByType DEFLATE font/ttf font/truetype application/font-ttf application/x-font-ttf </IfModule> </IfModule> # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase /your-site/ RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /your-site/index.php [L] </IfModule> # END WordPress .htaccess file 5. GZIP Add this code - http://bit.ly/gzipcompress After this existing code
62. 6. CDN CloudFlare KeyCDN MaxCDN
63. <link href='https://fonts.googleapis.com/css? family=Open+Sans:400,300,700,800,600italic' rel='stylesheet' type='text/css'> 7. USE FEWER FONTS, FONT-WEIGHTS
64. 8. REMOVE QUERY STRINGS http://sitename.com/wp-content/plugins/js/some_js?ver=3.4.2
65. 8. REMOVE QUERY STRINGS Plugin: Remove Query Strings from Static Resources insert in functions.php: http://bit.ly/removestrings or
66. 9. REDUCE BAD REQUESTS http://www.brokenlinkcheck.com/ Plugin - Broken Link Checker
67. 10. PREFETCH OR PRERENDER Plugin: Per page add to head <link rel=“dns-prefetch” href=“hostname_to_resolve.com”> <link rel=“prefetch” href=“/images/big.jpeg”> <link rel=“prerender” href=“//yoursite.com/pricing-page”> Pre-resolve DNS hostnames for assets later in the page Place asset in cache Load entire page in the background - Resource Heavy!
68. LESS IS BETTER Blog posts (<5, use excerpts) Remove unused CSS Evaluate third party calls Sliders and full-screen video background
69. Case Study Before Removed image slider - replaced with 1 image Removed query strings Added Gzip Added Minqueue Plugin to combine CSS and JS Cleaned up CSS After
70. LOOKING AHEAD
71. HTTP1/1.1 - HTTP/2 HTTP1/1.1 HTTP/2
72. HTTP/1.1 AND HTTP/2 COMPARISON Demo from Cloudflare Load Time: 1.95 s Load Time: 0.33 s
73. HTTP/1.1 AND HTTP/2 COMPARISON HTTP/1.1 Waterfall Chart HTTP/2 Waterfall Chart SAME WEBSITE!!!!
74. BENEFITS OF HTTP/2 Multiplexing Server Push Header Compression
75. HTTP/2 Support in current browsers
76. HTTP/2 + HTTPS https://tools.keycdn.com/http2-test Chrome Browser Extension: http://bit.ly/http2-chrome Firefox Browser Extension: http://bit.ly/http2-firefox
77. HTTP/2 WILL NOT FIX ALL YOUR PERFORMANCE PROBLEMS
78. IN CONCLUSION Optimize Images Concatenate/Minify Files Defer/Async JS Caching Gzip CDN Evaluate Fonts Remove Query Strings Remove Bad Requests Prefetch/Prerender
79. KEEP TESTING
80. THANK YOU Questions? Twitter: @irinablumenfeld www.netmagik.com/WordCampMiami2016