Improve your website performance

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

Transcript

1. IMPROVE YOUR
   WEBSITE PERFORMANCE
   WordPress Meetup - 01/26/16
   IRINA BLUMENFELD
   www.twitter.com/irinablumenfeld
   www.netmagik.com/performance
   

   View Slide

2. @irinablumenfeld #perfmatters
   

   View Slide

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/
   

   View Slide

4. 2 sec
   peak load time
   for conversion
   http://loadstorm.com/2014/04/infographic-web-performance-impacts-conversion-rates/
   

   View Slide

5. http://searchengineland.com/google-testing-red-slow-label-search-results-slower-sites-215483
   

   View Slide

6. GOOGLE
   USES SITE SPEED IN WEB SEARCH RANKING
   https://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking,html
   

   View Slide

7. PHONE RAGE
   

   View Slide

8. View Slide

9. Walmart
   100 ms 1%
   revenue
   wpostats.com
   

   View Slide

10. 1s 10%
    conversion
    wpostats.com
    

    View Slide

11. 160kb 12%
    bounce rate
    Etsy
    wpostats.com
    

    View Slide

12. WHAT IMPACTS PAGE SPEED?
    Geographic Location
    Network
    Browser
    Number of requests
    File size
    

    View Slide

13. www.whatdoesmysitecost.com
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. HOW DO YOU MEASURE IT?
    Plugin Load:
    P3 Plugin Performance Profiler
    

    View Slide

18. P3 PLUGIN PERFORMANCE PROFILER
    

    View Slide

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?
    

    View Slide

20. GTmetrix
    

    View Slide

21. GTmetrix
    Weekly Report
    

    View Slide

22. webpagetest.org
    

    View Slide

23. webpagetest.org
    

    View Slide

24. webpagetest.org
    

    View Slide

25. webpagetest.org
    

    View Slide

26. webpagetest.org
    

    View Slide

27. webpagetest.org
    

    View Slide

28. SPEED INDEX
    <1000 - Golden standard
    Source - Paul Irish - Google Performance Engineer
    

    View Slide

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

    View Slide

30. webpagetest.org
    

    View Slide

31. WATERFALL CHART
    

    View Slide

32. WATERFALL CHART
    

    View Slide

33. HOW FAST IS
    FAST ENOUGH?
    

    View Slide

34. View Slide

35. webpagetest.org
    

    View Slide

36. webpagetest.org
    

    View Slide

37. webpagetest.org
    

    View Slide

38. HOW DO YOU
    IMPROVE IT?
    

    View Slide

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

    View Slide

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
    

    View Slide

41. MAKE A BACKUP
    

    View Slide

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

    View Slide

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

    View Slide

44. PUT YOUR SITE ON A DIET
    

    View Slide

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
    

    View Slide

46. 1. OPTIMIZE IMAGES
    Before - 762 Kb After - 304 Kb
    Lossy Compression
    

    View Slide

47. 1. OPTIMIZE IMAGES
    

    View Slide

48. 1. OPTIMIZE IMAGES
    

    View Slide

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

    View Slide

50. 1. OPTIMIZE IMAGES
    Re-evaluate all your images
    Delete unnecessary
    Convert to SVG
    Use CSS3 instead of images
    

    View Slide

51. 2. REDUCE REQUESTS - CONCATENATE
    100 HTTP requests:
    20 JS files
    10 CSS files
    1/3 of the page!
    

    View Slide

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
    =
    

    View Slide

53. 2. MINIFY CODE
    BEFORE
    AFTER
    

    View Slide

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

    View Slide

55. 3. CACHING
    Plugins
    W3 Total Cache
    Zen Cache
    WP Super Cache
    Managed Hosting Caching
    

    View Slide

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

    View Slide

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

    View Slide

58. 
    
    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
    
    
    # BEGIN WordPress
    
    RewriteEngine On
    RewriteBase /your-site/
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /your-site/index.php [L]
    
    # END WordPress
    .htaccess file
    4. GZIP
    Add this code - http://bit.ly/gzipcompress
    After this existing code
    

    View Slide

59. 5. CDN
    CloudFlare
    KeyCDN
    MaxCDN
    

    View Slide

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

    View Slide

61. rel='stylesheet' type='text/css'>
    7. USE FEWER FONTS, FONT-WEIGHTS
    

    View Slide

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

    View Slide

63. 8. REMOVE QUERY STRINGS
    Plugin:
    Remove Query Strings from Static Resources
    insert in functions.php:
    http://bit.ly/removestrings
    or
    

    View Slide

64. LESS IS BETTER
    Blog posts (<5, use excerpts)
    Remove unused CSS
    Evaluate third party calls
    Sliders and full-screen video background
    

    View Slide

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
    

    View Slide

66. LOOKING AHEAD
    

    View Slide

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

    View Slide

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

    View Slide

69. HTTP/1.1 AND HTTP/2 COMPARISON
    HTTP/1.1 Waterfall Chart HTTP/2 Waterfall Chart
    SAME WEBSITE!!!!
    

    View Slide

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

    View Slide

71. HTTP/2
    Support in current browsers
    

    View Slide

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
    

    View Slide

73. HTTP/2
    WILL NOT FIX ALL YOUR
    PERFORMANCE PROBLEMS
    

    View Slide

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
    

    View Slide

75. KEEP TESTING
    

    View Slide

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

    View Slide