Speed Rocket your WordPress website

One of the major reasons behind online driven frustration is because of a slow website. One would not want to visit such a website the second time. Right?
What if this is the case with your website? Won’t those low numbers on analytics dull your day? Are you not concerned about how and when did you website fail? If a website doesn’t load quickly, the user would probably leave it immediately. And, a dissatisfied user is worse than not having users at all!

This talk mainly deals with how one can speed up their WordPress website and make it faster for users, thus improving their conversions. This talk begins with educating about website hosting, latency and DNS. Then, shall be discussing about how you can optimize the performance of your WordPress website, having solutions for all sort of users, from beginner to advanced users, and for different hosting scenario. Further, discussion will be about different performance optimization strategies like cutting down your queries, tweaking the code base, caching mechanism, use of cloud services, scaling up and so on. All this together shall help a newbie or even someone who has their website slow and frustrating for users, faster and better optimized. Thus, saving their day.

Session Link: https://2019.stuttgart.wordcamp.org/session/speed-rocket-your-wordpress-website/

Video: https://wordpress.tv/2019/11/10/vineet-talwar-speed-rocket-your-wordpress-website/

Transcript

1. @vineetsktalwar Speed Rocket your WordPress website BY VINEET TALWAR
2. @vineetsktalwar #wcstg
3. @vineetsktalwar
4. @vineetsktalwar
5. @vineetsktalwar
6. @vineetsktalwar Terminology • DNS • Latency • Time to Interactive • First Meaningful paint
7. @vineetsktalwar
8. @vineetsktalwar But How?
9. @vineetsktalwar
10. @vineetsktalwar
11. @vineetsktalwar Website Hosting
12. @vineetsktalwar
13. @vineetsktalwar Website Hosting • Shared • Dedicated • Cloud
14. @vineetsktalwar Go Cloud!
15. @vineetsktalwar Source: Reddit
16. @vineetsktalwar DNS
17. @vineetsktalwar
18. @vineetsktalwar Testing • Tools.pingdom.com • Lighthouse test (web.dev) • Gtmetrics • Chrome devtools
19. @vineetsktalwar
20. @vineetsktalwar Images
21. @vineetsktalwar Images LAZY LOADING RESPONSIVE IMAGES USE LIGHTER FORMATS IMAGES OPTIMIZATION IMAGES CDN
22. @vineetsktalwar Lazy Loading §Lazy loading offscreen images with JS § Lozad.js or Lazysizes § <img loading=“lazy”> § Library as fallback with loading=lazy
23. @vineetsktalwar
24. @vineetsktalwar Image Optimization • Tinypng • Smush • Optimizilla • https://images.guide
25. @vineetsktalwar webp is new black.
26. @vineetsktalwar Images CDN • S3+ CloudFront • Digital Ocean Spaces • Jetpack Photon • Akamai CDN • Fastly • Plugins: W3 Total Cache, WP Offload S3
27. @vineetsktalwar Fonts
28. @vineetsktalwar Fonts • Font Swap – • http://fonts.googleapis.com/css?family=Roboto&font- display=swap @font-face { font-family: ‘custom font’; src:url(..); font-display: swap; }
29. @vineetsktalwar Caching
30. @vineetsktalwar • Page Cache • Browser Cache • Object Cache • Database Cache • Opcache, Redis, Memcached • W3 Total Cache, WP Super Cache Caching
31. @vineetsktalwar
32. @vineetsktalwar
33. @vineetsktalwar
34. @vineetsktalwar
35. @vineetsktalwar Jake Archibald at google i/o16
36. @vineetsktalwar Go Offline
37. @vineetsktalwar PROGRESSIVE WEB APPS (PWA) Source: chunkbytes.com
38. @vineetsktalwar Service Workers Source: Medium
39. @vineetsktalwar JS and CSS
40. @vineetsktalwar Critical CSS • Inline Critical CSS: addyosmani/critical, filamentgroup/criticalcss, pocketjoso/penthouse • Load CSS Async: filamentgroup/loadCSS
41. @vineetsktalwar • High bootup time • Defer Third Party Embeds • Obese Expensive Libraries • Split the Code • Preload, preconnect, prefetch, dns-prefetch • Minify, Automate minification Javascripts
42. @vineetsktalwar Minify • Minify CSS, Minify JS • Optimize libraries with webpack: GoogleChromeLabs/webpack-libs-optimizations • Plugins: Autoptimize, W3 Total Cache
43. @vineetsktalwar Compression • Compress everything • Gzip, brotli • Configure in Web server
44. @vineetsktalwar Resource Hints • Preconnect Critical Origin • Preload Critical Scripts • Prefetch Visible Links • Priority Hints (For Future)
45. @vineetsktalwar Adaptive serving • Data saver mode • Slow network specific version • Offline first
46. @vineetsktalwar Scaling • Scale Up and Scale Forward • Load Balancer Architecture • Serverless • Elasticsearch for queries
47. @vineetsktalwar What else ? • Bloats • Unwanted Plugins • Optimize DB • Cleanup wp-admin • Expiry Header
48. @vineetsktalwar Source: knowyourmeme.com Possible Issues ?
49. @vineetsktalwar
50. @vineetsktalwar Thank You Email : vineet@firemudfm.com