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!
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
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
4. The journey of a site owner
5. #wcsea @webtw bit.ly/wcsea-speed The hopeful beginnings...
6. #wcsea @webtw bit.ly/wcsea-speed Let’s add some flavor!
7. #wcsea @webtw bit.ly/wcsea-speed Where we end up...
8. #wcsea @webtw bit.ly/wcsea-speed Do the optimizations
9. #wcsea @webtw bit.ly/wcsea-speed But, I chose a fast theme!
10. So what’s the solution?
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
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
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
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
15. #wcsea @webtw bit.ly/wcsea-speed 3 enemies of speed ★ Large page size ★ Too much JavaScript ★ Too much 3rd party content
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
17. Why is this stuff bad?
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
19. #wcsea @webtw bit.ly/wcsea-speed The problem with JavaScript
20. #wcsea @webtw bit.ly/wcsea-speed Frustration abounds
21. #wcsea @webtw bit.ly/wcsea-speed 3rd party crashers
22. #wcsea @webtw bit.ly/wcsea-speed Ads: the trans fat of the internet GTMetrix.com
23. #wcsea @webtw bit.ly/wcsea-speed Ads: the trans fat of the internet
24. #wcsea @webtw bit.ly/wcsea-speed Everything takes longer on mobile ★ Slower connections ★ Less CPU / processing power ★ Unpredictable conditions ★ Amplifies negative performance factors
25. What’s on my page? Cholesterol-test your website
26. #wcsea @webtw bit.ly/wcsea-speed What’s my page size?
27. #wcsea @webtw bit.ly/wcsea-speed How much JavaScript do I have?
28. #wcsea @webtw bit.ly/wcsea-speed How much 3rd party content is there? tools.pingdom.com
29. #wcsea @webtw bit.ly/wcsea-speed How much 3rd party content is there? WebPageTest.org
30. Where’s it all coming from? Find the problem areas
31. #wcsea @webtw bit.ly/wcsea-speed This is where we come in... ★ Plugins ★ Theme ★ Content
32. #wcsea @webtw bit.ly/wcsea-speed Find where the problems are tools.pingdom.com
33. #wcsea @webtw bit.ly/wcsea-speed Find the largest files GTMetrix.com ★ Sort by size ★ Check the file path ★ Check the domains
34. #wcsea @webtw bit.ly/wcsea-speed Find the worst JavaScript PageSpeed Insights
35. #wcsea @webtw bit.ly/wcsea-speed JavaScript impact on mobile
36. #wcsea @webtw bit.ly/wcsea-speed Find the 3rd party crashers PageSpeed Insights
37. Build with performance in mind Making speed-based decisions while building your site
38. #wcsea @webtw bit.ly/wcsea-speed Go easy on the ads Making healthy choices for your site
39. #wcsea @webtw bit.ly/wcsea-speed Be selective with fonts
40. #wcsea @webtw bit.ly/wcsea-speed Be selective with fonts
41. #wcsea @webtw bit.ly/wcsea-speed Be choosy with sliders and carousels 3 sliders...
42. #wcsea @webtw bit.ly/wcsea-speed Be choosy with sliders and carousels ...118 requests, 15MB!
43. #wcsea @webtw bit.ly/wcsea-speed Limit social widgets
44. #wcsea @webtw bit.ly/wcsea-speed If everything is featured, nothing is featured
45. #wcsea @webtw bit.ly/wcsea-speed Do you need all those videos? Every YouTube video comes with 1MB of JavaScript. Per video!
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
47. #wcsea @webtw bit.ly/wcsea-speed What questions do you have? Ask me now, or any time this weekend!