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

What's Making Our Sites Slow? We Are!

What's Making Our Sites Slow? We Are!

Website performance cannot be fixed solely with a caching or optimization plugin! As WordPress website owners, we have more control than we realize over our site's performance. I'll show you the biggest hurdles to avoid, how to find the problem areas on your site and how to make speed-based decisions. We have the power to make our sites faster.... by default!

webtrainingwheels

November 06, 2019
Tweet

Other Decks in Technology

Transcript

  1. #wcsea @webtw
    bit.ly/wcsea-speed
    What’s Making Our Sites
    Slow?
    We Are!

    View Slide

  2. #wcsea @webtw
    bit.ly/wcsea-speed
    Who am I?
    ➔ She/her/hers (why pronouns? twitter.com/webtw)
    ➔ WordPressin’ since 2004
    ➔ WordPress training since 2009
    ➔ Customer Support at WP Rocket since 2015
    ➔ 8, 177+ customers helped… and counting…
    ➔ @webtw | webtrainingwheels.com | wp-rocket.me

    View Slide

  3. #wcsea @webtw
    bit.ly/wcsea-speed
    Why isn’t my site faster?!
    ★ Caching plugins can’t fix everything!
    ★ We are our own worst enemies
    Photo courtesy: wocintechchat.com

    View Slide

  4. The journey of a site owner

    View Slide

  5. #wcsea @webtw
    bit.ly/wcsea-speed
    The hopeful beginnings...

    View Slide

  6. #wcsea @webtw
    bit.ly/wcsea-speed
    Let’s add some flavor!

    View Slide

  7. #wcsea @webtw
    bit.ly/wcsea-speed
    Where we end up...

    View Slide

  8. #wcsea @webtw
    bit.ly/wcsea-speed
    Do the optimizations

    View Slide

  9. #wcsea @webtw
    bit.ly/wcsea-speed
    But, I chose a fast theme!

    View Slide

  10. So what’s the solution?

    View Slide

  11. #wcsea @webtw
    bit.ly/wcsea-speed
    Change our mindset
    ★ Good performance doesn’t just happen to websites
    ★ We have to work at it and prioritize it
    ★ Optimizations only mitigate negative impact
    ★ They are the icing on the cake...
    ★ ...We have to make a better cake
    ★ The common factor is us

    View Slide

  12. #wcsea @webtw
    bit.ly/wcsea-speed
    What I’ve learned…and you will too
    ★ Characteristics of a fast page
    ★ The 3 greatest enemies of speed
    ★ How to find out what’s on your page
    ★ How to spot problem areas
    ★ How to make speed-oriented decisions

    View Slide

  13. #wcsea @webtw
    bit.ly/wcsea-speed
    Characteristics of a fast page
    ★ Fast by default: before optimizations
    ★ Visible and usable quickly
    ★ Mobile-friendly: works well under poor conditions

    View Slide

  14. #wcsea @webtw
    bit.ly/wcsea-speed
    Webpage ingredients
    ★ HTML
    ★ CSS
    ★ JavaScript
    ★ Images
    ★ Fonts
    ★ Video and other media
    ★ External / 3rd party content: yourdomain.com vs. otherdomain.com

    View Slide

  15. #wcsea @webtw
    bit.ly/wcsea-speed
    3 enemies of speed
    ★ Large page size
    ★ Too much JavaScript
    ★ Too much 3rd party content

    View Slide

  16. #wcsea @webtw
    bit.ly/wcsea-speed
    How much is too much?
    Assuming a good host and users on fast mobile connections:
    ★ Total page size: 1MB or less
    ★ Total JavaScript: less than 150KB
    ★ Simple 3rd party content: analytics, fonts etc: 25% or less
    ★ 3rd party ads, social widgets: as little as possible!
    Extra credit: Performance budgeting
    ★ https://perf-budget-calculator.firebaseapp.com
    ★ https://www.performancebudget.io

    View Slide

  17. Why is this stuff bad?

    View Slide

  18. #wcsea @webtw
    bit.ly/wcsea-speed
    Mo’ data, mo’ problems
    ★ Visitor requests your site in their browser
    ★ Data travels from the server to the
    visitor’s browser
    ★ More data = longer load time
    ★ Mobile = smaller funnel

    View Slide

  19. #wcsea @webtw
    bit.ly/wcsea-speed
    The problem with JavaScript

    View Slide

  20. #wcsea @webtw
    bit.ly/wcsea-speed
    Frustration abounds

    View Slide

  21. #wcsea @webtw
    bit.ly/wcsea-speed
    3rd party crashers

    View Slide

  22. #wcsea @webtw
    bit.ly/wcsea-speed
    Ads: the trans fat of the internet
    GTMetrix.com

    View Slide

  23. #wcsea @webtw
    bit.ly/wcsea-speed
    Ads: the trans fat of the internet

    View Slide

  24. #wcsea @webtw
    bit.ly/wcsea-speed
    Everything takes longer on mobile
    ★ Slower connections
    ★ Less CPU / processing power
    ★ Unpredictable conditions
    ★ Amplifies negative performance factors

    View Slide

  25. What’s on my page?
    Cholesterol-test your website

    View Slide

  26. #wcsea @webtw
    bit.ly/wcsea-speed
    What’s my page size?

    View Slide

  27. #wcsea @webtw
    bit.ly/wcsea-speed
    How much JavaScript do I have?

    View Slide

  28. #wcsea @webtw
    bit.ly/wcsea-speed
    How much 3rd party content is
    there?
    tools.pingdom.com

    View Slide

  29. #wcsea @webtw
    bit.ly/wcsea-speed
    How much 3rd party content is
    there?
    WebPageTest.org

    View Slide

  30. Where’s it all coming from?
    Find the problem areas

    View Slide

  31. #wcsea @webtw
    bit.ly/wcsea-speed
    This is where we come in...
    ★ Plugins
    ★ Theme
    ★ Content

    View Slide

  32. #wcsea @webtw
    bit.ly/wcsea-speed
    Find where the problems are
    tools.pingdom.com

    View Slide

  33. #wcsea @webtw
    bit.ly/wcsea-speed
    Find the largest files
    GTMetrix.com
    ★ Sort by size
    ★ Check the file path
    ★ Check the domains

    View Slide

  34. #wcsea @webtw
    bit.ly/wcsea-speed
    Find the worst JavaScript
    PageSpeed Insights

    View Slide

  35. #wcsea @webtw
    bit.ly/wcsea-speed
    JavaScript impact on mobile

    View Slide

  36. #wcsea @webtw
    bit.ly/wcsea-speed
    Find the 3rd party crashers
    PageSpeed Insights

    View Slide

  37. Build with performance in mind
    Making speed-based decisions while building your
    site

    View Slide

  38. #wcsea @webtw
    bit.ly/wcsea-speed
    Go easy on the ads
    Making healthy choices for your site

    View Slide

  39. #wcsea @webtw
    bit.ly/wcsea-speed
    Be selective with fonts

    View Slide

  40. #wcsea @webtw
    bit.ly/wcsea-speed
    Be selective with fonts

    View Slide

  41. #wcsea @webtw
    bit.ly/wcsea-speed
    Be choosy with sliders and carousels
    3 sliders...

    View Slide

  42. #wcsea @webtw
    bit.ly/wcsea-speed
    Be choosy with sliders and carousels
    ...118 requests, 15MB!

    View Slide

  43. #wcsea @webtw
    bit.ly/wcsea-speed
    Limit social widgets

    View Slide

  44. #wcsea @webtw
    bit.ly/wcsea-speed
    If everything is featured, nothing is featured

    View Slide

  45. #wcsea @webtw
    bit.ly/wcsea-speed
    Do you need all those videos?
    Every YouTube
    video comes with
    1MB of JavaScript.
    Per video!

    View Slide

  46. #wcsea @webtw
    bit.ly/wcsea-speed
    Our websites cost everyone
    Our websites have costs for others:
    ★ Time & attention
    ★ Money & bandwidth:
    whatdoesmysitecost.com
    ★ Environmental & carbon footprint:
    websitecarbon.com
    Speed benefits for site owners:
    ★ Better SEO / ranking
    ★ More conversions
    ★ Better user experience

    View Slide

  47. #wcsea @webtw
    bit.ly/wcsea-speed
    What questions do you have?
    Ask me now, or any time this weekend!

    View Slide