Speed up your website and improve performance - WordCamp Orlando 2016

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.

9ef3b3ebab0ebef4221c9f6834cfbd7e?s=128

Irina Blumenfeld

September 26, 2016
Tweet

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

  15. None
  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