Looking for Suggestions to Improve Performance & UX for an E-commerce Patch Website

[Andrewsss597]

Body

Hi everyone,
I’m currently working on improving an e-commerce website focused on Leather Jackets (havrenn.com) and wanted to get some programming-side feedback from the community. The site handles product customization, image uploads, and dynamic pricing, and I’m exploring ways to optimize performance and user experience—especially on mobile.

I’m particularly interested in best practices around frontend optimization, handling custom product previews efficiently, and keeping the checkout flow fast and reliable. If anyone has experience with similar projects or suggestions on tools, frameworks, or architectural improvements, I’d really appreciate your insights.

Guidelines

• I have read and understood this category's guidelines before making this post.

[tmilost]

1. Mobile Performance

• Images:
  • Lazy-load images (WordPress 5.5+), serve WebP and responsive images, compress with Smush or EWWW.
• Scripts & CSS:
  • Unload unused assets (Asset CleanUp), inline critical CSS (Autoptimize), audit with Lighthouse.

---

2. Product Preview Speed

• Use WP Canvas or custom code with <canvas>/SVG for efficient previews, debounce updates (debounce info), offload heavy tasks to backend with REST API + Redis Cache.

---

3. Checkout Optimization

• Minimize steps (One Page Checkout), support guest checkout, enable autocomplete fields.
• Integrate easy mobile payments (Stripe, Apple Pay, Google Pay).

---

4. Dynamic Pricing

• Use plugins like WooCommerce Dynamic Pricing or Discount Rules for quantity or user role-based pricing.
• For extra charges on customizations, add options with Product Add-Ons.
• Automate sales and discounts (How-to guide).
• Monitor pricing plugin performance with Query Monitor and test with different roles/quantities to ensure accuracy.

---

5. Other Best Practices

• Add PWA/offline support.
• Use CDN and cache plugins (WP Super Cache).
• Monitor with Sentry, Hotjar, or LogRocket.
• Ensure accessibility with WP Accessibility and WCAG guidelines.

---

6. Site-Specific Feedback

• Ensure product images use WebP and lazy loading.
• Load scripts/styles only where needed; optimize preview layout for mobile.
• Refine checkout flow—use autofill, group steps, and test extensively.

---

[tmilost]

Don’t hesitate to use a proven e-commerce flow!
Copying what works saves you time and helps avoid common mistakes. Start with a solid workflow, then tweak and customize it for your brand as you go.

[tmilost]

I gave you a WordPress-based answer since it looks like your site is built on it!

[aminshahid573]

great to see you're working on optimizing your custom patches e-commerce site. here are my suggestions

frontwnd performance

For a site with image uploads and dynamic previews, consider:

• lazy loading for product images and galleries - only load what's visible
• Image optimization - use modern formats (WebP with fallbacks), compress uploads on the backend, and serve responsive images with srcset
• Code splitting - load customization tools only when needed, not on every page
• Debouncing for real-time preview updates as users customize - no need to re-render on every keystroke

product Customization and previews

This is probably your biggest performance challenge:

• canvas-based previews (HTML5 Canvas or libraries like Fabric.js) tend to perform better than DOM-heavy approaches for layering text/images on patches
• Web Workers for heavy image processing - keeps the UI thread responsive
• Thumbnail generation on the backend after upload rather than client-side
• Consider progressive rendering - show a lower-quality preview immediately, then enhance it

---

for small scree consider this

• Keep customization UI touch-friendly with larger tap targets
• Test image upload flow thoroughly - mobile uploads can be tricky (file size limits, orientation issues)
• Consider using Intersection Observer API for scroll-based loading
• Minimize JavaScript bundle size - every KB matters on mobile networks

checkout flow

• minimize redirects and keep it single-page if possible
• save state frequently to localStorage so users don't lose customization if they navigate away
• Validate early - check inventory, pricing, and customization options before the final step
• Consider a progress indicator to set expectations

tech stack sugestions

Without knowing your current setup:

• Next.js or Nuxt if you want SSR/SSG for better initial loads
• React Query or SWR for efficient data fetching and caching
• Cloudinary or imgix for image transformation/CDN
• Stripe Elements or similar for payment UI (they handle optimization)

monitoring

Set up Core Web Vitals tracking (LCP, FID, CLS) - Google Search Console is free and will tell you exactly where mobile performance suffers.

What's your current tech stack? Happy to give more specific suggestions if you share what you're working with!

[JaviLopezG]

I would work on simplifying. There is a lot of information, examples, etc. A potential client could be overwhelmed. The customer journey need to be clear-> What this page does? sell patches, you don't need to say more->How much a patch cost? It should show a simple form to calculate a price, a client doesn't want to study an Excel->... Simple questions and more simple answers.

And the order now form when you are scrolling is just annoying.

[Behruz-Coder]

Performance Improvements

1. Optimize images

Use WebP/AVIF formats
Compress product images without losing quality
Lazy-load images below the fold

2. Reduce page load time

Minify CSS, JS, and HTML
Remove unused libraries and code
Use code splitting (load only what’s needed)

3. Use caching

Browser caching for static assets
Server-side caching for product pages
CDN (Content Delivery Network) for faster global delivery

4. Improve API performance

Reduce unnecessary API calls
Use pagination for product lists
Cache frequently requested data (like popular products)

5. Optimize rendering

Avoid heavy DOM manipulation
Use virtualized lists for large product catalogs
UX Improvements

1. Simplify navigation

Clear categories (e.g., “New”, “Best Sellers”, “Discounts”)
Sticky navigation bar for easy access

2. Better product pages

High-quality images with zoom
Clear price, stock status, and delivery info
Customer reviews and ratings

3. Faster checkout process

One-page checkout
Guest checkout option
Autofill for user details

4. Mobile-first design

Responsive layout for all screen sizes
Large buttons and easy scrolling

5. Search & filtering

Smart search with autocomplete
Filters (price, category, popularity, rating)
Bonus UX + Performance
Skeleton loaders instead of blank screens
Wishlist and “Save for later” feature
Personalized recommendations (AI-based)
Reduce popups and distractions