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
   

   View Slide

2. #wcorl @irinablumenfeld - netmagik.com
   

   View Slide

3. #wcorl @irinablumenfeld - netmagik.com
   

   View Slide

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
   

   View Slide

5. 2 sec
   peak load time
   for conversion
   http://loadstorm.com/2014/04/infographic-web-performance-impacts-conversion-rates/
   #wcorl @irinablumenfeld - netmagik.com
   

   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
   #wcorl @irinablumenfeld - netmagik.com
   

   View Slide

7. PHONE RAGE
   

   View Slide

8. #wcorl @irinablumenfeld - netmagik.com
   

   View Slide

9. Walmart
   100 ms 1%
   revenue
   wpostats.com
   #wcorl @irinablumenfeld - netmagik.com
   

   View Slide

10. 1s 10%
    conversion
    wpostats.com
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

11. 160kb 12%
    bounce rate
    Etsy
    wpostats.com
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

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
    

    View Slide

13. WHAT IMPACTS PAGE SPEED?
    Geographic Location
    Network
    Browser
    Number of requests
    File size
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

14. www.whatdoesmysitecost.com
    

    View Slide

15. View Slide

16. HOW DO YOU MEASURE IT?
    Plugin Load:
    P3 Plugin Performance Profiler
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

17. P3 PLUGIN PERFORMANCE PROFILER
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

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
    

    View Slide

19. GTmetrix
    

    View Slide

20. GTmetrix
    Weekly Report
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

21. webpagetest.org
    

    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. SPEED INDEX
    <1000 - Golden standard
    Source - Paul Irish - Google Performance Engineer
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

28. AVERAGE WEBSITE SPEED INDEX
    Source - HTTP Archive http://httparchive.org/
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

29. WATERFALL CHART
    

    View Slide

30. WATERFALL CHART
    http://bit.ly/how-to-read-waterfall-chart
    

    View Slide

31. WATERFALL CHART
    http://bit.ly/how-to-read-waterfall-chart
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

32. HOW FAST IS
    FAST ENOUGH?
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

33. webpagetest.org
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

34. webpagetest.org
    

    View Slide

35. webpagetest.org
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

36. HOW DO YOU
    IMPROVE IT?
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

37. LAY THE FOUNDATION
    Reliable Hosting
    www.uptimerobot.com
    Theme & Plugins
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

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
    

    View Slide

39. MAKE A BACKUP
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

40. 1. OPTIMIZE IMAGES
    http://www.soasta.com/blog/page-bloat-2015-web-performance-monitoring/
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

41. http://www.soasta.com/blog/page-bloat-2015-web-performance-monitoring/
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

42. PUT YOUR SITE ON A DIET
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

43. PUT YOUR SITE ON A DIET
    shouldiuseacarousel.com
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

44. 1. OPTIMIZE IMAGES
    Lossy vs Lossless
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

45. 1. OPTIMIZE IMAGES
    Before - 762 Kb After - 304 Kb
    Lossy Compression
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

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
    

    View Slide

47. 1. OPTIMIZE IMAGES - KRAKEN.IO
    

    View Slide

48. 1. OPTIMIZE IMAGES - EWWW
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

49. 1. OPTIMIZE IMAGES
    Re-evaluate all your images
    Delete unnecessary
    Convert to SVG
    Use CSS3 instead of images
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

50. 2. CACHING
    No Caching
    Caching
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

51. 2. CACHING
    Plugins:
    WP Rocket (premium)
    WP Super Cache
    Comet Cache (formerly ZenCache)
    WP Fastest Cache
    Managed Hosting Caching
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

52. 3. GZIP
    www.giftofspeed.com/gzip-test
    Reduces response time by up to 90%
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

53. 3. GZIP
    www.giftofspeed.com/gzip-test
    

    View Slide

54. 
    
    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
    3. GZIP
    Add this code - http://bit.ly/gzipcompress
    After this existing code
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

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
    

    View Slide

56. BEFORE
    AFTER
    4. CONCATENATE / MINIFY
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

57. rel='stylesheet' type='text/css'>
    5. USE FEWER FONTS, FONT-WEIGHTS
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

58. 6. CDN
    CloudFlare
    KeyCDN
    MaxCDN
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

59. 7. REDUCE BAD REQUESTS
    http://www.brokenlinkcheck.com/
    Plugin - Broken Link Checker
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

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
    

    View Slide

61. HTTP/2
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

62. HTTP1/1.1 - HTTP/2
    HTTP1/1.1 HTTP/2
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

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
    

    View Slide

64. HTTP/1.1 AND HTTP/2 COMPARISON
    HTTP/1.1 Waterfall Chart HTTP/2 Waterfall Chart
    SAME WEBSITE!!!!
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

65. HTTP/2
    Support in current browsers
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

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
    

    View Slide

67. HTTP/2
    WILL NOT FIX ALL YOUR
    PERFORMANCE PROBLEMS
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

68. IN CONCLUSION
    Optimize Images
    Caching
    Gzip
    Concatenate / Minify
    Evaluate Fonts
    CDN
    Remove Bad Requests
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

69. KEEP TESTING
    #wcorl @irinablumenfeld - netmagik.com
    

    View Slide

70. #wcorl @irinablumenfeld - netmagik.com
    designingforperformance.com
    

    View Slide

71. THANK YOU
    Slides: netmagik.com/wordcamp-orlando-2016
    Twitter: @irinablumenfeld
    E-Mail: irina@netmagik.com
    

    View Slide