Content
Welcome to our Web Performance Audit series, where we analyze real-world websites to uncover opportunities for performance optimization. Each post will dive into a selected website to highlight its strengths and identify areas for improvement. Since site speed is critical to user experience, SEO rankings, and conversions, these audits provide valuable insights for enhancing digital success. Let's get started!
simpleorganic.com.br is a Brazilian ecommerce store powered by Shopify that is dedicated to offering organic and sustainable products. The website prioritizes performance, usability, and accessibility to deliver a seamless shopping experience for its users. Based on Semrush analysis, the majority of its traffic (98.89%) originates from Brazil, with a total of 446.15K monthly visits across all devices. Mobile users dominate the audience, accounting for 71.26% of traffic, while desktop users contribute 28.74%. simpleorganic.com.br is committed to providing an engaging and intuitive digital experience that resonates with its environmentally conscious audience.
Current setup overview
Platform: Shopify
Hosting Provider: Managed Shopify hosting
One of the key advantages of Shopify as a platform is its built-in hosting solution, which is specifically optimized for eCommerce performance. By default, Shopify provides secure, fast, and reliable hosting for all its stores, ensuring that even high-traffic sites can operate smoothly without requiring additional infrastructure.
Current Core Web Vitals
simpleorganic.com.br is only passing Core Web Vitals on desktop, with mobile performance falling short due to high Interaction to Next Paint (INP). Given that mobile traffic accounts for 71.26% of its audience, this is a critical issue. Optimizing mobile interactivity by reducing input delays and improving JavaScript execution will enhance user experience and ensure better performance for the majority of visitors.
Detailed Performance Insights
Hosting and CDN
Server Response Time: 0.3s on Desktop and 0.7s on Mobile
CDN Usage: ✅
The server response time (aka Time to First Byte or TTFB) of 0.3s on desktop and 0.7s on mobile is acceptable and aligns with typical performance standards, particularly with CDN usage in place. While there’s always room for improvement, this response time is sufficient to support a smooth user experience for most visitors.
Caching
Caching helps make websites load faster by saving parts of the site for future visits, like images and data, so they don’t need to be downloaded again every time. This means a better experience for users and less work for the website’s server.
Browser Caching: ✅
Cache Duration: 365 days
Page caching: ❌
Browser caching is great because it allows the user's browser to store website data, like images and scripts, for up to 365 days. This means that when a user returns to the site, it loads faster because it doesn’t need to download everything again. However, page caching, which saves entire pages to be served quickly without regenerating them from scratch, is not available on Shopify storefronts.
Shopify is a managed eCommerce platform, meaning it takes care of hosting, security, and performance for its users. While this ensures the site is fast and reliable, the lack of customizable page caching means that each page has to be reloaded entirely every time it’s accessed. This can slow things down a bit, especially during high-traffic periods.
Asset Optimization
Assets include all the files that make your website look good and function interactively, such as CSS (styles), JavaScript (interactive elements), images, and fonts. Optimizing these assets is crucial because it directly impacts how fast your website loads and how smoothly it performs.
CSS and JavaScript
Best practices in CSS and JavaScript optimization include minifying files to reduce their size and bundling them together to limit the total number of network requests. Also, it’s very beneficial to remove unused code to avoid loading unnecessary resources and defer non-critical scripts so they load only when needed. Let’s see how simpleorganic.com.br is doing in this respect:
Minified: Mixed
Bundled: ❌
Unused CSS/JS Detected: ✅
The website uses minified versions of some JavaScript and CSS files, like lazysizes.min.js and app.min.css, which help improve loading times by reducing file sizes. However, instead of bundling these files together, the site serves many individual files, leading to more network requests and slower performance. Additionally, some scripts and styles are being loaded unnecessarily, increasing the page size without adding any real value. By combining files, removing unused code, and delaying non-essential resources, the website can reduce loading times, improve efficiency, and provide a smoother experience for visitors.
Fonts
Best practices in font optimization include the usage of modern formats like WOFF2 for faster loading and preloading important fonts to make them available quickly. Subset fonts to include only the characters your site needs, reducing file size and load times. Always set a fallback font to keep your site readable if custom fonts don’t load.
WOFF2 or WOFF used: ✅
TTF or EOT avoided: ✅
Critical fonts preloaded: ✅
Font subsetting: ❌
Fallback font: ✅
simpleorganic.com.br is doing quite well in the font optimization area, the only piece missing is font subsetting to include only the characters their site uses. This reduces font file sizes, speeds up load times, and improves performance. Tools like Glyphhanger or font services like Google Fonts can help create subsets easily. It’s a simple way to make your site faster without sacrificing quality.
Images
Optimizing visuals includes using modern web formants (WebP or AVIF) and resizing them to display size. Also, it’s worthwhile to specify explicit width and height attributes to avoid layout shifts during page loading. Lazy loading below-the-fold images and preloading above-the-fold visuals ensures improved LCP and better user experience.
Next-gen formats (WebP/AVIF)? ✅
Correct image sizing? ✅
Explicit width and height attributes <img>: ❌
Lazy Loading? ✅
Image compression? ✅
Images cached with Cache-Control headers? ✅
Are critical images preloaded? ❌
Is a CDN used to serve images? ✅
To improve the performance of simpleorganic.com.br, there are two simple but impactful changes you can make. First, ensure all <img> elements include explicit width and height attributes. This small adjustment helps stabilize the page layout, reducing those frustrating visual shifts and boosting your Core Web Vitals score, particularly for Cumulative Layout Shift (CLS). Second, consider preloading critical images, such as those in the hero section or above-the-fold content, using <link rel="preload>. This allows the browser to prioritize loading these key visuals, enhancing the perceived speed of the site. Together, these quick fixes can significantly improve loading speed and overall user experience without requiring much effort.
Third-party scripts
Best practices for improving website performance include minimizing third-party scripts to only those essential for core functionality. Non-critical scripts should be deferred or loaded asynchronously to ensure they don’t block page rendering. Optimizing caching is also key, as it reduces repeated downloads and speeds up load times. Regular audits of third-party scripts are crucial to identify and remove unused or redundant ones, which can unnecessarily slow down your site and negatively affect performance.
Number of third-party scripts: 27
Most impactful third-party scripts:
Flip Shopify script
URL: flip-shopify.js
Response Time: 1207.57 ms
Response Size: 28,264 bytes
DA Restock script
URL: da-restock.js
Response Time: 842.98 ms
Response Size: 22,711 bytes
Zotabox Widgets script
URL: widgets.js
Response Time: 680.18 ms
Response Size: 117,507 bytes
Google Tag Manager script
URL: gtag.js
Response Time: 367.49 ms
Response Size: 419,082 bytes
Recommendations to mitigate impact:
Defer or async loads non-essential scripts like Flip Shopify, DA Restock, and Zotabox Widgets to prioritize critical content.
Evaluate necessity: Assess if all these scripts are required for your website’s functionality and user experience. Remove redundant scripts if possible.
Optimize caching: Ensure these scripts leverage long Cache-Control headers to reduce repeat load times.
Consider alternatives: Some functionalities (like tracking or widgets) may have lighter-weight alternatives.
HTML performance and accessibility
Optimizing HTML begins with clean, well-structured code that incorporates semantic elements like <header> and <main> to enhance readability and usability. Minifying HTML reduces file size, while enabling compression improves load times. Including appropriate meta tags ensures better optimization and performance. Accessibility is also a key consideration, with meaningful alt attributes for images and strong text contrast to ensure readability. These practices make your site faster, more user-friendly, and accessible to a wider audience.
Performance:
Minification: ❌
Gzip, Brotli, or zStandard Compression: ✅
Optimized DOM Size: ❌
The site uses Brotli compression, which helps reduce file sizes and improve loading speed. However, HTML is not minified, leaving extra spaces and unnecessary code that could be cleaned up to enhance performance. The DOM size is larger than recommended, which can slow down rendering, particularly on mobile devices. Addressing these issues will make the site faster and more efficient.
Accessibility:
Accessibility means making your website usable for everyone. It improves the user experience, ensures inclusivity, and even boosts SEO by creating well-structured, readable content.
Semantic HTML: ✅
Is the meta tag configured correctly: ✅
Alt Attributes: ✅
- All meaningful images have descriptive alt attributes: ❌
- Decorative images marked with empty alt: ✅
Effective contrast and Color ratio: ❌
Screen Reader Compatibility:❌
Analysis reveals several opportunities to enhance accessibility on the site. Adding descriptive alt text to meaningful images is recommended to ensure better support for screen reader users. Adjusting contrast ratios would significantly improve readability, especially for visitors with visual impairments. Additionally, improving screen reader compatibility would create a smoother and more inclusive browsing experience. These adjustments will make the site more welcoming and accessible to everyone.
Recommendations summary
We use three levels of priority to categorize tasks based on their impact and urgency to streamline optimization efforts.
High Priority tasks address critical issues directly affecting Core Web Vitals (CWV), such as loading, interactivity, or stability metrics, and require immediate attention to meet essential performance standards.
Medium Priority tasks focus on overall performance improvements, offering significant benefits to speed, efficiency, and user experience, though they are not as time-sensitive.
Finally, Low Priority tasks involve smaller adjustments or enhancements that refine the site's usability and polish its appearance. While not critical, these contribute to a better overall experience for users. This framework ensures clear prioritization to achieve optimal results efficiently.
High priority:
Remove unused CSS and JavaScript:
Removing unused styles and scripts reduces the payload, improving load times and reducing LCP.Third-Party Script Optimization:
Scripts like Flip Shopify, DA Restock, and Zotabox Widgets significantly impact response times. Deferring or removing non-critical scripts will reduce overhead and improve page speed.
Medium priority:
Bundling of Assets:
Multiple CSS and JavaScript files are served individually, increasing HTTP requests. Bundling assets will streamline delivery and improve performance.Explicit Width and Height Attributes for <img>:
Missing explicit dimensions for images cause layout shifts, negatively impacting the Cumulative Layout Shift (CLS) Core Web Vitals score. Fixing this can provide an immediate improvement in visual stability and user experience.Font Subsetting:
Fonts are not subsetted to include only the characters used on the website, resulting in unnecessary data being loaded. Subsetting fonts reduces file sizes and improves speed.Critical Images Not Preloaded:
Hero and above-the-fold images are not preloaded, delaying their appearance and affecting perceived load speed. Preloading these critical images can significantly enhance the user’s first impression.
Low priority:
Alt Attributes for Images:
Not all meaningful images have descriptive alt attributes. Ensuring all images have proper descriptions improves accessibility for users relying on screen readers.Effective Contrast and Screen Reader Compatibility:
Adjusting contrast and enhancing compatibility with screen readers will improve the site's accessibility standards.
Conclusion
simpleorganic.com.br has made commendable progress in its web performance, but there’s still room for optimization, particularly in areas like image handling, DOM structure simplification, and third-party script management. By addressing these challenges, the site can significantly enhance user experience, improve Core Web Vitals like LCP and CLS, and boost SEO rankings and conversion rates.
Even without implementing all the suggested optimizations, tools like Navigation AI by Uxify can still dramatically improve website performance. By leveraging the Speculation Rules API and AI, Navigation AI predicts user behavior and prerenders the next page before it's even requested. This technology reduces LCP, CLS, TTFB, and INP, ensuring faster, seamless navigation. With Navigation AI, your site can achieve significant speed improvements and better user engagement without the need for extensive manual updates.
We invite you to submit your websites for future audits or explore solutions like Navigation AI to continuously monitor and optimize performance. Stay tuned for updates on this series and discover actionable tips to take your website performance from good to exceptional!