Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Improve your website speed - WordCamp Jacksonville

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

9ef3b3ebab0ebef4221c9f6834cfbd7e?s=128

Irina Blumenfeld

April 16, 2016
Tweet

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