Best Practices For Faster Websites

Why is my site slow? I hear this a lot from people. In this presentation we discussed how you can test website speed, figure out what's causing loading delay, and what are the best practices you can implement to make your site load faster. We went over images, caching, 3rd parties, HTTP/2 protocol and more.

Transcript

1. BEST PRACTICES FOR
   FASTER WEBSITES
   WordPress Meetup - April 25, 2017
   Irina Blumenfeld
   @irinablumenfeld #wporl
   

   View Slide

2. >
   <
   @irinablumenfeld #WPORL netmagik.com 2
   SPEED IMPACTS
   Revenue
   Bounce Rate
   User Experience
   SEO
   Conversion
   

   View Slide

3. >
   <
   Average load time for mobile sites is 19
   sec on 3G
   @irinablumenfeld #WPORL netmagik.com
   INTERESTING STATS
   3
   Source: Google’s Double Click
   

   View Slide

4. >
   <
   53% of visits to MOBILE sites are abandoned
   after 3 seconds
   @irinablumenfeld #WPORL netmagik.com
   INTERESTING STATS
   4
   Source: Google’s Double Click
   

   View Slide

5. >
   <
   gtmetrix.com
   tools.pingdom.com
   @irinablumenfeld #WPORL netmagik.com 5
   MEASURE SPEED
   

   View Slide

6. >
   <
   Hosting
   Images
   Caching
   Number of Requests
   Third Parties
   @irinablumenfeld #WPORL netmagik.com
   WHY IS THE WEBSITE SLOW?
   6
   

   View Slide

7. >
   <
   Ads
   Weather
   Images
   Analytics
   Social Media Widgets
   Fonts & Icons
   @irinablumenfeld #WPORL netmagik.com
   THIRD PARTIES
   7
   

   View Slide

8. >
   <
   @irinablumenfeld #WPORL netmagik.com 8
   REQUEST MAP GENERATOR
   http://requestmap.webperf.tools
   

   View Slide

9. >
   <
   @irinablumenfeld #WPORL netmagik.com
   AVERAGE PAGE - 2.5 MB
   9
   Source: httparchive.org
   httparchive.org
   

   View Slide

10. >
    <
    Lossy vs Lossless
    @irinablumenfeld #WPORL netmagik.com
    IMAGE COMPRESSION
    10
    

    View Slide

11. >
    <
    @irinablumenfeld #WPORL netmagik.com
    IMAGE COMPRESSION
    11
    Compress via Web Interface
    tinypng.com
    kraken.io
    Compress with a plugin
    EWWW image optimizer plugin
    Compress JPG and PNG plugin
    Kraken plugin
    

    View Slide

12. >
    <
    @irinablumenfeld #WPORL netmagik.com
    IMAGE COMPRESSION
    12
    Before After
    

    View Slide

13. >
    <
    @irinablumenfeld #WPORL netmagik.com
    CACHING
    13
    NO CACHING
    CACHING
    

    View Slide

14. >
    <
    @irinablumenfeld #WPORL netmagik.com 14
    Plugins
    Managed Hosting (own plugin)
    WP Rocket (premium)
    WP Super Cache
    Comet Cache
    CACHING
    

    View Slide

15. >
    <
    @irinablumenfeld #WPORL netmagik.com 15
    LESS IS BETTER
    Number of Requests
    

    View Slide

16. >
    <
    @irinablumenfeld #WPORL netmagik.com 16
    HTTP/2 Protocol
    HTPP/1.1 Waterfall HTPP/2 Waterfall
    SAME WEBSITE
    

    View Slide

17. >
    <
    @irinablumenfeld #WPORL netmagik.com 17
    HTTP/2 Protocol
    DEMO FROM CLOUDFLARE
    Load Time: 0.33 s
    Load Time: 1.95 s
    

    View Slide

18. >
    <
    Hosting
    Images
    Caching
    Number of Requests
    Third Parties
    @irinablumenfeld #WPORL netmagik.com
    Performance Problems
    18
    

    View Slide

19. >
    <
    Thank you
    @irinablumenfeld #WPORL netmagik.com 19
    WHAT ARE
    
    YOUR WEBSITE
    PERFORMANCE
    CHALLENGES?
    

    View Slide