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

Best Practices For Faster Websites

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.

Irina Blumenfeld

April 25, 2017
Tweet

More Decks by Irina Blumenfeld

Other Decks in Technology

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