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

Improve your website performance

Improve your website performance

Why speed matters, ways to measure it, and best practices to follow to optimize your website for best performance

9ef3b3ebab0ebef4221c9f6834cfbd7e?s=128

Irina Blumenfeld

January 26, 2016
Tweet

Transcript

  1. IMPROVE YOUR WEBSITE PERFORMANCE WordPress Meetup - 01/26/16 IRINA BLUMENFELD

    www.twitter.com/irinablumenfeld www.netmagik.com/performance
  2. @irinablumenfeld #perfmatters

  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

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

  14. None
  15. None
  16. None
  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. SPEED INDEX <1000 - Golden standard Source - Paul Irish

    - Google Performance Engineer
  29. SPEED INDEX Source - HTTP Archive http://httparchive.org/

  30. webpagetest.org

  31. WATERFALL CHART

  32. WATERFALL CHART

  33. HOW FAST IS FAST ENOUGH?

  34. None
  35. webpagetest.org

  36. webpagetest.org

  37. webpagetest.org

  38. HOW DO YOU IMPROVE IT?

  39. LAY THE FOUNDATION Reliable Hosting www.uptimerobot.com Theme & Plugins

  40. IMPROVE 1. Optimize Images 2. Concatenate/Minify Files 3. Caching 4.

    Gzip 5. CDN 6. Reduce Bad Requests 7. Evaluate Fonts 8. Remove Query Strings
  41. MAKE A BACKUP

  42. 1. OPTIMIZE IMAGES http://www.soasta.com/blog/page-bloat-2015-web-performance-monitoring/

  43. http://www.soasta.com/blog/page-bloat-2015-web-performance-monitoring/

  44. PUT YOUR SITE ON A DIET

  45. 1. OPTIMIZE IMAGES COMPRESS - reduce size in Kb
 EWWW

    Image Optimizer - Free WordPress Plugin
 Compress JPEG & PNG images - Free WordPress Plugin
 Kraken.io - online tool and paid WP Plugin
 ImageOptim - Free Mac app
 SCALE/RESIZE - set max width/height
 Imsanity - Free WordPress Plugin
 Compress JPEG & PNG images - Free WordPress Plugin
 Kraken.io - Web Interface PRO
  46. 1. OPTIMIZE IMAGES Before - 762 Kb After - 304

    Kb Lossy Compression
  47. 1. OPTIMIZE IMAGES

  48. 1. OPTIMIZE IMAGES

  49. Responsive Images 101 Article Series - http://bit.ly/srcsetimages Responsive images in

    WordPress 4.4
  50. 1. OPTIMIZE IMAGES Re-evaluate all your images Delete unnecessary Convert

    to SVG Use CSS3 instead of images
  51. 2. REDUCE REQUESTS - CONCATENATE 100 HTTP requests: 20 JS

    files 10 CSS files 1/3 of the page!
  52. 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 =
  53. 2. MINIFY CODE BEFORE AFTER

  54. 3. CACHING What is 2,241,865/448,373 =

  55. 3. CACHING Plugins W3 Total Cache Zen Cache WP Super

    Cache Managed Hosting Caching
  56. 4. GZIP www.giftofspeed.com/gzip-test Reduces response time by up to 90%

  57. 4. GZIP www.giftofspeed.com/gzip-test

  58. <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
  59. 5. CDN CloudFlare KeyCDN MaxCDN

  60. 6. REDUCE BAD REQUESTS http://www.brokenlinkcheck.com/ Plugin - Broken Link Checker

  61. <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

  62. 8. REMOVE QUERY STRINGS http://sitename.com/wp-content/plugins/js/some_js?ver=3.4.2

  63. 8. REMOVE QUERY STRINGS Plugin: Remove Query Strings from Static

    Resources insert in functions.php: http://bit.ly/removestrings or
  64. LESS IS BETTER Blog posts (<5, use excerpts) Remove unused

    CSS Evaluate third party calls Sliders and full-screen video background
  65. 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
  66. LOOKING AHEAD

  67. HTTP1/1.1 - HTTP/2 HTTP1/1.1 HTTP/2

  68. HTTP/1.1 AND HTTP/2 COMPARISON Demo from Cloudflare Load Time: 1.95

    s Load Time: 0.33 s
  69. HTTP/1.1 AND HTTP/2 COMPARISON HTTP/1.1 Waterfall Chart HTTP/2 Waterfall Chart

    SAME WEBSITE!!!!
  70. BENEFITS OF HTTP/2 Multiplexing Server Push Header Compression

  71. HTTP/2 Support in current browsers

  72. 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
  73. HTTP/2 WILL NOT FIX ALL YOUR PERFORMANCE PROBLEMS

  74. IN CONCLUSION 1. Optimize Images 2. Reduce Requests 3. Add

    Gzip 4. Caching 5. Use CDN 6. Reduce Bad Requests 7. Evaluate Fonts 8. Remove Query Strings
  75. KEEP TESTING

  76. THANK YOU Questions? www.twitter.com/irinablumenfeld www.netmagik.com/performance