Improve your website speed - WordCamp Jacksonville

Slides from the presentation at WordCamp Jacksonville - 2016.
This talk was for the user track.

We discussed:

Why you should care about your website's speed
How improving load time impacted well known big companies
What affects page speed
Several online tools to measure website speed and interpret the results
How fast is fast enough?
How to compare your website speed to your competitors
How to improve it
We also discussed new HTTP/2 protocol and how it impacts page load time

Transcript

1. IMPROVE YOUR WEBSITE SPEED WordCamp Jacksonville - 2016 #WCJAX IRINA BLUMENFELD @irinablumenfeld netmagik.com/wordcamp-jacksonville-2016
2. #wcjax @irinablumenfeld - netmagik.com
3. #wcjax @irinablumenfeld - netmagik.com
4. 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/ #wcjax @irinablumenfeld - netmagik.com
5. 2 sec peak load time for conversion http://loadstorm.com/2014/04/infographic-web-performance-impacts-conversion-rates/ #wcjax @irinablumenfeld - netmagik.com
6. http://searchengineland.com/google-testing-red-slow-label-search-results-slower-sites-215483 #wcjax @irinablumenfeld - netmagik.com
7. GOOGLE USES SITE SPEED IN WEB SEARCH RANKING https://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking,html #wcjax @irinablumenfeld - netmagik.com
8. PHONE RAGE #wcjax @irinablumenfeld - netmagik.com
9. #wcjax @irinablumenfeld - netmagik.com
10. Walmart 100 ms 1% revenue wpostats.com #wcjax @irinablumenfeld - netmagik.com
11. 1s 10% conversion wpostats.com #wcjax @irinablumenfeld - netmagik.com
12. 160kb 12% bounce rate Etsy wpostats.com #wcjax @irinablumenfeld - netmagik.com
13. WHAT IMPACTS PAGE SPEED? Geographic Location Network Browser Number of requests File size #wcjax @irinablumenfeld - netmagik.com
14. www.whatdoesmysitecost.com #wcjax @irinablumenfeld - netmagik.com
15. #wcjax @irinablumenfeld - netmagik.com
16. #wcjax @irinablumenfeld - netmagik.com
17. #wcjax @irinablumenfeld - netmagik.com
18. HOW DO YOU MEASURE IT? Plugin Load: P3 Plugin Performance Profiler #wcjax @irinablumenfeld - netmagik.com
19. P3 PLUGIN PERFORMANCE PROFILER #wcjax @irinablumenfeld - netmagik.com
20. 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? #wcjax @irinablumenfeld - netmagik.com
21. GTmetrix
22. GTmetrix Weekly Report #wcjax @irinablumenfeld - netmagik.com
23. webpagetest.org
24. webpagetest.org
25. webpagetest.org
26. webpagetest.org
27. webpagetest.org
28. webpagetest.org
29. webpagetest.org
30. SPEED INDEX <1000 - Golden standard Source - Paul Irish - Google Performance Engineer #wcjax @irinablumenfeld - netmagik.com
31. AVERAGE WEBSITE SPEED INDEX Source - HTTP Archive http://httparchive.org/ #wcjax @irinablumenfeld - netmagik.com
32. webpagetest.org #wcjax @irinablumenfeld - netmagik.com
33. WATERFALL CHART #wcjax @irinablumenfeld - netmagik.com
34. WATERFALL CHART http://bit.ly/how-to-read-waterfall-chart
35. HOW FAST IS FAST ENOUGH? #wcjax @irinablumenfeld - netmagik.com
36. webpagetest.org #wcjax @irinablumenfeld - netmagik.com
37. webpagetest.org
38. webpagetest.org #wcjax @irinablumenfeld - netmagik.com
39. perfwars.com #wcjax @irinablumenfeld - netmagik.com
40. perfwars.com #wcjax @irinablumenfeld - netmagik.com
41. perfwars.com #wcjax @irinablumenfeld - netmagik.com
42. perfwars.com
43. perfwars.com #wcjax @irinablumenfeld - netmagik.com
44. HOW DO YOU IMPROVE IT? #wcjax @irinablumenfeld - netmagik.com
45. LAY THE FOUNDATION Reliable Hosting www.uptimerobot.com Theme & Plugins #wcjax @irinablumenfeld - netmagik.com
46. IMPROVE 1. Optimize Images 2. Concatenate/Minify Files 3. Caching 4. Gzip 5. CDN 6. Evaluate Fonts 7. Remove Query Strings 8. Remove Bad Requests #wcjax @irinablumenfeld - netmagik.com
47. MAKE A BACKUP #wcjax @irinablumenfeld - netmagik.com
48. 1. OPTIMIZE IMAGES http://www.soasta.com/blog/page-bloat-2015-web-performance-monitoring/ #wcjax @irinablumenfeld - netmagik.com
49. http://www.soasta.com/blog/page-bloat-2015-web-performance-monitoring/
50. PUT YOUR SITE ON A DIET #wcjax @irinablumenfeld - netmagik.com
51. PUT YOUR SITE ON A DIET shouldiuseacarousel.com #wcjax @irinablumenfeld - netmagik.com
52. 1. OPTIMIZE IMAGES Before - 762 Kb After - 304 Kb Lossy Compression #wcjax @irinablumenfeld - netmagik.com
53. 1. OPTIMIZE IMAGES COMPRESS - reduce size in Kb
 EWWW Image Optimizer - WordPress Plugin
 Tinypng.com - Web Interface
 Compress JPEG & PNG images - WordPress Plugin
 Kraken.io/web-interface - Web Interface
 Kraken Image Optimizer - WordPress 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) #wcjax @irinablumenfeld - netmagik.com
54. 1. OPTIMIZE IMAGES - KRAKEN.IO
55. 1. OPTIMIZE IMAGES - EWWW PLUGIN #wcjax @irinablumenfeld - netmagik.com
56. 1. OPTIMIZE IMAGES Re-evaluate all your images Delete unnecessary Convert to SVG Use CSS3 instead of images #wcjax @irinablumenfeld - netmagik.com
57. 2. REDUCE REQUESTS - CONCATENATE 100 HTTP requests: 20 JS files 10 CSS files 1/3 of the page! #wcjax @irinablumenfeld - netmagik.com
58. 2. REDUCE REQUESTS - CONCATENATE Minqueue plugin Autoptimize plugin WP Rocket plugin Comet Cache (Pro version) - former ZenCache CSS file 1 + CSS file 2 + CSS file 3 + CSS file 4… YourSite.com/WP-Content/Resources/CSS/Combined_1234.css =
59. 2. MINIFY CODE BEFORE AFTER #wcjax @irinablumenfeld - netmagik.com
60. 3. CACHING What is 4,932,103/448,373 = #wcjax @irinablumenfeld - netmagik.com
61. 3. CACHING Plugins W3 Total Cache WP Rocket WP Fastest Cache WP Super Cache Comet Cache (formerly ZenCache) Managed Hosting Caching #wcjax @irinablumenfeld - netmagik.com
62. 4. GZIP www.giftofspeed.com/gzip-test Reduces response time by up to 90% #wcjax @irinablumenfeld - netmagik.com
63. 4. GZIP www.giftofspeed.com/gzip-test #wcjax @irinablumenfeld - netmagik.com
64. <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 4. GZIP Add this code - http://bit.ly/gzipcompress After this existing code #wcjax @irinablumenfeld - netmagik.com
65. 5. CDN CloudFlare KeyCDN MaxCDN #wcjax @irinablumenfeld - netmagik.com
66. <link href='https://fonts.googleapis.com/css? family=Open+Sans:400,300,700,800,600italic' rel='stylesheet' type='text/css'> 6. USE FEWER FONTS, FONT-WEIGHTS #wcjax @irinablumenfeld - netmagik.com
67. 7. REMOVE QUERY STRINGS http://sitename.com/wp-content/plugins/js/some_js?ver=3.4.2 #wcjax @irinablumenfeld - netmagik.com
68. 7. REMOVE QUERY STRINGS Plugin: Remove Query Strings from Static Resources insert in functions.php: http://bit.ly/removestrings or #wcjax @irinablumenfeld - netmagik.com
69. 8. REDUCE BAD REQUESTS http://www.brokenlinkcheck.com/ Plugin - Broken Link Checker #wcjax @irinablumenfeld - netmagik.com
70. LESS IS BETTER Blog posts (<5, use excerpts) Remove unused CSS Evaluate third party calls Sliders and full-screen video background #wcjax @irinablumenfeld - netmagik.com
71. 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 #wcjax @irinablumenfeld - netmagik.com
72. LOOKING AHEAD #wcjax @irinablumenfeld - netmagik.com
73. HTTP1/1.1 - HTTP/2 HTTP1/1.1 HTTP/2 #wcjax @irinablumenfeld - netmagik.com
74. HTTP/1.1 AND HTTP/2 COMPARISON Demo from Cloudflare Load Time: 1.95 s Load Time: 0.33 s #wcjax @irinablumenfeld - netmagik.com
75. HTTP/1.1 AND HTTP/2 COMPARISON HTTP/1.1 Waterfall Chart HTTP/2 Waterfall Chart SAME WEBSITE!!!! #wcjax @irinablumenfeld - netmagik.com
76. BENEFITS OF HTTP/2 Multiplexing Server Push Header Compression #wcjax @irinablumenfeld - netmagik.com
77. HTTP/2 Support in current browsers #wcjax @irinablumenfeld - netmagik.com
78. 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
79. HTTP/2 WILL NOT FIX ALL YOUR PERFORMANCE PROBLEMS #wcjax @irinablumenfeld - netmagik.com
80. IN CONCLUSION Optimize Images Concatenate/Minify Files Caching Gzip CDN Evaluate Fonts Remove Query Strings Remove Bad Requests #wcjax @irinablumenfeld - netmagik.com
81. KEEP TESTING #wcjax @irinablumenfeld - netmagik.com
82. THANK YOU Questions? Slides: netmagik.com/wordcamp-jacksonville-2016 Twitter: @irinablumenfeld E-Mail: irina@netmagik.com #wcjax