Speed up your website and improve performance - WordCamp Orlando 2016

Slides from presentation at WordCamp Orlando 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 went over tips and techniques that will dramatically increase your page load times.

In detail we covered: why speed is important, how you can measure it, how you can compare your page speed to your competitors, and ways to improve it.

We also discussed HTTP/2 protocol and how it can benefit website performance.

Transcript

1. SPEED UP WordCamp Orlando - 2016 IRINA BLUMENFELD @irinablumenfeld #wcorl AND IMPROVE PERFORMANCE Your Site
2. #wcorl @irinablumenfeld - netmagik.com
3. #wcorl @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/ #wcorl @irinablumenfeld - netmagik.com
5. 2 sec peak load time for conversion http://loadstorm.com/2014/04/infographic-web-performance-impacts-conversion-rates/ #wcorl @irinablumenfeld - netmagik.com
6. GOOGLE USES SITE SPEED IN WEB SEARCH RANKING https://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking,html #wcorl @irinablumenfeld - netmagik.com
7. PHONE RAGE
8. #wcorl @irinablumenfeld - netmagik.com
9. Walmart 100 ms 1% revenue wpostats.com #wcorl @irinablumenfeld - netmagik.com
10. 1s 10% conversion wpostats.com #wcorl @irinablumenfeld - netmagik.com
11. 160kb 12% bounce rate Etsy wpostats.com #wcorl @irinablumenfeld - netmagik.com
12. GOLDEN RULE 80% of the end-user time is spent on the front end. https://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule #wcorl @irinablumenfeld - netmagik.com
13. WHAT IMPACTS PAGE SPEED? Geographic Location Network Browser Number of requests File size #wcorl @irinablumenfeld - netmagik.com
14. www.whatdoesmysitecost.com
16. HOW DO YOU MEASURE IT? Plugin Load: P3 Plugin Performance Profiler #wcorl @irinablumenfeld - netmagik.com
17. P3 PLUGIN PERFORMANCE PROFILER #wcorl @irinablumenfeld - netmagik.com
18. GT Metrix
 http://www.gtmetrix.com Pingdom Tools
 http://tools.pingdom.com Google Page Speed Insights
 https://developers.google.com/speed/pagespeed/insights WebPageTest.org HOW DO YOU MEASURE IT? #wcorl @irinablumenfeld - netmagik.com
19. GTmetrix
20. GTmetrix Weekly Report #wcorl @irinablumenfeld - netmagik.com
21. webpagetest.org
22. webpagetest.org
23. webpagetest.org
24. webpagetest.org
25. webpagetest.org
26. webpagetest.org
27. SPEED INDEX <1000 - Golden standard Source - Paul Irish - Google Performance Engineer #wcorl @irinablumenfeld - netmagik.com
28. AVERAGE WEBSITE SPEED INDEX Source - HTTP Archive http://httparchive.org/ #wcorl @irinablumenfeld - netmagik.com
29. WATERFALL CHART
30. WATERFALL CHART http://bit.ly/how-to-read-waterfall-chart
31. WATERFALL CHART http://bit.ly/how-to-read-waterfall-chart #wcorl @irinablumenfeld - netmagik.com
32. HOW FAST IS FAST ENOUGH? #wcorl @irinablumenfeld - netmagik.com
33. webpagetest.org #wcorl @irinablumenfeld - netmagik.com
34. webpagetest.org
35. webpagetest.org #wcorl @irinablumenfeld - netmagik.com
36. HOW DO YOU IMPROVE IT? #wcorl @irinablumenfeld - netmagik.com
37. LAY THE FOUNDATION Reliable Hosting www.uptimerobot.com Theme & Plugins #wcorl @irinablumenfeld - netmagik.com
38. IMPROVE 1. Optimize Images 2. Caching 3. Gzip 4. Concatenate / Minify 5. Evaluate Fonts 6. CDN 7. Remove Bad Requests #wcorl @irinablumenfeld - netmagik.com
39. MAKE A BACKUP #wcorl @irinablumenfeld - netmagik.com
40. 1. OPTIMIZE IMAGES http://www.soasta.com/blog/page-bloat-2015-web-performance-monitoring/ #wcorl @irinablumenfeld - netmagik.com
41. http://www.soasta.com/blog/page-bloat-2015-web-performance-monitoring/ #wcorl @irinablumenfeld - netmagik.com
42. PUT YOUR SITE ON A DIET #wcorl @irinablumenfeld - netmagik.com
43. PUT YOUR SITE ON A DIET shouldiuseacarousel.com #wcorl @irinablumenfeld - netmagik.com
44. 1. OPTIMIZE IMAGES Lossy vs Lossless #wcorl @irinablumenfeld - netmagik.com
45. 1. OPTIMIZE IMAGES Before - 762 Kb After - 304 Kb Lossy Compression #wcorl @irinablumenfeld - netmagik.com
46. 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) #wcorl @irinablumenfeld - netmagik.com
47. 1. OPTIMIZE IMAGES - KRAKEN.IO
48. 1. OPTIMIZE IMAGES - EWWW #wcorl @irinablumenfeld - netmagik.com
49. 1. OPTIMIZE IMAGES Re-evaluate all your images Delete unnecessary Convert to SVG Use CSS3 instead of images #wcorl @irinablumenfeld - netmagik.com
50. 2. CACHING No Caching Caching #wcorl @irinablumenfeld - netmagik.com
51. 2. CACHING Plugins: WP Rocket (premium) WP Super Cache Comet Cache (formerly ZenCache) WP Fastest Cache Managed Hosting Caching #wcorl @irinablumenfeld - netmagik.com
52. 3. GZIP www.giftofspeed.com/gzip-test Reduces response time by up to 90% #wcorl @irinablumenfeld - netmagik.com
53. 3. GZIP www.giftofspeed.com/gzip-test
54. <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 3. GZIP Add this code - http://bit.ly/gzipcompress After this existing code #wcorl @irinablumenfeld - netmagik.com
55. 4. CONCATENATE / MINIFY Autoptimize plugin WP Rocket WP Fastest Cache CSS file 1 + CSS file 2 + CSS file 3 + CSS file 4… YourSite.com/WP-Content/Resources/CSS/Combined_1234.css = #wcorl @irinablumenfeld - netmagik.com
56. BEFORE AFTER 4. CONCATENATE / MINIFY #wcorl @irinablumenfeld - netmagik.com
57. <link href='https://fonts.googleapis.com/css? family=Open+Sans:400,300,700,800,600italic' rel='stylesheet' type='text/css'> 5. USE FEWER FONTS, FONT-WEIGHTS #wcorl @irinablumenfeld - netmagik.com
58. 6. CDN CloudFlare KeyCDN MaxCDN #wcorl @irinablumenfeld - netmagik.com
59. 7. REDUCE BAD REQUESTS http://www.brokenlinkcheck.com/ Plugin - Broken Link Checker #wcorl @irinablumenfeld - netmagik.com
60. LESS IS BETTER Blog posts (<5, use excerpts) Remove unused CSS Evaluate third party calls Sliders and full-screen video background #wcorl @irinablumenfeld - netmagik.com
61. HTTP/2 #wcorl @irinablumenfeld - netmagik.com
62. HTTP1/1.1 - HTTP/2 HTTP1/1.1 HTTP/2 #wcorl @irinablumenfeld - netmagik.com
63. HTTP/1.1 AND HTTP/2 COMPARISON Demo from Cloudflare Load Time: 1.95 s Load Time: 0.33 s #wcorl @irinablumenfeld - netmagik.com
64. HTTP/1.1 AND HTTP/2 COMPARISON HTTP/1.1 Waterfall Chart HTTP/2 Waterfall Chart SAME WEBSITE!!!! #wcorl @irinablumenfeld - netmagik.com
65. HTTP/2 Support in current browsers #wcorl @irinablumenfeld - netmagik.com
66. 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
67. HTTP/2 WILL NOT FIX ALL YOUR PERFORMANCE PROBLEMS #wcorl @irinablumenfeld - netmagik.com
68. IN CONCLUSION Optimize Images Caching Gzip Concatenate / Minify Evaluate Fonts CDN Remove Bad Requests #wcorl @irinablumenfeld - netmagik.com
69. KEEP TESTING #wcorl @irinablumenfeld - netmagik.com
70. #wcorl @irinablumenfeld - netmagik.com designingforperformance.com
71. THANK YOU Slides: netmagik.com/wordcamp-orlando-2016 Twitter: @irinablumenfeld E-Mail: irina@netmagik.com