The Client

Velasca is a premium Italian footwear brand that combines traditional craftsmanship and digital innovation. Specializing in the production of men's shoes handmade in Italy, Velasca stands out for its attention to detail, quality materials, and a direct-to-consumer business model that eliminates middlemen, offering high-quality products at affordable prices.

With a flagship e-commerce site on the Shopify platform (velasca.com), the brand caters to an audience attentive to style, quality, and the online shopping experience.

The Challenge

Velasca's e-commerce site, while visually appealing and functional, had significant issues with performance and loading speed . The Core Web Vitals identified critical issues that negatively impacted user experience and, potentially, SEO positioning and conversion rates.

Baseline Metrics (Before Intervention)

The metrics detected through performance analysis highlighted very high loading times and interactivity:

These values, well beyond Google's recommended thresholds, compromised the user experience, especially on mobile devices and slower connections.

Problems Identified

During the code audit phase, several critical issues emerged:

1. Blocking third-party scripts : Widgets like Zendesk, Google APIs, Iubenda, and Accessibility App were loading synchronously, blocking page rendering.
2. Lazy loading : Some images and resources are loaded all at startup, even if they are not immediately visible
3. Unoptimized CSS : Lack of critical inline CSS and deferment for non-essential stylesheets
4. Heavy JavaScript bundles : React chunks loaded without optimizations
5. Slow menu rendering : Recursive snippets took ~560ms to render
6. Oversized images : slider previews with resolutions that are too large for what is actually needed

The Solution

Hoculus conducted an in-depth technical optimization project focused on two main goals:

• Drastically reduced loading times
• Improved interactivity and speed perception

Technical Interventions Implemented

1. Advanced Lazy Loading of Third-Party Scripts

Implement a deferred loading system for all non-essential external scripts:

• Zendesk Chat Widget : Delayed loading after user interaction (click, scroll, slide)
• Google APIs : Lazy loading activated only after user input
• Iubenda : Delayed loading of the cookie and privacy management system
• Accessibility App : Optimized integration to avoid render blocking

Technical solution : Create systems to prevent scripts from loading before user interaction.

2. Image Loading Optimization

• Implement lazyloading on all below-the-fold images
• Reduce the size of preview images in sliders:
  • Product Preview: from 200px to 70px
  • Preview reviews: from 300px to 60px
• Preload hero images with media queries for instant viewing
• Implementing proper sizing algorithms for container-sized rendering

3. Critical Inline CSS

Extracting and implementing critical CSS needed for above-the-fold rendering:

• Critical inline CSS for the hero image and main elements
• Defer non-critical CSS
• Optimizing media queries to avoid double downloads
• Defer scripts in templates

4. JavaScript Bundle Optimization

• Lazy loading of React chunks
• On-demand loading of bundles only when needed
• Asynchronous script insertion management

5. Code Refactoring

• Menu Navigation : Refactored the relativo al menu di navigazione snippet to eliminate recursion and reduce rendering time from ~560ms to ~160ms
• Script Consolidation : Centralize the management of all scripts in a single file for more efficient call stack management
• JavaScript Utilities : Implementation of vanilla utilities for asynchronous resource management

6. Hoculus Utils Framework

Creating a custom JavaScript utilities framework that includes:

• Asynchronous handling of script insertion from URL with callback at the end of loading
• Blacklist system for granular control of resource loading
• Event delegation for on-demand activation of features

The Results

Post-Intervention Metrics

The optimizations produced extraordinary results across all Core Web Vitals:

Improvement Analysis

• First Contentful Paint (FCP) : Reduced by 41% (from 2.4s to 1.4s) - users see meaningful content much faster
• Speed ​​Index (SI) : improved by 61% (from 11.5s to 4.9s) - significantly improved perception of speed
• Largest Contentful Paint (LCP) : Reduced by 55% (from 14.1s to 6.4s) - main element visible in less than half the time
• Time to Interactive (TTI) : improved by 61% (from 21.3s to 8.3s) - the page becomes interactive in an acceptable time
• Total Blocking Time (TBT) : reduced by 80% (from 900ms to 110ms) - drastic reduction in main thread blocking
• Cumulative Layout Shift (CLS) : kept stable with a negligible value

Business Impact

Technical improvements translate into concrete benefits:

1. Superior User Experience : Smoother and more responsive navigation across all devices
2. Improved SEO : Core Web Vitals are a Google-backed ranking factor
3. Increase Conversion Potential : Studies show that every second saved increases your conversion rate.
4. Reduction of bounce rate : users are less likely to abandon the site due to slowness
5. Mobile Competitiveness : Optimal performance on smartphones and 3G/4G connections

Working Methodology

The project was structured with a methodical approach:

1. Initial Audit : In-depth code analysis and bottleneck identification
2. Intervention Planning : definition of priorities and optimization roadmap
3. Proof of Concept Implementation : Testing each solution in the development environment
4. Testing and Validation : verifying that all features are working correctly
5. Gradual Deployment : progressive release of optimizations
6. Post-Release Monitoring : Verify metrics in production

Tasks Completed

The project included 20 technical tasks, including:

• Lazy loading implementation for third-party widgets
• Creation of Hoculus Utils framework
• Critical inline CSS implementation
• Refactoring menus and recursive snippets
• Script consolidation and optimization

Technologies and Tools

• Platform : Shopify Plus
• Languages : JavaScript (Vanilla), Liquid, HTML5, CSS3
• Framework : React (bundle optimization)
• Analysis Tools : Lighthouse, Chrome DevTools, PageSpeed ​​Insights
• Methodology : Performance Budget, Critical Rendering Path Optimization

Conclusions

The Velasca performance optimization project is a concrete example of how targeted technical interventions can radically transform the user experience of an e-commerce site, with improvements of up to 80% in critical metrics.

Hoculus has demonstrated expertise in identifying performance bottlenecks and implementing advanced solutions that balance performance, functionality, and code maintainability.

The result is a faster, more efficient, and more competitive website, without compromising on feature richness or brand aesthetics.