Hii @Dylan_Jawahir , I have conducted a thorough analysis of your store from a performance perspective by using the Google Page Insights Report ( For the Home Page ) and the Insights Report ( For the Product Page). Both results are below the standards, and you really need to fix that immediately. Below are the strategies you can adopt to fix it -
- Create snippets/critical-css.liquid and paste only the above-the-fold CSS for your most-visited template
<style>
{% render 'critical-css' %}
</style>
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
<link rel="preconnect" href="https://shopifycdn.net" crossorigin>
{%- comment -%} If you still load remote fonts, keep only what you use:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
{%- endcomment -%}
<link rel="preload" href="{{ 'theme.css' | asset_url }}" as="style">
<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="{{ 'theme.css' | asset_url }}"></noscript>
<link rel="preload" href="{{ 'product.css' | asset_url }}" as="style" importance="low">
<link rel="stylesheet" href="{{ 'product.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="{{ 'product.css' | asset_url }}"></noscript>
{%- comment -%} === FONT PRELOADS (self-hosted WOFF2 in assets) === {%- endcomment -%}
<link rel="preload" as="font" type="font/woff2" href="{{ 'YourFont-Regular.woff2' | asset_url }}" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="{{ 'YourFont-Bold.woff2' | asset_url }}" crossorigin>
<style>
@font-face{
font-family:'YourFont';
src:url('{{ "YourFont-Regular.woff2" | asset_url }}') format('woff2');
font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
font-family:'YourFont';
src:url('{{ "YourFont-Bold.woff2" | asset_url }}') format('woff2');
font-weight:700;font-style:normal;font-display:swap;
}
</style>
- Still in layout/theme.liquid, move JS to just before and mark as defer. Replace your current script tags with
<script src="{{ 'theme.js' | asset_url }}" defer></script>
<script src="{{ 'product.js' | asset_url }}" defer></script>
<script src="{{ 'collection.js' | asset_url }}" defer></script>
<script>
/* Example: feature flags or config used by deferred scripts */
window.ShopConfig = { currency: {{ shop.currency | json }} };
</script>
<script>
(function scheduleNonCritical(){
var load = function(){
// Example: lazy-load a third-party widget only after first paint
var s = document.createElement('script');
s.src = 'https://example-cdn.com/widget.js';
s.defer = true;
document.body.appendChild(s);
};
if ('requestIdleCallback' in window) { requestIdleCallback(load, {timeout:2000}); }
else { window.addEventListener('load', load); }
}());
</script>
-
Image Compressing - Your Image delivery also needs to be improved by compressing the image size further. There are online compression tools available in the market that you can use to do the compression.
-
Network dependency tree- Avoid chaining critical requests by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.
Alternatively, if you do not want to invest your precious time in optimizing and want a quicker and reliable solution, I recommend trying the Website Speedy optimization app, which will perform the optimization automatically by handling image delivery, deferring JS, and other important resources. It comes with a 14-day free trial.
(Disclaimer: We are the developers of this app and are eager to serve you in every problem you may face.)
nice but you could put there anything you want. It is not 3rd part review app. And there “read more” link do not work.