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!

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