Improving site speed
When I first joined etee, the site speed was sluggish with poor Core Web Vitals and long blocking times. I was able to significantly improve metrics like Largest Contentful Paint (LCP), First Contentful Paint (FCP), and Total Blocking Time (TBT) despite structural limitations and a number of required third-party apps (JudgeMe, Klaviyo, TikTok, Facebook, etc.) I implemented implemented several performance-focused improvements to boost load speed and user engagement, including optimising images, implementing lazy loading for non-critical assets, reducing and deferring JavaScript, and leveraging browser caching wherever possible. These changes created a faster, smoother experience for users and aligned with SEO best practices — all while maintaining the functionality required for marketing and analytics. The result is a more efficient and sustainable platform that reflects etee’s mission of simplicity and sustainability.
| Metric | Aug 2024 | Apr 2025 | % Change |
|---|---|---|---|
| Performance Score | 45 | 82 | 82.2% |
| Largest Contentful Paint | 3.5 s | 2.3 s | 34.3% |
| First Contentful Paint | 0.7 s | 0.6 s | 14.3% |
| Total Blocking Time | 1,340 ms | 40 ms | 97.0% |
| Cumulative Layout Shift | 0.005 | 0.003 | 40.0% |
| Speed Index | 2.6 s | 2.4 s | 7.7% |
Dynamic pages
I transformed the approach to coding and design to be modern, flexible, and optimised for conversions. Compared to the previous hard-coded pages, I built custom dynamic sections so that product descriptions, images, and prices now sync automatically, ensuring that any updates to the products reflect immediately and eliminating outdated content that could hinder conversions. By integrating metafields, I introduced greater flexibility, allowing for customised FAQs, descriptions, and titles without disrupting product consistency. A significant technical achievement was integrating subscription functionality through Skio, which was previously challenging but essential for etee’s business model. To further enhance the user experience and encourage additional purchases, I implemented a sliding drawer cart. This feature allows users to continue browsing and adding items without being redirected to a cart page, maximising convenience and boosting conversions.
One example of this is the revamped how to page. Click the play button on each image to see the comparison between the two pages.
New how to page
Old how to page
Key Differences:
- Layout: The old page uses a simple list of questions and answers, whereas the new page uses a more modern, flexible design with product filtering and dynamic content.
- Customisation and Reusability: The new page is more customisable and reusable, while the old page is static and requires manual updates.
- Interactivity: The new page includes features like product filtering, video tutorials, and embedded product collections, enhancing user engagement and the shopping experience.
- Visuals and Organisation: The new page is visually organised, with product images, reviews, and tutorial videos in clearly defined sections, making it more user-friendly.
- Conversion opportunities: By linking to the product collection, displaying product reviews and showcasing reviews, the customer has a clear path to purchasing the product.
- Dynamic Content Management: The new page allows non-developers to update and add content through the metafields, addressing the issue of missing images and outdated content found on the old page.
- Navigation: The old page’s “scroll to” functionality is not very user-friendly, taking users all the way to the bottom with no easy way to navigate back up, whereas the new page allows users to filter and navigate seamlessly.